内容发布更新时间 : 2024/5/18 16:42:44星期一 下面是文章的全部内容请认真阅读。

级联样式表

一：选择符：

1. 类别选择符：类别选择符将样式表规则指定给class 属性的html元素；例如：

p.test{ 规则1; 规则2； …… }

类别选择符是一个点号，将元素名称与类别名称通过点号连接起来。如上例所示； 2. id选择符：使用id选择符指定的规则只能使用在一个元素上。不能对不同的元素

取相同的id名字；例如： td#aa{ 规则1； 规则2； …… }

上述规则对所有的单元格且id为aa的单元格生效；

3. 群选择符：使用群选择符可以同时对多个html元素使用同一套规则；多个html元

素名称之间使用逗号分隔开；例如： P,h1,h2{ 规则1； 规则2； …… }

上面那条css规则将对网页上的所有p、h1、h2元素生效；

4. 还有一种情况是不使用选择符，而直接在一条规则前面使用html元素的名字，这

样的一条规则将会对页面上的所有该类型元素生效；

二：优先级：

默认情况下，对于大多数浏览器都是将css规则优先于html规则；局部规则优先于全局规则；css规则可以继承，如果对子元素没有指定规则，则默认继承父元素的规则。 三：html元素布局：

默认情况下，每个html元素都是一个块：这个块有边框、填充、和内容三部分组成，如图1所示：

补充说明：在css规则中，可以对每一个html元素的填充大小、边框宽度、边界距进行设置，甚至可以对上下左右的值进行不同的设置，以达到预期的效果： 边框宽度属性：border-width; 边框颜色：border-color;

边框风格：border-style: 这个属性有几个值，用的时候可以查一下。不同的值可以做出不同的边框效果。默认值是none；

图 1. 元素布局

四：边框属性：

1. border-width;设置整个元素的边框宽度 2. border-top-width:设置元素的上部边框宽度 3. border-left-width:边框的左边宽度 4. border-right-width：边框的右边宽度 5. border-bottom-width:边框下部宽度 6. border-color:边框颜色 7. border-style:边框风格 五：边界距：

1. margin：设置整个元素的边界距； 2. margin-top:元素上方边界距 3. margin-bottom:元素下方边界距 4. margin-left：元素左侧边界距 5. margin-right:元素右侧边界距 六：填充属性：

1. padding：设置整个元素上下左右的填充大小，也就是内容与边框的距离； 2. padding-top：上方填充的距离 3. padding-bottom:下方填充的距离 4. padding-left：左侧填充的距离 5. padding-right:右侧填充的大小 七：元素背景：

1. background-image:url(……); 背景图片 2. background-color:背景颜色

3. background-repeat:背景重复（这是默认值） 4. background-no-repeat:背景不重复 5. background-x:仅平行重复

6. background-y：仅垂直重复； 7. background-none：无背景图片； 8. background-inherit:继承父值；

八：背景附着：此属性设置网页元素背景是否随着网页滚动！ Background-attachment:

该属性有三个值：分别是fiexd(不动背景)、scroll（滚动背景）、inherit（继承父元素的此属性值，默认是不滚动）

九：背景定位：指定背景图片在网页中的展示位置：

Background-position:使用具体的数值或者是百分比定位，也可以使用例如top、center、bottom、left、right等值来指定位置。可以有多个值；例如right,bottom指定图片在网页右下角显示；

十：字体：font-family:value1,value2; 这个属性用于设置网页元素的字体，可以为该属性指定多个值，各个值之间使用逗号隔开，客户端浏览器会根据设置的字体依次查找，如果客户端计算机上安装了第一个字体值则使用第一个字体显示，否则依次查找判断。如果所指定的字体在客户端电脑上都没有安装，则使用默认字体显示； 十一：字体风格：

Font-style:控制字体是否斜体显示：该属性有三个值，分别是：oblique、Italic、normal；具体含义忘了，用的时候再查吧！！ 十二：字体粗细：font-weight:

该属性的默认值是normal，有几个指定的值，比如bold、bolder、lighter等，还可以使用1到900之间的数值设置粗细层度；

十三：字体大小：font-size:可以使用 数值进行相应的设置，单位可以使cm、mm、px、pt等；

十四：行间距属性：line-height:这个属性设置行与行之间的垂直距离：单位可以使像素或者其他长度单位；

十五：字体变量：font-variant:这个属性可以将网页元素上的文本进行大小写转换；有如下几个值：normal（这是默认值，不进行转换）、small-caps（将所有的小写字母转换成大写，而原来的大写字母会变得更大）、

十六：文本缩进：text-indent:可以使用具体数值和百分比对缩进的大小进行设置，这是对每段的首行进行缩进，也可以设置成负值；

十七：文本对齐：text-align：该属性有四个值，left、right、center、justify。分别是左对齐、右对齐、居中对齐和两段对齐。 十八：文本装饰：