第8章 css基础知识

Click to edit Master text styles,Second level,*,第八章,CSS,基础,网页设计基础,本章要点,样式表的,概念,样式表的,引入方法,规则的书写方法,样式表的类型,8.1,样式表的概念,CSS(Cascading,Style Sheet),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息和网页内容分离的一种标记性语言。,CSS,是,1996,年由,W3C,审核通过，并且推荐使用的。简单的说，,CSS,的引入就是为了使,HTML,语言更好地适应页面的美工设计。它以,HTML,为基础，提供了更丰富的格式化功能，如字体、颜色、背景和整体排版等。,8.2 CSS,的特点,CSS,的最大特点就是将内容和格式分离。（以,.,css,为扩展名存储一个独立的文件）。利用,CSS,网站开发人员可以在,HTML,文档中安排内容，在另一份样式文档设计这些内容的显示方式，比如字体颜色、字体大小、行距等。,使用,CSS,可大大缩减页面代码，提高页面浏览速度；使文档结构清晰，缩短改版时间；强大字体控制和排版能力，容易编写，可以像写,HTML,代码一样轻松编写,CSS,；可以将许多网页的风格格式同时更新，可将站点上网页风格都使用一个,CSS,文件进行控制。,8.3,重要概念,元素,在,HTML,文档中，元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签（有些结束标签可以省略，如,）和包含在这两个标签里的所有内容。我们把标签名作为元素的名称。,例如：,欢迎,父元素,/,子元素,若元素,A,的开始标签和结束标签之间包含其它元素,B,，则元素,A,称为元素,B,的父元素，反之元素,B,为元素,A,的子元素。,例如：,欢迎,属性,在,HTML,文档中属性是指某个元素某方面的特性，比如颜色、字体大小、高度、宽度等。对于每个属性能且仅能指定一个值。,例如：颜色为红色、字体大小为,20,磅。,8.4 CSS,的基本语法,规则,一个,CSS,样式表是由许多样式规则组成的，其规则为：,选择符,属性,1,：值对,1,；属性,2,：值对,2,；,规则是一系列“属性：值对”的集合，它用来控制网页元素的显示方式。根据规则中对属性的设定，浏览器会按照设定的值来显示标签内的内容。,基本写法,一个规则包括一个选择符，以及紧跟其后的一系列属性：值对，所有属性：值对用“,”,包括，各属性：值对之间用分号“；”分隔。,例如：,pcolor,：,red,；,font-size,：,20pt,如果选择符使用,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,标签结合起来：内联样式表、文档级样式表和外部样式表。,内联样式是给某一个元素设定具体的样式规则,.,文档级样式的作用范围是整个文档,放在文档的头部,.,外部样式的作用范围是所有引用或链接它的,html,文档,外部样式表是以,.,css,为扩展名的纯文本文件,.,8.6 CSS,样式表的引入,内联样式表,内联样式是连接样式和标签的最简便的方法，只需要在标签中包含一个名为,style,的属性及其值即可。其中,style,属性和它的值之间用“,=”,连接，其值是一串字符，该字符是一个规则的简写，它只省略了规则的选择符和“,”,剩下的属性,:,值对则描述了具体的显示样式，浏览器会根据样式的属性及其值来显示标签中的内容。,语法：,欢迎光临,二级标题红色，,20,磅大小，斜体。,文档级样式表,内联样式表只是将样式规则加在某一标签内部，其影响范围仅限于该标签，而文档级样式表则将所有规则罗列在文档的开头，它可以影响整篇文档。文档级样式表的写法是在文档的,和,标签之间添加,和,标签，在,标签中指定属性,type,的值为”,text/,css,”,，将规则置于这两个标签之间。,语法：,外部样式表,外部样式表是一个独立的纯文本文件，其文件名一般为“*,.,css,”,，所有的规则均放置在该文件内。外部样式表最大的优点是可以用于多个文档，它可以对庞大的文档集中所有的相关标签起作用。,假设存在一个外部样式表文件,styles.css,，那么可以有两种方法载入样式表：,链接和引入,。,1,、链接,链接外部样式表的方法是在文档的,标签中使用,标签，使用该标签的,rel,属性指定外部样式表文件与,HTML,文档的关系是,stylesheet,（,rel,=”,stylesheet,”,是指在页面中使用外部的样式表），用,type,属性指定引用的文档是,CSS,文档（,type=”text/,css,”,是指文件类型是样式表文件），使用,href,指定,CSS,文档的位置。,语法：,head,链接同一个文件夹下一个名为,styles,的外部样式表,2,、引入,引入外部样式表的方式是使用,标签中的一个特殊命令,import,引入文件：,8.7 CSS,的优先权原则,当多个样式表对某一元素的定义发生冲突时，浏览器会按如下优先权原则进行处理：,若在同一个类型的样式表中发生冲突，那么按最后定义的样式来显示,若在不同类型的样式表中发生冲突，那么按照内联样式表、文档级样式表、外部样式表的优先权顺序显示,8.8 CSS,三种方法的比较,假定有,100,个类似的网页，每个网页均含有,100,处相同的设置（例如红色字体），现在要将这总共,10000,处红色文字改为蓝色。那么在不使用,CSS,的情况下，需要作,10000,处修改；在只使用内联样式表的情况下，也需要作,10000,次修改；在只使用文档级样式表的情况下，需要作,100,次修改；最后，如果使用的是外部样式表，那么只需对该样式表作一次修改即可。,8.9,样式类,用户可能会发现当使用重置定义的时候,只能给一种标签定义一种样式。例如给标签,P,定义了红色文字后，所有,中的文字都为红色。那么能不能使某些,P,显示红色，而另一些,P,显示其他颜色呢？答案是可以的，那就是使用样式类。,样式类分为常规类、一般类和,ID,类三种。,常规类,常规类规则与一般规则的区别在于选择符的书写方法不同。一般规则的选择符是一个标签名（例如,p,），而常规类规则的选择符是标签名加上类名，中间用“,.”,号分隔（例如,p.red,，,red,是类名）。定义了一个,P,的名叫,red,的类。在正文中引用时只要在标签中通过类属性指定类名（用,class=,类名）即可，大多数,HTML,标签都有类（,class,）属性。如,正文内容,。,一般类,常规类需指定具体的标签和类名，也就是说当定义了一个规则后，该规则只能应用于某一个标签，那么想定义一个规则而又能应用于多个标签，就需使用一般类。,一般类规则的定义和常规类相似，只是去掉了标签名，比如,.,redcolor:red,(,注意前面的“,.”,不能省略,),。其应用方法也和常规类一样。,ID,类,ID,类和一般类很相似。,ID,类规则的定义只是把一般类定义中的“,.”,号改为“,#”(,如,#,redcolor,：,red),，引用时在标签中使用,id,属性指定,id,名（如,正文内容,）。,本章主要介绍层叠样式表的概念、样式表的种类及引入方法和样式表的基本写法。层叠样式表不同于以前学习的,HTML,语言，它是,HTML,语言的扩展，它弥补了,HTML,语言的不足，学生需要在以后的学习中将两者加以区分。,本章小结,思考题,(1),什么是,CSS,？,CSS,的特点是什么,?,(2),什么是,CSS,的规则,?,(3),如何将,CSS,和,HTML,相结合？,(4)CSS,的优先权原则是什么,?,(5),样式类的分类,?,(6)Id,类和,class,类的区别是什么？,Thank You!,第八章 结束,