级联样式表 下载本文

级联样式表

一:选择符:

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。分别是左对齐、右对齐、居中对齐和两段对齐。 十八:文本装饰: