简单介绍
可以说一个网页的1/4是html，3/4是CSS。（先不提js）
html文件body中随便写点东西：
<h1>
现在开始添加CSS样式
</h1>在html文件的head中插入<style>元素，内容如下：
<style>
h1{
color: red;
background-color: lightblue;
text-align: center;
}
</style>则网页中可以看到，h1的内容红色，背景为浅蓝色，居中显示：
术语解释：
整个h1{ }的内容叫做一条CSS规则。CSS规则 = 选择器 + 声明块
选择器用来选中元素，设置样式适用的范围。比如这里写着h1就选中了h1元素，被选中的元素会被渲染为声明块声明的样式。
声明块出现在大括号中，包含CSS样式声明，也可以叫做属性。每一个属性表达某一方面的样式。 学习HTML时主要是学一个个元素，那么学CSS的时候就是学声明块里的一个个属性（样式规则）。
选择器
选择器的写法有很多，这里介绍3种最基本的：元素选择器、id选择器、类选择器
元素选择器
写什么元素就设置为什么元素的名字，上面的h1就是元素选择器。会选中所有的同名元素。
比如我们再加上
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p><style>
p{
color: blue;
}
</style>得到：
id选择器
在上述代码中再加上：
<style>
#test {
color: gold;
}
</style><p id="test">
id选择器示例
</p>得到：
id是独一无二的，所以id选择器只能选中一个。通常js用的多。
类选择器
元素选择器范围太广，id选择器范围又太小，所以“中庸之道”类选择器被应用得最多。
在上述代码中再加上：
<style>
.xxx{
color:hotpink;
}
</style><h2 class="xxx">
类选择器示例
</h2>
<p class="xxx">
类选择器示例
</p>得到：
一个元素可以同时被划分到多个类中，所以也就可以同时应用多个CSS规则，如
<style>
.big-center{
font-size: 2em;
text-align: center;
}
</style>2em表示将字符放大到标准字体的2倍。
插曲小tip：
两种常用的命名方式:
①驼峰命名法，如bigCenter
②短横线命名法，如big-center
这里采用了短横线命名法。
<h2 class="xxx big-center">
类选择器示例
</h2>
<p class="xxx big-center">
类选择器示例
</p>得到：
CSS代码书写位置
分3种情况：
1) 内部样式表
就是写在html文档里。一般放在<style>里面。也不是一定要写在<style>里面，放在<body>里也是允许的。但是我们希望浏览器加载网页时最先把CSS样式加载好。不然的话浏览器如果先加载的是body内容后加载style内容，一开始页面会显示得很丑，然后等样式加载上去了会闪烁一下，很烦。 当然如果是在本地，或网速非常快，那<style>在哪都无所谓。
2) 内联样式表/元素样式表
把style直接写到想渲染的元素里，这个时候就不需要什么选择器了，毕竟已经直接定位了。我在写博客时就经常用这个技巧把某些字句渲染为红色。
<span style="color:red;">插曲小tip</span>： 
3) 外部样式表
将样式书写到独立的CSS文件中，这是开发一个网站最常用的方式。
我的网站文件目录：
在<head>中加入：
<link rel="stylesheet" href="/css/index.css">注意link是个空元素，以后还会介绍它的其他用法。
<link>也不是必须写在head里面，但还是推荐写在head里面，理由和内部样式表一样。
<body>中正常写：
<div class="big-blueviolet-center">
外部样式表测试
</div>效果：
实际开发中还是推荐使用外部样式表，原因：
- 外部样式表可以解决多页面样式重复的问题，提高效率。
- 有利于浏览器缓存，提高页面响应速度。
- 代码分离，html代码和css代码分开，更容易阅读和维护。维护代码时肯定是越简洁越好，所以代码分离的作用是很大的。