CSS 是Cascading Style Sheet的縮寫，翻譯為：『層疊樣式表』 或 『級聯樣式表』。CSS 定義如何顯示HTML的標籤樣式，用於設計網頁的外觀效果。通過使用CSS實現頁面的內容與表現形式分離，極大的提高了工作的效率
CSS語法CSS是一門基於規則的語言
h1 {
color: yellow;
font-size: 3em;
}
語法由選擇器起頭，選擇HTML元素，這裡對h1標題添加央視大括號中定義屬性和值，叫做聲明。
冒號之前的是屬性，後面的是值。一個CSS樣式中可以包含多個規則
CSS是很多模塊構成的
CSS規範所有的標準Web技術都被定義在一個巨大的文檔中，稱作 規範specifications (或者簡稱為 "specs")，CSS也不例外
簡單的應用一下先來做一個簡單的HTML頁面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<h1>TITLE DEMO</h1>
<p>基金是小白理財最好的投資方式 <span>基金</span>
伊洛的個人網站 <a href="https://yiluotalk.com/">點擊前往</a>.</p>
<p>購買指數基金比購買個股風險會小很多 <em>風險</em> 降低風險</p>
<ul>
<li>個股</li>
<li>基金</li>
<li>寬指 <em>基金</em></li>
</ul>
</body>
</html>
打開網頁
現在用CSS美化一下網頁
讓HTML文檔能夠遵守我們給它的CSS規則，在文檔的開頭連結CSS,在head裡面添加連結到CSS文件
在CSS文件中編寫內容,讓上面的標題顯示紫色
h1 {
color: purple;
}
打開瀏覽器查看效果
樣式化一個文檔中所有的段落，使用選擇器p,用逗號可以將不同選擇器隔開
h1 {
color: purple;
}
p, li {
color: cornflowerblue;
}
打開瀏覽器
忽略瀏覽器默認的樣式
h1 {
color: purple;
}
p, li{
color: cornflowerblue;
}
li{
list-style-type: none;
}
打開瀏覽器
可見列表前面的默認樣式已經沒有了
加入類名的特性
公號：伊洛的小屋
個人主頁：https://yiluotalk.com/
博客園：https://www.cnblogs.com/yiluotalk/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>CSS</title>
</head>
<body>
<h1>TITLE DEMO</h1>
<p>基金是小白理財最好的投資方式 <span>基金</span>
伊洛的個人網站 <a href="https://yiluotalk.com/">點擊前往</a>.</p>
<p>購買指數基金比購買個股風險會小很多 <em>風險</em> 降低風險</p>
<ul>
<li>個股</li>
<li class="special">基金</li>
<li>寬指 <em>基金</em></li>
</ul>
</body>
</html>
打開瀏覽器
基金的顏色單獨發生了變化
根據狀態確定樣式取決於是否是未訪問的、訪問過的、被滑鼠懸停的、被鍵盤定位的
沒有被訪問的連結顏色變為粉色、訪問過的連結變為綠色及滑鼠懸停的時候的樣式
h1 {
color: purple;
}
p, li{
color: cornflowerblue;
}
li.special {
color: orange;
font-weight: bold;
}
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}