初學CSS所以就以博客的形式記錄下來，權當是個記事本了。
1.CSS語法
CSS規則由倆個主要部分構成：選擇器，以及一條或多條聲明
selector {declaration1;declaration2;… declarationN}
其中選擇器通常是你需要改變的HTML元素，例如”p”或”h1”這些
每條聲明由一個屬性和一個值組成
其中屬性(property)是希望您設置的樣式屬性。每個屬性都有一個值。屬性和值被冒號分開
selector {property: value}
具體實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1 {color: red}
p {color: green}
</style>
</head>
<body>
<h1>
我是red
</h1>
<p>
我是green
</p>
</body>
</html>2.CSS高級用法
(1)選擇器的分組
我們可以對選擇器進行分組，這樣被分組的選擇器就可以分享相同的聲明瞭。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素分組，所有標題元素都是紅色
h1,h2,h3,h4,h5,h6{
color: red
}
具體實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {color: red;text-align: center}
</style>
</head>
<body>
<h1>
標題1
</h1>
<h2>
標題2
</h2>
<h3>
標題3
</h3>
</body>
</html>
(2)派生選擇器
派生選擇器允許我們根據文檔的上下文來確定某個標籤的樣式。通過合理的使用派生選擇器，我們可以使HTML頁面變的更加整潔
假設我們希望鏈表中的strong元素變爲紅色
樣式如下
li strong {
color: red
}
實例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li strong {color: red}
</style>
</head>
<body>
<ul>
<li><strong>我是紅色</strong></li>
<li>我是正常</li>
</ul>
</body>
</html>(3)id選擇器
id選擇器可以爲標有特定id的HTML元素指定特定的樣式
id選擇器以#來定義
下面的倆個id選擇器，第一個可以定義元素顏色爲紅色，第二個定義元素爲綠色
/#red {color: red;}
/#green {color: green}
makedown打不出’#’所以我在前面加了個’/’
具體實例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#red {color: red}
#green {color: green}
</style>
</head>
<body>
<p id="red">我是紅色</p>
<p id="green">我是綠色</p>
</body>
</html>
(4)id選擇器和派生器
現代佈局中，id選擇器常常用於建立派生選擇器
sidebar p {
color: red
}
上面的樣式只會應用於出現在id是sidebar的元素內的段落
具體實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#red p{color: red}
</style>
</head>
<body>
<p id="red">我是紅色麼？</p>
<h1 id="red">我是什麼顏色</h1>
<h1 id="red"><p>我是紅色</p></p>
</body>
</html>(5)類選擇器
在CSS中，類選擇器以一個點號顯示:
.center {text-align: center}
在上面例子中，所有擁有center類的HTML元素都爲居中
具體實例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {color: red}
</style>
</head>
<body>
<h1 class="red">我是紅色</h1>
</body>
</html>
和id一樣class也可被用作派生選擇器
(6)外部樣式表
實例如下
mystyle.css
h1 {color: red}style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<h1>我是紅色</h1>
</body>
</html>