我的书签
添加书签
移除书签CSS：为页面添加样式
HTML曾经一度是需要掌握的唯一语言。我们可以构建带有彩色文本和图形的页面，并且使得单词以不同的大小、字体和颜色显示。但如今，访问者期待从Web站点得到更多，因此，我们需要使用一种新的、更为灵活的技术，即CSS，从而给页面更高级的视觉效果。CSS是一种格式化语言，可用于美化文本、构建复杂的页面布局以及为站点广泛添加样式。
把HTML仅仅看做构建一个Web页面的语言。它帮助我们标识出想要让世界知道的内容。像＜h1＞和＜h2＞这样的标签表示标题，并且赋予了相关的重要性：1级标题比2级标题更为重要。＜p＞标签表示一段基本的信息。其他的标签也提供了进一步的结构化线索，例如，＜ul＞标签表示一个符号列表（例如，生成一个更为智能的配方成分列表）。
另一方面，CSS为组织良好的HTML内容添加了设计才能，使得它更美丽并且更容易阅读。基本上，CSS样式只是告诉Web浏览器如何在页面上显示特定元素的一条规则。例如，可以创建一条CSS规则来使得所有的＜h1＞标签以36像素的高度显示，字体为Verdana，颜色为橙色。CSS可以做很多功能强大的事情，例如，添加边框、改变页内边距，甚至控制一个页面元素的确切位置。
说到JavaScript，对页面做出的一些最有价值的改变涉及了CSS。我们可以使用JavaScript来给一个HTML标签添加CSS样式，或者从该标签删除一个CSS样式，或者根据访问者的输入或鼠标单击来动态地改变CSS属性。我们甚至可以从一种样式的一个属性动画地变换为另一个样式的该属性（例如，将背景颜色动态地从黄色修改为红色）。例如，可以通过直接修改CSS的display属性来让一个页面元素显示或隐藏。要实现一个项目在屏幕上的动画，可以使用JavaScript来动态地修改CSS position属性。
样式剖析
单个样式定义的一个元素的外观是很基础的常见用法。它实际上是一条规则，告诉Web浏览器如何格式化某内容，把标题变蓝色、围绕照片绘制一个红色边框，或者创建一个150像素宽的边栏来容纳链接的列表。如果样式可以说话，它会说：“嗨，浏览器，让这个看起来像这样。”样式实际上由两个元素组成：浏览器要格式化的Web页面元素（选择器），以及实际的格式化指令（声明块）。例如，选择器可以是一个标题、一段文本、一张照片等。声明块可以把文本变为蓝色、围绕段落添加一个红色边框，或者把照片放置到页面的中央，其可能性是无限的。
注意：技术类型通常遵从W3C的领导，并且叫做CSS样式规则。本书交叉地使用术语“样式”和“规则”。
当然，CSS样式不会用漂亮的英语来交流。它们有自己的语言。例如，要设置Web页面上所有段落的字体颜色和字体大小，应该这样编写：
p{color：red；font-size：1.5em；}
这个样式只是说：“让所有段落的文本（以＜p＞标签标记的内容）显示为红色和1.5 em高”（em是基于浏览器的常规文本大小的一个单位或度量）。如图I-1所示，即便像这样的一个简单样式也包含几个元素：
选择器·。选择器告诉浏览器要样式化页面上的哪一个或哪几个元素，例如标题、段落、图像或链接。在图I-1中，选择器（p）引用所有的＜p＞标签，这让Web浏览器使用这个样式的格式化指令来格式化所有的＜p＞标签。使用CSS所提供的范围广泛的选择器，加上一点儿创新性，我们就可以实现对页面格式化的很好控制（选择器是使用jQuery的一个重要的部分，将从4.6节开始详细介绍它）。
·声明块。跟在选择器后面的代码包含了我们想要对选择器应用的所有格式化选项。这个块以一个左花括号（{）开头，以一个右花括号（}）结束。
·声明。在声明的左花括号和右花括号之间，添加一个或多个声明，或者格式化指令。每个声明有两个部分，一个属性和一个值，然后以一个分号结束。
·属性。CSS提供了范围广泛的格式化选项，叫做属性。属性是一个单词，或者连字符连接的几个单词，表示某种样式效果。大多数属性拥有一个直白的名字，例如，font-size、margin-top和background-color。例如，background-color属性设置背景颜色（可以猜想得到）。
注意：如果需要复习有关CSS的知识，请阅读《CSS：The Missing Manual》。
·值。最后，将通过给一个CSS属性赋值来表现自己的创新能力，例如，使得背景为蓝色、红色、紫色或黄绿色。不同的CSS属性需要特定类型的值，包括颜色（例如，红色或#FF0000）、长度（例如，18px、2in或5em）、URL（例如，images/background.gif）或者一个特定关键字（例如，top、center或bottom）等。
图 I-1：样式（或规则）由两个主要部分组成：一个是选择器，告诉Web浏览器要格式化什么；另一个是声明块，列出了浏览器用来样式化选择器的格式化指令
我们不需要像图I-1那样把样式写成单独一行。很多样式有多个格式化属性，因此，将它们划分为多行可以使其更容易阅读。例如，我们可能想要把选择器和开始花括号放在第一行，每个声明独占一行，结束花括号独自在最后一行，如下所示：
p{
color：red；
font-size：1.5em；
}
缩进格式也有帮助，可以缩进一个制表符或者两个空格，从而在视觉上把选择器和声明区分开来，使得很容易搞清楚哪个是哪个。最后，在冒号和属性值之间添加一个空格是可选的，但是添加空格的话，可以增加样式的可读性。实际上，可以在二者之间添加任意多个空格。例如，color：red、color：red和color：red都有效。
