CSS3相关知识和实例
一、CSS选择器
CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3选择最新选择器规范: https://www.w3.org/TR/selectors
问题：
1.css的全称是什么？Cascading style sheets
2.样式表的组成： 规则——选择器+声明块—— 声明—— CSS合法的属性名+属性值
3.浏览器读取编译css的顺序？从右往左
1.基本选择器
通配符选择器 * { margin: 0; padding: 0; border: none; }
元素选择器 body （任何一个HTML元素）
类选择器 .
ID选择器 #
后代选择器 空格
选择器分组 h1,h2,h3 此处的逗号我们称之为结合符
2.基本选择器扩展
子元素选择器 > 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
相邻兄弟选择器 +它只会匹配紧跟着的兄弟元素
通用兄弟选择器 ~ 它会匹配所有的兄弟元素(不需要紧跟)
3.属性选择器
存在和值属性选择器
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
子串值属性选择器
[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。（^拖字符）
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
4.伪类与伪元素选择器（不在DOM树中）
链接伪类 (注意:link，:visited，:target是作用于链接元素的！)
:link表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符 （ 面试题：用css实现选项卡）
动态伪类(注意:hover，:active基本可以作用于所有的元素！)
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！
隐私与:visited选择器:只有下列的属性才能被应用到已访问链接：color background-color border-color
表单相关伪类
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单 （实例：自定义单选按钮）
:focus 匹配获焦的表单
结构性伪类
index的值从1开始计数！！！！
index可以为变量n(只能是n),index可以为even (奇数)odd（偶数）
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！nth-of-type以元素为中心！！！
:nth-child(index)系列 :first-child
:last-child
:nth-last-child(index)
:only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not
:empty(内容必须是空的，有空格都不行，有attr没关系)
伪元素
::after ::before ::firstLetter ::firstLine ::selection
5.css声明的优先级
选择器的特殊性：
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0
一个选择器的具体特殊性如下确定：
1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)，选择器的特殊性最终都会授予给其对应的声明，如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势
注意：id选择器和属性选择器 div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）
重要声明：
有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明，并允许在这些声明的结束分号之前插入 !important 来标志，必须要准确的放置 !important 否则声明无效。 !important 总是要放在声明的最后，即分号的前面， 标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。 实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决， 非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决， 如果一个重要声明与非重要声明冲突，胜出的总是重要声明
继承：
继承没有特殊性，甚至连0特殊性都没有，0特殊性要比无特殊性来的强
来源：
css样式的来源大致有三种（实例：自定义IE浏览器页面背景）
创作人员、读者、 用户代理
权重：
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明
层叠：
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级，先按来源排序，在按选择器的特殊性排序， 最终按顺序
二、自定义字体和字体图标
@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖
font-family 所指定的字体名字将会被用于font或font-family属性
src 字体资源
注意: 不能在一个 CSS 选择器中定义 @font-face
字体图标:1.制作一套矢量图
2.将矢量图与字符进行绑定
3.使用工具或者站点生成一套字体
4.最终使用
字体兼容处理网站 https://www.fontsquirrel.com/tools/webfont-generator
icomoon字体图标 https://icomoon.io/#home
实例：淘宝矢量图标文字
三、新增UI样式
1.文本新增样式
opacity属性
指定了一个元素的透明度 ，默认值：1.0 ，不可继承
新增颜色样式 rgba
文字阴影：
text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）默认值：none ， 不可继承
<color> 可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。
<offset-x> <offset-y>必选。这些长度值指定阴影相对文字的偏移量。
<offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。
如果两者均为0，则阴影位于文字正后方(如果设置了<blur- radius> 则会产生模糊效果)。
<blur-radius> 可选。这是 <length> 值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡
实例：用css实现背景透明文字不透明、文字阴影、浮雕文字、文字模糊、模糊背景
文字描边：
只有webkit内核才支持：-webkit-text-stroke（准确的来说不能算是css3的东西，但需要大家知道）
文字排版：
direction:控制文字的方向， 一定要配合unicode-bidi:bidi-override;来使用
text-overflow :确定如何向用户发出未显示的溢出内容信号。它可以被剪切， 显示一个省略号（'...'）
实例： 怎么溢出显示省略号 (包裹区域必须不能让子元素撑开)
white-space=no-wrap
overflow=hidden
text-overflow=ellipsis
