WEB实用页面设计方法-CSS.pdf

WEB实用页面设计方法 —— CSS 3 Sept. 2008 © Neusoft Confidential CSSCSS概述概述 概述 • CSS （Cascading Style Sheet ）级联样式表、层叠样式表 在W3C标准中被定义为“一种对Web页面进行外观控制的机制” CSS和HTML 、JavaScript是并列的3种用于Web开发的技术 • CSS开始是为HTML文档设计的 定义文档样式定义文档样式 CSS被设计用来替代传统的HTML表现代码 将文档的内容与表现分离开 • 使用CSS的原因 可以控制许多仅使用HTML无法控制的属性 CSS能够保持页面在平台不同的浏览器设置环境下显示正常 示示例例 优优点点 • CSS优点 样式代码独立于HTML页面，有利于进行站点的统一控制 样式文件可在浏览器中缓存样式文件可在浏览器中缓存，，节省带宽节省带宽，，提高加载速度提高加载速度 提高开发效率，有利于分工合作 由于由于HTML页面中页面中不再包含大量的表包含大量的表现代代码，提高提高了可访问性访问性 控制外观更加容易 提供比传统HTML更多的外观控制手段 CSSCSS的样式的样式 样式 • CSS的样式 按按CSS代码的位置划分代码的位置划分 内嵌样式（Internal Style Sheet ）：嵌入一个样式块 行内样式（Inline Style ） 外联样式（External Style Sheet ）：链接一个样式文件 • 将样式表加入到将样式表加入到HTMLHTML中中 内嵌样式表 行内样式表行内样式表 写在写在HTMLHTML文文 外联样式表★ 档内部 CSS是一个外部 文档 CSS使用使用— 行内行内 • 行内样式-Inline Styles 示例：inlineCSS.html 将样式代码直接内联到标记内将样式代码直接内联到标记内，以以sttylle作为属性作为属性，语句作为属性值语句作为属性值 style属性可以包含任意的CSS值 标签名 style = “样式属性:取值;样式属性名:取值; …” 使用style控制table标记的边框样式为不折叠 • 行内样式特点 看上去很直观 仅针对个别元素进行控制 将外观控制代码散布于整个HTML文档，和传统的外观控制方式没 有本质的不同有本质的不同 一般不推荐使用 CSS使用使用— 内嵌内嵌 • 嵌入样式-Internal Style Sheet 示例：internalCSS.html 使用使用stylestyle标记将标记将一段段CSSCSS语句插入到语句插入到HTMLHTML文档层次结构中文档层次结构中 一般将这段CSS语句作为一个独立部分插入在head和/head标记 之间 • 嵌入样式的特点嵌入样式的特点 也是将CSS语句直接写在HTML文档中，但它做为一个独立的标记 块存在，维护和修改都要方便得多 利用CSS规则来选择标记 嵌入样式仅能够针对一个HTML文档进行设置，无法与多个文档关 联联，一般用于控制一些针对性强的独立样式一般用于控制一些针对性强的独立样式 嵌入样式是HTML文档的一部分，仍然有需要重复加载的问题，无 法利用浏览器的缓存机制 CSS使用— 外联★ • 外联样式-External Style Sheet 通过外部样式文件对页面进行控制通过外部样式文件对页面进行控制 建立外部样式文件（.css） 外部的样式文件可以通过HTM