总结w3c的css知识点

1.a:link {color:#FF0000;} /* 未被访问的链接 */

a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

2.设置背景颜色

background-color:gray;

3.设置背景图片
background-image: url(img01.jpg);

4.设置背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

background-repeat:repeat-x:水平铺
repeat-y:垂直铺
5.设置背景位置
background-position:center;
top;
bottom;
left;
right;
6.设置背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

background-attachment:fixed：固定
scroll:滚动
7. text-indent 属性，该属性可以方便地实现文本缩进。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
text-indent:5em;

8.text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
text-align:left;
right;
center;
9.设置字间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing:30px;

10.设置字母间隔

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

letter-spacing:20px;

11.设置字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

- none ：不做任何改变
- uppercase ：大写
- lowercase：小写
- capitalize：

12.设置文本装饰

接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

- none
- underline
- overline
- line-through
- blink ：闪烁

13.设置处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

white-space:normal:正常显示，去掉空格和tab符号
：pre:保留元文本的空白
：nowrap:它会防止元素中的文本换行
：如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符

14.设置指定字体系列

使用 font-family 属性 定义文本的字体系列。

font-family: Georgia;

15.设置字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示

16.font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。
font-weight:normal;
:blod; 等价于700
:900; 最粗的字体

17.设置字体大小

font-size 属性设置文本的大小

font-size:16px
:1em --1em等价于16px;

18.CSS 列表属性(list)

list-style： 简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image ： 将图象设置为列表项标志。 列表的前面是用的图片

list-style-position ： 设置列表中列表项标志的位置。

list-style-type： 设置列表项标志的类型。

marker-offset：

list-style-type : square

list-style-image : url(xxx.gif)

list-style : url(example.gif) square inside

19.
CSS Table 属性

属性

描述

border-collapse

设置是否把表格边框合并为单一的边框。 如果只设置border:1px solid blue;的话，那么就会有两条线，正如这样：

如果再设置：border-collapse:collapse;结果是这样：

border-spacing： 设置分隔单元格边框的距离。

caption-side： 设置表格标题的位置。

empty-cells： 设置是否显示表格中的空单元格。

table-layout： 设置显示单元、行和列的算法。

表格文本对齐

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中： text-align：left;right;center
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐： vertical-align:top;bottom;
表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性:

padding:20px;

表格颜色

background-color:green;
color:white;

20.
CSS 边框属性

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。

属性

描述

CSS

outline： 在一个声明中设置所有的轮廓属性。

outline-color： 设置轮廓的颜色。

outline-style： 设置轮廓的样式。

outline-width： 设置轮廓的宽度。

outline:#00ff00 dotted thick;

border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;

outline-style: dotted
outline-style: dashed
outline-style: solid
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset

outline-width:thin;
outline-width:3px;

21.
CSS 框模型概述



padding 属性接受长度值或百分比值，但不允许使用负值。
设置一个内边距： padding:20px;
设置四边的内边距，可以是：

padding: 10px 0.25em 2ex 20%; 依次是上右下左

也可以是：单边内边距属性

- padding-top
- padding-right
- padding-bottom
- padding-left

padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;

* 百分数是相对于父元素的百分比，不是整个的width

22.边框的样式



例如，您可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”：

a:link img {border-style: outset;}

border-style: solid dotted dashed double; 等价于：定义四个单边样式：

- border-top-style
- border-right-style
- border-bottom-style
- border-left-style

边框宽度：

border-width: 15px 5px 15px 5px;

等价于定义四个单边宽度样式：
border-style: solid;

border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;

边框颜色：

border-color: blue rgb(25%,35%,45%) #909090 red;

等介于定义四个单边颜色：

- border-top-style
- border-right-style
- border-bottom-style
- border-left-style

也可以定义两个颜色值：

如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：

border-color: blue red;

23.外边距 margain：
margin: 0.25em 1em 0.5em; /* 等价于 0.25em 1em 0.5em 1em */
margin: 0.5em 1em; /* 等价于 0.5em 1em 0.5em 1em */
margin: 1px; /* 等价于 1px 1px 1px 1px */

等价于：
margin-top:1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;

24.外边距合并：简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。







25.position：定位





组合使用：在绝对位置上有距离5个像素
position:absolute;
right:5px;

z-iindex：的用法，有时候我们的文本中有图片，但是我希望图片覆盖文字，就可以设置z-index=-1来设置优先级，-1的优先级大于0.使文字显示在图片的上面

relative：相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

* 相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素

26.float:浮动
float：left：左浮动，div1靠近左边框，div2向左浮动直到接触到div1的右边缘
float:right:右浮动
clear:both:清楚浮动元素的侧边的元素



清除前：左浮动


清除后 ：


27.



28.cursor:当鼠标移动上去之后显示的光标图形