CSS基础
一、样式分类
1、外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2、内部样式表
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
3、内联样式
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
二、样式优先级
当同一个 HTML 元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
三、字体样式和样式继承
若计算机没有Times，则采用sans-serif。
body {font-family: Times, sans-serif;}
现在的多数浏览器都支持样式的继承，如上面一段css代码，body中所有的元素ul、li、div中的字体都会继承body的样式，但旧浏览器却不一定支持。此外，如果希望body中p的字体不同，则需要在body下面再对p的样式做规定。
body {font-family: Times, sans-serif;} p{font-family: 'New York';}
四、padding和margin
从w3c上的这个图可以清楚看出来，或者从下面术语翻译也可以理解。
术语翻译
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
五、margin
定义margin按顺时针方向为上、右、下、左：
p {margin: 0.5em 1em 0.5em 1em;}
对于margin内的4个值：
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。
六、外边距合并
1、定义：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
