HTML5权威指南读书笔记【第三部分】

1、span.class1.class2会选择同时指定class1和class2的元素

2、[href]匹配所有具有href属性的元素

3、[class~=“class2”]空格隔开的多个属性

4、[lang|=“en”]匹配连字符隔开的分割包含一个同名字符

5、选择器示例：

后代 #mytable td

子代 body > * > span, tr > th(紧跟无间隔) 

兄弟 p + a（p后面的同级别的a，只匹配第一个）

普通兄弟 p ~ a (p后面所有同级别的a)

6、伪元素选择器

::first-line 文本元素的首行 动态评估

::first-letter 文本元素的首字母

a:before {    content:“the text before a”}a:after {    content:“the text after a”}

7、计数器

counter-reset: paracount(计数器名称) 10(初始值 默认为1 后面的数字相当于在1的基础上增加的值) 后面可以添加更多计数器名称

计数器初始化后可以作为before after的content值

content:counter(paracount , lower-alpha) “.”

counter-increment计数器增量

counter-increment: paramount 2; 默认为1

8、:root选择html

9、:first-child匹配任意元素的第一个子元素 对应:last-child

10、p > span:first-child匹配作为p元素第一个子元素的任意span元素

11、:only-child匹配仅含有一个子元素的元素的子元素（好绕）

12、:only-of-type匹配父元素包含的唯一类型的子元素

13、body:nth-child(2) body的第二个子元素

14、:enabled匹配所有没有禁用的元素

15、:checked + span 包含checked属性的兄弟元素

16、:valid :invalid 对于加验证的元素的匹配 <input required />

:valid背后原理选中所有并非无效的input元素

17、:required :optional

18、:link用于匹配为点击过的超链接样式 :visited用于匹配点击过的超链接样式

19、:hover 匹配鼠标目前所指区域所属的元素 会选择嵌套的多个元素

20、:active 匹配鼠标按下或者手指按下是的元素，松手释放

21、:focus匹配当前获得焦点的元素 可输入区域

22、a:not([href*=“apress”])匹配子元素没有包含apress字符串的href元素的所有元素

23、:empty匹配没有任何子元素的元素 :lang(en)匹配基于lang全局属性值的元素

24、简写属性 border 宽度 样式 颜色 顺序可互换 自动识别

25、border-top-left-radius 属性记忆规则先上下后左右 设定值时 先水平方向半径后垂直方向半径 

如果只提供一个值那么水平与垂直的值相同

26、border-radius /分隔水平和垂直的值 两值全局水平跟垂直 四值左上右上右下左下

27、背景示例：

background-color:lightgray;

background-image:url(banana.png);图像浮于背景色之上

background-size:40px 40px;

background-repeat:repeat-x;延x轴重复填充

background-size可设定值contain判断图像长宽，取大值适配到容器对应长度 cover取小值缩放

background-position 左 上 距离，往往在no-repeat布局时使用 除了具体像素 可以使用top bottom center等

先定义垂直方向，后定义水平方向。

background-attachment背景附着方式 fixed 固定在视窗上 local scroll

background:lightgray top right no-repeat border-box content-box local url(banana.png);

28、box-shadow阴影 hoffset offset blur spread color inset

29、display设置为inline的元素设置margin top bottom 无效

30、overflow:hidden隐藏掉溢出的内容 overflow:scroll添加滚动条

31、visibility visible可见 collapse不可见且不占空间（只能应用于表相关元素 大部分浏览器不支持，对于元素display应用none值可以实现相同效果） hidden 不可见占空间

32、display:block 上下区分类似于p标签效果但可应用于所有元素

33、display:inline 浏览器会忽略掉某些属性，如width height margin

34、display:inline-block 上下区分取消，但是不会像inline一样忽略元素

35、display:run-in 当兄弟元素为块级则插入元素作为块级元素的一部分处理

如果兄弟元素为行内，那么插入元素作为块级

36、float:left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动块的右边界

right同理，none元素位置固定

37、clear可以指定浮动元素的一个边界或者两个边界不能挨着另一个浮动元素

38、position:static relative 根据static值确定重新定位元素

absolute相对于页面 fixed相对于浏览器

39、z-index控制层次 index越小越靠后 默认为0

40、可伸缩元素不能包含浮动元素 -webkit-box-flex:3 1 按照比例分配

41、box-align垂直方向对齐方式 默认是拉伸 -webkit-box-align:end;对齐底部

42、box-pack:justify 设置了max-width之后 当达到最大宽度之后根据box-flex的值按比例分配空闲区域

43、whitespace:pre-line 空白符被压缩 添加换行并保留原有换行

44、letter-spacing字母间距 word-spacing单次间距 line-height行高

45、text-indent首行缩进

46、text-transform:uppercase 转换为大写

47、引用web字体

@font-face {    font-family:’MyFont’;    font-style:normal;    font-weight:normal;    src:url(‘http://xxx/MyFont.woff');}p {    font-family:MyFont, cursive;}

48、动画过渡：

#banana:hover {    -webkit-transition-delay:100ms;    -webkit-transition-property:各种改变的属性；(省略时为所有属性)    -webkit-transition-duration:500ms;    (-webkit-transition-timing-function:linear)中间值变化曲线}

反向过渡：（过渡恢复初始状态）

#banana {    -webkit-transition-delay:100ms;    -webkit-transition-duration:250ms;}

49、动画：不会真正改变最终的状态

animation-name:’AnimationName’;

@-webkit-keyframes AnimationName {    from {        动画开始状态    }      50% {    }    70% {    }    to {        动画结束状态      }}

animation-direction:alternate;结束之后反方向执行，normal结束之后立刻恢复初始状态

animation-play-state:paused 动画停止 playing 动画开始播放

50、变换

-moz-transform:rotate(-45deg) scaleX(1.2);

-45代表逆时针旋转

-moz-transform-origin:right top;

以什么位置作为旋转的中心点

51、color元素一般用于设置文本的颜色

52、opacity透明度

53、table border-collapse:collapse不要为相邻元素绘制两个边框

border-spacing:10px设置边框的间隔

empty-cells:hide 隐藏空白cell边框

caption-side:top bottom控制标题的位置

54、ol list-style-type:lower-alpha;列表前面的序号，同时可以在单独列表项中单独指定样式

list-style-image:url(‘banana-vsmall.png’);图片充当序号

list-style-position:inside outside序号相对于列表项内容框的位置

55、cursor:progress 设置鼠标的样式