第2章CSS选择器与相关特性

CSS网页设计标准教程

第1部分 CSS核心原理

第2章 CSS选择器与相关特性

2.1

构造CSS规则

2.2

基本CSS选择器

2.3

在HTML中使用CSS的方法

2.4

复合选择器

2.5

CSS的继承特性

通过上一章的学习，了解了在网页设 计中引入CSS的意义。 引入CSS的核心目的就是实现网页结构 内容和表现形式的分离，将原来由HTML语 言所承担的一些与结构无关的功能剥离出 来，改由CSS来完成。

本章介绍CSS是如何工作的。 重点介绍CSS的“选择器”这一核心概 念，以及相关的两个特性——“继承”和 “层叠”。

2.1 构造CSS规则

在具体介绍CSS之前，先思考一个生活 中的问题。

张飞 {

身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; }

这个表实际上是由3个要素组成的，即 姓名、属性和属性值。

CSS的作用就是设置网页的各个组成部 分的表现形式。 因此，如果把上面的表格换成描述网 页上一个标题的属性表，可以设想应该大 致如下：

2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }

再进一步，如果把上面的表格用英语 写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; }

CSS的思想就是首先指定对什么“对象” 进行设置，然后指定对该对象的哪个方面 的“属性”进行设置，最后给出该设置的 “值”。 因此，概括来说，CSS就是由3个基本 部分——“对象”、“属性”和“值”组 成的。

2.2 基本CSS选择器

在CSS的3个组成部分中，“对象”是 很重要的，它指定了对哪些网页元素进行 设置，因此，它有一个专门的名称——选 择器（selector）。

2.2.1

标记选择器

<style> h1{ color: red; font-size: 25px; } </style>

声明

声明

h1

{

color: red; 属性 值

font-size: 25px; 属性 值

}

选择器

图2.1 CSS标记选择器

2.2.2

类别选择器

声明 声明

类别名称 .class

{

color: green; 属性 值

font-size: 20px; 属性 值

}

类别选择器

图2.2 类别选择器