CSS | 总结

选择器

三种基本选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:

#para1{
    text-align:center;
    color:red;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {
text-align:center;
}

层次选择器

后代选择器

在某元素后面

body p{
text-align:center;
}

子类选择器

一代 ，儿子

body>p{
text-align:center;
}

相邻选择器

同辈，只有一个，相邻（向下）

.center + p {
text-align:center;
}

通用选择器

.center ~ p {
text-align:center;
}

结构伪类选择器

/* ul第一个子元素 */
ul li-fisrt-child{
	background: red;
}
/* ul第一个子元素 */
ul li-last-child{
	background: red;
}
/* p1:定位到父选择器中第一个元素  顺序 */
p:nth-child(1){
	background: red;
}
/* p2:定位到父选择器，下p元素的第二个  类型  */
p:nth-of-type(2){
	background: red;
}

属性选择器

//例子
a[href] {color:red;}

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

[attribute=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

样式

字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

属性	描述
text-decoration:underline	向文本添加下划线。

背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

链接

属性	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方
a:active	链接被点击的时刻

伪类

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

列表属性(list)

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

属性	描述
list-style:none	去掉原点
list-style:circle	空心圆
list-style:decimal	数字
list-style:square	方形

Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

边框属性

属性	描述
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。

边框

• element : 元素。
• padding : 内边距。
• border : 边框。
• margin : 外边距。

内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

外边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
border-radius	圆角边框

盒子

盒子大小=border + margin + padding + 内容元素

定位与浮动

定位

相对定位

相对原来的位置，进行指定偏移，相对定位的话，它仍然在标准文档流中，原来位置会被保留。

#box {
  position: relative;
  right: 30px;
  top: 20px;
}

绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。

1. 没有父级元素定义下，相对于浏览器定位
2. 父级元素存在定位，相对于父级元素偏移
3. 在父级元素范围内运动
   相对父类或浏览器的位置，进行指定偏移，绝对定位的话，它不在标准文档流中，原来位置不会被保留。

#box {
  position: absolute;
  left: 30px;
  bottom: 20px;
}

固定定位

#box {
  position: fixed;
  right: 0px;
  bottom: 0px;
}

z-index

定位属性

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

浮动

display

div 块级元素，独占一行
span 行内元素，不独占一行

block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联在一行

float

属性	描述
clear	指定不允许元素周围有浮动元素。
float	指定一个盒子（元素）是否可以浮动。

属性	描述
clear:both	两边都不允许浮动
clear:none	都允许浮动
clear:right	右边都不允许浮动
clear:left	左边都不允许浮动

父边框塌陷问题

1. 增加父级元素的高度
2. 增加一个空的div标签，清除浮动
3. overflow.

在父级元素增加一个 overflow:hidden;

4. 在父类添加一个伪类 :after

#father:after{
	content:' ';
	display:block;
	clear:both;
}