第五章CSS层叠样式表(理论)分析.ppt

CSS层叠样式表 第五章 本章目标 理解样式表对控制页面元素外观的作用 掌握样式规则的语法 理解各种选择器 理解样式代码在什么位置编写及它们的作用范围 掌握常用的样式属性 CSS概述 CSS的英文全称为Cascading Style Sheet，中文翻译一般称为层叠样式表或级联样式表。 CSS的作用是定义如何显示HTML元素。 它是一门独立的语言，由万维网联盟（W3C）制定。 目前的正式版本为2.0版。 CSS解决的问题 CSS的出现，解决了网页内容与表现分离的问题。 由HTML的标签告知浏览器网页中有哪些内容，而由CSS的规则告知浏览器这些内容应该如何表现。 CSS对网页文档及其元素的外观样式的控制能力远非HTML语言所能比拟。 CSS能够对网页文档及其元素的外观样式实施完整的和精确的控制。 CSS样式规则声明 CSS语法由三部分构成：选择器，属性和值。 三个部分组合起来构成了一条样式规则声明declaration。 选择器selector是某个HTML标签的名称或你自定义的名称。选择器说明这个样式在网页中的适用范围。 属性property是你期望控制的样式的某个方面，如字体，颜色，边框，背景等。 属性需要有一个或多个值value。 属性名和值可以有多对同时出现，多对之间用;分号隔开，属性名和值之间用:冒号连接。它们集中放置在一对{}大括号中。 selector { property : value ; property : value ; .. .. .. } 在style/style标签中声明样式规则 head title样式规则声明/title style type=text/css body {background-image:url(image/eg_bg.gif);} p {text-indent:32px;font-size:16px;} /style /head 演示 例5-1 body p这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。/p /body 选择器 一条样式规则声明中包含选择器，选择器的作用是说明这条样式规则在网页中的适用范围，或者说网页中的哪个地方或哪些地方将要用到它。 上例中，body和p就是这两条样式规则中的选择器。 第一条规则对网页中的body/body即网页正文有效。 第二条规则对网页中的所有p/p标签即段落都有效。 两条规则中的选择器的名称是合法的HTML标签的名称，这样浏览器在解析这条样式规则时就已经知道它是针对页面中这种标签的。 使用HTML标签名称作为选择器，称为HTML选择器或标签选择器。 其他的选择器还有：类选择器、ID选择器、伪类选择器、伪元素选择器、上下文选择器、群组联合选择器等。 HTML选择器 使用某种HTML标签的名称作为选择器，当浏览器解析这种标签时，即采用这条样式规则。 这样做的目的是为了覆盖浏览器内部对这种标签显示方式预先定义的规则。 style 标签名 {/*……*/} /style HTML选择器 style type=text/css h1 {text-align:center;font-size:18pt;} input {border:1px solid gray;background-color:#fedcba;color:blue;} a {text-decoration:none;} /style h1在此登录/h1 form 用户名:input type=text / br / 密码:input type=password / br / input type=submit value=登录 / input type=reset“ / /form a href=#注册/a a href=#回到首页/a 演示 例5-2 通配符选择器——特殊的HTML选择器 使用*号通配符代表所有HTML标签。 用*号作为选择器名称的样式规则将作用于所有标签。 * { /*在这里定义对所有标签都生效的样式*/ } 类选择器 使用类选择器，将多个应共享同一种外观的标签归为一类。 定义类选择器时，要以 . 点号作为前缀，类名可自己定义，但必须符合命名标识符的规范，不能以数字开头。 类选择器定义好之后，并不会自动生效，这一点和HTML选择器不同。在需要使用这个类选择器定义的样式的标签中，设置class属性，赋值为类的名称，浏览器在显示这个标签时将套用这个类选择器定义的样式。 style .类名{/*……*/} /s