21、CSS入门：为网页增添风格

CSS入门：为网页增添风格

1. 开启CSS之旅

在网页设计中，我们之前主要专注于学习HTML来创建网页的结构。然而，浏览器默认的样式往往不尽如人意。而CSS（层叠样式表）的出现，让我们能够完全控制网页的呈现，甚至常常无需更改HTML代码。

CSS就像是一种新的语言，我们需要学习它，就如同在一个双语小镇中掌握两种交流方式一样。掌握CSS后，我们就能随心所欲地设计网页风格。

2. 理解CSS语言

2.1 CSS类比

为了更好地理解CSS，我们可以借助一个类比。想象一个类似“Trading Spaces”的节目，两个邻居交换房屋，用1000美元在48小时内重新设计一两个房间。在网页世界里，CSS就像是描述房间设计的语言。

在CSS中，每个语句由位置（如卧室）、该位置的属性（如窗帘或地毯）以及应用于该属性的样式（如蓝色、1英寸的瓷砖）组成。例如：

bedroom {
    drapes: blue;
    carpet: wool shag;
}
bathroom {
    tile: 1in white;
    drapes: pink;
}

2.2 CSS与HTML结合

HTML中没有房间，但有各种元素，这些元素就是我们要进行样式设计的位置。例如，若想将 <p> 元素的背景颜色设置为红色，可以这样写：

p { 
    background-color: