第三章_CSS样式表_语法规则.ppt

WEB基础 目标 网页的基础概念 Web标准 构造CSS规则 基本CSS选择器 在网页中添加CSS的方法 复合选择器 CSS的继承特性 网页的基础概念 “Web标准”概述 下面介绍关于网页的标准——“Web标准”。 网页主要由3个部分组成： 结构（Structure） 表现（Presentation） 行为（Behavior） 用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。 “Web标准”概述 由于传统的图书是固定的，不能变化的，因此它不存在“行为”。 在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。 每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。 网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。 因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。 “结构”、“表现”和“行为”分别对应于3种非常常用的技术，即? X ?HTML、CSS和JavaScript。 也就是说， X ?HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。 DHTML 简介 CSS选择器的构成 标签选择器 h1 color: red; font-size: 25px; 类选择器 .red color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ 网页中调用： p class “green” class选择器 ID选择器 #green font-size:30px; /* 字体大小 */ color:yellow; /* 颜色 */ 网页中调用： p id "yellow" ID选择器 伪类选择器 在IE浏览器中，CSS中通过设置伪类来控制链接的样式 交集选择器 交集选择器 交集选择器 交集选择器 后代选择器 后代选择器 行内样式 内嵌样式 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 链接外部样式表 使用LINK（链接）标签 ，语法： LINK rel “stylesheet” type ”text/css” href ”样式表文件.css” 导入外部样式表 使用@import导入 ，语法： STYLE TYPE "text/css" @ import 样式表文件.css; 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护 总结 DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 结束语 .special i color: red; /* 使用了属性special的标记里面包含的 */ #one li padding-left:5px; /* ID为one的标记里面包含的 */ td.out .inside strong font-size: 16px; /* 多层嵌套，同样实用 */ 上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。 在网页中添加CSS的方法 1 行内样式 2 内嵌样式 3 链接样式 4 导入样式 您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。 /*－－关键代码--*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 p style “color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px" 另送价值50元的充电器套装！ 一个充电器，两节充电电池 可使用半年以 应用样式 STYLE TYPE "text/css" P font-size:20px