65.9K
CodeProject 正在变化。 阅读更多。
Home

网页开发 #3：使用 CSS 3 美化页面

Sander Rossel
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.72/5 (9投票s)

2014年11月18日

CPOL

10分钟阅读

viewsIcon

31131

Web 开发系列之三。

这是关于 Web 开发系列博客的第三篇。您可以在此处找到其他博客。

  1. Web 开发 #1：互联网和万维网
  2. Web 开发 #2：使用 HTML 创建我们的第一个网站
  3. 网页开发 #3：使用 CSS 3 美化页面
  4. Web开发 #4：后端PHP
  5. Web 开发 #5：使用 HTML 表单进行用户输入
  6. Web 开发 #6：使用 JavaScript 进行交互
  7. Web 开发 #7：使用 AJAX 进行动态页面更新
  8. Web 开发 #8：接下来去哪里

在本期关于 Web 开发的系列文章中，我们将对上一篇博客文章中创建的网页应用一些样式。因此，如果您还没有阅读那篇文章，请务必阅读，或者至少在该文章底部获取页面的 HTML。

关于 CSS

CSS 代表层叠样式表 (Cascading Style Sheet)，用于为您的网页应用样式（例如设置背景或更改字体）和创建布局（相对于彼此定位元素）。与 HTML 一样，CSS 也有不兼容和不支持的浏览器历史。尽管 CSS 1（实际上是级别 1）自 1996 年就已存在，但直到 2010 年，大多数浏览器才完全（或多或少正确地）支持 CSS。同样，每个浏览器渲染网页的方式都不同，因此在不同的浏览器中测试您的 CSS 非常重要。

我们目前处于 CSS（级别）3。与之前的版本（CSS 1、CSS 2 和 CSS 2.1）相比，CSS 3 的不同之处在于它被划分为模块，例如颜色、字体和动画（实际上有五十多个模块！）。这允许各种样式选项独立开发。因此，各种模块具有不同的状态，并且只有少数是实际的推荐（与草稿或正在进行的工作相对）。

那么为什么 CSS 如此重要呢？它清晰地将您的内容与您的视觉效果分开。它基本上是您想传达什么与您想如何传达。‘什么’进入您的 HTML，‘如何’进入您的 CSS。通过这种分离，您可以轻松地为您的网站创建一个新页面，而无需担心样式问题。或者您可能希望为您的网站进行外观改造，而无需更改其内容。作为额外的好处，您的 HTML 和 CSS 文档都将看起来更整洁，更易于阅读！

CSS 语法

够了这些历史课！让我们看看一些 CSS。实际上有三种将 CSS 应用到 HTML 的方法。第一种是内联，这意味着您在 HTML 元素中使用style 属性定义它，而我们刚刚说过我们不想这样做。第二种方法是将您的 CSS 嵌入到 HTML 的head部分。这听起来比内联要好，但仍然不够好（我们仍然需要编辑 HTML 文件才能更改样式）。第三种方法，也是我们将使用的方法，是在单独的文件中定义您的样式。

因此，只需启动您的文本编辑器（再次是记事本或 Notepad++），并将其保存为“mystyle.css”（其中“mystyle”是您选择的名称）。应用样式时，您需要做的第一件事是考虑要将样式应用到什么。假设我们希望我们的标题（更具体地说是我们的 h1 元素）具有红色文本颜色。您将从编写一个选择器开始。在这种情况下，选择器就是 h1。请注意，注释（供人阅读）以 /* 开头，以 */ 结尾。

h1 {
    /* Your style here... */
}

就这么简单。现在在大括号内（您从 C、C++、C#、Java 等中熟悉它们），我们将定义样式，该样式将应用于我们的 h1 元素。这看起来像“属性：值；”。所以让我们定义红色。

h1 {
 color: red;
}

这看似简单。是的，CSS 可以如此简单，但是一旦您的布局变得有点复杂……您的 CSS 也会变得复杂。您也可以在一个选择器中放置多个属性。所以保存您的文档（现在最好与您的 HTML 文档在同一文件夹中，否则您将不得不更改下面href 属性中的路径）。我们将把这种样式应用到我们的 HTML 文档（来自上一篇博客的那个）。打开 HTML 并将以下代码行添加到您的头部（例如在底部，就在您的 </head> 结束标签上方）

<link rel="stylesheet" type="text/css" href="mystyle.css">

我不再详细阐述链接元素。当我们要使用 JavaScript 时，我们将再次看到它。现在打开您的 HTML 文档，您会发现您的标题实际上是红色的！太棒了。

选择符

所以我们刚刚开始编写一个选择器，在我们的例子中是 h1 的选择器。然而，选择器可能非常棘手。还记得 HTML 元素可以嵌套吗？在我们的页面中，我们有一个 aside 元素，其中包含一个 h2 元素和一些 p（段落）元素。假设我们想要定位那个 h2 元素并将其设为蓝色。如果我们将 h2 用作选择器，所有 h2 元素都将是蓝色（去试试看）。我们可以通过在选择器中组合元素来定位元素内的元素。

aside h2 {
    color: blue;
}

这将使我们所有 aside 元素中的 h2 元素变为蓝色。您可以继续组合这个。我应该提到，aside 元素中的任何 h2 元素，即使它嵌套在其他元素中，现在都是蓝色的。但是假设您只想将直接父级为 aside 元素的 h2 元素设为蓝色。您现在可以使用 > 符号来使用上下文选择器。

aside > h2 {
    color: blue;
}

现在，如果您有两个 aside 元素，都包含一个 h2 元素，并且您只希望其中一个为蓝色，该怎么办。为此，我们有两种选择，两者都要求我们回到我们的 HTML。第一种是使用ID，第二种是使用类。我们将逐一查看它们。

每个 HTML 元素至少可以具有以下两个属性：id和class。我们可以在 CSS（以及后来的 JavaScript）中使用它们来分组和/或标识页面上的特定元素。在下一个示例中，我修改了我们页面的一部分，使其包含一些 ID 和类。

<h1 id="title">Our first webpage!</h1>
    <p><abbr class="info" title="HyperText Markup Language">HTML</abbr> stands for <b id="HTMLfull" class="info">HyperText Markup Language</b>.</p>
    <p>The language consists of <i class="info">tags</i> that describe the content of a document.
 For example, a tag can indicate that a certain text belongs to a single paragrah,
 that certain text is more important, less important, that an image should be displayed, or that a new line must be inserted.</p>

如您所见，h1 元素具有 ID“title”，b 元素具有 ID“HTMLfull”。此外，我已将“info”类添加到 abbr、b 和 i 元素中。现在让我们在 CSS 中对它们进行样式设置。假设我们希望所有“info”都为浅蓝色，并且我们还希望“超文本标记语言”文本更大。

.info {
    color: lightblue;
}

#HTMLfull {
    font-size: 150%;
}

给您的 ID 和元素一个描述性的名称，例如“info”，而不是“lightblue”，“lightblue”说明了您的样式，而“info”说明了您的含义。因此，在这个示例中，我向您展示了如何使用 ID 和类，甚至可以组合它们（对于现在是浅蓝色且更大的 b 元素）。另一个提示，保持您的 ID 唯一，即使 HTML 和 CSS 不强制执行。

现在假设您希望所有 class 为“info”的 i 元素都是紫色的。没问题！

.info {
    color: lightblue;
}

i.info {
    color: purple;
}

但是在这种情况下我们有一个冲突！i 元素应该是浅蓝色的，因为它具有 info 类。但是，它也应该是紫色的，因为它是一个具有 info 类的 i 元素。如您所见，CSS 应用了一些优先级规则。经验法则是最具体的选择器优先于不那么具体的选择器。在这种情况下，具有 info 类的 i 元素比所有具有 info 类的元素更具体，因此 i 元素获得紫色。

最后，但并非最不重要，您可以使用 * 作为通配符来指定任何元素。例如，您希望元素（比如说一个 aside）中的每个元素都具有特定的样式，但排除 aside 本身。您可以使用以下内容。

aside * {
    /* Your style here... */
}

布局

现在让我们让我们的页面更花哨。让我们添加一些布局。首先，我们希望我们的页面只覆盖屏幕的一部分，比如说 50%。我们还希望它在屏幕中央居中。这有点棘手，但我们必须使用边距（元素周围的区域）。所以我们将定义一个 0 的边距，让我们的浏览器来处理它。我们还将在我们的页面上放置一些背景图片。我从 Google 找了一张图片并决定将其用作背景（确保您没有使用任何受版权保护的东西！）。所以我们将把这种样式应用到我们的整个页面，也就是 body 元素。

body {
    background-image: url(http://p1.pichost.me/i/24/1475865.jpg);
    width: 50%;
    margin: 0 auto;
}

哇！我们的页面已经开始看起来很不错了！现在还记得我们之前那个 aside 元素吗？我想让它稍微突出一点。让我们在它周围放一个（1 像素实线）边框。我还希望它有一个半透明的白色背景，如果你明白我的意思（如果你不明白，你自己会看到）。这是我们 aside 元素的 CSS。

aside {
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 3px;
}

我在那里放置了内边距，以在边框和文本之间创建一些距离。内边距与我们之前使用的外边距类似，但是外边距定义了元素外部的空间，而内边距定义了元素内部的空间。3 像素被证明是足够的空间（通过一些实验发现）。

我仍然对 aside 元素中的 h2 元素不满意。我添加了一些额外的样式。

aside h2 {
    color: blue;
    border: 2px solid black;
    width: 25%;
}

区块

作为画龙点睛之笔，我希望我们的图片水平居中。不幸的是，这并不像听起来那么容易。我之前没有提到这一点，主要是因为这是最重要的，但 HTML 有两种元素：块级元素和行内元素。基本上，块级元素表示页面上占据矩形空间的重要项目。此类元素的示例有 p 元素、h* 元素和 ul 和 ol 元素（分别表示无序列表和有序列表）。行内元素是页面上位于块级元素内的较小项目。示例有 a、u、em 和 strong 元素。

到目前为止，当我们想要改变元素位置时，它们都是块级元素（body 和 h2 元素）。然而，img 元素是一个行内元素。这意味着浏览器通常只是将它们渲染在其周围内容的同一行上，并且行内位置跳转有点奇怪。因此，我们必须让 CSS 知道在重新定位 img 之前将其视为块级元素。幸运的是，这很容易！我们可以像重新定位 body 一样重新定位图像，使用 margin。

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

现在看看当你如下修改你的段落时会发生什么（请记住 HTML 实际上忽略换行符，所以下面的示例默认显示文本和图片在同一行）。

<p>HTML 5 is awesome!<br>
Text before the image! 
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="The HTML 5 Logo" title="The HTML 5 Logo">
Text after the image!</p>

现在尝试打开和关闭 display: block; （通过删除 CSS）。看到区别了吗？还要注意，当图像未被视为块级元素时，边距对图像没有任何作用。现在假设我们真的需要文本与图像在同一行，但我们希望图像居中。在这种情况下，我们可以使用浮动来提升图像并将其从正常内容流中取出。您可以对所有块级元素执行此操作，这对于在屏幕左侧或右侧创建菜单栏特别方便。

img {
    display: block;
    float: right;
    margin-right: 50%;
}

请注意，我浮动到屏幕的右侧，然后使用右边距。我这样做是因为如果我浮动到左侧，文本将放置在图像后面而不是行首。float 属性也可能会扰乱您的布局，尝试在相邻块上使用clear属性来解决此问题。

我们刚刚看到了 CSS 的一小部分。还有更多属性可用于创建出色的样式和布局。与 HTML 一样，CSS 也非常宽容，这意味着如果您犯了错误，您的浏览器可能会弄清楚您的意思并正确显示您的页面。我再次建议您遵循标准并使用W3C CSS 验证服务验证您的 CSS。尝试使用 HTML 和 CSS 进行实验，以掌握它并学习新知识。另外，不要错过下一篇博客！

敬请期待！

文章Web 开发 #3：使用 CSS 3 美化我们的页面最先出现在Sander 的点滴。

© . All rights reserved.