CSS原文档.doc

CSS 一、CSS概述 1.1 CSS概述 ? CSS级联样式表单 – Cascading Style Sheet – 对WEB页面进行外观控制的机制 – 将页面的内容和表现分离 ? CSS版本 – 目前为止，CSS有两个官方标准：CSS1和CSS2 – CSS1的功能在大多数浏览器中都被支持 1.2 示例- 无CSS head titleCSS入门/title /head body 注意:此页面没有用到CSS样式，很显然源代码重复的比较多，有冗余； font face=宋体 color=red h2欢迎同学们学习CSS/h2 /fontbr font face=宋体 color=green h2欢迎同学们学习CSS/h2 /fontbr font face=宋体 color=blue h2欢迎同学们学习CSS/h2 /fontbr /body 1.2 示例- 有CSS head titleCSS入门/title style h2{font-family:宋体; color:red} /style /head body 注意:此页面用到了CSS，请查看源代码，是不是干净了许多； h2欢迎同学们学习CSS/h2br h2欢迎同学们学习CSS/h2br h2欢迎同学们学习CSS/h2 /body 1.3 CSS 优点 ? 优点 – 代码独立，便于控制 – 样式文件可在浏览器中缓存 – 便于分工合作 – 提高了可访问性 – 提供更多的外观控制手段 二、CSS 的样式 2.1 样式 ? CSS样式 – 内联样式 – 嵌入样式 – 外联样式 2.2 内联 ? 内联样式 – 把样式代码内联到标记内 ? 使用style作为属性，样式语句作为属性值 ? 如：table style=“border-collapse” ? 控制table标记的边框样式为不折叠 2.2 内联特点 ? 内联样式特点 – 看上去很直观 – 针对个别元素控制 – 和传统的外观控制方式没有本质的不同 – 不推荐使用 2.3 嵌入 ? 嵌入样式 – 使用style标记把样式代码插入到页面中 – 一般插入到head标记中 – 如：headstyleCSS语句/style/head 2.3 嵌入特点 ? 特点 – 将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改 – 仅针对一个HTML文档进行设置 – 代码是HTML文档的一部分，没有利用浏览器的缓存机制 2.4 外联 ? 外联样式 – 通过外部样式文件对页面进行控制 – 外部的样式文件通过HTML的link元素连接到HTML文档中 link rel=“stylesheet” href=“myCSS.css” type=“text/css”/ href属性指定了样式文件的相对地址；rel和type属性表明这是一个样式文件 2.4 外联使用 ? 使用 – 建立外部样式文件（.css） – 外部的样式文件不能含有任何像head或style这样的HTML标记 – 样式表文件仅仅由样式规则或声明组成 例如: h3{font-family:“宋体” color:red} 文件名myCSS.css 2.4 外联特点 ? 特点 – 当样式被应用到很多的网页时，推荐使用外部样式表 – 网页制作者使用外部样式表,在改变整个网站的外观时,仅需要改变一个文件 – 大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免 了 在展示网页时的延迟 – 在实际开发中一般都使用外联样式 三、CSS 基本语法 3.1 语法 ? 选择符{属性1:属性值1; 属性2:属性值2;} – 选择符(selector):指定样式适用的标记,除指定标记外,样式不起作用 – 属性：样式的关键字 – 属性值：描述样式的值； – 格式：属性与属性之间使用分号分隔,属性与属性值之间使用冒号分隔 – 如：P{font-size:12pt; color:red;} 3.1 语法 ? 例子: body{color:black}-----------------单个属性示例. p{font-family:“sans serif”}-----多个单词属性需要括起来“”. p{text-align:center； color:red}---多个属性用分号隔开. p{ -----------------注意代码的格式可读性 text-align:center； color:black； tont-family:arial } 3.2 选择符分类 ? 选择符分类 – 普通选择符 – 类选择符