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筆記
- css樣式常用的樣式以及選擇器CSS
- 重學前端筆記21-css選擇器前端筆記CSS
- css樣式設定技巧學習筆記CSS筆記
- CSS筆記——屬性選擇器CSS筆記
- CSS樣式中的後代選擇器和子代選擇器CSS
- CSS樣式中的通用選擇器和偽類選擇器CSS
- 博學谷 - CSS筆記05 - CSS 的複合選擇器CSS筆記
- css 選擇器及權重筆記CSS筆記
- CSS 小結筆記之選擇器CSS筆記
- 筆記-10.2、HTML-CSS選擇器筆記筆記HTMLCSS
- 重學前端筆記22-css 選擇器機制前端筆記CSS
- angular學習筆記(九)-css類和樣式2Angular筆記CSS
- angular學習筆記(九)-css類和樣式1Angular筆記CSS
- angular學習筆記(九)-css類和樣式3Angular筆記CSS
- CSS3學習----選擇器、字型CSSS3
- 4月10日學習筆記——jQuery選擇器筆記jQuery
- 【CSS】【4】CSS選擇器練習CSS
- 【JavaScript學習筆記】滑鼠樣式JavaScript筆記
- 引入CSS樣式 筆記CSS筆記
- 關於css選擇器和樣式表的應用CSS
- 圖解CSS3 讀書筆記——選擇器圖解CSSS3筆記
- CSS學習(二)選擇符CSS
- 好程式設計師web前端培訓分享HTMLCSS學習筆記css3選擇器程式設計師Web前端HTMLCSS筆記S3
- jQuery基礎樣式——選擇器jQuery
- 基礎排序(冒泡、選擇、插入)學習筆記排序筆記
- CSS 學習筆記CSS筆記
- CSS 選擇器CSS
- CSS選擇器CSS
- CSS設計指南(第三版)學習筆記 - 選擇符彙總CSS筆記
- Object C學習筆記17-動態判斷和選擇器Object筆記
- jQuery基礎——樣式篇 (選擇器)jQuery
- CSS選擇器筆記,element element和element > element 的區別CSS筆記
- 【CSS】【3】CSS選擇器CSS
- CSS系列:CSS選擇器CSS
- CSS選擇器(5)——屬性選擇器CSS