h1 { /* h1稱為選擇器 */
color: red;
font-size: 20px;
} /* { 屬性: 值 }: 聲明隅要，聲明語句可以多行弯菊，以“;”分隔 */
注釋：
/* 這是一行單行注釋 */
/*
這個注釋分散
在多個行上面
*/
以上代碼是css的基本結(jié)構(gòu)。
如何引入CSS畜吊？
有三種方法使用CSS泽疆。
行內(nèi)樣式：
<h1 style="color: red;">行內(nèi)樣式</h1>
該方法只能改變當前標簽的樣式，如果想要多個元素都使用同一種樣式玲献，每個元素都要添加一遍殉疼，這樣不僅導(dǎo)致HTML代碼冗長難以閱讀，而且后期維護起來也非常艱難捌年。所以不推薦使用style標簽 內(nèi)嵌方式：
/* 在同一個HTML文件中 */
h1 {
color: red;
}
<h1>內(nèi)嵌方式</h1>
該方法有效解決了第一個行內(nèi)方式的帶來的多元素不能重用同一個樣式的問題瓢娜，但是同時又暴露出了另一個問題：沒有辦法和其他頁面共用，只能本頁面使用礼预。所以當多個頁面需要引入相同的 CSS 代碼時眠砾，這樣寫會導(dǎo)致代碼冗余，也不利于維護托酸。
- link引入 外鏈方式：
<link rel="stylesheet" href="style.css">
這是我們網(wǎng)頁最常見的也是最推薦的引入 CSS 的方式褒颈，具備良好的可維護性柒巫。并且如果多個頁面共用一個 CSS 文件的話，一般只在第一次加載時需要下載谷丸，以后切換頁面時根本不需要加載該文件（瀏覽器一般有緩存）堡掏。
選擇器
- 基礎(chǔ)選擇器
- 元素選擇器，選擇所有的對應(yīng)元素
p {
color: red;
}
body {
background-color: #fff;
}
- ID選擇器淤井，ID是唯一的布疼，取值全局唯一
#green {
color: green;
}
<div id="green">green</div>
- 類選擇器，類選擇器有兩個的特點：重復(fù)使用和組合使用币狠。
重復(fù)使用是指可應(yīng)用于多個元素游两；組合使用是指多個 class 可以組合用于同一個元素。
.fs14 {
font-size: 14px;
}
<div class="fs14">設(shè)置字體14px</div>
- 通用選擇器漩绵，可以應(yīng)用于所有元素
* {
margin: 0;
padding: 0
}
- 選擇器分組
p, div, #green, .fs14 {
background: red;
}
- 關(guān)系選擇器
- 后代選擇器
.block p {
color: green;
}
- 子元素選擇器
.block > p {
color: red;
}
- 后面兄弟選擇器
p ~ div {
width: 100px;
}
- 緊跟其后一個兄弟的選擇器
p + div {
width: 100px;
}
- 偽類選擇器
格式：
選擇器:關(guān)鍵字 {
}
- 鼠標懸浮上
a:hover {
color: blue;
}
- 選擇第一個
li:first-child {
}
- 選擇最后一個
li:last-child {
}
- 選擇第x個
li:nth-child(x) {
}
- 選擇第偶數(shù)個
li:nth-child(even) {}
- 選擇第奇數(shù)個
li:nth-child(odd) {}
- 選擇第2n+1個
li:nth-child(2n+1) {}
- 偽元素選擇器
- 第一個字
::first-letter {
font-size: 30px;
}
- 第一行
::first-line {
color: red;
}
- 內(nèi)容之前插入元素
::before {
width: 10px;
height: 10px;
content: 'before';
}
- 內(nèi)容之后插入元素
::after {
width: 10px;
height: 10px;
content: 'after';
}
