1、简介
层叠样式表（Cascading Style Sheets，CSS）用于为 HTML 元素 指定样式，从而使得内容与表现分离
当一个 HTML 元素被多个 CSS 样式定义时，最终的样式确定顺序如下（优先级从小到大排列）：
- 浏览器缺省设置
- 外部样式表
- 内部样式表
- 内联样式
（1）外部样式表
当样式需要应用于很多页面时，外部样式表是理想的选择
我们可以使用 <link> 标签链接样式表，<link> 标签一般位于 HTML 文档头部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
（2）内部样式表
当单个文件需要特殊的样式时，可以使用内部样式表
我们可以使用 <style> 标签定义样式，<style> 标签一般位于 HTML 文档头部
<head> <style type="text/css"> /* 这里写样式定义 */ </style> </head>
（3）内联样式
当单个元素需要特殊的样式时，可以使用内联样式
我们可以在需要定义内联样式的标签中使用 style 属性指定样式
<p style="color: red;">这是一个段落</p>
2、语法
CSS 语法规则由两部分组成，分别是 选择器 和 声明语句
选择器用于定位需要改变样式的 HTML 元素，声明语句用于指定 HTML 元素需要使用的样式
由于选择器和声明语句的内容较多，所以我们将会使用两篇文章分别讲解
文章传送门：
语法格式如下：
selector { property: value; property: value; ...... }
一个简单的例子（垂直导航栏）如下，这里使用的是内部样式表指定样式：
<!DOCTYPE HTML> <html> <head> <style> ul.linkList { list-style-type: none; margin: 0; padding: 0; } ul.linkList a:link, ul.linkList a:visited { display: block; width: 120px; font-weight: bold; color: #FFFFFF; background-color: #bebebe; text-align: center; text-decoration: none; } ul.linkList a:hover,ul.linkList a:active { background-color:#cc0000; } </style> </head> <body> <ul class="linkList"> <li><a href="https://github.com/forwhfang">Github</a></li> <li><a href="https://blog.csdn.net/wsmrzx">CSDN</a></li> <li><a href="https://www.cnblogs.com/wsmrzx">博客园</a></li> </ul> </body> </html>
