《CSS规则》课件可编辑.pdfVIP

第7章CSS规则

•对于设计者来说，总是希望能够在页面中自由发挥创意，

实现自己的想法。然而，HTMLh1标签定义的标题，始

终是定义为较大的字体的文本，不会改变，所以在没有

CSSCSS是什么？CSS就是一个无所不能的巨大的“属性集”。

7.1如何学习CSS

•CSS常被翻译为“级联样式表”，如果现在还不理解“级联”

是什么概念，那么可以Cascading一词的本意来理解。其

有“小瀑布，瀑布状的”意思，不妨就把CSS形象地理解为“

瀑布一样的样式表”，一个CSS看上去是这样的：

•body{

•font-family:黑体//字体样式

•font-size:80%//字体大小

•color:black//字体颜色

•background-color:blue//背景颜色

•margin:1em//在页面中的定位

•padding:0//设置间距为0

•}

7.2CSS基本的规则写法

•CSS已经发展很多年了，但是直到前两年，CSS才得到所

有网页浏览器的支持。至今，CSS已经形成了自己的一套

语法，这套语法由一些标志构成。简单地说，就是一个基

本的样式表由选择器、属性和属性值构成

基本的样式表的写法

•CSS样式表也有属于自己的写法规则，在特定的规则下编

写，才可以使之生效，一个标准的CSS写法是这样的，如

下所示：

•h1{

•font-family:黑体;

•}

7.2.2使用类CLASS和标志ID链接样式表

•一个定义好的样式表，需要通过class或标志id来定位它

所作用的页面内容。id标志在同页面中可以实现链接，作

用相当于在页面中定位一个锚点。id在链接CSS属性表时，

所起到的作用也是一样的，而类似这样作用的还有class。

class和标志id之间是有区别的。

7.2.3创建选择器

•选择器是用来告诉浏览器这段代码将应用到页面中的哪个

对象。通过调用，HTML可以根据内容的不同，而选择不

同的样式来修饰内容。所以要将CSS样式应用到HTML中，

首先要选择合适的选择器，来对HTML的元素进行样式的

控制。

•CSS中主要有3种基本选择器：HTML选择器（HTML

selector）、id选择器（idselector）和class选择器（class

selector）。

1．HTML选择器

•所谓HTML选择器，其实就是重新定义HTML表现性标签

的样式，也就是使用标签名来作为选择器。正如文中最初

所提的，h1标签内的文本应是黑色大体字，而当通过重

新定义之后，h1标签内可以是任何样式。

2．派生选择器

•通过依据元素在其位置的上下文关系来定义样式，称之为

派生选择器。也就是前一个对象包含后一个对象，对象之

间使用英文的空格键来隔开。这种方式很好地体现了CSS

的“级联”特性。如下面这个例子，使用了2个标记来定义

CSS样式表。

•h1h2{

•color:red;

•font-size:1em;

•font-family:黑体;

•}

2．派生选择器

•注意：“h1h2”和“h1,h2”含义是不同的，将在后面的分组选

择器中介绍后者的定义。

•在写法上，在上级对象h1和目标对象h2之间使用空格来指

定样式，如将这个样式表添加入实例7-3的style标签中，

样式表将作用于h1标签内的h2标签中的对象，这里添

加以下几行代码来说明，如在实例7-3的body部分中放

入以下代码：

•h1HTML选择器的使用/h1

•h2HTML选择器的使用/h2

•h1h2HTML选择器的使用/h2/h1

3．ID选择器

•在一个网页中，每一个标签都可