## CSS 是WEB頁面的美容師
層疊樣式表 — 也就是CSS，用于設計風格和布局。比如，我們可以使用CSS來更改內容的字體、顏色、大小、間距，將內容分為多列，或者添加動畫及其他的裝飾效果。
## 入門示例
還是以chapter01中的hello.html為例
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
```
用瀏覽器打開這個hello.html后，顯示如下
如果我們想讓“世界！” 這兩個字的字體變大，變紅，并且整行居中，我們該如何處理呢？ 很簡單，添加css樣式！
**方式一：直接在標簽中，添加style屬性**
修改body中的`<h1>你好，世界！</h1>`如下
```html
<h1 style="text-align: center">你好，<span style="color: red;font-size: 50px">世界！</span></h1>
```
重新用瀏覽器訪問這個hello.html后，顯示如下
**方式二：在html頁面中，添加style樣式**
首先給需要調整樣式的元素，添加class或id
```html
<h1 class="head_title">你好，<span id="world">世界！</span></h1>
```
然后在html中，添加style樣式，一般我們會在head中添加，如下
```html
<style>
.head_title{
text-align: center
}
#world{
color: red;
font-size: 50px
}
</style>
```
重新用瀏覽器訪問這個hello.html后，顯示如
**方式三：在css文件中添加style樣式**
首先同方式二，給需要調整樣式的元素，添加class或id
```html
<h1 class="head_title">你好，<span id="world">世界！</span></h1>
```
然后在css文件中添加style樣式，如hello.css
```css
.head_title{
text-align: center
}
#world{
color: red;
font-size: 50px
}
```
然后在html中，引入hello.css，我們一般也是在head中引入
```html
<link href="hello.css" rel="stylesheet">
```
重新用瀏覽器訪問這個hello.html后，顯示如
## 那些必須了解的CSS知識
推薦一個學習網站，請務必要認真學習并且掌握。
[https://developer.mozilla.org/zh-CN/docs/Learn/CSS](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)
