css命名规则
见名知意
下划线连接
不写很多嵌套（最多3层）
多使用class
id选择器(使用#标识selector)
#name{
color red;
}
</style>
<p id = name>red text</p>
类选择器
.value{
text-align:center;
}
</style>
<p class="value">center text</p>
元素选择器
<style>
p{
font-style:italic;
}
</style>
<p style="font-style:italic">italic text</p>
属性选择器
包含选择器
指定目标选择器必须处在某个选择器对应的元素内部
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
<p>yellow text</p><!--文字是黄色的-->
</div>
子选择器
指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
兄弟选择器
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非红色的-->
<div>no red text</div>
<p>red text</p><!--文字是红色的-->
</div>
盒子
上 下 右 左 使用pading可以加怪异盒子模型 盒子上下间距margin的重叠问题 上下垂直的块级元素之间的margin会发生重叠，重叠之间的间距以最大margin为准
三种样式表
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
css背景
CSS 属性定义背景效果:
- background-color //背景颜色
- background-image //背景图像
- background-repeat // 设置背景图像是否及如何重复。
- background-attachment //背景图像是否固定或随着页面其余部分滚动
- background-position //设置背景图像的起始位置
css盒子
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
