CSS (Cascading Style Sheets) 用于渲染HTML元素標(biāo)簽的樣式.
什么是CSS
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲(chǔ)在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲(chǔ)在 CSS 文件中
- 多個(gè)樣式定義可層疊為一個(gè)
CSS 可以通過(guò)以下方式添加到HTML中:
1. 內(nèi)聯(lián)樣式- 在HTML元素中使用"style"屬性
<div style="opacity: 0.3;padding: 30px;background-color:#8AC007 "></div>
2.內(nèi)部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style>--元素--來(lái)包含CSS，具體分為以下中使用方式:
- 1.ID 選擇器（ID selector，IS）：使用 # 標(biāo)識(shí)selector，語(yǔ)法格式：#S{...}（S為選擇器名）。例：id為name的標(biāo)簽會(huì)匹配下面的樣式
<style>
#IDName{
color: black;
margin-left: 30px;
font-size: 13px;
}
</style>
<p id="IDName">這個(gè)段落</p>
- 2.類選擇器（class selector，CS）：使用 . 標(biāo)識(shí)selector，語(yǔ)法格式：.S{...}（S為選擇器名）
<style>
/*class選擇器*/
.calssValue{
color: red;
margin-left: 100px;
font-size: 23px;
}
</style>
<p class="calssValue">center text</p>
你也可以指定特定的HTML元素使用class。
在以下實(shí)例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
<style>
p.center
{
text-align:center;
}
</style>
</head>
<h1 class="center">這個(gè)標(biāo)題不受影響</h1>
<p class="center">這個(gè)段落居中對(duì)齊。</p>
PS : .A B{...} 的形式（A是類名，B是標(biāo)簽）。
作用與上面介紹的相同，會(huì)使 class 名為 A 的標(biāo)簽里面所有名為 B 的子代標(biāo)簽的內(nèi)容按照設(shè)定的內(nèi)容顯示
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>內(nèi)容為紅色</span>
<ol>
<li><span>內(nèi)容也是紅色</span></li>
<li><span>內(nèi)容也是紅色</span></li>
</ol></p>
</body>
- 3.元素選擇器（element selector，ES）：又叫標(biāo)簽選擇器，使用標(biāo)簽名作為selector名，語(yǔ)法格式：S{...}（S為選擇器名）。例：所有的p標(biāo)簽都會(huì)匹配以下的樣式
<head>
<style>
h1{font-family: Verdana;font-size: 36px;}
h2{color: blue;font-size: 18px;}
p{margin-left: 50px}
a:link{color: green}
a:visited{color: blue}
a:hover{color: chocolate}
a:active{color: aquamarine}
</style>
</head>
- 4.包含選擇器（package selector，PS）：指定目標(biāo)選擇器必須處在某個(gè)選擇器對(duì)應(yīng)的元素內(nèi)部，語(yǔ)法格式：A B{...}（A、B為HTML元素/標(biāo)簽，表示對(duì)處于A中的B標(biāo)簽有效）。例：以下div內(nèi)的p標(biāo)簽和div外的p標(biāo)簽分別匹配不同的樣式
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是紅色的-->
<div>
<p>yellow text</p><!--文字是黃色的-->
</div>
- 子選擇器（sub-selector，SS）：指定目標(biāo)選擇器必須處在某個(gè)選擇器對(duì)應(yīng)的元素內(nèi)部，兩者區(qū)別在于PS允許"子標(biāo)簽"甚至"孫子標(biāo)簽"及嵌套更深的標(biāo)簽匹配相應(yīng)的樣式，而SS強(qiáng)制指定目標(biāo)選擇器作為 包含選擇器對(duì)應(yīng)的標(biāo)簽 內(nèi)部的標(biāo)簽，語(yǔ)法格式：A>B{...}（A、B為HTML元素/標(biāo)簽）。例：以下div內(nèi)的p標(biāo)簽匹配樣式，div內(nèi)的table內(nèi)的p不匹配
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是紅色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非紅色的-->
</td>
</tr>
</table>
</div>
- 6.兄弟選擇器（brother selector，BS）：BS是CSS3.0新增的一個(gè)選擇器，語(yǔ)法格式：A~B{...}（A、B為HTML元素/標(biāo)簽，表示A標(biāo)簽匹配selector的A，B標(biāo)簽匹配selector的B時(shí)，B標(biāo)簽匹配樣式）
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非紅色的-->
<div>no red text</div>
<p>red text</p><!--文字是紅色的-->
</div>
3. 外部引用 - 使用外部 CSS文件
當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過(guò)改變一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀。每個(gè)頁(yè)面使用 <link> 標(biāo)簽鏈接到樣式表。 <link> 標(biāo)簽在（文檔的）頭部：
<head>
<meta charset="UTF-8">
<title>CSS實(shí)例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。里邊的具體語(yǔ)法格式跟內(nèi)部樣式表相同。
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過(guò)來(lái)。
.CSS中
h2{color: blue;font-size: 18px;background-color: burlywood}
內(nèi)鏈中
<style>
h2{background-color: lawngreen}
</style>
一般情況下，優(yōu)先級(jí)如下：
內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認(rèn)樣式
注意：如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。
<head>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設(shè)置：h3{color:blue;} -->
<style type="text/css">
/* 內(nèi)部樣式 */
h3{color:green;}
</style>
</head>
<body>
<h3>測(cè)試！</h3>
</body>
