8、层叠样式表(CSS)课件.ppt

层叠样式表(CSS);层叠样式表（CSS）是一系列格式设置规则，它们控制 Web 页面内容的外观。 CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。;为什么需要CSS样式表;为什么需要CSS样式表;DHTML 简介;DHTML 的功能;DHTML 示例;HTML HEAD TITLE设置属性/TITLE /HEAD BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P这个段落按默认样式显示 /BODY /HTML;常用的样式属性;根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式 ;行内（嵌入）样式表;行内样式;行内（嵌入）样式表;行内（嵌入）样式表;HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css P { font-size:20px; color:blue; text-align:center } /STYLE /HEAD BODY P我是段落 1/P P我是段落 2/P P我是段落 3/P P我们的样式绝对统一/P /BODY /HTML;内嵌样式-2 选择器;样式表基本语法 ;内嵌样式-3 HTML选择器; 是使用HTML中已有的标记做选择符，使用某种标 记做选择符后，在HTML文件中，所有该标记处文 本都具有定义的CSS样式 ;/*--关键代码--*/ HEAD STYLE type=text/css P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } /STYLE /HEAD BODY H2品种特征方面：/H2 P　　 1、蛋鱼：蛋鱼…….。/P P　　 2、龙睛：龙睛……..。/P P　　 3、高头：高头….。/P;内嵌样式表;内嵌样式-4 class类选择器;class选择符 ;;内嵌样式-5 ID选择器; 在HTML???档中，有多个HTML标记设置了id的属性后，我们可以通过id的不同名称来设置多个HTML标记独一无二的样式。id名称可以自定义，但不能以数字开头。CSS样式中的id名称前面必须加上“#”符号;HEAD STYLE TYPE=text/css #fire { color:red; font-size: 24px; } /STYLE /HEAD BODY H2 ID=fire我是二级标题，火是这样的/H2 P ID =fire我是段落，火是这样的/P /BODY ;HEAD STYLE type=text/css A { /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰：无*/ } A:hover {/*鼠标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线*/ } /STYLE HEAD BODY A href=“a.htm 俺是超链接，移过来我就显示下划线/A /BODY /HTML;外部样式表文件;CSS样式应用结构;外部样式表文件;链接外部样式表;导入外部样式表;外部样式文件;三、CSS功能实现;文本属性 ;1、 CSS文字效果;c.文字颜色（ color ） 值可为颜色单词、#FFFFFF d.文字粗细（font-weight） normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置 bold : 粗体。相当于number为700。也相当于b对象的作用 bolder : IE5+　特粗体 lighter : IE5+　细体 eg:span { font-weight:800; } e.斜体（font-style） normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 eg:p { font-style: oblique; } ;STYLE type=text/