目錄
1、什麼是css?
層疊樣式表 (Cascading Style Sheets，縮寫爲 CSS），是一種 樣式表 語言，CSS（層疊樣式表）用於設置網頁的樣式及佈局——比如，可以更改內容的字體、顏色、大小以及間距，或是將其分列，或是添加動畫及賦予內容其它裝飾性的特徵。
2、基本原理
3、語法示例
（1）樣式化 HTML 元素
用逗號將不同選擇器隔開，即可一次使用多個選擇器。
p, li {
color: green;
}
（2）改變元素的默認行爲
只要一個 HTML 文檔標記正確，即使像我們的例子那麼簡單，瀏覽器都會盡全力將其渲染至可讀狀態。標題默認使用大號粗體；列表旁總有項目符號。這是因爲瀏覽器自帶一個包含默認樣式的樣式表，默認對任何頁面有效。沒有了它們，所有文本會夾雜在一起變得一團糟，我們只得從頭開始規定，好糟糕。話說回來，所有現代瀏覽器的默認樣式都沒什麼差距。
移除瀏覽器的默認樣式：
li {
list-style-type: none;
}
（3）使用類名
目前爲止，我們通過 HTML 元素名規定樣式。想用這種方式樣式化這一片元素，又想用那種方式樣式化那一片元素，可以給 HTML 元素加個類名（class），再選中那個類名，這樣就可以了。把 class 屬性加到表裏面第二個對象：
<ul>
<li>項目一</li>
<li class="special">項目二</li>
<li>項目 <em>三</em></li>
</ul>
**在 CSS 中，要選中這個 special 類，只需在選擇器的開頭加個西文句點（.）。**在你的 CSS 文檔里加上如下代碼：
.special {
color: orange;
font-weight: bold;
}
選中每個 special 類的 li 元素：
li.special {
color: orange;
font-weight: bold;
}
選中每個 special 類的 li 元素，並對 還有其它元素起作用
li.special,
span.special {
color: orange;
font-weight: bold;
}
（4）根據元素在文檔中的位置確定樣式
在我們的文檔中有兩個 元素 ——一個在段落內，另一個在列表項內。僅選擇嵌套在
li em {
color: rebeccapurple;
}
另一些可能想嘗試的事情是在HTML文檔中設置直接出現在標題後面並且與標題具有相同層級的段落樣式，爲此需在兩個選擇器之間添加一個 + 號 (成爲 相鄰選擇符)
h1 + p {
font-size: 200%;
}
（5）根據狀態確定樣式
當我們修改一個鏈接的樣式時我們需要定位（針對） （錨）標籤。取決於是否是未訪問的、訪問過的、被鼠標懸停的、被鍵盤定位的，亦或是正在被點擊當中的狀態，這個標籤有着不同的狀態。你可以使用CSS去定位或者說針對這些不同的狀態進行修飾——下面的CSS代碼使得沒有被訪問的鏈接顏色變爲粉色、訪問過的鏈接變爲綠色。
a:link {
color: pink;
}
a:visited {
color: green;
}
你可以改變鏈接被鼠標懸停的時候的樣式，例如移除下劃線，下面的代碼就實現了這個功能。
a:hover {
text-decoration: none;
}
4、如何與HTMl聯繫
將代碼以文件名： index.html 的形式保存下來。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>開始學習CSS</title>
</head>
<body>
<h1>我是一級標題</h1>
<p>這是一個段落文本. 在文本中有一個 <span>span element</span> 並且還有一個 <a href="http://example.com">鏈接</a>.</p>
<p>這是第二段. 包含了一個 <em>強調</em> 元素.</p>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目 <em>三</em></li>
</ul>
</body>
</html>
讓HTML文檔能夠遵守我們給它的CSS規則。 有三種方式可以實現，而目前我們更傾向於利用最普遍且有用的方式——在文檔的開頭鏈接CSS。
在與之前所說的HTML文檔的相同目錄創建一個文件，保存並命名爲 styles.css 。（看後綴知道此文件就是CSS文件）
爲了把 styles.css 和 index.html 聯結起來，可以在HTML文檔中，語句模塊裏面加上下面的代碼：
h1 {
color: red;
}
保存HTML和CSS文檔，刷新瀏覽器網頁，不出意外你將看到網頁頂層的大標題變成紅色了。如果看到這個現象，我得恭喜你：你已經成功將某些CSS樣式運用到HTML上了。
5 、參考
讓我們開始CSS的學習之旅：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/%E5%BC%80%E5%A7%8B