在本系列的第二部分中，咱们将创建一个 css（层叠样式表）文件来编辑 html 网页的外观。网页设计师将网页的内容（HTML）与样式（CSS）分开，以使源代码易于阅读，并使网站的重新设计比将样式与内容混合起来更简单。

本系列也有：

上图是咱们网页现在的样子。今天，咱们将使用这个无样式的页面，并使用 CSS 将其变为：

第 1 步：入门

使用您喜欢的文本编辑器，在与您的 HTML 页面相同的目录中创建一个新的空白文件，并将其命名为“style.css” - 这是咱们将在其中存储所有样式的文件。
但首先，咱们需要链接到咱们网页中的 CSS 文件。

在 HTML 文件中，将以下行添加到 <head> 部分，就在 <title> 下方：

<linkrel="stylesheet"href="style.css"type="text/css"media="screen"charset="utf-8"/>

在 style.css 中输入以下内容：

body { background-color: #eeeeee; }

咱们在这里所做的是为 HTML 页面上的 <body> 标签设置样式。通过设置正文的样式，咱们正在设置整个页面的样式。在 { } 大括号内，咱们输入要应用于目标标签的样式。

background-color是目标标签的背景颜色的 CSS 属性。键入属性后，咱们有一个冒号 (:)，后跟该属性的值。在每个 CSS 属性的末尾，您必须输入分号 (;)。

#eeeeee是一个十六进制数，表示以下灰色阴影：。如果您对任何图形包（如 photoshop）有任何经验，这可能对您来说很熟悉。
您还可以通过其HTML 颜色名称设置颜色（不推荐，因为您几乎无法控制颜色阴影）：

background-color: red;

或作为RGB 十进制数：

background-color: rgb(255, 255, 255);

看看你的网页。背景现在应该是不同的颜色：

android 应用模板

使用 5k 多个多功能模板启动您的下一个 Android 应用程序。

造型身体

除了背景颜色的变化，让咱们为 <body> 标签添加更多样式：

文本颜色：浏览器提供文本的默认颜色是黑色 (#00000)。让咱们将其更改为接近黑色的颜色，而不是在背景上看起来不那么刺眼，例如#111111。
字体：大多数浏览器将默认字体设置为“Times New Roman”，咱们想要一个类似的衬线字体，但有点“经典”。咱们将字体设置为“Georgia”。
字体大小：字体现在有点大，咱们将其缩小到默认大小的 90%。

在body { }样式选择器中添加以下属性以及背景颜色：

color: #111111; font-family: "Georgia", "Times New Roman", serif; font-size: 90%;

在第一行，咱们使用“color”属性将页面上文本的颜色设置为#111111。

之后，咱们使用“font-family”来改变字体。由于所有计算机可能没有安装相同的字体，因此为浏览器设置其他字体以在它找不到第一个字体时回退是很重要的。
在咱们的例子中，咱们将默认字体设置为“Georgia”。万一访问咱们网站的人没有安装 Georgia，浏览器将尝试“Times New Roman”字体。如果也没有安装该字体，则将使用系统的首选衬线字体。

最后，咱们使用“font-size”将页面上的文本大小设置为默认设置的 90%。为了确认，你的 CSS 文件现在应该是：

body {
background-color: #eeeeee;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%; }

在浏览器中查看页面：

盒子模型——边距、填充和边框

样式页面的一些最重要的 CSS 属性是“margin”、“padding”和“border”。看看下面的图表：

每个 HTML 元素本质上都是一个盒子，内容在中间。内容周围是填充，它增加了空白空间并受元素背景颜色的影响。
边框位于填充的边缘，边框周围是边距，它在对象周围添加了透明的空白空间。

下图显示了与两段文本左侧对齐的图像。此图像没有填充、边框或边距，因此它尽可能靠近文本。

如果咱们要为图像赋予以下属性：

padding: 3px;
border: 3pxsolid#dddddd;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;

它看起来像这样：

您可以清楚地看到 3px 灰色边框正在生效。图像和边框之间的空白是内边距，不同的边距在边框外侧添加了透明空间，使其与文本略微分开。

由于 padding 采用元素的背景颜色，如果咱们要添加以下属性：

background-color: yellow;

咱们会得到：

第 2 步：容器

现在，咱们的网页填满了浏览器的整个宽度，这严重影响了页面在大型浏览器中的可读性。为了解决这个问题，咱们将用一个“容器”包装咱们网页的整个内容，然后使用 CSS 来限制这个容器的宽度。

在文本编辑器中打开您的 HTML 文件，并在打开 <body> 标记之后直接输入：

<divid="container">

在结束 </body> 标记之前，关闭容器：

</div>

<div> 标签标记了一个“分区”，主要用作构建块来帮助布局页面的各个部分。
所有 HTML 标记都可以有一个 ID 和 Class 属性来帮助设置样式。请注意，您只能在同一页面中使用一次 ID，因此对于只能存在一次的元素（例如容器）很有用。
类属性可以在同一页面上多次使用，并且对于元素之间的通用样式（例如对齐图像）很有用。稍后咱们将更多地研究类属性。

在您的 CSS 文件中，添加以下内容：

#container { width: 900px; }

#container中的 #是“ID 为...的 HTML 元素”的 CSS 选择器。咱们也可以把这个选择器写成div#container。

咱们将容器设置为 900 像素的宽度。这对于网站来说是一个很好的宽度，但请记住，建议使用的最高宽度是 960 像素，以确保在绝大多数屏幕分辨率下页面显示时没有水平滚动条。

要在浏览器窗口中居中容器，请将以下样式添加到#container：

margin: 0auto;

这会将顶部和底部边距设置为 0（即无边距），并且自动计算左右边距 - 这意味着浏览器将在浏览器窗口内居中放置容器。

CSS 速记

在容器的边距样式中，咱们使用了 CSS 简写。咱们可以将样式写为：

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

然而，通过设置“margin”并给它两个值（'0'和'auto'），第一个值用于顶部和底部边距，第二个值用于左右。

使用一个值

下面的样式将为元素的每一侧添加 5px 的边距：

/* Short-hand: */margin: 5px;
/* Long-hand: */margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px; margin-left: 5px;

两个值

这将在顶部和底部赋予 10px 的边距，在左侧和右侧赋予 20px 的边距：

/* Short-hand: */margin: 10px20px;
/* Long-hand: */margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

三个价值观

如果咱们设置三个值，第一个值用于上边距，第二个用于左右，第三个用于下边距。

/* Short-hand: */margin: 10px 15px 5px;
/* Long-hand: */margin-top: 10px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 15px;

四个价值观

通过设置四个值，第一个是上边距，第二个是右边，第三个是底部，第四个是左边。将此顺序视为围绕元素顺时针旋转 - 上、右、下、左。

/* Short-hand: */margin: 5px 3px 9px 12px;
/* Long-hand: */margin-top: 5px;
margin-right: 3px;
margin-bottom: 9px;
margin-left: 12px;

您可以将此速记样式与边距和填充一起使用。要了解其他 CSS 速记技术，请查看WebCredible 上的这篇文章。

第 3 步：标题

当咱们沿着页面向下工作时，下一部分是标题。在这里，咱们希望将页面上的标题居中并对其应用微妙的文本阴影。

将以下样式添加到您的样式表中：

header h1 { text-align: center; text-shadow: 1px 1px 1px #999999; }

“header h1”选择器的意思是“在 header 中查找每个 h1”。

"text-align" 完全符合您的预期：它设置元素的水平对齐方式。在这种情况下，咱们将其设置为居中。您还可以将其设置为“右”或“左”（默认）。

"text-shadow" 是 CSS 3 中的一个新属性，需要四个值：

右侧显示阴影的像素数（使用负数设置左侧）
下方显示阴影的像素数（使用负数设置上方）
模糊阴影的像素数
阴影的颜色

在咱们的例子中，咱们将阴影设置为文本下方和右侧 1 像素，具有非常微妙的 1 像素模糊和中灰色 (#999999)。

部分和旁边

现在，咱们的侧边栏 (<aside>) 实际上并不是侧边栏 - 它只是位于主要内容 (<section>) 的下方。为了纠正这个问题，咱们需要给 <section> 和 <aside> 一个宽度，然后告诉它们粘在容器的任一侧。

你会记得，咱们的#container 有 900px 的宽度供咱们使用。咱们知道咱们的主要内容应该比侧边栏更宽，所以 <section> 和 <aside> 之间的比例为 2:1 会很好 - 所以咱们将“section”设置为 600px，将“aside”设置为 300px。

不过，这种逻辑有一个小问题：主要内容和侧边栏之间没有间隙。为了纠正这个问题，咱们只将侧边栏设置为 280 像素——在它们之间留下 20 像素的间隙：

section { float: left; width: 600px; } aside { float: right; width: 280px; }

在上面的代码中，咱们设置了两个对象的宽度，但咱们还告诉 <section> 向左“浮动”，而 <aside> 向右“浮动”。

通过设置“浮动”属性，咱们实际上将每个对象对齐到其容器的任一侧，从而允许侧边栏与主要内容并排放置。

页脚

现在咱们的页脚正位于侧边栏的正下方，因为它试图适应任何空白空间。为了纠正这个问题，咱们需要告诉页脚不允许任何对象漂浮在它的两侧：

footer { clear: both; display: block; }

“clear: both”确保页脚两侧没有“浮动”。您还可以将“clear”设置为“left”或“right”，以确保没有任何东西漂浮在特定的一侧。

"display: block" 确保页脚不会内联显示（Firefox 需要这个）。

最后，让咱们修复页脚内文本的样式。将以下内容添加到现有的页脚样式中：

font-size: 90%; font-style: italic; font-variant: small-caps; padding-top: 10px;

以及以下用于在页脚中设置链接样式的新样式：

footer a { color: #111111; }

概括

在本系列的最后一部分中，咱们将通过向咱们的网站添加一个额外的页面、使用一些不同的 HTML 元素并通过设置样式来扩展咱们的 CSS 知识，从而进一步提高您的 HTML 和 CSS 技能。

文章目录

- 本系列也有：
第 1 步：入门

android 应用模板

造型身体
盒子模型——边距、填充和边框
第 2 步：容器
CSS 速记
- - 使用一个值
  - 两个值
  - 三个价值观
  - 四个价值观
第 3 步：标题
导航
部分和旁边
页脚
概括

本系列也有：

第 1 步：入门

android 应用模板

造型身体

盒子模型——边距、填充和边框

第 2 步：容器

CSS 速记

使用一个值

两个值

三个价值观

四个价值观

第 3 步：标题

导航

部分和旁边

页脚

概括

相关推荐

最新文章 | 热门文章 | 随机文章