CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式.
什么是CSS
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內容與表現(xiàn)分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一個
CSS 可以通過以下方式添加到HTML中:
1. 內聯(lián)樣式- 在HTML元素中使用"style"屬性
<div style="opacity: 0.3;padding: 30px;background-color:#8AC007 "></div>
2.內部樣式表 -在HTML文檔頭部 <head> 區(qū)域使用<style>--元素--來包含CSS，具體分為以下中使用方式:
- 1.ID 選擇器（ID selector朴恳，IS）：使用 # 標識selector最岗，語法格式：#S{...}（S為選擇器名）糊昙。例：id為name的標簽會匹配下面的樣式
<style>
#IDName{
color: black;
margin-left: 30px;
font-size: 13px;
}
</style>
<p id="IDName">這個段落</p>
- 2.類選擇器（class selector僻造，CS）：使用 . 標識selector包雀，語法格式：.S{...}（S為選擇器名）
<style>
/*class選擇器*/
.calssValue{
color: red;
margin-left: 100px;
font-size: 23px;
}
</style>
<p class="calssValue">center text</p>
你也可以指定特定的HTML元素使用class宿崭。
在以下實例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
<style>
p.center
{
text-align:center;
}
</style>
</head>
<h1 class="center">這個標題不受影響</h1>
<p class="center">這個段落居中對齊。</p>
PS : .A B{...} 的形式（A是類名才写，B是標簽）葡兑。
作用與上面介紹的相同，會使 class 名為 A 的標簽里面所有名為 B 的子代標簽的內容按照設定的內容顯示
<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>內容為紅色</span>
<ol>
<li><span>內容也是紅色</span></li>
<li><span>內容也是紅色</span></li>
</ol></p>
</body>
- 3.元素選擇器（element selector赞草，ES）：又叫標簽選擇器讹堤，使用標簽名作為selector名，語法格式：S{...}（S為選擇器名）厨疙。例：所有的p標簽都會匹配以下的樣式
<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）：指定目標選擇器必須處在某個選擇器對應的元素內部，語法格式：A B{...}（A轰异、B為HTML元素/標簽岖沛，表示對處于A中的B標簽有效）暑始。例：以下div內的p標簽和div外的p標簽分別匹配不同的樣式
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是紅色的-->
<div>
<p>yellow text</p><!--文字是黃色的-->
</div>
- 子選擇器（sub-selector搭独，SS）：指定目標選擇器必須處在某個選擇器對應的元素內部，兩者區(qū)別在于PS允許"子標簽"甚至"孫子標簽"及嵌套更深的標簽匹配相應的樣式廊镜，而SS強制指定目標選擇器作為 包含選擇器對應的標簽 內部的標簽牙肝，語法格式：A>B{...}（A、B為HTML元素/標簽）。例：以下div內的p標簽匹配樣式配椭，div內的table內的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新增的一個選擇器，語法格式：A~B{...}（A股缸、B為HTML元素/標簽衡楞，表示A標簽匹配selector的A，B標簽匹配selector的B時敦姻，B標簽匹配樣式）
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非紅色的-->
<div>no red text</div>
<p>red text</p><!--文字是紅色的-->
</div>
3. 外部引用 - 使用外部 CSS文件
當樣式需要應用于很多頁面時瘾境，外部樣式表將是理想的選擇。在使用外部樣式表的情況下镰惦，你可以通過改變一個文件來改變整個站點的外觀迷守。每個頁面使用 <link> 標簽鏈接到樣式表。 <link> 標簽在（文檔的）頭部：
<head>
<meta charset="UTF-8">
<title>CSS實例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
樣式表應該以 .css 擴展名進行保存旺入。里邊的具體語法格式跟內部樣式表相同兑凿。
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來茵瘾。
.CSS中
h2{color: blue;font-size: 18px;background-color: burlywood}
內鏈中
<style>
h2{background-color: lawngreen}
</style>
一般情況下礼华，優(yōu)先級如下：
內聯(lián)樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
注意：如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式拗秘。
<head>
<!-- 外部樣式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 設置：h3{color:blue;} -->
<style type="text/css">
/* 內部樣式 */
h3{color:green;}
</style>
</head>
<body>
<h3>測試卓嫂！</h3>
</body>
