css样式表

CSS样式表讲解

一、CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

二、CSS ID 选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

语法

首先，ID 选择器前面有一个# 号- 也称为棋盘号或井号。与类选择器一样，ID 选择器中可以忽略通配选择器。这个选择器的效果将是一样的。

第二个区别是ID 选择器不引用class 属性的值，毫无疑问，它要引用id 属性中的值。

这个选择器的效果将是一样区别1：只能在文档中使用一次

与类不同，在一个HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别2：不能使用ID 词列表

不同于类选择器，ID 选择器不能结合使用，因为ID 属性不允许有以空格分隔的词列表。

区别3：ID 能包含更多含义

类似于类，可以独立于元素来选择ID。有些情况下，您知道文档中会出现某个特定ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的ID 选择器。例如，您可能知道在一个给定的文档中会有一个ID 值为mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个

三、css复合选择器:

（1）交集选择器

“交集”复合选择器由两个选择器直接连接构成；其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器；这两个选择器之间不能有空格。

（2）并集选择器

并集选择器简称“集体声明”；并集选择器是多个选择器通过逗号连接而成的。

（3）后代选择器

css选择器中，还可以通过嵌套的方式对特殊位置的html 标记进行声明，例如当

与

之间包含标记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。

四CSS标签选择器

作用：根据指定的标签名，在当前界面中找到所有该名称的标签，然后设置属性。

注意点：

1. 标签选择器选定的是当前界面中所有该名称的标签，而不能单独选定某一标签；

2. 标签选择器无论标签藏得多深都能找到；

3. 只要是HTML中的标签都可以作为标签选择器。

五一、类型

font-family:字体（文字的各种不同形体，如汉字手写的楷书、行书、草书，印刷的宋体、黑体）

font-size：字体大小（字体大小是指字在屏幕或印刷介质上表现出来的大小，将每个字看作方块，按方块的对角线长度计算大小。）

font-style：字体风格（字体本身的一种规范化的特点，不同于单个字笔画的表现特点，而是所有这种字体都有的特点；比如说：黑体字就是笔画等宽、方头，结字端正。）

font-weight：字体浓淡（设置字体颜色）

font-variant：字体变量（小型大写字母）

text-transform：文本转换（切换大小写）

text-decoration：字体装饰（line-height：行高overline：上划线underline：下划线

line-through：删除线blink：闪光none：无）

二、背景

background-color:背景颜色

background-image：背景图片

background-repeat：背景重复

background-attachment：背景附着

三、区块

word-spacing：词间距

letter-spacing：字符间距

text-align：水平对齐

text-indent：文本缩进

vertical-align：垂直对齐

white-space：空白

display：显示

四、方框

width：宽度

height：高度

float：浮动（左对齐、右对齐、无）

padding：间隙

margin：边距

clear：规定元素的哪一侧不允许出现其他浮动元素

style：样式

width：宽度

color：颜色

六、列表

list-style-type：列表样式类型（用来设定列表项标记list-item-market的类型）list-style-image：列表样式图片（用来设定列表样式图片标记的地址）

list-style-position：列表样式位置（用来设定列表样式标记的位置）

position：位置

width：宽度

height：高度

visibility：规定元素是否可观（即使不可观，但仍占用空间，建议使用display来创建不占页面空间的元素）

overflow：规定当内容溢出元素框时发生的事情

placement：放置

clip：裁剪绝对定位元素

八、（图片对照）