CSS中文名稱是級聯樣式表，它的功能是改變HTML元素的外觀，比如顏色，尺寸，位置，字體字號等。
CSS的基本規則格式如下：
在CSS規則中首先要選中待改變外觀的HTML元素,這里我們選中了網頁中所有h1元素。
CSS提供了很多不同的選中元素的方法，這些方法統稱為選擇器(selector)。在上面的例子中直接使用元素名來選中元素，這種選擇器叫作元素名選擇器。
選擇器后面是對元素外觀屬性值做的改變，這些改變都要寫在花括號里。
像上面的例子我們把color屬性值設為blue,我們把字號（font-size）屬性值設為12px(12個像素)。
注意不同屬性值之間要用分號間隔。
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
上面的代碼中通過<style>標簽來加入CSS規則（注意：所有CSS規則必須寫在<style>標簽里面）。
CSS規則中把所有<p>元素的顏色（color）設為紅色，把所有<p>元素里面的對齊屬性（text-align）設為居中對齊。
在CSS中如果一次想選中多個不同的元素，可以在各個元素名選擇器間加上逗號來間隔，例子如下，同時把<h1>,<h2>和<p>這三個元素選中后改變它們的顏色和對齊方式。
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
有的時候我們並不想把網頁中所有的<p>元素都居中對齊並變成紅色，而是想把某個<p>元素變成居中對齊並標紅，這時我們就要
用到ID選擇器，即通過在元素的id值前面加一個#號，例子如下：
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
在上面的例子中，我們給第一個<p>元素的id屬性設置為"para1"，在使用ID選擇器選中該<p>元素時只需要在"para1"前加上一個"#"號即可。
需要注意的的是：和人的身份證號一樣，網頁中每個元素的id都不能相同，那么如果網頁中有4個<p>元素，
我們想選中第一個和第四個，不想選第二個和第三個該怎么做呢。當然，可以給第一個和第四個各自設置一個id，然后用id選擇器來選中它們。
一個更簡單的辦法是使用類選擇器，例子如下，我們把第一個和第四個<p>元素的class屬性值都設為"center", 然后我們在<style>里面通過將center前面加一個點"."來選中這兩個<p>元素。
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="center">Red and center-aligned heading</p>
<p >Red and center-aligned heading</p>
<p >Red and center-aligned heading</p>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
我們已經學過了三個選擇器，即元素名選擇器，id選擇器和類選擇器。這三個選擇器可以級聯起來使用，這也是css被叫作級聯樣式表的原因之一。
例子如下，雖然<h1>和<p>元素的class屬性都是"center"，但我們在.center這個類選擇器前面加上了一個p，這說明我們只想選中元素名是<p>且class值為center的元素。
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
