[互联网]CSS概述1.ppt

第三部分 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 } h1{font-size:10pt} 注意：为使定义样式表方便阅读，一般采用分行的书写格式。 html head titleCSS例子/title style type=text/css h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue } /STYLE /head body h1 I love China! I am H1/h1 h2 I love China! I am H2 /h2 /body /html §4.3 CSS加入到网页中的方法 行内样式（在body内实现） 内嵌一个样式（在head内实现） 在HTML文件外实现 调用 导入 §4.3.1 行内样式 行内样式指：在HTML标记中引用，可很简单的对某个元素单独定义样式，只需要在要加上CSS样式的地方加上一个 Style＝CSS属性：值即可。 html head title在body内实现CSS/title /head body h1 style=color:green;font-size:37px;font-family:宋体寒风吹起，细雨迷离，风雨揭开我的回忆/h1 p style=text-indent:1em;background:yellow; font-family:宋体 我像小船，寻找港湾，不能将你忘记/p /body /html §4.3.2 内嵌一个样式表 内嵌一个样式表指： 把样式表插入到head区内，使定义的样式表应用到页面。 基本格式： head title… …/title style type=text/css !- - ……… - - /style /head htmlhead titlehead内实现CSS/title style type=text/css !-- h1 {color:green;font-size:37px;font-family:宋体} p {text-indent:1em;background:yellow; font-family:宋体} -- /style /head body h1 寒风吹起，细雨迷离，风雨揭开我的回忆/h1 p我像小船，寻找港湾，不能将你忘记/p /body /html §4.3.3 调用CSS文件 ●调用CSS文件指：把样式表保存为一个样式表文件，然后在页面中用link标记链接这个样式表，该操作必须在head…/head中实现。 基本格式： head ……