HTML_CSS层叠样式表.ppt

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

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

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

3、ink设定正常状态下链接文字的样式A:active设定鼠标单击时链接的外观A:visited设定访问过的链接外观A:hover设定鼠标放置链接文字之上时，文字的外观。基本语法：a:link{样式列表；}CSS层叠样式表四：层叠样式表的基本写法。1.在HEAD内的实现层叠样式表一般位于HTML文件的头部，以结束。例：h1{font-size:x-large;color:red}CSS层叠样式表2.在BODY内的实现主要是在标记中引用，如

4、ont-size:10pt”>3.在文件外的调用层叠样式的定义既可以在HTML文档内部，也可以单独成文件五层叠样式的冲突，见书326页丰富的样式属性“CSS规则定义”对话框有8种模式：类型、背景、区块、方框、边框、列表、定位和扩展，这些类型分别对应着CSS语言的不同语法。CSS类型“类型”为浏览器窗口中页面的字体指定外观和设计。CSS代码实现Font-variant:small-caps;//设置英文大小写转换Text-transform:capi

5、talize;//控制英文文字大小写1）使用font-variant属性可以选择所需字体的某种变形。这个属性的默认值是normal，表示字体的常规版本。也可以指定small-caps来选择字体的一个版本，在这个版本中，小写字母都会被替换为不的大写字母。CSS类型2）使用text-transform属性可以自动将文档的部分或全部文本换成大写或小写字母。值如下：Capitalize将文本中每个单词的第一个字母都显示为大写。即使源文档的文本是小写的。Uppercase和lowercase值分别以相应的状态显示所有文本。None会取消任何转换。Dreamwea

6、ver可视化实现“CSS规则定义”对话框左边“分类”选框里选“类型”----字体，“变体”和“大小写”中可以完成英文文字大小写的设置----查看源码。CSS边框边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。Border-width:4px;边框宽度Border-color:#0099FF;边框颜色Border-style:double;边框样式，值包括none（默认），dotted，dashed，solid，double，groove，ridge，inset和outset。Dreamweaver可视化实现.img样式----边框----宽

7、度，颜色----查看源码。CSS区块CSS代码实现Word-spaing:2em;定义一个附加在单词之间的间隔数量Text-align:center;设置文本的水平对齐方式，包括左对齐，右对齐，居中，两端对齐。Text-indent:1em;文字的首行缩进1）使用word-spacing属性可在一个标签内的之间添加空格，可以指定一个长度值，或者用关键字normal来恢复到正常字间距。2）text-align的4个值：leftrightcenterjustifyDreamweaver可视化实现区块----“单词间距”“文本对齐”“缩进”----查看源码。

8、CSS方框2）clear属性设置每节的第一个元素，以禁止浮动元素在它的旁边出现，如果它被设置为