1、复习:阅读下面 html 代码,回答问题:CSS 的特点:可以将格式与结构分离可以以前所未有的能力控制页面布局可以制作体积更小、下载更快的网页可以将许多网页同时更新兼容性好1、 这个网页引用 CSS 的方式是什么?(外部样式表/内部样式表)2、 这里定义的两种样式,它们的选择器类型是?选择器类型:类、标签、id 选择器类:以.开头,第一个字符必须是字母且类名中不能包含其它符号。标签:重新定义已有 HTML 标签外观id 选择器:以#开头,指定一种独立的样式。*伪类选择器:用于向某些选择器添加特殊的效果。常见的有锚伪类(例如a:link、 a:visited)等。类选择器与 id 选择器的区别:
2、 执行原理:id 是先找到结构/ 内容,再给它定义样式;而 class 是先定义好一种样式,再套用给多个结构/内容。 类选择器以 class=选择器名来使用,而 id 选择器以 id=选择器名来使用 定义的类在同一个文档中可以多次使用,而定义的 id 一般只使用一次。 (目前浏览器一般允许多次使用相同 id,一般情况下不会有显示错误。但 id 是 Javascript 等脚本控制页面元素的一个重要途径,因此 id 重复使用会在脚本控制时出错)3、 简要分析两种样式所定义的格式。一、引用外部样式表的两种形式:链接和导入 链接外部样式表是把样式表保存为一个样式表文件,然后在页面中用标记链接到这个样
3、式表文件,这个标记必须放到页面的 区内: 导入外部样式表是指在内部样式表的里导入一个外部样式表,导入时用import:import url(“mystyle.css”);两者的区别:导入相当于把样式表复制到网页里,而链接只是建立.css 文件与当前页面的关系;链接的方式在页面加载时是先加载样式表,而导入的方式是先提取当前 html 的结构再加载样式,这样在网络较不理想的状态下浏览者可能看到一个效果很不好的页面。综上所述,因此,现在网站在使用外部样式表时多使用链接的方法。二、样式优先级1、相同的选择器,后定义的会把先定义的设置覆盖掉2、一般来说,若不同选择器涉及相同的属性设定,后设定会把先设定的
4、覆盖掉例:讨论下面代码的表现:.ab font-size: 18px;font-weight: bolder;color: #FF0000;.ab font-size: 36px;font-style: italic;color: #00FF00;pfont-size: 40px;font-style: normal;color: #0000FF;abcdefg3、样式表一般具有继承性。例如对 body 设置的样式表,会作用与整个页面,例如段落、文字等。但若对某些页面元素进行特别的设置,则“一般服从特殊“。三、标签合并在使用样式表的过程中,可能有若干个标签用到同一个属性。例如规定页面中的粗体字
5、、斜体字都显示为红色,应该这么写:b color: red;i color: red;引入分组的概念会使这种具有相同特征的设定变得更简洁:b,icolor: red;cded四、对特定标签定义类如果定义的类只能在指定的标签使用,或者对于一个标签希望定义多种可使用的样式,可以使用以下格式:标签 1.类名 1标签 1.类名 2标签 n.类名 n例如:这样定义的类.ab 对网页中任何元素都可以使用:.ab font-size: 36px;font-style: italic;color: #00FF00;假如希望定义一个只有标签 p 可以用的 ab 类,则可以这样定义:p.ab font-size:
6、 36px;font-style: italic;color: #00FF00;试测试下列代码的表现:h1 不能使用 ababcdeeefg而且假如希望针对标签 p 定义另外一个类 cd,那么 cd 也不会覆盖 ab 的设置。例如:p.cd font-size: 36px;color: red;font-weight: bold;pfont-size: 40px;font-style: normal;color: #0000FF;试测试下列代码的表现:使用 ab使用 p 原来的设置使用 cd练习:1、建立一个外部样式表 all.css,定义 body 标签为:粗体,背景颜色为#FFFF66。2、在 all.css 中新建一个样式,定义 p 标签为:字体为黑体,大小为 16 像素,字体颜色为#999999。3、在 all.css 中新建一个样式,定义只能对 p 标签使用的类 ap 为:字体为舒体,加粗,字体颜色为#3333CC。4、把 all.css 链接到 3 个页面。5、修改 p 标签的属性,设置行高为 1.5 倍。6、在页面 1.html 里定义一个内部样式类 sp,设置其属性为:字体大小为 32 像素,字体颜色为 red,斜体,3 倍行高。对文档里的第一段使用样式 sp。7、对 2.html 的第一段使用样式 ap。