网页中设置超链接颜色 CSS 基础

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径（本例中 color 就是

元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

如果要同时修改多个属性，只需要将它们用分号隔开网页中设置超链接颜色，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

选择多个元素

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

p,
li,
h1 {
  color: red;
}

不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称选择的内容示例

元素选择器（也称作标签或类型选择器）

所有指定类型的 HTML 元素

p 选择

ID 选择器

具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID

#my-id 选择

或

类选择器

具有特定类的元素。单一页面中，一个类可以有多个实例

.my-class 选择

和

属性选择器

拥有特定属性的元素

img[src] 选择

但不是

伪类选择器

特定状态下的特定元素（比如鼠标指针悬停于链接之上）

a:hover 选择仅在鼠标指针悬停在链接上时的 元素

字体和文本

在探索了一些 CSS 基础后，我们来把更多规则和信息添加至 style.css 中，从而让示例更美观。

第一步，以 元素的形式添加进 index.html 文档头部（ 和 之间的任意位置）。代码如下：

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

接下来，删除 style.css 文件中已有的规则。虽然测试是成功的，但是红字看起来并不太舒服。添加以下几行（如下图所示），font-family 属性指的是你想用于文本的字体。这个规则为整个页面定义了一个全局的基本字体和字体大小。由于 是整个页面的父元素，它里面的所有元素都继承相同的 font-size 和 font-family。

html {
  font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
  font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
}

接下来为 HTML 主体内的元素（h1、 和

）设置字体大小。我们也将标题居中显示。最后，扩充下方的第二个规则集，为正文设置行高和字间距网页中设置超链接颜色，从而提高页面的可读性。

h1 {
  font-size: 60px;
  text-align: center;
}
p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

可以随时调整这些 px 值来调整获得满意的结果。

CSS：一切皆盒子

编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：

这里还使用了：

开始在页面中添加更多 CSS 吧！大胆将这些新规则都添加到 style.css 的底部，而不要纠结改变属性值会带来什么结果。

更改页面颜色

html {
  background-color: #00539f;
}

这条规则为整个页面设置了背景颜色。

文档体样式

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff0000;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

说明：

定位页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

你可能已经注意到，在正文的顶部有一个难看的间隙。这是因为浏览器对 h1 元素（以及其他元素）应用了默认样式。这可能看起来是个坏主意，但其目的是为没有样式的页面提供基本的可读性。为了消除这种间隙，我们用设置 margin: 0; 来覆盖浏览器的默认样式。

接下来，我们将标题的顶部和底部内边距设置为 20 像素。

之后，我们将标题文本设置为与 HTML 背景颜色相同的颜色。

试着用不同的值进行试验，看看它是如何改变外观的。

图像居中

img {
  display: black;
  margin: 0 auto;
}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但有一些差异，需要额外的设置来使CSS发挥作用。

元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是行级元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

注意：

以上说明假定所选图片小于页面宽度（600 像素）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以： 1）使用图片编辑器 来减小图片宽度； 2）用 CSS 限制图片大小，即减小

元素 width 属性的值。如果你暂时不能理解 display: block 和块级元素与行级元素的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。 总结

如果你通过本文进行实践，那么最终可以得到以下页面：

于页面宽度（600 像素）。更大的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以： 1）使用图片编辑器 来减小图片宽度； 2）用 CSS 限制图片大小，即减小

元素 width 属性的值。

2. 如果你暂时不能理解 display: block 和块级元素与行级元素的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。

总结

如果你通过本文进行实践，那么最终可以得到以下页面：