css樣式選擇器學習筆記

mpsky發表於2021-09-09

選擇器
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/

footer .note p{color:yellow;} /權值為100+10+1=111/

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

元素分類
常用的塊狀元素有:

...

    、、

    常用的內聯塊狀元素有:
    css樣式選擇器學習筆記
    內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,程式碼display:inline-block就是將元素設定為內聯塊狀元素。(css2.1新增),css樣式選擇器學習筆記標籤就是這種內聯塊狀標籤。

    inline-block 元素特點:

    1、和其他元素都在一行上;

    2、元素的高度、寬度、行高以及頂和底邊距都可設定。

    將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。a{display:block;}
    將塊狀元素div轉換為內聯元素,從而使 div 元素具有內聯元素特點。
    div{display:inline;}

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/1806/viewspace-2807582/,如需轉載,請註明出處,否則將追究法律責任。

相關文章