《第三章 CSS技术.doc》由会员分享，可在线阅读，更多相关《第三章 CSS技术.doc（5页珍藏版）》请在金锄头文库上搜索。
1、第三章 CSS技术一.CSS的基础知识l CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。l CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计出更具表现力的网页效果。1. 样式表和HTML的关系l 样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading Style
2、Sheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。l 样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。2. 样式表的基本结构样式表的基本结
3、构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。首先建立一个简单的HTML文件。简单的样式表样式表这是一个简单的样式表现在，给这个HTML文件加一些样式表。只需在标签之前插入以下代码：这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。由这个简单的样式表实例，可以看出：一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。样式表的核心是规则，样式表的规则如下：选择符属性1:值1;属性2:值2如，h1color:green这个规则就是告诉浏览器所有标签和之间的文字以绿色显示。其中h1就是选择
4、符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。3.如何在网页中加入css我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点：(1)将样式表加入到HTML文件行中可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下：(2)将样式表嵌入到HTML文件的文档头中.说明：A. 标签是用来说明所要定义的样式。type属性是指定标签以CSS的语法定义。B. 样式表基本格式中的type
5、=text/css用于说明这是一段CSS规则代码。C. 为了防止不支持CSS的浏览器将标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入标签之间。D. 选择符1.选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。E. 样式属性：定义样式的属性名称(3)将一个外部样式表链接到HTML文件上前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HT
6、ML文件。这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。它的使用方法是：创建一个普通的网页，但不使用规则，而是在HTML文档头部使用标签。基本语法如下：.说明：A. *.css为预先编写好的样式表文件。B. 外部样式表文件中不能含有任何像或这样的HTML标签。样式表仅仅由样式表规则或声明组成。C. 在href属性中可以使用绝对URL或者相对URL。D. 外部样式表文件中，无须使用注释标签。E. 如同发布HTML文件那样，将这个CSS文件发布到服
7、务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。(4)将一个外部样式表输入到HTML文件中输入样式表的方法同链接到外部样式表文件类似。其语法如下：说明：A. import语句后的“；”号是必须的。B. 要输入的样式表文件的扩展名为.css。以上四种方法，可分成内部样式表（前两者）及外部样式表（后两者）两类。4. class与id类选择符(1)class类选择符class类选择符用于指定标签属于何种样式类。class类选择符的使用语法如下:或者下面是语法各部分的说明：1 *.a1.*.an：为定义的类选择符名称，通常在定义样式时指定给样式的名
8、称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。*符号也可以用HTML内的标签替代（即标签1.标签n），此外*符号，在设置可以省略。2 标签1.a1.标签n.an：为HTML的标签名称，即前面提过的*符号，也可以用HTML内的标签替代。不同点在于，若在定义class类选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。例如，在样式表中可以定义这样的类，代码如下：.ppcolor:lime;font-family:黑体p.ptcolor:blue;font-family:仿宋这些类可以使用class属性在HTML中引用：这是我们定义的PP类这是我们定义的P
9、T类在这个例子中，pp类可以用于任何HTML标签，因为它在样式表中没有与特定的HTML标签关联。而这个例子中pt类只能用于标签。对于HTML文档中在结构上相同的部分，类是应用样式的有效办法。(2).id类选择符id类选择符与class两者最大的差别在于定义样式名称前的符号,用class定义时为“*.样式名称”；若用id定义时为“#样式名称”。id与class虽然在标签内的定义写法不太一样，但基本上其显示在网页上的效果是一样的。id类选择符的使用语法如下:或者下面是语法各部分的说明：1) #a1.#an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由
10、class类选择符所引用的设置。2) 标签1.a1.标签n.an：为HTML的标签名称，不同点在于，若在id选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。5.CSS的几个特性1）可以归类CSS的规则可以多个HTML标签采用同一样式，例：h1,pfont-family:黑体这项规则设定所有被和标签包含的网页内容将用黑体显示。2）样式表的规则具有继承性样式表的规则可从母体延续到子体，例：bcolor:blue这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？这是一个样式表实例对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。3）情景选择如果想让所有斜体显示的文字（即被和标识的文字）都以红色显示，但条件是只有当这些斜体显示的文字出现在通常的段落文字（即被标识的文字）内时。这就需要使用“情景选择”来实现。通过“情景选择”可设定一个可以执行选择说明的情景。带情景选择的样式表的格式如下：情景标签标识符属性:属性值其中的HTML代码：这是一个样式表实例这是一个样式表实例表示只将所有之内斜体显示的文字以红色且大字体显示。所以，之外斜体显示的文字不会以红色显示，而之内的文字则以指定字体显示。二.CSS的属性1设置字体样式2控制图文布局3颜色及背景4美化网页与超链接的设置5 CSS定位
