教科版高中信息技术（网络技术应用模块）课件：4.4 CSS样式表运用 (共65张PPT)

4.4 CSS样式表运用 * 学习目标 理解CSS样式表对网页布局的作用 掌握CSS样式表的运用方法 * 样式表设计 样式表定义及引用 相关的标记和属性 样式的继承和作用顺序 CSS属性 CSS滤镜 * 一、样式表定义及引用 CSS，Cascading Style Sheets，层叠样式表，是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。 CSS标准中重新定义了HTML中原来的文字显示样式，并增加了类、层等新概念，可以对文字重叠、定位等，提供了更为丰富多彩的样式；同时CSS可进行集中样式管理。 * CSS还允许将样式定义单独存储于样式文件中，这样可以把显示的内容和显示样式定义分离，便于多个HTML文件共享样式定义。一个HTML文件也可以引用多个CSS样式文件中的样式定义。 所谓"层叠"，实际上就是将显示样式独立于显示的内容，进行分类管理，例如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用即可。 * 1. 样式表定义 CSS样式表定义的基本语法为： 　　 选择符（Selector）{ 规则（Rule）表} 选择符是指要引用样式的对象，它可以是一个或多个HTML标记（各个标记之间以逗号分开），如h1；也可以是类选择符（如.text）、ID选择符或上下文选择符。 规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为： 样式名：值 样式定义中可以加入注解，格式为：/*字符串*/ 【例】使用CSS控制文字显示特性<Go1> <Go2> * 2. 样式引用 （1）链接到外部样式表 将样式表定义为一个独立的CSS样式文件； 使用该样式表的HTML文件在头部用<link>标记链接到CSS样式文件。 　【例】　<Go> 在HTML文件头部使用多个<link>标记就可以链接到多个外部样式表。 <style>标记内定义的前后加上注释符<!--...-->的作用是使不支持CSS的浏览器忽略样式表定义。 * <link>标记的属性 属性 用法 REL 用于定义连接的文件和HTML文档之间的关系，通常取值为stylesheet。 HREF 指出CSS样式文件。 TYPE 指出样式的类别，通常取值为text/css。 MED