《Web技术基础》第5课 表现.ppt

10.5 使用CSS 样式表文件 样式表文件可以用任何文本编辑器进行编辑，文件中不能包含任何XHTML标签，样式表文件以.css为扩展名。 @charset utf-8; /* CSS Document */ hr{color:#F00;} p{margin-left:20px;} body{background-image:url(images/bg.gif);} 10.5 使用CSS link标签 link标签定义文档与外部资源的关系，link标签最常见的用途是连接样式表。link标签可选属性。 属性 值 描述 type MIME-type 被连接文档的MIME类型 href URL 被连接文档的位置 rel 当前文档与被连接文档之间的关系 10.5 使用CSS link标签rel属性的值。 值 描述 alternate 文档的替代版本（比如打印页、翻译或镜像） stylesheet 外部样式表 start 集合中的第一个文档 next 集合中的下一个文档 prev 集合中的上一个文档 contents 文档目录 index 文档索引 glossary 在文档中使用的词汇的术语表（解释） copyright 包含版权信息的文档 chapter 文档的章 section 文档的节 subsection 文档的小节 appendix 文档附录 help 帮助文档 bookmark 相关文档 10.5 使用CSS link标签是空元素，只能用在head中。 css(css).html使用了css1.css外部样式表文件。 headtitle外部样式表/title link rel=stylesheet type=text/css href=css1.css / /head body hr size=2 / p外部样式表可以在任何文本编辑器中进行编辑。/p /body 10.5 使用CSS 3. 内联样式 内联样式由于将表现和内容混在一起，不符合Web标准，所以慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式。 使用内联样式，就是在元素标签内使用style属性，Style属性值可以包含任何CSS样式声明。如改变段落的左外边距： p style=margin-left:20px这是一个段落/p 课堂互动 教材125页实例css(style-media).html。 教材127页实例css(css).html。 10.6 层叠（多重）样式 1. 继承 根据CSS规则，子元素继承父元素属性。如： body{font-family:微软雅黑;} 通过继承，所有body的子元素都应该显示“微软雅黑”字体，子元素的子元素也一样。 不是所有属性都具有继承性，CSS强制规定部分属性不具有继承性。下面这些属性不具有继承性：边框、外边距、内边距、背景、定位、布局、元素高度和宽度。 10.6 层叠（多重）样式 2. 层叠（多重） 层叠（cascade）是指CSS能够对同一个元素应用多个样式表的能力。 例如，外部样式表对h3声明了三个样式属性： h3{color:red;text-align:left;font-size:12px;} 而内部样式表针对h3声明了两个样式属性： h3{ text-align:right;font-size:20px;} h3选择器的text-align和font-size样式属性层叠，假如拥有内部样式表的这个页面同时与外部样式表连接，那么h3得到的样式是： h3{ color:red;text-align:right;font-size:20px;} 即color属性使用外部样式表声明，而text-align和font-size属性会被内部样式表中的规则取代。 10.6 层叠（多重）样式 样式表允许以多种方式声明样式信息，如果出现多重即使在不太复杂的样式表中，也可能有两个或更多规则应用于同一元素，CSS通过层叠处理这种冲突。样式将层叠为一个。 对于正在浏览的网页，可能会有多个样式表对其产生作用，一般有原网页作者的样式表、用户的样式表以及浏览器默认样式表。作者样式是指页面作者在制作网页时定义的样式表，简称样式表。用户样式是指浏览者通过浏览器向页面加载的自己需要的样式。 10.6 层叠（多重）样式 层叠给每种样式表分配一个重要度。样式表被认为是最重要的，其次是用户的样式表，最后是浏览器默认样式表。将样式标记加上!important可以优先于任何规则。层叠的重要度次序是： 标有!important的用户样式，标有!important的作者样式。 作者样式。 用户样式。 浏览器默认样式。 最后根据CSS specificity决定。 10.6 层叠（多重）样式 3. CSS specificity CSS spec