[电脑基础知识]第10章使用CSS格式化网页.ppt

第10章 使用CSS格式化网页 cenqin8899@126.com 目录 10.1 理解CSS 10.1.1 CSS的简介 CSS的英文名为Cascading Style Sheet（层叠样式表） 样式就是格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。 CSS能将样式的定义与HTML文件内容分离。 10.1.2 CSS构造 构造样式规则 样式表的每个规则都有两个主要部分：选择符（selector）和声明（declaration）。 基本语法： selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。 10.1.2 CSS构造 在样式规则中添加注释 在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例。 /*此标记应用在文档中*/ h1{color:red;background:yellow;} 注意：注释不能嵌套。 10.1.2 CSS构造 继承 继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。 例:一个body定义了的颜色值也会应用到段落的文本中。 10.2 样式表的定义与使用 在CSS里可以使用四种不同的方法，将样式表的功能加到网页里。 直接定义标记的style属性 定义内部样式表 嵌入外部样式表 链接外部样式表 10.2.1 定义标记的style属性 将CSS样式定义在HTML标记内的，这是最简单的样式定义方法。 基本语法： 标记 style=样式属性:属性值;样式属性:属性值;… 语法说明： 标记：HTML标记，如body、table、p等； 标记的style定义只能影响标记本身； style的多个属性之间用分号分割； 标记本身定义的style优先于其他所有样式定义。 内部样式表允许在他们所应用的HTML文档的顶部设置样式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法： style type=text/css!--选择符1（样式属性：属性值；样式属性：属性值；……）选择符2（样式属性：属性值；样式属性：属性值；……）选择符3（样式属性：属性值；样式属性：属性值；……）……选择符n（样式属性：属性值；样式属性：属性值；……）--/style 语法说明： style元素是用来说明所要定义的样式，type属性是指style元素以CSS的语法定义； !--…… --隐藏标记：避免了因浏览器不支持CSS而导致错误，加上这些标记后，不支持CSS的浏览器，会自动跳过此段内容，避免一些错误； 选择符1……选择符n：选择符可以使用HTML标记的名称，所有的HTML标记都可以作为选择符； 样式属性主要是关于对选择符格式化显示风格的样式属性名称； 属性值设置对应样式属性的值。 嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。 基本语法： style type=text/css@import url(外部样式表的文件名称);/style 语法说明： import语句后的“;”号，一定要加上！ 外部样式表的文件名称是的是要嵌入的样式表文件名称，后缀为.css； @import应该放在style元素的任何其他样式规则前面。 示例代码调用的外部style.css文件的内容是： .p1{font-size:18px; color:blue} 执行结果如图 除了以嵌入外部样式表的方法达到在HTML文件中引用样式表的目的外，还可以用链接的方式，使用外部CSS文件。 基本语法： link type=text/css rel=stylesheet href=外部样式表的文件名称 语法说明： 链接外部样式表时，不需要使用style元素，只需直接用link标记放在head标记中就可以了； 同样外部样式表的文件名称是要嵌入的样式表文件名称，后缀为.css； CSS文件一定是纯文本格式； 在修改外部样式表时，引用它的所有外部页面也会自动地更新； 外部样式表中的URL相对于样式表文件在服务器上的位置； 外部样式表优先级低于内部样式表； 可以同时链接几个样式表，靠后的样式表优先于靠前的样式表。 10.3 定义选择符 选择符决定了格式化将应用于哪些元素。最简单的选择符可以对给定类型的所有元素进行格式化，更复杂的选择符可