CSS

CSS规则由两个主要的构成部分：选择器，以及一条或者多条声明。

选择器需要改变样式的HTML元素

每条声明由一个属性和一个值组成。（属性是希望设置的样式属性：style attribute），每个属性有一个值。属性和值被冒号分开。声明总是被大括号括起来，每个生命之间以分号间隔以及结束，

id 和 class选择器

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

class选择器

class选择器用于描述一组元素的样式，选择器与id选择器的不同在于class可以在多个元素中使用。

class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点来定义。

如何插入样式表

插入样式表有三种方法：

1. 外部样式表

2. 内部样式表

3. 内联样式

多重样式：

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

CSS链接（Link）

链接的样式，可以用任何CSS属性，如颜色，字体，背景等

特别的链接，可以有不同的样式，取决于他们是什么状态，四个链接状态是：

1. a:link 正常，未访问过的链接

2. a:visited 已访问过的链接

3. a:hover 当用户鼠标放在链接上时

4. a:active 链接被点击的那一刻

note:

hover必须跟在link 和visited后面

active必须跟在hover后面

link > visited > hover > active

L (link) OV (visited) E and H (hover) A (active) TE

 

列表

HTML中有两种不同类型的列表：

1. 有序列表 （列表项标记用特殊图形，如小黑点、小方框等）

2. 无需列表 （列表项的标记有数字或者字母）

表格

表格边框

指定CSS表格边框，使用border属性

如果只是指定了border属性，而没有设置border-collapse属性，那么表格会有双边框，因为表和th/td元素有独立的边界。，因此为了显示一个表的单个边框，使用border-collapse属性。

盒子模型（Box Model）

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

由此看来，有颜色的部分只有Border和content区域，padding的作用只是清除内容周围的区域，是无色透明的，margin是清除边框之外的区域，和其他内容之间的距离，也是无色透明的。

NOTE: 当你设置一个CSS元素的宽度和高度属性时，你只是设置了content区域的宽度和高度，如果计算他所占区域的完全大小，需要加上内边距，边框以及外边距的大小。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

分组选择器

在样式表中，具有相同样式的元素，为了尽量减少代码量，可以使用分组选择器，每个选择器之间用逗号进行分割，如：

h1,h2,p{
            color:green;
        }

嵌套选择器

适用于选择器内部选择器的样式

• .marked{ }: 为所有 class="marked" 的元素指定一个样式。
• .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class="marked" 的 p 元素指定i个样式。

CSS display(显示)

关于显示设置有两个属性可以进行控制，分别是display和visibility，如果需要隐藏一个元素，可以把display属性设置为none或者把visibility属性设置为hidden,但是这两种方法会产生不同的结果。

visibility可以隐藏某个元素，但是隐藏以后与为隐藏之前占一样的空间。

hidden隐藏元素以后，该元素不会占据任何空间，隐藏之后该元素原本占据的空间会从页面布局中消失。

CSS 对齐

元素居中对齐：

要水平居中对齐一个元素，可以使用margin:auto

设置到元素的宽度将yu止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。

NOTE:如果元素没有指定宽度，margin:auto 将不起作用。

文本居中对齐：

如果仅仅是让文本再元素内居中对齐，可以使用text-align:center；

图片居中对齐：

要让图片居中对齐，可以使用margin:auto，并将它放到块元素中。

组合选择符

组合选择符说明了这两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式，CSS3中包含了四种组合方式：

• 后代选择器(以空格分隔)： 用于选取某元素的后代
• 子元素选择器(以大于号分隔）： 子元素选择器只能选择作为某元素的子元素
• 相邻兄弟选择器（以加号分隔）：相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且二者具有相同的父元素。
• 普通兄弟选择器（以破折号分隔）
• 后续兄弟选择器：后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有<div>元素之后的相邻兄弟元素<p>

div~p{
   background-color:yellow; 
}

伪类

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法： selectot:pseudo-class {property:value;}

CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

anchor伪类：

实例：

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

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /*de选中的链接 */