（汇总）WEB前台技术_4_CSS.ppt

* CSS使用-外联 外联样式-External Style Sheet 通过外部样式文件对页面进行控制 建立外部样式文件（.css） 外部的样式文件可以通过HTML的link元素连接到HTML文档中 link标记放置在文档的head部分 .......... * 外联示例 外联样式-External Style Sheet 示例：externalCSS.html 建立外部样式文件（.css） 外部的样式文件不能含有任何像head或style这样的HTML标记 样式表文件仅仅由样式规则或声明组成 .......... * 外联特点 外联样式的特点 当样式被应用到很多的网页时，一个外部样式表是最理想的 网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件 大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟 在实际开发中一般都使用外联样式 .......... * 外联详解 外联样式-External Style Sheet 建立外部样式文件（.css） 外部的样式文件可以通过XML处理指令PI（Processing Instruction）连接到XML文档中 .......... * 第三章：CSS基本语法 学时：2.0学时 教学方法：讲授ppt+上机练习 目标: 本章旨在向学员介绍CSS的基本语法，通过本课的学习，学员应该掌握如下知识： 1）知道CSS的基本语法 2）了解CSS的选择器 3）了解CSS的伪类及伪对象 .......... * 选择符 CSS的基本语法 选择符 任何HTML元素都可以是一个CSS选择符，选择符仅仅是指向特别样式的元素。如：P {font-size:12pt}当中的选择符是P 选择符分类 类选择符 Id选择符 关联选择符 .......... * 属性 CSS的基本语法-属性（简略了解） CSS的颜色 常用的，如red，#00ff00等 CSS的前景色 color属性 CSS的背景 background、background-color、background-image、background-repeat、background-position CSS的文本 letter-spacing、word-spacing、text-decoration、text-transform、text-align、text-indent .......... * 属性 CSS的基本语法-属性（简略了解） CSS的字体 font-family、font-size、font-style、font-variant、font-weight、font CSS的边框 border-width、border-color、border-style、border CSS的伪类 link、hover、active、visited .......... * 选择器 CSS的基本语法 选择器 使用一定的规则来指定一个或一组标记，从而对它们进行统一的外观控制 每个选择器后面都跟着一组属性，这些属性用大括号括起来，以分号隔开 每组属性包括属性名称和属性值 .......... * 标记选择器 使用标记选择器 可以对HTML或XML中所有你想要定义的元素进行标识 选择文档内所有指定标记的结点，然后对它们应用样式 html.css body {color:block} p {font-family:”sans serif”} p {text-align:center;color:red} p { text-align:center; color:black; tont-family:arial } 如果是多个单词，使用双引号括上 如果有多个属性，使用分号将各个属性分隔开 注意代码的格式，使可读性更好 .......... * 标记选择器 xml.css Music {display:block} Title {display:block; font-size:30pt; font-weight:bold; text-align:center} Singer {display:block; margin-bottom:4px; text-align:center} Content {display:block; margin-bottom:4px;} 按块的方式显示其内容 粗体 选择器selector 居中 .......... * 群组选择器 标记选择器-群组选择器（Group Selectors） 为了减少样式表的重复声明，组合的选择器