《样式表的各项属性》PPT课件.ppt

网页制作,样式表的各项属性,样式表的各项属性,字体 图文和布局 颜色和背景 定位,一、字体,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种关键字，相对应于中所用的数字参数： 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进制的表示方式： pcolor:#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.,Internet Explorer 4.0 支持的颜色.doc,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-through给文字划出删除线. blink 文字在闪烁（IE浏览器不支持） none使得上述效果都不会发生。,2、文字实例：模拟Goole公司logo,示例,3、段落实例：百度搜索,示例,二、布局,字间距 字母间距 行高 文字对齐方式 垂直对齐方式 文字缩位 顶边距、左边距等 空格填充顶部、左边等等 边框宽度、颜色、样式等 浮动 清除,1、css控制字间距和字母间距,字间距 利用字间距属性，你可以在字之间加入更 多的距离： H3 word-spacing: 1em 你所使用的参数值将加入任何浏览器的缺省设置，你可以使用我们昨天谈到的任何 一种长度单位： in （英寸） cm （厘米） mm （毫米） pt （点数） pc （打字机字间距） em （ems） ex (x-height) px （象素）,字母间距 H3 letter-spacing: 10px ,2、css行距,行高 行高可以控制行与行之间的垂直距离。 B line-height: 16pt 设定行高的方法： 长度单位 B font-size: 12pt; line-height: 11pt 比例 B font-size: 10pt; line-height: 140% ,3、css文字对齐,文字对齐 利用文字对齐属性，你可以控制段落的水平 对齐： H4 text-align: center 这项属性只用于整块的内容，如、 -、和 。 以下为各种选项： left指将要素左对齐，如本段所示。 center指将要素居中，如本段所示。 justify指将要素左右对齐，如本段所示。,4、垂直对齐方式： vertical-align,示例,5、首字放大（float）,首字放大（float） H4 float: left ,6、css边距及空格填充,box包括： 要素本身 围绕要素的空格填充（padding） 围绕空格填充的边框（border） 围绕边框的边距（空白margin） 图示如下： 你可以分别控制空格填充、边框和边距,顶边距、底边距、左边距和右边距 这4项属性可以使你控制一个要素的四周 的边距。如下： H4 margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px ,7、css边框,顶边框宽度，底边框宽度，左边框宽度和 右边框宽度 你可以控制整个边框的宽度，也可以分别 控制每一边的边框宽度： H4 border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px ,边框颜色 例：P border-color: green; border-width: 3px 边框样式 例： P border-style: double; border-width: 3px 可以使用的关键字参数值如下： solid double dotted dashed groove ridge inset outset,三、背景,背景色 背景图象 重复背景 固定背景 背景定位 背景,1、背景色,背景色 利用CSS在网页要素后面加入固定的背景色 及图象。 P.yellow background-color: #FFFF66 ,2、背景图象,背景图象 你可以很轻松地将GIF或JPEG图象加到一个要 素后面： B background-image: url(background.gif) ,3、控制背景图象,背景重复(background-repeat) P background-repeat: no-repeat; background-image: url(background.gif) 如果你只想让图象垂直或者水平方向平铺，你 可以使用repeat-x将其水平平铺，用repaet-y 将其垂直平铺。而repeat参数值则将图象从水 平和垂直两个方向平铺。,固定背景（backgroundattachment） BODY background-attachment: fixed; background-image: url(background.gif) 其参数有两种选择： scroll指背景图象随文字内容一起滚动， 即通常所见的方式。 fixed指文字滚动时，背景图象保持固 定。,背景定位(background-position) 你可以设定将背景插在什么位置显示。 P background-position: center bottom; background-image: url (background.gif) ,设定位置的3种方法：,关键字参数（Keyword values） 关键字设定方法简便易用： top将背景图象同前景要素的顶部 对齐。 bottom将其同前景要素的底部对 齐。 left将其同左边对齐。 right将其同右边对齐。 center将其水平居中（如果使用在 另一关键字前面）或垂直居中（如 果用在另一关键字后面）。 长度参数 你可以设定水平和 垂直定位起点， 例：P background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) 比例值（Percentage values） 例：P background-position: 75% 50%; background-image: url