CSS初步.docVIP

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