0_2CSS样式表课件.ppt

WEB基础 单元目标 网页的基础概念 Web标准 构造CSS规则 基本CSS选择器 在网页中添加CSS的方法 复合选择器 CSS的继承特性 背景样式的控制 文本样式的控制 图像样式的控制 网页中的导航 超级链接的控制 鼠标指针的控制 列表的控制 表格的控制 表单元素的控制 1.1 网页的基础概念 1.2.1 标准的重要性 网页相关的技术走入实用阶段仅短短十几年的时间，就发生了很多重要的变化。 其中最重要的一点是“Web标准”这一理念被广泛地接受。 1.2.2 “Web标准”概述 下面介绍关于网页的标准——“Web标准”。 网页主要由3个部分组成： 结构（Structure） 表现（Presentation） 行为（Behavior） 用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。 1.2.2 “Web标准”概述 由于传统的图书是固定的，不能变化的，因此它不存在“行为”。 在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。 每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。 网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。 1.2.2 “Web标准”概述 因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。 “结构”、“表现”和“行为”分别对应于3种非常常用的技术，即?(X)?HTML、CSS和JavaScript。 也就是说，(X)?HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。 1.4.1 CSS选择器的构成 1.4.2 标签选择器 h1{ color: red; font-size: 25px; } 1.4.3 类选择器 .red{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } 网页中调用：p class=“green”class选择器/p 1.4.4 ID选择器 #green{ font-size:30px; /* 字体大小 */ color:yellow; /* 颜色 */ } 网页中调用：p id=yellowID选择器/p 1.5.1 行内样式 行内样式是把样式表作为标签的属性直接书写在标签内部。 body bgcolor=#FFFFFF p关于层叠样式表/p p style=font-style:italic;color:blue;font-size: 12pt;br 层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 /p /body 1.5.2 内嵌样式 内嵌样式是把样式表作为一对“style”标签写在”head”标签内部。 head style type=text/css !-- body { font-family: 宋体; font-size: 12pt; color: #FF0000; } -- /style /head 1.5.3 链接样式 链接样式是把样式表作为个外部的css文件保存，并且使用“link”标签链接到当前页面中。 head meta http-equiv=Content-Type content=text/html; charset=gb2312 title什么是IP地址/title meta name=GENERATOR content=Microsoft FrontPage 3.0 link href=css/fontcolor.css rel=stylesheet type=text/css /head 1.5.4 导入样式 导入样式是把样式表作为个外部的css文件保存，并且使用“import”属性链接到当前页面中，也可以在一个样式表中导入多个其他的样式表文件。 @import url(sheet2.css); @import url(sheet2.css); @import url(sheet2.css); @import sheet2.css; @import