选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*id选择器*/

#idChose {
text-align: center;
color: red;

}

/*class选择器*/
.classChose {
text-align-last: center;
color: #0a58ca;
}
/*标签选择器*/
a {
text-align: center;
color: deepskyblue;
background: #efede8;
}

优先级 #(ID选择器) > .(class选择器) > a/p/div/...(元素选择器)

背景

属性 说明 示例
background 简写属性,作用是将背景属性设置在一个声明中。 background: red url(…) no-reapet left top
background-color 设置元素的背景颜色。 red / rgba(10, 88, 202, 0.66) / #0a58ca
background-image 把图像设置为背景。 url(…)
background-repeat 设置背景图像是否及如何重复。 no-reapet / reapet-x / reapet-y
background-position 设置背景图像的起始位置。 top left right b0ttom center
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll / fixed / local
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

a {
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
}

a {
/* 关键 属性值 */
background-attachment: fixed; // 背景相对于视口固定
background-attachment: scroll; // 背景相对于元素的内容固定
background-attachment: local; //背景相对于元素本身固
}

引用

显示

1
2
3
4
a {
visibility:hidden
}

定位

元素 说明
clip 剪辑一个绝对定位的元素 shape 、auto 、inherit
cursor 显示光标移动到指定的类型 url 、auto 、crosshair 、default 、pointer 、move 、e-resize 、ne-resize 、nw-resize 、n-resize 、se-resize 、sw-resize 、s-resize 、w-resize 、text 、wait 、help
overflow 设置当元素的内容溢出其区域时发生的事情。 auto 、hidden 、scroll 、visible 、inherit
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto 、hidden 、scroll 、visible 、no-display 、no-content
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto 、hidden 、scroll 、visible 、no-display 、no-content
position 指定元素的定位类型 absolute 、fixed 、relative 、static 、inherit
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto 、length 、% 、inherit
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto 、length 、% 、inherit
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto 、length 、% 、inherit
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto 、length 、% 、inherit
z-index 设置元素的堆叠顺序 number 、auto 、inherit

position

overflow

z-index

top left right bottom

伪类

大多为一些行为上的后续

1
2
3
4
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

参考