实用页面设计方法4CSS.pptVIP

东软IT人才实训中心 课程结构 第一章： CSS概述 1.1 CSS概述 CSS-级联样式表单 Cascading Style Sheet 对WEB页面进行外观控制的机制 将页面的内容和表现分离 CSS版本 目前为止，CSS有两个官方标准：CSS1和CSS2 CSS1的功能在大多数浏览器中都被支持 1.2 示例-无CSS 1.2 示例-有CSS 1.3 CSS优点 优点 代码独立，便于控制 样式文件可在浏览器中缓存 便于分工合作 提高了可访问性 提供更多的外观控制手段 第二章： CSS的样式 2.1 样式 CSS样式 内联样式 嵌入样式 外联样式 2.2 内联 内联样式—inlineCSS.html 把样式代码内联到标记内 使用style作为属性，样式语句作为属性值 如： 控制table标记的边框样式为不折叠 2.2 内联特点 内联样式特点 看上去很直观 针对个别元素控制 和传统的外观控制方式没有本质的不同 不推荐使用 2.3 嵌入 嵌入样式—internalCSS.html 使用style标记把样式代码插入到页面中 一般插入到head标记中 如： 2.3 嵌入特点 特点 将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改 仅针对一个HTML文档进行设置 代码是HTML文档的一部分，没有利用浏览器的缓存机制 2.4 外联 外联样式—externalCSS.html 通过外部样式文件对页面进行控制 外部的样式文件通过HTML的link元素连接到HTML文档中 2.4 外联使用 使用 建立外部样式文件（.css） 外部的样式文件不能含有任何像head或style这样的HTML标记 样式表文件仅仅由样式规则或声明组成 2.4 外联特点 特点 当样式被应用到很多的网页时，推荐使用外部样式表 网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件 大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟 在实际开发中一般都使用外联样式 第三章： CSS基本语法 3.1 语法 选择符 {属性1:属性值1;属性2:属性值2; 选择符（selector）：指定样式适用的标记，除指定标记外，样式不起作用 属性：样式的关键字 属性值：描述样式的值； 格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔 如：P {font-size:12pt; color:red;} 3.1 语法 使用—html.css 3.2 选择符分类 选择符分类 普通选择符 类选择符 id选择符 3.2.1 普通选择符 普通选择符 任意的HTML标记 其样式仅仅作用在选择符指定的HTML元素上 如： p {color:red} 3.2.2 类选择符 类选择符—css_choose.html 同一类型的不同元素通过设置不同CLASS来显示不同样式；但一个元素只能设置一个CLASS属性 HTML元素名加上类名，中间用“.”号分开，类名供该HTML元素的CLASS属性使用 如：使用不同颜色显示，下面例子建立了两个类，OddColor和EvenColor，供tr使用 tr.OddColor {color:red} tr.EvenColor {color:blue} 如果省略HTML元素名只写“.类名”表示这个类名适用于所有的HTML元素的CLASS属性 下面例子建立了一个类note，可以被任何元素使用 .note {font-size:small; color:red} 3.2.3 id选择符 id选择符 个别地定义每个元素的成分 可以作用到任意HTML元素的ID属性上 尽量少用，因为id选择符具有一定的局限（严格来说，在一个页面中，每个id只能使用一次） 要有“#”在名字前面 如 #svp {font-size:12pt} 3.2.4 组合使用-关联 关联 是一个用空格隔开的两个或更多的单元选择符组成的字符串 这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大 如 p em {background:yellow} 表示段落（p）中的强调文本（em）是黄色背景，而其它部分的强调文本不受影响 3.2.4 组合使用 组合使用 3.2.5 练习 练习 建立一个HTML文件，其中有h1-h6标记的文字； 对h1与h2标记使用类型选择符设置样式； 对h3与h4标记使用id选择符设置样式； 对h5标记使用通用的类型选择符设置样式； 对h6标记使用通用的id选择符设置样式 参考 css_choose.html 3.3 样式就近原则 样式就近 并列的定义 当定义重复时，后出现的定义会覆盖前面的定义 对同一结点指定样式，但层次结构不