css樣式選擇器學習筆記
選擇器
ID選擇器 #id
類選擇器 .class
標籤選擇器 span
通用選擇器 #{}
偽類選擇符 a:link a:visited
a:hover a:active
分組選擇符 h1,span
注意!
1.ID選擇器只能在文件中使用一次。與類選擇器不同,在一個HTML文件中,ID選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。
2.可以使用類選擇器詞列表方法為一個元素同時設定多個樣式。
3.子選擇器(child selector)僅是指它的直接後代,或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器透過空格來進行選擇,而子選擇器是透過“>”進行選擇
4.繼承
某些樣式可繼承color
不可繼承border:1px solid red
5.權值
CSS權值標籤的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。例如下面的程式碼:
p{color:red;} /權值為1/
p span{color:green;} /權值為1+1=2/
.warning{color:white;} /權值為10/
p span.warning{color:purple;} /權值為1+1+10=12/
p{color:red!important;} 最高權值 注意:!important要寫在分號的前面
6.層疊
層疊就是在html檔案中對於同一個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前後順序來決定,處於最後面的css樣式會被應用。
內聯樣式表(標籤內部)> 嵌入樣式表(當前檔案中)> 外部樣式表(外部檔案中)
7.body{font-family:"Microsoft Yahei";} 英文,M和Y一定要大寫才能顯示出來
因為這種字型即美觀又可以在客戶端安全的顯示出來(使用者本地一般都是預設安裝的)
8.字型
font-family:設定字型;
font-size:字型大小;
{font-style:italic;}斜體
{text-decoration:underline;}設定字型樣式_下劃線
{text-decoration:line-through;}_刪除線
p{text-indent:2em;}首行縮排2em
p{line-height:2em;}行高 2em
{letter-spacing:10px}文字間隔 或字母間隔
word-spacing單詞間距設定
{text-align:center;}文字、圖片設定居中樣式
font-weight:bold:設定為粗體樣式;
font-weight:normal 預設值
bold 定義粗體字元
bolder 定義更粗的字元
lighter 定義更細的字元
100-0=900 定義由粗到細的字元。400 等同於 normal,而 700 等同於 bold
元素分類
常用的塊狀元素有:
、
...、、
、、、 常用的內聯塊狀元素有:
、
內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,程式碼display:inline-block就是將元素設定為內聯塊狀元素。(css2.1新增),、標籤就是這種內聯塊狀標籤。
inline-block 元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。a{display:block;}
將塊狀元素div轉換為內聯元素,從而使 div 元素具有內聯元素特點。
div{display:inline;}
- 、
- 、
- 、
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/1806/viewspace-2807582/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS學習筆記之字型樣式CSS筆記
- css樣式常用的樣式以及選擇器CSS
- css樣式設定技巧學習筆記CSS筆記
- 重學前端筆記21-css選擇器前端筆記CSS
- CSS筆記——屬性選擇器CSS筆記
- 博學谷 - CSS筆記05 - CSS 的複合選擇器CSS筆記
- css 選擇器及權重筆記CSS筆記
- CSS 小結筆記之選擇器CSS筆記
- 重學前端筆記22-css 選擇器機制前端筆記CSS
- 4月10日學習筆記——jQuery選擇器筆記jQuery
- 機器學習-學習筆記(二) --> 模型評估與選擇機器學習筆記模型
- 引入CSS樣式 筆記CSS筆記
- 機器學習筆記——模型選擇與正則化機器學習筆記模型
- 關於css選擇器和樣式表的應用CSS
- CSS學習(二)選擇符CSS
- 好程式設計師web前端培訓分享HTMLCSS學習筆記css3選擇器程式設計師Web前端HTMLCSS筆記S3
- CSS 學習筆記CSS筆記
- 基礎排序(冒泡、選擇、插入)學習筆記排序筆記
- CSS選擇器CSS
- css學習筆記(一)CSS筆記
- jQuery基礎——樣式篇 (選擇器)jQuery
- 好程式設計師web前端CSS選擇符(選擇器):表示要定義樣式的物件程式設計師Web前端CSS物件
- 周志華西瓜書《機器學習筆記》學習筆記第二章《模型的評估與選擇》機器學習筆記模型
- 機器學習演算法筆記之7:模型評估與選擇機器學習演算法筆記模型
- CSS選擇器(一)CSS
- CSS常用選擇器CSS
- CSS 元素選擇器CSS
- CSS :valid 選擇器CSS
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS
- css選擇器概述CSS
- CSS id選擇器CSS
- CSS概念、選擇器無敵記憶大法CSS
- 學習《HTML+CSS基礎課程》的筆記---第十五篇:CSS樣式設計小HTMLCSS筆記
- 資料結構學習筆記-簡單選擇排序資料結構筆記排序
- div+css學習筆記CSS筆記
- HTML&CSS學習筆記HTMLCSS筆記
- CSS 基礎學習筆記CSS筆記