介绍：css基本语法、选择器、继承、层叠、优先级及CSS的引用、"CSS5的误解"、CSS的命名规则。

1.CSS基本介绍

CSS(英文全称：Cascading Style Sheets)：层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.CSS与html、javascript的关系

html是网页内容的载体
css样式是表现(外观的控制)
javascript是行为，用来实现网页的特效效果

2.CSS的发展

参考链接：

CSS 二十年发展简史：https://blog.csdn.net/csdnnews/article/details/93806799
http://www.itheima.com/news/20190718/143002.html

1994 年，Håkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。

紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。

1996 年 12 月，W3C 推出了 CSS 规范的第一版本。

1997 年，W3C 颁布 CSS1.0 版本，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。

这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。

1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。

2.1-CSS3各模块的规范发展(截至2019年3月)

来自：https://baike.baidu.com/item/CSS3/4059544?fr=aladdin

时间	名称	最后状态	模块
1999.01.27 - 2018.07.03	文本修饰模块	候选推荐	css-text-decor-3^[4]
1999.06.22 - 2018.10.18	分页媒体模块	工作草案	css-page-3^[5]
1999.06.23 - 2018.05.28	多列布局	工作草案	css-multicol-1^[6]
1999.06.22 - 2018.06.19	颜色模块	推荐	css-color-3^[7]
1999.06.25 - 2014.03.20	命名空间模块	推荐	css-namespaces-3^[8]
1999.08.03 - 2018.11.06	选择器	推荐	selectors-3^[9]
2001.04.04 - 2012.06.19	媒体查询	推荐	css3-mediaqueries^[10]
2001.07.13 - 2018.08.28	级联和继承	候选推荐	css-cascade-3^[11]
2001.07.13 - 2019.01.31	取值和单位模块	候选推荐	css-values-3^[12]
2001.07.26 - 2018.12.18	基本盒子模型	工作草案	css-box-3^[13]
2001.07.31- 2018.09.20	字体模块	推荐	css-fonts-3^[14]
2001.09.24 - 2017.10.17	背景和边框模块	候选推荐	css-backgrounds-3^[15]
2002.08.02 - 2018.06.21	基本用户界面模块	推荐	css-ui-3^[16]
2003.05.14 - 2016.06.02	生成内容模块	工作草案	css-content-3^[17]
2003.08.13 - 2014.02.20	语法模块	候选推荐	css-syntax-3^[18]
2004.02.24 - 2014.10.14	超链接显示模块	工作组笔记	css3-hyperlinks^[19]
2005.12.15 - 2015.03.26	模板布局模块	工作组笔记	css-template-3^[20]
2006.06.12 - 2014.05.13	分页媒体模块生成内容	工作草案	css-gcpm-3^[21]
2008.08.01 - 2014.10.14	Marquee模块	工作组笔记	css3-marquee^[22]
2010.12.02 - 2018.05.24	书写模式	候选推荐	css-writing-modes-3^[23]
2011.09.01 - 2013.04.04	条件规则模块	候选推荐	css3-conditionalr^[24]
2012.02.28 - 2018.12.04	片段模块	候选推荐	css-break-3^[25]
2012.10.09 - 2017.12.14	计数器风格	候选推荐	css-counter-styles-3^[26]

2."CSS5 ?"的误解

特别注意：所谓的"CSS5"并非指CSS-V5版本，因为截至2019.8 CSS3的标准仍在完善，没有最终确定。
实际上"CSS5"的名称是来源一个名叫divcss5的网站(它提供web前端技能学习),而其中的"5"是指"HTML5". 此网站的命名可能还有吸引用户眼球的用意把。

3.基本语法

CSS规则由2部分构成：选择器、声明。

3.1-CSS的引用

引用方式：4种

行内样式
内部(嵌入)样式
链接样式
导入样式

CSS 4种引入方式的比较：

类别	引入方式	位置	加载
行内样式	开始标签内style	html内	同时
内部(嵌入)样式	`<head>`内`<style>`内	html内	同时
链入外部样式	`<head>`内`<link>`引用	css文件与html分离	页面加载时，同时加载CSS样式
导入式@import	在样式代码最开始处	css文件与html分离	读取html文件之后加载，存在浏览器的兼容问题,不建议使用。

行内样式

css在标签的style属性中定义,多个属性之间用";"隔开，属性与属性值之间用":"隔开。最后一个属性后的";"可以省略。

<p style="color:red; font-size:14px;">

内部(嵌入)样式

定义在<style type="text/css"> </style>内，style标签放在<head></head>标签内。

<head>     <title></title>     <style type="text/css">         p{color: red; font-size: 20px;}     </style> </head> <body> <p> 文字 </p> </body>

链入外部样式

把css代码放在一个独立的文件：后缀名为.css

在html文件内<head>内<link>引用:

<head>     <link rel="stylesheet" type="text/css" href="jquery.min.css"/> </head>

导入式@import

<head>内style标签内开头导入,否则无效。

<head>     <title></title>      <style type="text/css">         <!-- 导入方式1 -->         @import "main.css"         <!-- 导入方式2 -->         @import url(head.css)          p{             color: red;         }                <!-- 无效的导入方式 -->         @import url(foot.css)      </style> </head>

4. CSS选择器

一般包含以下6种常用选择器和伪类选择器。

标签选择器
类选择器
id选择器
全局选择器
群组选择器
后代选择器

4.1-标签选择器

有效范围内，所有相同指定标签的样式相同(前提是没有层叠样式的覆盖)。

p{color:red;}

有效范围内p标签颜色均为红色(前提是没有层叠样式的覆盖)。

4.2-类选择器

.font{color:red;...} .post-body{margin:20px;...}

然后在标签的class属性中引用。

<p class="font"></p>

一个标签可引用多个类选择器，中间用空格隔开。

<p class="font post-body"></p>

4.3-id选择器

#head{color:red;...}

引用时指定标签的id属性为id选择器的名称(html文件中id具有唯一性)。

<div id="head"></div>

4.4-全局选择器

指定所有标签的样式。(一般主要用来覆盖所有标签默认的样式)

*{     margin:0px;     padding:0px; }

4.5-群组选择器

群组中每个组员之间用逗号隔开，用于为所有组员设置相同的样式。

.head,p,h1,div,#right{     margin:0px; }

4.6-后代选择器

又称为包含选择器。后代选择器可以选择作为某元素后代的元素(基于html文档层级结构)。

注意：标签1.styleName 表示class属性为styleName的标签，而标签1 styleName表示class属性为styleName的标签为标签1的子元素。

article.head  p{     color: green;     font-size: 40px; }

表示class属性为head的article标签子标签p的样式。

对应的文档结构：

<article class="head">     <p>文字</p> </article>

而非：

<article>     <div class="head">     <p>文字</p>     </div> </article>

这个结构文字的样式定义应为：

article .head  p{     color: green;     font-size: 40px; }

4.x-伪类

伪类选择器定义特殊状态下的样式，无法用标签、id、class及其他属性实现。

链接的4种状态：激活状态，已访问状态、未访问状态、鼠标悬停状态。

伪类	说明
:link	未访问链接
:visited	已访问链接
:hover	鼠标悬停状态，用于访问鼠标经过某个元素时
:active	激活的链接(即按下鼠标之后松开鼠标之前的时间)

伪类hover和伪类active兼容

IE6及更早版本，支持a标签的4种状态。
IE6浏览器不支持其他元素的:hover和:active.

链接伪类的顺序

:link > :visited > :hover > :active.

伪类名称对大小写不敏感。

如果不按照此顺序定义，可能定义的样式无效。

a:link{color: blue;} a:visited{color: orange;} a:hover{color: green;} a:active{color: red;}

5.CSS继承、层叠、优先级

5.1-CSS继承

继承的好处：

从父元素继承部分属性。
减少部分CSS代码。

5.2-CSS层叠

定义多个样式
不冲突时，多个样式层叠为1个
冲突时，按不同样式规则的优先级来采用样式。

5.3-优先级

CSS使用方法优先级：

行内样式 > 内部样式 > 外部样式。

说明：

链入外部样式表与内部样式表之间的优先级取决于所处位置的先后。
最后定义的优先级最高(就近原则)

CSS优先级规则

同一样式表中：

权值相同
就近原则(离被设置元素越近，优先级越高)
权值不同
根据权值来判断CSS样式，那种CSS样式权值高，使用那种样式。

CSS选择器权值

行内样式：权值为1000.
ID选择器: 权值为100.
类选择器和伪类：权值为10.
标签选择器：权值为1.
通配符选择器：权值为0.

权值规则

统计不同选择器的个数。
每类选择器的个数乘以相应的权值
把所有的值相加得出选择器的权值。

eg:

#main div.warning h2{ ... }

id: 1,class: 1,标签：2。
权值为：100 + 10 + 1 * 2 = 112.

6.CSS的命名规则

采用英文字母、数字以及"-" or "_"命名。
以小写字母开头，不能以数字以及"-" or "_"开头。
命名形式：单字、连字符、下划线和驼峰
使用有意义命名。

6.1-常用的CSS样式命名

1.页面结构

页头：header	页面主体：main	页尾：footer	内容：content/container
容器：container	导航：nav	侧栏：sidebar	栏目：column
页面外围控制：wrapper	左右中：left right center

2.导航

主导航：mainnav	子导航：subnav	顶导航：topnav	边导航:sidebar
左导航：leftsidebar	右导航：rightsidebar	菜单:menu	子菜单：submenu
标题:title	摘要：summary