1、CSS概述
1.1. 什么是CSS
CSS是Cascading（ /kæˈskeɪdɪŋ/） Style Sheets的简写，即层叠样式表，简称样式表。
1.2 CSS的出现是为了解决什么问题？
1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制，因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
所以，CSS的出现是为了**解决html网页的排版和格式**的。
1.3 CSS的发展时间轴
1994年， 哈肯·维姆·莱（Hkon Wium Lie） 第一次提出CSS的建议。
1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。
这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。
1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。
CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。
2011年4月12日 ，发布了修正后的CSS2.1规范。CSS2.1修改了CSS2中的一些错误，删除了其中不被支持的内容和增加了一些已有的浏览器的扩展内容 。
CSS2.1版本是使用时间很长的一个版本，影响深远。
在2016年发布了修正版CSS2.2。
从2011年开始CSS被分为多个模块单独升级，统称为CSS3。
所以CSS3没有统一的规范标准，只有某个模块的等级。
这些模块有：
CSS选择器level3
CSS媒体查询level3
CSScolor level3
从这个时间轴可以看出，1997年HTML 4的规范出来后，1998年CSS2的规范推出，这两个版本促成了web2.0时代的到来。2000年的XHTML1.0修订版本，2011年的CSS2.1修订版本，都是使用了很长时间的规范版本。国内在2004年开始出现网站重构的呼声。
所以web2.0的学习主要是XHTML1.0（HTML4.01和XML）和CSS2.1的版本。
1.4 CSS的主要作用
- 遵循W3C标准，符合WEB2.0标准。
- 减少重复格式化，减少网页体积，加快下载和访问速度。
- 符合内容与表现形式分离的原则，方便于搜索引擎抓取到有用的内容。
- 便于更新和维护，成千上万的网页只需要修改CSS便可以更改显示外观。
- 浏览器干扰相对较小，实现一些HTML格式化不能实现的高级功能。
2、CSS的规范
2.1 语法规范
CSS
选择器{
属性:属性值;
...
}
2.2 命名规范
- 因为选择器除了标签选择器外，其它选择器都是自定义的名称，所以必须有一定的规范。
- 只能以字母开头，字母都是小写，可以包含数字和中划线，最好不要用下划线。
- 中划线
中划线可以用来表示层级关系
<div class="box"> <ul class="box-list"> <li class="box-list-item"></li> <li class="box-list-item"></li> <li class="box-list-item"></li> </ul> </div>
- 当层级嵌套过深时
当子孙模块超过4级或以上的时候，考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块。
<div class="modulename"> <div class="modulename_cover"></div> <div class="modulename_info"> <div class="modulename_info_user"> <div class="modulename_info_user_img"> <img src="" alt=""> <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写--> <div class="miui_tit"></div> <div class="miui_txt"></div> ... </div> </div> <div class="modulename_info_list"></div> </div> </div>
- 命名必须要有语义化、使用通用的名称，最好用英文而不是拼音，不要简写。
- 布局(.g-)
| 语义 | 命名 | 简写 |
| 文档 | doc | doc |
| 头部 | header | hd |
| 主体 | body | bd |
| 尾部 | footer | ft |
| 主栏 | main | mn |
| 主栏子容器 | mainc | mnc |
| 侧栏 | aside | asd |
| 侧栏子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
- 模块（.m-）、元件（.u-）
| 语义 | 命名 | 简写 |
| 导航 | nav | nav |
| 子导航 | subnav | snav |
| 面包屑 | crumb | crm |
| 菜单 | menu | menu |
| 选项卡 | tab | tab |
| 标题区 | head/title | hd/tt |
| 内容区 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表单 | form | fm |
| 热点 | hot | hot |
| 排行 | top | top |
| 登录 | login | log |
| 标志 | logo | logo |
| 广告 | advertise | ad |
| 搜索 | search | sch |
| 幻灯 | slide | sld |
| 提示 | tips | tips |
| 帮助 | help | help |
| 新闻 | news | news |
| 下载 | download | dld |
| 注册 | regist | reg |
| 投票 | vote | vote |
| 版权 | copyright | cprt |
| 结果 | result | rst |
| 标题 | title | tt |
| 按钮 | button | btn |
| 输入 | input | ipt |
- 功能（.f-）
| 语义 | 命名 | 简写 |
| 清除浮动 | clearboth | cb |
| 左浮动 | floatleft | fl |
| 内联 | inlineblock | ib |
| 文本居中 | textaligncenter | tac |
| 垂直居中 | verticalalignmiddle | vam |
| 溢出隐藏 | overflowhidden | oh |
| 完全消失 | displaynone | dn |
| 字体大小 | fontsize | fz |
| 字体粗细 | fontweight | fs |
- 皮肤（.s-）
| 语义 | 命名 | 简写 |
| 字体颜色 | fontcolor | fc |
| 背景颜色 | backgroundcolor | bgc |
| 边框颜色 | bordercolor | bdc |
- 状态(.z-)
| 语义 | 命名 | 简写 |
| 选中 | selected | sel |
| 当前 | current | crt |
| 显示 | show | show |
| 隐藏 | hide | hide |
| 打开 | open | open |
| 关闭 | close | close |
| 出错 | error | err |
| 不可用 | disabled | dis |
- 命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）
- 相同语义的不同类命名方法：
直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
2.3 注释规范
CSS
.title{
/*font-size:16px;*/
color:#333;
}
/*
.title{
font-size:16px;
color:#333;
}
*/3、html元素的4种CSS样式来源
3.1 浏览器默认样式
保证html页面“裸奔”的时候也具有可读性。
3.2 继承样式
后代元素可以从祖先元素继承样式，不是所有样式都可以继承的。一般文本、字体等样式可以继承，而布局类的、背景等样式不可以继承。
3.3 用户通过浏览器自定义的样式
3.4 指定样式
- 行间样式
<h1 style="color:#f30;font-size:24px;text-align:center;"> 标题 </h1> <p style="text-align:center"> web前端学习第一课 </p> <p style="text-align:center"> <img src="images/1.jpg" alt="web前端开发"> </p>
- 页面内部样式
CSS
h1{
color:#f30;
font-size:24px;
text-align:center;
}
.center{
text-align:center;
}- 页面外部链接样式
<link rel="stylesheet" href="*.css">
一定要学会使用chrome develop tool（谷歌浏览器开发者工具）
4、CSS选择器基础
选择器的目的是什么？
找到html标签元素，然后把样式作用在该html元素上。（找对象）
选择器是一种匹配模式，用于**选择需要添加样式的目标对象**。
注： 行内样式不需要用选择器， 内部或外部CSS需要用选择器。
4.1 基本选择器（元素选择符）
- 通用选择器
* 星号选择器，也称为通用选择器
作用：选择HTML页面上所有的元素
语法：
CSS
*{
属性:属性值;
}通用选择器一般我们不会使用，因为它会对页面上所有的元素的样式进行渲染，这样就会使页面的渲染速度变慢。
- 标签(元素)选择器
**必须是HTML语法中固有的标签，而不能使自己定义的名称。**
作用：选择HTML网页中所有指定的标签，并对其应用样式
语法：
CSS
标签{
属性:属性值;
}- 类选择器
所有的HTML标签都有class属性，为这个class设定一个值，然后就可以使用类选择器来匹配这一个值。并对其应用样式。
作用：选择指定了class属性值的标签
语法：
CSS
.
class类名{
属性:属性值;
}注意：使用类选择器必须在值的前面加一个点符号（.）,可以多个class组合。
- ID选择器
所有的HTML标签都有一个id属性
我们可以为这个id设定一个值，然后再写选择器来匹配这一个值
作用：选择指定的ID属性值的标签
语法：
CSS
#id名称{
属性:属性值;
}id使用的 *#* ，class使用的是 *.*
**通常id是唯一的（只能够有一个元素来匹配）**
4.2、层次选择器(复合选择器)
层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系。
语法如下：
| **选择符** | **名称** | **版本** | **描述** |
| E F | 包含选择符(Descendant combinator) | CSS1 | 选择所有被E元素包含的F元素。 |
| E>F | 子选择符(Child combinator) | CSS2 | 选择所有作为E元素的子元素F。 |
| E+F | 相邻选择符(Adjacent sibling combinator) | CSS2 | 选择紧贴在E元素之后F元素。 |
| E~F | 兄弟选择符(General sibling combinator) | CSS3 | 选择E元素之后所有兄弟元素F。 |
- 包含选择器E1 E2（后代关系）
作用：选择所有被E1包含的E2。
语法：
E1 E2
- 子选择器 E1>E2（父子关系）
作用：选择所有作为E1子对象的E2。
语法：
E1 > E2
比如：ul>li
**注意： **子选择器与包含选择器有区别，子选择器只选中下一代，包含选择器可以选中所有的后代（不限层级）。
- 选择器分组 E1,E2,E3（并列关系）
作用：将同样的样式应用于多个选择器，可以将选择符以逗号分隔的方式并为组。
语法：
E1,E2,E3
- 相邻选择器E1+E2（邻居关系）
作用：选择紧贴在E1元素之后E2元素。相邻选择符只会命中符合条件的相邻的兄弟元素。
语法：
E1+E2
比如：li+li
- 兄弟选择器E1~E2（兄弟关系）
选择E1元素后面的所有兄弟元素E2。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
4.3 伪类选择器
在某个状态触发的时候，会执行对应的样式。
语法：
CSS
E:伪类{
属性:属性值;
}- 动态伪类选择器
| **选择符** | **版本** | **描述** |
| E:link | CSS1 | 设置超链接a在未被访问前的样式。 |
| E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |
| E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
| E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
| E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 |
- 鼠标的四种状态（重点）
**E:link** **未访问的链接**
**E:visited** **已访问的链接**
**E:hover** **鼠标悬停状态**
**E:active** **选定的激活状态**
:link、:visited只能针对a超链接。:hover、:active可以针对任何元素，不只是超链接.
注意必须按照lovehate的书写顺序。
- E:focus 焦点
设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式
4.4 属性选择器
| **选择符** | **版本** | **描述** |
| E[att] | CSS2 | 选择具有att属性的E元素。 |
| E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。 |
| E[att~="val"] | CSS2 | 选择具有att属性且属性值为一个用空格分隔的字词列表，其中一个等于val的E元素。 |
| E[att|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 |
5、选择器的层叠性（掌握）
5.1 css样式的继承性
HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。**具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素**。
HTML中，<body>是其他元素的容器，是其他元素的最外层元素，所以<body>元素中定义的样式将影响其他所有元素的显示格式。
能被继承的CSS属性：
**文本相关的属性是继承的**
text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等
**列表相关的属性是继承的**
list-style、 list-style-image、list-style-position、list-style-type
5.2 css样式的优先级
- 继承样式和浏览器缺省设置
- 浏览器缺省设置获胜
- 如果元素有默认样式，而元素没有自身设定样式，浏览器渲染引擎会将默认样式设定到元素上，而不会继承。因为浏览器渲染引擎合并的cssTree和domTree生成渲染树的时候，实质上就是将样式表中的样式设定到DOM文档的行间，而行间的优先权最高，这就是a不继承父级元素的颜色样式的原因。
- 继承方式冲突
- 就近原则
- 继承样式、浏览器缺省样式与指定样式冲突
- 指定样式获胜
- 指定样式冲突
- 对当前元素指定了多个样式，则权值高者获胜。
| 选择器 | 权值 |
| 通配符 | 0 |
| 伪元素 | 1 |
| 元素选择器 | 1 |
| class选择器 | 10 |
| 伪类 | 10 |
| 属性选择器 | 10 |
| id选择器 | 100 |
| 行间样式 | 1000 |
- 引用方式冲突
- 行内样式>(内部样式=外部样式)
- 相同权重的时候，后来者居上，后定义的覆盖前定义的。
- !important
- 大杀器，最高级别，覆盖任何其它指定的样式。
- 可以覆盖别人写的很糟糕的行间样式！
- 可以通过在后面再添加!important覆盖前面的!important样式。
5.3 CSS样式的精简
- 先写基础的标签样式做统一化，利用了继承性
- 再把具有相同的样式模块化，通过class的组合
- 把相同的样式提取出来，选择器用“，”隔开
- 某个样式不一样的时候，合理的利用冲突优先级规则
6、课堂总结
6.1 重点
- CSS的作用
- CSS的规范
- CSS的各类选择器的用法
6.2 难点
- CSS样式的多种来源
- CSS层叠性的理解
6.3 学习方法
- 把不熟练的单词抄写3遍以上。
- 多敲代码，多思考。
6.4 排错技巧
- 利用chrome浏览器的开发者调试工具
3279916262