《CSS的基本语法》PPT课件

《《CSS的基本语法》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章CSS的基本语法CSS语法中最基本的语法是选择器的概念和选择器的声明。本章将详述CSS的各种选择器，正确使用CSS选择器能为建立标准的XHTML页面带来很多的好处。本章还将讲述CSS的继承和层叠，理解和掌握这些概念是使用CSS样式表的重要基础。本章内容包括：深入讲解CSS语句的基本组成部分：选择器和声明讲解CSS的继承和层叠3.1选择器选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全

2、局选择器、组合选择器、继承选择器和伪类等。3.1.1标签选择器一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。图3.1为标签选择器的结构。3.1.2类选择器使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。图3.3为标签选择器的结构。3.1.3ID选择器ID选择器和类选择器相似，不同的

3、是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。图3.5为标签选择器的结构。3.1.4全局选择器全局选择器是一个星号。它能作用于XHTML文档中的所有元素。图3.7为全局选择器的结构。3.1.5组合选择器标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择

4、器，但在实际中经常使用。3.1.6继承选择器学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。以下通过实例来详细讲解这两个重要的CSS概念。1．文档树2．CSS的继承3．继承选择器3.1.7伪类伪类也是选择器的一种，但是用伪类定义的CSS

5、样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：first-child、:link:、vistited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:active、vistited和:hover。3.2声明声明是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写

6、法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则：声明中属性和值之间用分号隔开；声明中可以包含多个属性，详见3.2.1小节多重声明；使用多重声明时，每个声明用分号隔开；声明的大括号必须书写完整。3.2.1多重声明多重声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。h1{color:red;}h1{font-size:14px;}h1{font-weight:bold;}h1{color:red;font-size:14px

7、;font-weight:bold;}3.2.2集体声明集体声明是指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。设置好网页中某个元素的CSS样式后，另外一个元素也要应用相同的样式。h1{color:red;font-size:14px;font-weight:bold;}h1{color:red;font-size:14px;font-weight:bold;}h1{color:red;font-size:14px;font-weight:bold;}h1,h2,h3{

8、color:red;font-size:14px;font-weight:bold;}.one{color:green;font-size:16px;text-decoration:underline;}#two{color:green;font-size:16px;text-decoration:underline;}p.three{color:green;font-size:16px;text-decoration:underline;}.one,#two,p.three{color:gre