简单的 CSS 选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| .class 类选择器 | .intro | 选取所有 class="intro" 的元素。 |
| id id选择器 | #firstname | 选取 id="firstname" 的那个元素。 |
| * 通用选择器 | * | 选取所有元素。 |
| element 元素选择器 | p | 选取所有 <p> 元素。 |
| element,element,..元素分组选择器 | div, p | 选取所有 <div> 元素和所有 <p> 元素。 |
边距属性
边框既可以同时设置四条边的属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，在一条声明中设置所有边框属性。 |
| border-color | 简写属性，设置四条边框的颜色。 |
| border-radius | 简写属性，可设置圆角的所有四个 border-*-radius 属性。 |
| border-style | 简写属性，设置四条边框的样式。 |
| border-width | 简写属性，设置四条边框的宽度。 |
又可以只设置某条边的属性
| 属性 | 描述 |
|---|---|
| border-bottom | 简写属性，在一条声明中设置所有下边框属性。 |
| border-left | 简写属性，在一条声明中设置所有左边框属性。 |
| border-right | 简写属性，在一条声明中设置所有右边框属性。 |
| border-top | 简写属性，在一条声明中设置所有上边框属性。 |
单独设定某个边的颜色、样式、宽度
| 属性 | 描述 |
|---|---|
| border-bottom-color | 设置下边框的颜色。 |
| border-bottom-style | 设置下边框的样式。 |
| border-bottom-width | 设置下边框的宽度。 |
框模型——区分内容、内边距、边框、外边距
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：
在 CSS 中，width 和 height 指的是内容区域的宽度和高度，但要计算元素的完整大小，还必须把内边距、边框和外边距加起来。
CSS简写
简写背景属性
body {
background-color: #ffffff; /*背景颜色*/
background-image: url("tree.png"); /*背景图像*/
background-repeat: no-repeat; /*背景重复*/
background-attachment: fixed /*背景附着*/
background-position: right top; /*背景位置*/
}
简写属性写法：
body {
background: #ffffff url("tree.png") no-repeat right top;
在使用简写属性时，属性值的顺序为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
简写边框属性
border 属性是以下各个边框属性的简写属性：
border-widthborder-style（必需）border-color
border和属性如style之间可以插入要选择的边框如left
详细见边框属性
轮廓简写
outline 属性是用于设置以下各个轮廓属性的简写属性：
outline-widthoutline-style（必需）outline-color
从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。
简写字体属性
font 属性是以下属性的简写属性：
font-stylefont-variantfont-weightfont-size/line-heightfont-family
列表简写属性
在使用简写属性时，属性值的顺序为：
list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）list-style-position（指定列表项标记应显示在内容流的内部还是外部）list-style-image（将图像指定为列表项标记）
如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。
链接的四种状态
四种链接状态分别是：
a:link- 正常的，未访问的链接a:visited- 用户访问过的链接a:hover- 用户将鼠标悬停在链接上时a:active- 链接被点击时
文章评论