样式表的各项属性课件

1、样式表的各项属性网页制作样式表的各项属性样式表的各项属性样式表的各项属性样式表的各项属性 l字体 l图文和布局 l颜色和背景 l定位 样式表的各项属性一、字体 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来控制文字的字体。h2font

2、-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.

3、2 文字大小文字大小2）关键字）关键字 如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例：P font-size: large 有7种关键字，相对应于中所用的数字参数： xx-small x-small small medium large x-large xx-large 样式表的各项属性1.2 文字大小文字大小3）比例参数）比例参数 设定文字尺寸的第3种办法就是使用比例参数，例： B font-size: 300% /* 在父标记的基础上200% */样式表的各项属性1.3 文字颜色文字颜色 控制文字颜色时统一使用color属性属性。而颜色的表示方法有很多种： 第1种采用RG

4、B颜色表示，如：h2 color:rgb(51,204,0); RGB的数值范围从0到255，R代表红色， G代表绿色，B代表蓝色 第2种采用16进制的表示方式：pcolor:#333333; 第3种采用预定义的关键字，如bluep span color:blue; 颜色名称 16种基本色为aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.Internet Explorer 4.0 支持的颜色支持的颜色.doc 样式表的

5、各项属性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（设置文本字体的粗细设置文本字体的粗细）：）：利

6、用字重属性，可以创造出一系列新的加重字体。 语法：语法： 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 样式表的各

7、项属性1.5文字的文字的CSS特殊效果特殊效果 1）文字变形）文字变形（text-transform）：这项属性可以使你轻而易举地控制字母大写。基本代码： B text-transform: uppercase 以下为所有可用的参数： uppercase 使所有字母大写显示 lowercase使所有字母小写显示 capitalize 使每个单词的第1个字母大写显示. none 使所有继承的文字变形参数被忽略，文字将以正常形式显示。样式表的各项属性1.5文字的文字的CSS特殊效果特殊效果 2）文字修饰（）文字修饰（text-decoration)。 其基本语其基本语法如下：法如下： B text

8、-decoration: underline 以下为所有可用的参数： underline 给文字下划线， overline给文字上划线， line-through给文字划出删除线. blink 文字在闪烁（IE浏览器不支持） none使得上述效果都不会发生。 样式表的各项属性2、文字实例：模拟、文字实例：模拟Goole公司公司logo示例样式表的各项属性3、段落实例：百度搜索、段落实例：百度搜索 示例样式表的各项属性二、布局二、布局l字间距 l字母间距 l行高 l文字对齐方式 l垂直对齐方式 l文字缩位 l顶边距、左边距等 l空格填充顶部、左边等等 l边框宽度、颜色、样式等 l浮动 l清除 样

9、式表的各项属性1、css控制字间距和字母间距控制字间距和字母间距 l字间距 l利用字间距属性，你可以在字之间加入更 多的距离： lH3 word-spacing: 1em l你所使用的参数值将加入任何浏览器的缺省设置，你可以使用我们昨天谈到的任何 一种长度单位： lin （英寸） lcm （厘米） lmm （毫米） lpt （点数） lpc （打字机字间距） lem （ems） lex (x-height) lpx （象素） 样式表的各项属性l字母间距 lH3 letter-spacing: 10px 样式表的各项属性2、css行距行距 l行高 行高可以控制行与行之间的垂直距离。 lB lin

10、e-height: 16pt l设定行高的方法： l长度单位 B font-size: 12pt; line-height: 11pt l比例 B font-size: 10pt; line-height: 140% 样式表的各项属性3、css文字对齐文字对齐l文字对齐 l利用文字对齐属性，你可以控制段落的水平 对齐： lH4 text-align: center l这项属性只用于整块的内容，如、 -、和 。 l以下为各种选项： lleft指将要素左对齐，如本段所示。指将要素左对齐，如本段所示。lcenter指将要素居中，如本段所示。指将要素居中，如本段所示。ljustify指将要素左右对齐，

11、如本段所示。指将要素左右对齐，如本段所示。样式表的各项属性4、垂直对齐方式：、垂直对齐方式： vertical-align l示例样式表的各项属性5、首字放大（、首字放大（float）l首字放大（首字放大（float）lH4 float: left 样式表的各项属性6、css边距及空格填充边距及空格填充 lbox包括： l要素本身 l围绕要素的空格填充（padding） l围绕空格填充的边框（border） l围绕边框的边距（空白margin） l图示如下： l l你可以分别控制空格填充、边框和边距样式表的各项属性l顶边距、底边距、左边距和右边距 这4项属性可以使你控制一个要素的四周 的边距。

12、如下： lH4 margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px 样式表的各项属性7、css边框边框 l顶边框宽度，底边框宽度，左边框宽度和 右边框宽度l你可以控制整个边框的宽度，也可以分别 控制每一边的边框宽度： lH4 border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px 样式表的各项属性l边框颜色 l例：P border-color: green;

13、 border-width: 3px l边框样式 l例： P border-style: double; border-width: 3px l可以使用的关键字参数值如下： lsolid ldouble ldotted ldashed lgroove lridge linset loutset 样式表的各项属性三、背景三、背景l背景色 l背景图象 l重复背景 l固定背景 l背景定位 l背景 样式表的各项属性1、背景色、背景色 l背景色 l利用CSS在网页要素后面加入固定的背景色 及图象。 lP.yellow background-color: #FFFF66 样式表的各项属性2、背景图象、背景

14、图象 l背景图象背景图象 你可以很轻松地将GIF或JPEG图象加到一个要 素后面： lB background-image: url(background.gif) 样式表的各项属性3、控制背景图象、控制背景图象 l背景重复(background-repeat) lP background-repeat: no-repeat; background-image: url(background.gif) l如果你只想让图象垂直或者水平方向平铺，你 可以使用repeat-x将其水平平铺，用repaet-y 将其垂直平铺。而repeat参数值则将图象从水 平和垂直两个方向平铺。样式表的各项属性l固定

15、背景（backgroundattachment）lBODY background-attachment: fixed; background-image: url(background.gif) l其参数有两种选择： lscroll指背景图象随文字内容一起滚动， 即通常所见的方式。 lfixed指文字滚动时，背景图象保持固 定。 样式表的各项属性l背景定位(background-position)l你可以设定将背景插在什么位置显示。 lP background-position: center bottom; background-image: url (background.gif) 样式表

16、的各项属性设定位置的设定位置的3种方法：种方法：l关键字参数（Keyword values） 关键字设定方法简便易用： ltop将背景图象同前景要素的顶部 对齐。 lbottom将其同前景要素的底部对 齐。 lleft将其同左边对齐。 lright将其同右边对齐。 lcenter将其水平居中（如果使用在 另一关键字前面）或垂直居中（如 果用在另一关键字后面）。 l长度参数 你可以设定水平和 垂直定位起点，l例：P background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) l比例值（Percentage values） l例：P background-position: 75% 50%; bac