## 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)
