样式表的各项属性优秀培训书.pptVIP

网页制作 样式表的各项属性 样式表的各项属性 字体 图文和布局 颜色和背景 定位 一、字体 1、CSS文字样式 1.1 字体 1.2 文字大小 1.3 文字颜色 1.4加重字体和斜体字的各种CSS方式 1.5文字的CSS特殊效果 2、文字实例：模拟Goole公司logo 3、CSS段落文字 4、段落实例：百度搜索 1.1 字体 在CSS中通过font-family来控制文字的字体。 h2{ font-family:黑体, 幼圆; } 1.2 文字大小 使用font-size 属性，你可以对文字的尺寸进行无限的控制。 确定这的3种基本方法： 1）Points, ems, pixels, 及其它单位 P { font-size: 16pt } B { font-size: 1.5em } /* 在父标记的基础上×0.5 */ P { font-size: 20px } /* 象素，因此实际显示大小与分辨率有关，很常用的方式 */ 其它单位：如果上述单位仍然不符合你的要求， 请试试这些单位： in （英寸） cm （厘米） mm （毫米） pc （打字机字型尺寸单位） 1.2 文字大小 2）关键字 如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例：P { font-size: large } 有7种关键字，相对应于FONTSIZE中所用的数字参数： xx-small x-small small medium large x-large xx-large 1.2 文字大小 3）比例参数 设定文字尺寸的第3种办法就是使用比例参数，例： B { font-size: 300% } /* 在父标记的基础上200% */ 1.3 文字颜色 控制文字颜色时统一使用color属性。而颜色的表示方法有很多种： 第1种采用RGB颜色表示，如： h2{ color:rgb(51,204,0); } RGB的数值范围从0到255，R代表红色， G代表绿色，B代表蓝色 第2种采用16进制的表示方式： p{color:#333333;} 第3种采用预定义的关键字，如blue p span{ color:blue; } 颜色名称 16种基本色为aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. 1.4加重字体和斜体字的各种CSS方式 1)字体风格font-style是用来控制斜体字的属性： 语法： font-style : normal | italic | oblique 参数：normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 示例：H3 { font-style: italic } 1.4加重字体和斜体字的各种CSS方式 2)字重font-weight（设置文本字体的粗细）：利用字重属性，可以创造出一系列新的加重字体。 语法： font-weight : normal | bold | bolder | lighter | number 参数： normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置 bold : 粗体。相当于number为700。也相当于b对象的作用 bolder : IE5+　特粗体 lighter : IE5+　细体 number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 示例：P { font-weight: bold } 1.5文字的CSS特殊效果 1）文字变形（text-transform）：这项属性可以使你轻而易举地控制字母大写。基本代码： B { text-transform: uppercase } 以下为所有可用的参数： uppercase 使所有字母大写显示 lowercase使所有字母小写显示 capitalize 使每个单词的第1个字母大写显示. none 使所有继承的文字变形参数被忽略，文字将以正常形式显示。 1.5文字的CSS特殊效果 2）文字修饰（text-decoration)。 其基本语法如下： B { text-decoration: underline } 以下为所有可用的参数： underline 给文字下划线， overline给文字上划线， line-thro