第8章 css基础知识.ppt

1、网页设计基础,本章要点,8.1 样式表的概念 CSS(Cascading Style Sheet),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息和网页内容分离的一种标记性语言。 CSS是1996年由W3C审核通过，并且推荐使用的。简单的说，CSS的引入就是为了使HTML语言更好地适应页面的美工设计。它以HTML为基础，提供了更丰富的格式化功能，如字体、颜色、背景和整体排版等。,8.2 CSS的特点 CSS的最大特点就是将内容和格式分离。（以.css为扩展名存储一个独立的文件）。利用CSS网站开发人员可以在HTML文档中安排内容，在另一份样式文档设计这些内容的显示方式，比如字体颜色、

2、字体大小、行距等。,使用CSS可大大缩减页面代码，提高页面浏览速度；使文档结构清晰，缩短改版时间；强大字体控制和排版能力，容易编写，可以像写HTML代码一样轻松编写CSS；可以将许多网页的风格格式同时更新，可将站点上网页风格都使用一个CSS文件进行控制。,8.3 重要概念 元素 在HTML文档中，元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签（有些结束标签可以省略，如）和包含在这两个标签里的所有内容。我们把标签名作为元素的名称。 例如：欢迎,父元素/子元素 若元素A的开始标签和结束标签之间包含其它元素B，则元素A称为元素B的父元素，反之元素B为元素A的子元素。 例如：欢迎,属

3、性 在HTML文档中属性是指某个元素某方面的特性，比如颜色、字体大小、高度、宽度等。对于每个属性能且仅能指定一个值。 例如：颜色为红色、字体大小为20磅。,8.4 CSS的基本语法 规则 一个CSS样式表是由许多样式规则组成的，其规则为： 选择符属性1：值对1；属性2：值对2； 规则是一系列“属性：值对”的集合，它用来控制网页元素的显示方式。根据规则中对属性的设定，浏览器会按照设定的值来显示标签内的内容。,基本写法 一个规则包括一个选择符，以及紧跟其后的一系列属性：值对，所有属性：值对用“”包括，各属性：值对之间用分号“；”分隔。 例如：pcolor：red；font-size：20pt 如果

4、选择符使用HTML语言中的标签名，称本规则为重置定义，也就是说重新定义了某些标签的显示样式。,多个选择符 当对大量标签作重复性设定时，比如将h1到h6的6级标题都设为红色时，可以按如下规则书写： h1color：red h2color：red h3color：red h4color：red h5color：red h6color：red 简单写法： h1，h2，h3，h4，h5，h6color：red,一个简单的样式表, 简单的样式表 ,程序代码, 样式表 这是一个简单的样式表 ,8.5 CSS的类型 有三种方法可以将CSS和HTML标签结合起来：内联样式表、文档级样式表和外部样式表。 内联样

5、式是给某一个元素设定具体的样式规则. 文档级样式的作用范围是整个文档,放在文档的头部. 外部样式的作用范围是所有引用或链接它的html文档,外部样式表是以.css为扩展名的纯文本文件.,8.6 CSS样式表的引入 内联样式表 内联样式是连接样式和标签的最简便的方法，只需要在标签中包含一个名为style的属性及其值即可。其中style属性和它的值之间用“=”连接，其值是一串字符，该字符是一个规则的简写，它只省略了规则的选择符和“ ”,剩下的属性:值对则描述了具体的显示样式，浏览器会根据样式的属性及其值来显示标签中的内容。,语法： 欢迎光临 二级标题红色，20磅大小，斜体。,文档级样式表 内联样式

6、表只是将样式规则加在某一标签内部，其影响范围仅限于该标签，而文档级样式表则将所有规则罗列在文档的开头，它可以影响整篇文档。文档级样式表的写法是在文档的和标签之间添加和标签，在标签中指定属性type的值为”text/css”，将规则置于这两个标签之间。,语法： ,外部样式表 外部样式表是一个独立的纯文本文件，其文件名一般为“*.css”，所有的规则均放置在该文件内。外部样式表最大的优点是可以用于多个文档，它可以对庞大的文档集中所有的相关标签起作用。 假设存在一个外部样式表文件styles.css，那么可以有两种方法载入样式表：链接和引入。,1、链接 链接外部样式表的方法是在文档的标签中使用标签，

7、使用该标签的rel属性指定外部样式表文件与HTML文档的关系是stylesheet（rel=”stylesheet”是指在页面中使用外部的样式表），用type属性指定引用的文档是CSS文档（type=”text/css”是指文件类型是样式表文件），使用href指定CSS文档的位置。,语法： head 链接同一个文件夹下一个名为styles的外部样式表,2、引入 引入外部样式表的方式是使用标签中的一个特殊命令import引入文件： ,8.7 CSS的优先权原则 当多个样式表对某一元素的定义发生冲突时，浏览器会按如下优先权原则进行处理： 若在同一个类型的样式表中发生冲突，那么按最后定义的样式来显示

8、 若在不同类型的样式表中发生冲突，那么按照内联样式表、文档级样式表、外部样式表的优先权顺序显示,8.8 CSS三种方法的比较 假定有100个类似的网页，每个网页均含有100处相同的设置（例如红色字体），现在要将这总共10000处红色文字改为蓝色。那么在不使用CSS的情况下，需要作10000处修改；在只使用内联样式表的情况下，也需要作10000次修改；在只使用文档级样式表的情况下，需要作100次修改；最后，如果使用的是外部样式表，那么只需对该样式表作一次修改即可。,8.9 样式类 用户可能会发现当使用重置定义的时候,只能给一种标签定义一种样式。例如给标签P定义了红色文字后，所有中的文字都为红色。

9、那么能不能使某些P显示红色，而另一些P显示其他颜色呢？答案是可以的，那就是使用样式类。 样式类分为常规类、一般类和ID类三种。,常规类 常规类规则与一般规则的区别在于选择符的书写方法不同。一般规则的选择符是一个标签名（例如p），而常规类规则的选择符是标签名加上类名，中间用“.”号分隔（例如p.red，red是类名）。定义了一个P的名叫red的类。在正文中引用时只要在标签中通过类属性指定类名（用class=类名）即可，大多数HTML标签都有类（class）属性。如正文内容 。,一般类 常规类需指定具体的标签和类名，也就是说当定义了一个规则后，该规则只能应用于某一个标签，那么想定义一个规则而又能应用于多个标签，就需使用一般类。 一般类规则的定义和常规类相似，只是去掉了标签名，比如.redcolor:red(注意前面的“.”不能省略)。其应用方法也和常规类一样。,ID类 ID类和一般类很相似。ID类规则的定义只是把一般类定义中的“.”号改为“#”(如#redcolor：red)，引用时在标签中使用id属性指定id名（如正文内容）。,本章主要介绍层叠样式表的概念、样式表的种类及引入方法和样式表的基本写法。层叠样式表不同于以前学习的HTML语言，它是HTML语言的扩展，它弥补了HTML语言