HTML_CSS层叠样式表.ppt

CSS层叠样式表 一、什么是样式表？ 样式表是用于管理出版物外观（背景、字体、颜色等）的一种方式，可以管理一个页面乃至一个宏大的文档集，它的实质是使文档的表现形式与文档内容分离。 CSS层叠样式表 二、层叠样式表的特点 1.可以将格式和内容分离。 2.可以以前所未有的能力控制页面布局，如行距、字间距。 3.可以制作体积更小，下载更快的网页。 4.可以将许多网页同时更新，比以前更快更容易。 5.浏览器的界面更友好。 CSS层叠样式表 三、层叠样式表的类型。 1.自定义层叠样式表： 类 用户自己定义样式类型，并指定到需要使用这种样式的文字或段落上，如果定义在一整段文字上，则用标签的class属性引用，定义在部分文字上用span和/span引用。 基本语法：.名称{定义样式；} 说明：自定义层叠样式表以“.”开头，名称为用户自己定义，{}体中包括要定义的样式，每种样式以；结尾。 CSS层叠样式表 2.重定义标签的层叠样式表：标签 针对某一标签定义层叠样式表，定义的层叠样式表将只应用于选择的标签。 基本语法：标签名称{定义样式；} 说 明：样式表名称与标签同名，名称前面不用加”.”，样式列表以；分割。 CSS层叠样式表 3.层叠样式表伪类选择符 层叠样式表伪类选择符为特殊的组合标签定义层叠样式表。它是一种特殊类型的样式（常用的有4种）： A:link 设定正常状态下链接文字的样式 A:active 设定鼠标单击时链接的外观 A:visited 设定访问过的链接外观 A:hover 设定鼠标放置链接文字之上时，文字的外观。 基本语法：a:link{样式列表；} CSS层叠样式表 四：层叠样式表的基本写法。 1.在HEAD内的实现 层叠样式表一般位于HTML文件的头部，以style开关，以/style结束。 例：style type=“text/css” h1{font-size:x-large;color:red} /style CSS层叠样式表 2.在BODY内的实现 主要是在标记中引用，如h3 style=“font-size:10pt” 3.在文件外的调用 层叠样式的定义既可以在HTML文档内部，也可以单独成文件 link rel=“stylesheet” href=“style.css” type=“text/css” 五层叠样式的冲突，见书326页 丰富的样式属性 “CSS规则定义”对话框有8种模式：类型、背景、区块、方框、边框、列表、定位和扩展，这些类型分别对应着CSS语言的不同语法。 CSS类型 “类型”为浏览器窗口中页面的字体指定外观和设计。 CSS代码实现 Font-variant:small-caps; //设置英文大小写转换 Text-transform:capitalize; //控制英文文字大小写 1）使用font-variant属性可以选择所需字体的某种变形。这个属性的默认值是normal，表示字体的常规版本。也可以指定small-caps来选择字体的一个版本，在这个版本中，小写字母都会被替换为不的大写字母。 CSS类型 2）使用text-transform属性可以自动将文档的部分或全部文本换成大写或小写字母。值如下： Capitalize 将文本中每个单词的第一个字母都显示为大写。即使源文档的文本是小写的。 Uppercase和lowercase值分别以相应的状态显示所有文本。 None 会取消任何转换。 Dreamweaver可视化实现 “CSS规则定义”对话框左边“分类”选框里选“类型”----字体，“变体”和“大小写”中可以完成英文文字大小写的设置----查看源码。 CSS边框 边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。 Border-width:4px; 边框宽度 Border-color:#0099FF; 边框颜色 Border-style:double; 边框样式，值包括none（默认），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-