[互联网]CSS概述1.ppt
第三部分 CSS,CSS,第四章 CSS概述,本章的教学目的和要求,通过本章的教学要求学生达到下列要求：了解CSS的基本概念和特点；掌握CSS的样式规则；学会CSS在网页中实现的几种方法；具备CSS与XHTML结合使用的能力。,本章教学内容,4.1 CSS简介4.2 CSS样式规则4.3 CSS加入到网页中的方法4.4 CSS的优先级别,本章教学的重点和难点,1、教学重点：CSS的样式规则CSS在网页中的四种实现方式CSS优先级别问题2、教学难点：XHTML文件中调用CSS文件XHTML文件中导入CSS文件,4.1 CSS简介,CSS定义CSS特点,4.1.1 CSS定义,CSS（Cascading style sheet）：层叠样式表，简称样式表。一种对Web文档添加样式的简单机制，可对布局、字体、颜色、背景和其他图文效果进行更加精确的控制。弥补XHTML对网页格式化功能的不足字体变化和大小页面格式的动态更新排版定位,文字的大小、颜色；图片的颜色,4.1.2 CSS特点,CSS的特点将格式和结构分离可以以前所未有的能力控制页面布局可以制作体积更小、下载更快的网页可能将许多网页同时更新，比以前更快更容易可用任何文本编辑器或网页编辑软件编辑,4.2 CSS样式规则,样式规则:选择符 属性:值 1、选择符一般是要定义样式的HTML标记，如body、p。例：body color:black 2、如果属性的值是多个单词组成，必须在值上加上引号。例：p font-family:times new roman 3、如果对一个选择符指定多个属性时，属于单一选择符的复合样式声明:选择符 属性1:值1;属性2:值2 例：P text-align:center;color:red h1font-size:10pt注意：为使定义样式表方便阅读，一般采用分行的书写格式。,CSS例子h1 font-size:x-large;color:red h2 font-size:large;color:blue I love China!I am H1 I love China!I am H2,CSS示例：,显示结果,显示结果：,4.3 CSS加入到网页中的方法,行内样式（在body内实现）内嵌一个样式（在head内实现）在HTML文件外实现调用导入,4.3.1 行内样式,行内样式指：在HTML标记中引用，可很简单的对某个元素单独定义样式，只需要在要加上CSS样式的地方加上一个StyleCSS属性：值即可。,在body内实现CSS寒风吹起，细雨迷离，风雨揭开我的回忆我像小船，寻找港湾，不能将你忘记,示例：,显示结果,显示结果：,4.3.2 内嵌一个样式表,内嵌一个样式表指：把样式表插入到区内，使定义的样式表应用到页面。基本格式：,说明：有些低版本的浏览器不能识别STYLE标记，意味着低版本的浏览器会忽略STYLE里的内容，并把style标记里的内容直接显示到页面上，为避免这样的情况发生，用注释的方式隐藏内容而不让它显示。,head内实现CSS 寒风吹起，细雨迷离，风雨揭开我的回忆我像小船，寻找港湾，不能将你忘记,示例：,显示结果,显示结果：,4.3.3 调用CSS文件,调用CSS文件指：把样式表保存为一个样式表文件，然后在页面中用标记链接这个样式表，该操作必须在中实现。,基本格式：.说明：一个外部样式表文件可以应用于多个页面，当你改变这个样式表文件内容时，所有调用它的页面的样式都要随之改变。样式表文件可用任何文本编辑器（如：记事本）打开并编辑，样式表文件扩展名为.css。,示例,my first page寒风吹起，细雨迷离，风雨揭开我的回 我像小船，寻找港湾，不能将你忘记,mystyle.cssh1 color:green;font-family:宋体 p background:yellow;font-family:宋体,显示结果,4.3.4 导入CSS文件,导入CSS文件指：在里再导入一个或多个外部样式表。格式：,示例,my first page 寒风吹起，细雨迷离，风雨揭开我的回忆 我像小船，寻找港湾，不能将你忘记,mystyle1.cssh1 color:red;font-family:宋体p background:yellow;font-family:宋体,4.4 CSS的优先级别问题,浏览器在显示CSS样式时，一般遵循以下的几个规则：当两个（或多个）不同样式应用于同一段文本时，浏览器将显示这段文本所具有的所有的属性，除非定义的样式之间有显示上的冲突。当来自不同样式的文本属性在应用到同一段文本产生冲突时，浏览器将按照与文本关系的远近来决定显示哪个属性：后定义、离文本最近的优先级别最高。当HTML样式与CSS样式存在矛盾是，按照CSS样式中定义的文本属性来显示。,示例,my first page h1 color:red;font-family:impact;font-size:10 寒风吹起，细雨迷离，风雨揭开我的回忆 我像小船，寻找港湾，不能将你忘记,mystyle.cssh1 color:green;font-family:impact p background:yellow;font-family:courier,示例,my first page h1 color:red;font-family:impact;font-size:10 寒风吹起，细雨迷离，风雨揭开我的回忆 我像小船，寻找港湾，不能将你忘记,mystyle.cssh1 color:green;font-family:impact p background:yellow;font-family:courier,思考题,请说明什么是CSS以及它的特点。CSS的样式规则是什么？在CSS在网页中实现有几种方式?HTML文件调用CSS文件和导入CSS文件有什么区别？CSS的优先级别规则有哪些？,
