ch1

样式的写法

1. <link rel="stylesheet" href="./style.css" type="text/css">外部链接样式表,放在头部
2. <style> @import "./style.css"</style> 放在style容器内, 直接加载使用, 放在开头
3. <style> h1{ color: red; }</style> 直接使用

ch2

组合选择器

1. p.waring{font-weight: bold} 只有带warning的p标签才生效
2. ID选择器是唯一的, 只能使用一次
3. ID选择器不能结合使用
4. 属性选择器h1[class] {color: red}, 所有含有class属性的标签渲染成红色

部分选择器

1. [class^="j-icon"] 选择class属性值以j-icon开头的所以元素
2. [class*="j-icon"] 选择class属性值中包含子串j-icon 的所有元素

后代选择器

1. h1 em{color: grey} 选择h1元素后代的任何em元素
2. h1> strong{color: red} 选择子元素

动态伪类

1. input:foucs{background: silver;font-weight: bold}当编辑input激活样式
2. a:hover{font-size: 20px} 鼠标停留字体变大
3. <h2 style="color:red">Hello</h2> 内联样式优先级最高
   4 . 重要性声明p{color: #333 !important} 在同级别时会胜出

ch3

继承

1. *{color: gray}通配选择器适用于所有元素,而来有0特殊性,会优先于继承值(没有特殊性)

ch4

要点

1. height和width不能应用于行内非替换元素
2. 背景会延伸到内边距, 但不会延伸到外边距
3. 浏览器对许多元素提供预定的样式, 外边距也不例外
4. 可以对元素的外边距设置百分数,百分数相对与父元素的width计算(包括上下外边距)

5. 边距的简略写法

   
   
   51.34.png
6. 外边距对行内(非替换)元素的行高没有任何影响,改变行高的属性只有line-height, font-size
7. 外边距对行内(替换)元素的行高会产生影响
8. 元素默认没有内边距

ch11

要点

1. 表格单元的边框类型border-collapse, 可以选择collapse或者separate