CSS进阶笔记1

1 CSS单位

1.1 绝对单位

1.2 相对单位

2 CSS特性

2.1 继承性

CSS的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色。

• 字体系列属性：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
• 文本相关属性：line-height、text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color
• 列表相关属性：list-style-image、list-style-position、list-style-type、list-style；
• 光标属性：cursor
• 元素可见性：visibility

2.2 层叠性

CSS的层叠性，指的就是样式的覆盖。对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些样式具有相同的权重，CSS会以最后定义的属性的值为准；也就是“后来者居上”原则。“后来者居上”原则必须符合三个条件。

• 元素相同。
• 属性相同。
• 权重相同。

2.3 优先级

样式覆盖发生冲突常见的共有以下五种情况。

• 引用方式冲突。
• 继承方式冲突。
• 指定样式冲突。
• 继承样式与指定样式冲突。
• !important。

2.3.1 引用方式冲突

行内样式>（内部样式=外部样式）

2.3.2 继承方式冲突

如果由于继承方式引起的冲突，则“最近的祖先元素”获胜。

2.3.3 指定样式冲突

所谓的指定样式，指的是指定“当前元素”的样式。当直接指定的样式发生冲突时，样式权值高者获胜。

2.3.4 继承样式与指定样式冲突

当继承样式和指定样式发生冲突时，指定样式获胜。

2.3.5 !important

如果一个样式使用!important来声明，则这个样式会覆盖CSS中任何的其他样式声明。

3 CSS规范

3.1 CSS命名规范

3.1.1 CSS文件命名

3.1.2 网页主体部分命名

3.1.3 网页细节部分命名

3.1.4 菜单命名

3.1.5 其他命名

3.2 书写规范

CSS属性书写顺序推荐：

3.3 CSS reset

现在浏览器有很多，主流的有Chrome、Firefox、IE、Safari、Opera等。不同的浏览器，默认样式也是不同的。举个例子，ul元素有缩进样式。在Firefox浏览器中，ul元素的缩进是通过padding实现的；而在IE浏览器中，ul元素的缩进是通过margin来实现的。再比如button元素，在IE、chrome、Firefox等浏览器中的默认样式也是不同的。

说起去除浏览器默认样式，有些小伙伴可能会想到以下方法：

* {
	padding:0; 
	margin:0; 
}

在实际开发中，并不建议使用这个方法。因为这个方法性能非常低，它把所有元素的padding和margin都去掉了，然而像表格元素（或者input元素）的margin和padding我们是不希望去掉的。此外，它只能消除默认的padding和margin，像ul的列表项符号、em的斜体、strong的加粗等却没有去除。

以下是Eric Meyer发布的最新版的重置样式表（2011年1月26日发布），参考于http://meyerweb.com/eric/tools/css/reset/。

 html, body, div, span, applet, object, iframe，
 h1, h2, h3, h4, h5, h6, p, blockquote, pre，
 a, abbr, acronym, address, big, cite, code，
 del, dfn, em, img, ins, kbd, q, s, samp，
 small, strike, strong, sub, sup, tt, var，
 b, u, i, center，
 dl, dt, dd, ol, ul, li，
 fieldset, form, label, legend，
 table, caption, tbody, tfoot, thead, tr, th, td，
 article, aside, canvas, details, embed，
 figure, figcaption, footer, header, hgroup，
 menu, nav, output, ruby, section, summary，
 time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure，
 footer, header, hgroup, menu, nav, section {
     display: block;
 }
 body {
     line-height: 1;
 }
 ol, ul {
     list-style: none;
 }
 blockquote, q {
     quotes: none;
 }
 blockquote:before, blockquote:after，
 q:before, q:after {
     content: ‘';
     content: none;
 }
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }