第四讲CSS(层叠样式表)

《第四讲CSS(层叠样式表)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS样式CSS（CascadingStyleSheets，层叠样式表）是一种应用于网页的标记语言，其作用是用于控制网页的布局格式和网页内容的样式。CSS代码由选择器和声明两部分组成格式：Selector{Declaration}Selector:选择器，该参数的作用是规定当前CSS代码定义的网页中哪一部分内容。Declaration:声明，该参数的作用是定义网页对象的样式属性。声明格式：property:valueproperty属性：表示描述的样式类别value属性值：表示描述样式的具体参数。新建CSS样式步一、“窗口”｜“C

2、SS样式”（Shift+F11)步二、从CSS样式面板上单击新建按钮步三、弹出的对话框如下：CSS选择器类型：（1）类选择器（命名方式：“.+名称”，名称由英文和数字组成）（2）ID选择器（命名方式：#名称）（3）标签选择器（4）复合内容（如伪类选择器，伪对象指定选择器）规则定义：（1）新建样式表文件，会新建一个样式表文件，可用于多个文档（2）仅限该文档：只能应用于当前文档。CSS选择器——复合内容1)伪类选择器伪类选择器是设置网页对象在某种状态下的样式。格式如下：Selector:pseudo-class{property:va

3、lue;}/*选择器：伪类{属性：属性值;}*/CSS样式规则中的伪类选择器伪类作用Active设置带有超链接的对象在被激活（鼠标按下且未释放时）的样式Focus设置带有超链接的对象在被tab键选中时的样式Hover设置带有超链接的对象在被鼠标滑过时的样式Link设置带有超链接的对象在未被访问时的样式Visited设置带有超链接的对象已被访问后的样式CSS选择器——复合内容first-child设置对象的第一个子对象的样式（例如，文本段落中第一个字或字母）Lang设置网页中某对象的语言注：在CSS定义中，hover必须在link和

4、visited之后才可生效，而active必须被置于hover之后才可生效，在IE7.0版本之前只支持超链接标签使用伪类选择器。2）伪对象指定选择器伪对象指定选择器是设置网页对象某一部分的样式。使用方法和伪类选择器相同。例如设置段落的第一个字符字体大小为16号，其属性代码如下：p:first-letter{font-size:16px;}伪对象作用first-letter设置文本对象的第一个字或字母的样式first-line设置文本对象的第一行文本的样式Before与content属性一起使用，设置在对象前（依据对象树的逻辑

5、结构）发生的内容After与content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容CSS规则定义一1、类型属性：主要用来定义文字的字体、大小、样式、颜色等属性。2、背景属性：主要用来定义页面的背景颜色或背景图像。3、区块属性：主要用来定义文字间距和对齐方式。4、方框属性：主要用来定义元素在页面中的位置。5、边框属性：用来定义元素边框的宽度、颜色和样式等。6、列表属性：主要用来定义列表各种属性。如列表项目符号、位置等。7、定位属性：主要用来定义层的大小、位置、可见性、溢出方式、剪辑等属性。CSS规则定义一8、扩展

6、属性1)定义光标。步一、选择新建CSS样式，选择标签：body。步二、选择扩展样式，光标类型，随便选择一个确定。2)CSS滤镜：主要用于图像处理。a)Alpha滤镜：设置网页对象的透明度（可以设置渐变透明）b)Blendtrans滤镜:设置混合过渡效果c)Blur滤镜：为网页中的对象添加模糊效果d)Chorma滤镜：设置网页图像对象中某颜色为透明e)DropShadow滤镜:设置投影效果f)FeipH和FeipV滤镜：用于将网页中的对象水平和垂直翻转CSS规则定义一g)Glow滤镜：设置发光效果h)Gray滤镜：设置灰度效果i)I

7、nvert滤镜：把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值j)Light滤镜：设置灯光投影效果k)Mask滤镜：设置遮罩效果l)Shadow滤镜：设置阴影效果m)Wave滤镜：设置水平与垂直波动效果n)Xray滤镜：设置X光照效果CSS规则定义一o)RevealTrans效果：设置显示过渡效果。网上很多JavaScript设计的图像展示和切换都使用这个滤镜。语法：Filter:revealtrans(duration=转换的秒数，transition=转换的类型）表达式中的transition参数的参数值有24中，以代号

8、0-23来表示，分别代表24中显示类型。CSS选择方式1)通配选择,通配选择允许使用星号（*）来替代网页文档中所有的元素。例如：为网页中所有对象去除边框，其代码如下：a{border:0px;}img{border:0px;}td{border:0