第8部分 CSS属性设置

《第8部分 CSS属性设置》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第8部分CSS属性8.1CSS属性单位8.2设置字体样式8.3控制图文布局8.4颜色及背景8.5网页美化与超链接8.6CSS定位和CSS滤镜8.1CSS属性单位长度单位：CSS中用于描述长度的单位如下表所示。符号意义符号意义cm厘米in英寸，1in=2.54cmmm毫米pt点(磅)，1pt=1/72inem当前字体中m字母的宽度pc皮卡，1pc=12ptex当前字体中x字母的宽度px像素8.1CSS属性单位百分比单位：百分比值中有可选的“+”或“-”号，以“%”结束，“+”可省略，但不可以有空格。百分比值

2、是一个相对值，总是相对于其它值来说的。例如，P{line-height:150%;}，表示段落中文字的高度为标准行高的1.5倍。8.1CSS属性单位颜色(值/单位)：有颜色名、十六进制、十进制和百分比四种颜色定义法。颜色名称。例如red、blue等。十六进制。格式为#rrggbb，如#995522。十进制。格式为rgb(x,y,z)，x、y、z为0~255间的整数，例如rgb(255,0,0)。百分比。格式为rgb(x%,y%,z%)，x、y、z为0~100间的整数，例如rgb(100%,0%,0%)。8

3、.2设置字体样式8.2.1字体属性8.2.1.1font-family(字体系列)8.2.1.2font-size(字体大小)8.2.1.3font-style(文字风格)8.2.1.4font-variant(字形变体)8.2.1.5font-weight(字体粗细)8.2.1.6font(字体)8.2.2text-decoration(文字修饰)8.2.1.1font-family(字体系列)用于设置用何种字体系列来显示文字，可以为文字指定一种或多种字体，属性值是用逗号分隔的字体名称列表，如：p{fo

4、nt-family:"Arial",华文彩云,黑体,楷体}浏览器会由前向后依次查找系统是否安装此字体。若都未安装，则用默认字体显示。本节目录8.2.1.2font-size(字体大小)该属性用于定义字体的大小。例如P{font-size:30pt;}P{font-size:200%;}P{font-size:large;}P{font-size:larger;}P{font-size:+5pt;}CSS共支持用5种方式表示字体大小。分别是长度(磅)值、百分比值(相对默认字体)、绝对大小、相对大小(相对上一

5、元素)和增大值。本节目录8.2.1.3font-style(文字风格)使用该属性可以使文字产生斜体效果，属性值为italic(斜体)或oblique(倾斜)时，都能产生斜体，很难区分其差别，可任选其一，例如P{font-style:oblique}若不想产生斜体效果，可以取默认属性值normal，或干脆不使用本属性。本节目录8.2.1.4font-variant(字体变形)此属性的默认值也是normal，表示不作变形，若指定其值为small-caps，则小写字母都变形为小型的大写字母，如p{font-va

6、riant:small-caps}…

abcABC效果如图本节目录8.2.1.5font-weight(字体粗细)本属性用于控制字体的粗细(注意和大小相区别)，默认值也是normal。可指定其值为100~900之间并且是100的倍数的数字，共9种不同的粗细。也可以使用关键字，其中normal对应400，bold对应700，bolder和lighter分别表示比上一级元素中的字体的该值增加或减少100。例如：p{font-weight:bold}p{font-weight:700}Q：能否一次性简洁地设

7、置出各种字体属性呢？本节目录8.2.1.6font(字体)一次性设置前面介绍的各种字体属性。各属性值之间以空格分隔，但font-size和line-height值之间以“/”分隔。可以缺省某些值，但存在的值必须按font-style、font-variant、font-weight、font-size/line-height和font-family的顺序书写。font-family的值包含多个字体系列，则各系列之间以逗号分隔，如果某系列名称中含有空格，则它要用双引号括起来。本节目录8.2.2text-de

8、coration(文字修饰)该属性可以对文本设置各种修饰效果，其取值为：underline(下划线)、overline(上划线)、line-through(删除线)、blink(闪烁)和none(无)中的一个或多个，例如：p{text-decoration:underlineline-through;}它产生的效果是给文字加上下划线和穿越线，如图所示本节目录8.3控制图文布局8.3.1字间距与行间距8.3.2文字对齐8.3.3