文章目錄
CSS概述
- CSS，（Cascading Style Sheets，層疊樣式表）用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言
CSS創建方式
-
行內樣式表——元素內嵌樣式
- 將網頁鏈接到外部樣式表
-
<p style="color: red;font-size: 30px;">p標籤的樣式</p>
-
內部樣式表——文檔內嵌樣式
- 在網頁上創建嵌入的樣式表
-
<head> <style type="text/css"> p{ color: red; font-size: 30px; } </style> </head> <body> <p>這是一個文檔內嵌樣式(內部樣式)</p> </body>
-
外部樣式表——外部引入樣式
- 將網頁鏈接到外部樣式表
-
<head> <link rel="stylesheet" type="text/css" href="css/style.css"/> </style> <!--解析：href表示.css文件表示路徑；type表示文件的類型是樣式表文件；rel是指在頁面中使用外部的樣式表--> </head> <body> <p>這是一個外部引用樣式</p> </body> -
@charset "utf-8"; p{ color: green; font-size: 30px; }
CSS樣式表層疊和繼承
-
樣式表層疊
- 指的是同一個元素通過不同方式設置樣式表產生的樣式重疊
-
樣式表繼承
- 指的是某一個被嵌套的元素得到它父元素樣式
-
瀏覽器樣式
- 是這個元素在這個瀏覽器運行時默認時附加的樣式
-
<b>這個元素隱含加粗樣式</b> <span style="font-weight:bold;">這個元素通過style加粗</span>
CSS中的選擇器
-
基本選擇器
-
通用選擇器
-
<head> *{ border: 1px solid green; } <!--解析："*"號是通用選擇器，功能匹配所有元素，包括`<html>`和`<body>`標籤--> </head> <body> <p>段落樣式</p> <b>加粗樣式</b> <span>快標籤</span></body>
-
-
元素選擇器
-
<head> p{ color:green; } <!-- 解析：直接使用元素名稱作爲選擇器即可 --> </head> <body> <p>這是一個段落</p> </body>
-
-
ID選擇器
-
<head> #abc{ color: yellow; font-size: 30px; } <!--解析：通過對元素設置全局屬性id，然後使用#id值來選擇頁面唯一元素--> .ls{ color:green; } .mn{ font-size:30px } <!--解析：可以引用多個類--> </head> <body> <p id="abc">這是第一個段落</p> <span class="ls mn">這是第二個段落</span> </body>
-
-
類選擇器
-
<head> .abc{ border:1px solid red; } <!-- 解析：通過對元素設置全局屬性class，然後使用.class值選擇一個或多元素 --> b.abc{ border:1px solid blue; } <!--解析：也可以使用"元素.class值"d的形式，限定某種類型的元素 --> </head> <body> <b class="abc">加粗效果</b> <span class="abc">啥也沒有</span> <span class="abc edf">無</span> <!--解析：類選擇器還可以調用多個樣式，中間用空格隔開進行層疊--> </body>
-
-
-
複合選擇器
-
分組選擇器
-
<head> p,b,i,span{ color:blue; } <!--解析：將多個選擇器通過逗號分隔，同時設置一組樣式。當然，不但可以分組元素選擇器，還可以使用ID選擇器、類選擇器、屬性選擇器混合使用--> </head> <body> <p>段落</p> <b class="abc">加粗效果</b> <i>傾斜</i> <span class="abc">啥也沒有</span> </body>
-
-
後代選擇器
-
<head> p b{ color:red; } <!--解析：選擇<p>元素內部所有<b>元素。不在乎<b>的層次深度。當然，後代選擇器也可以使用ID選擇器、類選擇器、屬性選擇器混合使用--> </head> <body> <p id="pid">第二個p標籤 <span>第一層span標籤 <span>第二層span標籤 <span>第三層span標籤</span><br/> </span><br/> <b>這是一個b標籤</b> <p>這是一個p標籤</p> </span> </p> </body>
-
-
子選擇器
-
<head> ul>li{ color:yellow; } </head> <body> <ul> <li>我是兒子 <ul> <li>我是孫子</li> <li>我是孫子</li> </ul> </li> <li>我是兒子</li> <li>我是兒子</li> </ul> <!-- 子選擇器 --> <!-- 子選擇器與後代選擇器最大的不同就是子選擇器只能選擇父元素向下一級的元素，不可以再往下選擇 --> </body>
-
-
相鄰兄弟選擇器
-
<head> p + b{ color:khaki; } <!-- 相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素 --> </head> <body> <p>第一個p</p> <b>第一個b</b> <b>第二個b</b> <b>第三個b</b> </body>
-
-
普通兄弟選擇器
-
<head> p ~ b{ color:green; } <!-- 普通兄弟選擇器匹配和第一個元素後面的所有元素 --> </head> <body> <p>第一個p</p> <b>第一個b</b> <b>第二個b</b> <b>第三個b</b> </body>
-
-
-
僞選擇器分爲【僞元素選擇器】和【僞類選擇器】，僞元素前置爲兩個冒號(:😃 僞類前置爲一個冒號(😃
-
僞元素選擇器
-
塊級首行
-
<!--style.css--> ::first-line{ color:yellow; } /* 解析：塊級元素的首行文本被選定，若想限定某種元素，可以加上前置 h4::first-line */ <!--index.html--> <body> <h4>1111111111<br/> 2222222222<br/> 3333333333</h4> </body>
-
-
塊級首字母
-
::first-letter{ color:red; } /* 塊級元素的首行首字母 */
-
-
文本插入
-
/* 在文本前插入內容 */ a::before{ content:"點擊-" } /* 在文本後插入內容 */ a::after{ content:"-請進" }
-
-
-
僞類選擇器
-
結構性僞類選擇器
結構性僞類選擇器：能夠根據元素在文檔中的位置選擇元素，這類元素都有一個前綴（:）
-
子元素選擇器
-
<!--style.css--> ul > li:first-child{ color:red; } /* 選擇第一個元素 */ ul > li:last-child{ color:green; } /* 選擇最後一個元素 */ p > span:only-child{ color:yellow; } /* 匹配屬於父子元素中唯一子元素的元素，即span標籤是p標籤的唯一子元素 */
-
-
:nth-chile(n)系列
-
ul >li:nth-child(2){ background:yellow; } /* 解析：選擇子元素的第二個元素 */ ul >li:nth-last-child(2){ background:orange; } /* 解析：選擇子元素的倒數第二個元素 */
-
-
-
UI僞類選擇器
UI僞類選擇器是根據元素的狀態匹配元素
-
:enabled{ border:1px solid red; } /* enabled解析：選擇啓用狀態的元素 */ input:disabled{ border:1px solid purple; } /* disabled解析：選擇禁用狀態的元素 */ input:checked{ display:none; } /* checked解析：選擇勾選的input元素 */ input:required{ border:2px solid purple; } input:optional{ border:2px solid green; } /* 解析：根據是否具有required屬性選擇元素 */
-
-
動態僞類選擇器
動態僞類選擇器根據條件的改變匹配元素
-
a:link{ color:red; } a:visited{ color:green; } /* 解析：link表示未訪問過的超鏈接 visited表示已訪問過的超鏈接 */ a:hover{ color:purple; } /* 解析：hover表示鼠標懸停在超鏈接上的時候 */ a:active{ color:blue; } /* 解析：表示鼠標按下激活超鏈接的時候，css中active必須位於hover之後 */ input:focus{ border:3px solid orange; } /* 表示獲得焦點時 */
-
-
-
CSS中的顏色及度量單位
-
顏色表方案
顏色表及html代碼: http://xh.5156edu.com/page/z1015m9220j18754.html
css顏色表: https://www.w3school.com.cn/tags/html_ref_colornames.asp
Web安全色: https://www.bootcss.com/p/websafecolors/ -
度量單位