阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端教程之CSS（层叠样式表），它一般被用来对网页的样式进行设置（如页面布局、颜色、字体等），可以说一个网页是否美观协调很大程度取决于CSS样式的设计。下面我们就一起来学习下吧！
01 CSS简介（1）概述
CSS 表示层叠样式表，定义如何渲染 html 标签，设计网页显示效果，它由 W3C 定义和维护。
（2）语法
CSS的语法主要由两部分构成，分别为选择器与样式规则，样式规则也是由两部分构成分别为属性名称与属性值。具体如下所示：
CSS也有两种注释方式，一种是单行注释一种为多行注释，具体如下
1. /*我是单行注释，为当前HTML页面的div模块设置样式*/
2. div{
3. color:red;
4. font-size:10px;
5. }
6.
7. /*我是多行注释，注释内容如下
8. p{
9. background-color:#46a6ff;
10. }
11. */02 CSS标签应用
将CSS的样式应用到指定标签上主要有三种方式：
1）行内式
行内式就是将样式设置直接写在标签的属性处，该方法在这三种方式中优先级最高，编写方便，但不能复用，在实际开发过程中一般不推荐该方法。行内式的编写具体如下所示
1. <!--行内式的样式编写-->
2. <divstyle="color:red;font-size:larger">成哥的CSS教程</div>
2）head标签中应用
该方式就是将CSS写在head标签中的style标签内，该方法可以复用于当前HTML中所有的标签，其优先级在三种方式中排第二仅次于行内式，在实际开发过程中比较推荐该编写方法。head中使用具体示列如下
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <style>
5. div{
6. color:red;
7. font-size:10px;
8. }
9.
10. p{
11. background-color:#46a6ff;
12. }
13. </style>
14. </head>
15. <body>
16. <div>成哥前端教程系列</div>
17. <p>CSS教程</p>
18. </body>
19. </html>
3）CSS文件定义
该方法将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。该方法可以复用在多个HTML页面中，其优先级也是三种方式的最低的，在实际开发过程中比较推荐该方法。其具体示列如下：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <!--link中的href用于指定css文件的路径-->
5. <linkrel="stylesheet"href="css_test.css">
6. </head>
7. <body>
8. <div>成哥前端教程系列</div>
9. <p>CSS教程</p>
10. </body>
11. </html>03 CSS选择器
CSS的基础选择器具体如下表所示
