7-3.3 课程教学课件(css样式表).ppt

CSS样式表 一、CSS概述 CSS：Cascading Style Sheets，“层叠样式表”，简称样式表，它是一种制作网页的新技术。 1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本。 W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。 用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。 使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 二、语法 1.CSS的定义是由三个部分构成： 选择符（selector） 属性（properties） 属性的取值（value） 基本格式如下： selector {property: value} 选择符 {属性：值} 例如： body {color: black} 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合： p {font-family: sans serif} 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开： p {text-align: center; color: red} （段落居中排列；并且段落中的文字为红色） 采用分行的书写格式 例1：1.htm p { text-align: center; color: black; font-family: arial } 2.引用方法 在head…/head之间 head style type=text/css !-- p { text-align: center; color: blue; font-family: arial } -- /style /head 3.选择符组 把相同属性和值的选择符组合起来书写，用逗号将选择符分开，减少重复定义 如： h1, h2, h3, h4, h5, h6 { color: green } p, table{ font-size: 9pt } 4.类选择符 把相同的元素分类定义不同的样式，定义类选择符时，在自定义类的名称前面加一个点号。 两个不同的段落，一个段落向左对齐，一个段落居中： p.left {text-align: left} p.center {text-align: center} 引用： p class=“left”这是第一段/p p class=“center”这是第二段/p 在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式： .center {text-align: center} （定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。 如：p class=center 5.ID选择符 ID参数指定了某个单一元素，用来对单一元素定义单独的样式。 定义ID选择符要在ID名称前加上一个“#”号。 ID属性将匹配所有id=intro的元素： #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } ID属性只匹配id=intro的段落元素： p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } 引用方式： p id=intro 这个段落应用ID选择符 /p 6.包含选择符 单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。 table a { font-size: 12px