第15章CSS基础知识.pptVIP

第15章 CSS基础知识 CSS是Cascading Style Sheet的缩写，翻译成中文的意思是层叠样式表单，之前所用到的样式表就是本章要学习的CSS。本章先介绍其基础知识，通过前面的认识和现在的学习，本章的内容是学习CSS时必须掌握的基本知识，但在本章中，只初步的介绍一下，更为详细的内容将会在以后的章节中介绍， 学习本章，将会更清楚了解以下内容： CSS编写环境 CSS文件链接方式 CSS在浏览器兼容性 选择符 伪元素 CSS常用单位 CSS的实例 15.1 CSS简介 对于一个网页设计者来说，对HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅靠HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对 CSS进行初步的体验。 CSS是Cascading Style Sheet 的缩写，翻译成中文是层叠样式表单，有时简称样式表。它是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS通常在网页制作中起重要角色，而且还可以减少网页代码量，更能提高网络访问网页的速度，而且更容易学习和实践，所以CSS越来越被更多的网页工作者采用。 CSS常常与HTML标签配合使用，通过链接方式（下一节会讲到）对HTML标签控制，使网页达到更美效果。 15.2 CSS文件链接方式 CSS文件链接分成内联接、链接内部CSS和链接外部CSS三种方式，该知识点在14.2节中已详细详解，本节中不再赘述。 在现在的网站中，网页设计者都先新建一个CSS文件，然后在网页中链接此CSS文件，每控制HTML标签都在这个CSS文件中写入CSS代码，当要修改所有网页的风格时，只要对CSS样式修改即可。一个网站少则一个CSS样式，多的也有三五个，当然链入多个外部样式，则需要多个link。 链接CSS样式是HTML与CSS联合的基础，做好这一步，才可以在CSS中的属性控制HTML标记，使网页表达出更好的效果。 注意：如何对CSS文件链接请查看14.2节—CSS文件链接。 15.3 选择符 CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号，CSS选择符只能以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS（类选择符）选择符。 HTML标签选择符是指在CSS中，用HTML的标记来代表网页中这些标记中的样式集合，用CSS控制这些标记，会改变标记的默认样式，如下所示： P { /*设置段落的外补丁*/ Margin:0px; } 在HTML标记中的p/p，表示一个段落，当这个段落被上面的CSS样式控制时，使默认的段落间隔没有了，即段落间的间隔为0（margin控制的效果）。同理，这些标记除了p外，还有div、td、tr、body等。 15.4 伪类 通过对CSS的学习，在前面实例中用到选择符如div，p等标记类型的样式设置，称为类型选择符。同理，在标记中设置ID或CLASS称之为ID选择符和CLASS选择符，除了类型选择符、ID选择符和CLASS选择符之外，CSS也允许使用伪类和伪元素选择符。 伪类选择符是基于一组预定义性质的选择符，HTML元素可以占有这些预定义性质。实际上这些性质与class属性的功能是相同的，因此在CSS术语中，它们被称作伪类。在对应这些伪类的标记中，不存在真正的class属性，相反，它们代表应用到这些元素的某些方面，或者是相对于该元素的浏览器用户界面的状态。 伪选择符标识虚拟元素，即在标记中不存在，但是浏览器可以推理并应用样式的元素。在伪类中，没有对应伪元素的标记。 15.5 注解 注解在CSS中常用到，用来注释CSS代码功能等，使自己或他人以后看到某代码就知道其内容的功能等信息，使程序可读性更强，CSS注解有两种方式，第一是单行注解，第二种是多行注解。 单行注解是指在CSS代码中，只对单行做注解，浏览器解释到浏览时不会执行，只起标示作用，单行注解语法如下表示。 /*这是单行注解*/ 单行注解是用斜线与星号组成的，其中星号在内，里面所包含的文本是被注解的信息，而多行文本注解与单行文本一样，在CSS中，用斜线和星号表示注解的开始，然后是注解的内容，注解结束用星号和斜线表示，在代码编辑器中，注解的文本颜色与代码不同，下面表示多行注解。 /* 这是注解第一行。 这是注解第二行。 。。。。 */ 多行注解就是用斜线包含其注解内容，分布在多行文本中，需注意的是，这些注解符不能交叉，且不能没有结束符。 15.6 单位 长度的值由可选的正号 + 或负号 - 、接一