HTML_CSS层叠样式表.ppt

1、样式表,CSS层叠样式表,一、什么是样式表？ 样式表是用于管理出版物外观（背景、字体、颜色等）的一种方式，可以管理一个页面乃至一个宏大的文档集，它的实质是使文档的表现形式与文档内容分离。,CSS层叠样式表,二、层叠样式表的特点 1.可以将格式和内容分离。 2.可以以前所未有的能力控制页面布局，如行距、字间距。 3.可以制作体积更小，下载更快的网页。 4.可以将许多网页同时更新，比以前更快更容易。 5.浏览器的界面更友好。,CSS层叠样式表,三、层叠样式表的类型。 1.自定义层叠样式表： 类 用户自己定义样式类型，并指定到需要使用这种样式的文字或段落上，如果定义在一整段文字上，则用标签的clas

2、s属性引用，定义在部分文字上用和引用。 基本语法：.名称定义样式； 说明：自定义层叠样式表以“.”开头，名称为用户自己定义，体中包括要定义的样式，每种样式以；结尾。,CSS层叠样式表,2.重定义标签的层叠样式表：标签 针对某一标签定义层叠样式表，定义的层叠样式表将只应用于选择的标签。 基本语法：标签名称定义样式； 说 明：样式表名称与标签同名，名称前面不用加”.”，样式列表以；分割。,CSS层叠样式表,3.层叠样式表伪类选择符 层叠样式表伪类选择符为特殊的组合标签定义层叠样式表。它是一种特殊类型的样式（常用的有4种）： A:link 设定正常状态下链接文字的样式 A:active 设定鼠标单击

3、时链接的外观 A:visited 设定访问过的链接外观 A:hover 设定鼠标放置链接文字之上时，文字的外观。 基本语法：a:link样式列表；,CSS层叠样式表,四：层叠样式表的基本写法。 1.在HEAD内的实现 层叠样式表一般位于HTML文件的头部，以开关，以结束。 例： h1font-size:x-large;color:red ,CSS层叠样式表,2.在BODY内的实现 主要是在标记中引用，如 3.在文件外的调用 层叠样式的定义既可以在HTML文档内部，也可以单独成文件 五层叠样式的冲突，见书326页,丰富的样式属性,“CSS规则定义”对话框有8种模式：类型、背景、区块、方框、边框、

4、列表、定位和扩展，这些类型分别对应着CSS语言的不同语法。,CSS类型,“类型”为浏览器窗口中页面的字体指定外观和设计。 CSS代码实现 Font-variant:small-caps; /设置英文大小写转换 Text-transform:capitalize; /控制英文文字大小写 1）使用font-variant属性可以选择所需字体的某种变形。这个属性的默认值是normal，表示字体的常规版本。也可以指定small-caps来选择字体的一个版本，在这个版本中，小写字母都会被替换为不的大写字母。,CSS类型,2）使用text-transform属性可以自动将文档的部分或全部文本换成大写或小写

5、字母。值如下： Capitalize 将文本中每个单词的第一个字母都显示为大写。即使源文档的文本是小写的。 Uppercase和lowercase值分别以相应的状态显示所有文本。 None 会取消任何转换。 Dreamweaver可视化实现 “CSS规则定义”对话框左边“分类”选框里选“类型”-字体，“变体”和“大小写”中可以完成英文文字大小写的设置-查看源码。,CSS边框,边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。 Border-width:4px; 边框宽度 Border-color:#0099FF; 边框颜色 Border-style:double; 边框样式，值包括n

6、one（默认），dotted，dashed，solid，double，groove，ridge，inset和outset。 Dreamweaver可视化实现 .img样式-边框-宽度，颜色-查看源码。,CSS区块,CSS代码实现 Word-spaing:2em; 定义一个附加在单词之间的间隔数量 Text-align:center; 设置文本的水平对齐方式，包括左对齐，右对齐，居中，两端对齐。 Text-indent:1em; 文字的首行缩进 1）使用word-spacing属性可在一个标签内的之间添加空格，可以指定一个长度值，或者用关键字normal来恢复到正常字间距。 2）text-ali

7、gn的4个值：left right center justify Dreamweaver可视化实现 区块-“单词间距”“文本对齐”“缩进”-查看源码。,CSS方框,2）clear属性设置每节的第一个元素，以禁止浮动元素在它的旁边出现，如果它被设置为与浮动元素相邻则它下沉至低于浮动元素为止。 3）不同的padding属性控制不同元素周围的补白区域，也就是元素内容区和边框之间的区域。Padding-left，padding-right，padding-top和padding-boton属性都接受长度或百分比值，指定元素周围要保留多少空白。 Dreamweaver可视化实现 Img样式-方框-“宽”

8、“高”“浮动”“清除”“边界”设置空间-查看源码。,CSS方框,CSS代码实现 Float:right; 让文字环绕在一个元素的四周 Clear:right; 指定在某一个元素的某一边是否允许有环绕的文字和对象。 Width:400px; 设置对象的宽度 Height:400px; 设置对象的高度 Padding:20px; 决定了究竟在边框与内容之间应该插入多少空间距离。 1）float属性将标签的显示空间指定为一个浮动元素并使文本按一定方式环绕它排列。总的说来，它与图像和表格的align属性类似，但可以用到任何元素上，float属性接受以下3个值之一：left，right和none（默认值）。,CSS扩展,CSS代码实现 Cursor:wait; 设定鼠标光标，当将鼠标移动到链接上时，可以看到多种不同的效果。 CSS扩展设置影响着3个不同的领域：打印分布，用户的指针和滤镜。 Dreamweaver可视化实现 Body样式-扩展-“光标”改变鼠标形状-查看源码。 ,CSS列表,CSS代码实现 List-style-type:disc; 设置引导列表项目的符号类型，决定了有序和无