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

HTML5 & CSS3 新手指南 - 第三部分（共 12 部分）

James Jensen
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.93/5 (12投票s)

2014年4月1日

CPOL

16分钟阅读

viewsIcon

23262

为你的第一个网页添加样式

在本系列的头两部分中，我们简要回顾了HTML的历史，然后探讨了HTML5文档的基本结构。接着，我们检查了HTML5中更常见的元素。

在对HTML5有了基本了解后，我们现在可以转向CSS。在本章中，我们将介绍：

  1. 设置CSS文档
  2. 基本CSS语法
  3. ID和Class选择器
  4. 背景、文本和字体
  5. 在哪里以及如何使用CSS

CSS代表Cascading Style Sheet（层叠样式表）。“层叠”一词指的是CSS的内在设计，它允许文档的样式通过一个集中的过程来定义，该过程由作者、浏览器、读者甚至显示设备来控制，从而使每个参与者的样式愿望得以汇集，就像水汇入单一河流一样。

设置CSS文档

CSS文档是一个文本文件。在该文件中，我们定义匹配网页上元素的规则，并将样式参数应用于元素的内容。

因此，第一步是打开您的文本编辑器并创建一个新文件。将此文件另存为Beginner3.html。这将用作展示我们样式的网页。如果您愿意，可以将以下内容复制并粘贴到文档中：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Beginner's HTML5 Part 3</title>
        <style type="text/css">
            i { 
                text-decoration: underline;
            }
        </style>  
    </head> 
    <body>
    <p>[Example of no styling]</p>
        <!-- Inline demonstration -->
        <h1 style="color: blue;">Inline</h1>
        <p style="font-family: Arial, sans;">
            Inline styling describes the method of placing CSS styles
            <i>directly into an element</i> in the web page.  All elements use
            the style attribute for this.</p> 
    </body>
</html>

请随意添加您想要的元素。

第二步是创建另一个新文件，并将其另存为part3.css。此文件将包含我们的CSS规则。稍后我们将回到这里。

现在，请确保您的HTML5文件已保存，并在浏览器中打开它。它看起来应该像这样：

您会注意到h1元素是蓝色的，段落中的字体与浏览器中的默认字体不同，i元素开始和结束标签之间的文本显示为斜体和下划线。

太棒了！既然您已经看到了CSS能做什么的一点点，让我们来分析一下语法。

基本CSS语法

CSS存在于三种状态之一：内联、嵌入或外部。

Inline

内联样式发生在您将CSS属性定义添加到元素的style属性时。这是示例中的标题元素：

<h1 style="color: blue;">Inline CSS</h1>

style属性在元素名称之后，结束括号之前声明。对于此元素，style设置为“color: blue;”。

“color”是属性，“blue”是值。它们由冒号分隔，然后以分号结尾。

所有元素都可以通过style属性进行样式设置。

嵌入式

嵌入CSS意味着在Web文档的head元素中创建一个style元素，并用样式定义填充它。在这里，您需要添加两样东西才能使其工作：选择器和大括号。

在您在本文顶部创建的文件中，head元素中有一个名为“style”的元素。在此style元素中，我们有一个嵌入的CSS定义。这是相关文本：

<style type="text/css">
    i { 
        text-decoration: underline;
    }
</style>

style标签包含此文档的CSS定义。type属性设置为“text/css”定义了style元素将包含的样式类型。由于浏览器可以通过查看您输入的内容来解释样式类型，因此声明此属性不是必需的。

此外，style元素几乎可以出现在文档中的任何位置，并且都可以正常工作。然而，一个经过验证的文档必须将style元素放在head元素内（除非您指定了scoped属性，但这在本系列中不包括）。

选择符

您可能想知道“i {”这一行是什么意思。嗯，i部分称为“选择器”，后面跟着一个大括号。在该开括号（{）和一个后续的闭括号（}）之间是选择器的CSS定义。

选择器是浏览器用于将样式定义与一个或多个元素关联起来的一个或多个模式。选择器与正则表达式不是同一回事，但它确实执行类似的功能。选择器模式将根据以下条件匹配元素：

  • 元素名称（p、table、i、a、span等），
  • 元素属性id值，
  • 元素属性class值，
  • 元素的状态（例如，复选框已选中），
  • 元素与其他元素的关系，或
  • 上述组合。

在您的CSS文档中，您可以为每个元素类型单独创建选择器：

h1 {
    ...     /* properties and values for h1 elements */
} 
p {
    ...     /* properties and values for p elements */ 
} 
i {
    ...     /* properties and values for i elements */
}
...etc

或者，您可以通过用逗号分隔元素名称来组合它们：

h1, p, i, {
    ...     /* properties and values for h1, p, and i elements */
}

您甚至可以使用功能强大的元字符：星号来选择所有内容：

* {
    ...    /* properties and values for all elements */ 
}

在代码中，“i”选择器匹配所有i元素。如果将i替换为“p”，那么网页中的p元素将获得该样式。

所以，这个（请注意，i现在变成了p…）

<style type="text/css">
    p { 
        text-decoration: underline;
    }
</style>

现在变成了这样：

请注意，段落现在带有下划线。这是因为CSS选择器“p”匹配了文档中的p元素，并应用了“underline”的text-decoration属性。

属性和值

就像在所有元素的style属性中定义CSS的方式一样，大括号之间的样式定义以属性开头，后跟冒号（:），然后是值，最后是分号（;）。

p {
    text-decoration: underline;
}
- - - - - - - - - - - - - - - -
selector = p 
start definition = {
property = text-decoration 
value = underline  
end definition = }

外部

与内联和嵌入式CSS方法不同，外部方法使用单独的文件，通常称为CSS或样式文档。

所以，既然我们有了有效的嵌入式CSS代码，让我们将其放入我们之前创建的新文件中。这将是我们的外部CSS文档。复制script标签之间的文本并直接粘贴到part3.css中，然后保存文件。CSS文件的内容应该看起来像这样：

p { 
    text-decoration: underline;
}

现在，我们需要告诉Web文档样式表的位置。为此，我们需要在我们的网页中创建一个新元素。要做到这一点，请删除style属性——包括标签——并用以下内容替换：

<link rel="stylesheet" href="part3.css">

link元素指向外部文件。其rel属性定义了链接中资源的类型，href属性包含资源的URL。由于它可以指向许多不同类型的资源，因此rel属性是必需的。当链接CSS文件时，将rel设置为“stylesheet”值。

确保href属性设置为“part3.css”，并且两个文件（part3.css和Beginner3.html）存在于同一个文件夹中。

由于我们的示例网页和资源共享同一目录，因此link元素在href字段中只需要文件名。

Beginner3.html现在应该包含以下内容：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Beginner's HTML5 Part 3</title>
        <link rel="stylesheet" href="part3.css">
    </head> 
    <body>
    <p>[Example of no styling]</p>
        <!-- Inline demonstration -->
        <h1 style="color: blue;">Inline</h1>
        <p style="font-family: Arial, sans;">
            Inline styling describes the method of placing CSS styles
            <i>directly into an element</i> in the web page.  All elements use
            the style attribute for this.</p> 
    </body>
</html>

现在，保存所有内容。在浏览器中打开网页。如果您在part3.css中将“i”更改为“p”，您应该会看到很多带下划线的文本。

至此，您现在拥有了一个网页和一个外部样式表。当您对样式表进行更改并保存后，只需在浏览器中刷新网页（通常是F5键）即可看到您的更改生效。

ID和Class选择器

CSS描述中匹配元素名称的选择器称为元素选择器。在本节中，我们将研究另外两种在网页上选择元素的方法：

 

  • 属性id值
  • 属性class值

 

ID选择器匹配具有相同id属性值的元素。类选择器匹配具有相同class属性值的元素。

还记得全局属性吗？id属性保存元素的唯一标识符。class属性为元素分配一个类值。给定id值的元素只能有一个，而许多元素可以属于同一个类。根据文档的结构和您的样式需求，一种选择器类型可能比另一种更好。

ID选择器以哈希符号（#）开头，后面紧跟id值。类选择器以句点（.）开头，后面紧跟类名。例如：

#myuniqueid {       /* selects element with id of myuniqueid */
    ...
}
.myclassname {      /* selects all elements with class value of myclassname */
    ...
}
 
<p id="myuniqueid">This element is styled via id selector "#myuniqueid".</p>
<p class="myclassname">This element is styled via class selector ".myclassname".</p>
<span class="myclassname">This is also styled via the ".myclassname" selector.</span>

好了，既然我们对如何选择页面上的元素有了很好的了解，我们就可以看看我们可以为这些元素改变哪些显示特性了。

背景、文本和字体

大多数元素都有背景，并且可以设置为各种内容。我们可以从设置整个网页的背景开始。将这段新文本输入到您的CSS文档中：

body {
    background: lightskyblue; 
}

现在保存CSS文件并在浏览器中刷新页面。您现在应该有一个带有蓝色背景的页面。

尽管我们只为背景设置了颜色，但background属性可以设置更多内容。事实上，background属性允许您在一行中设置所有与背景相关的属性。通常您可以设置以下内容：

background : color position repeat attachment image size origin clip

每个属性值之间用一个空格分隔。CSS3特有的属性是size、origin和clip；其他属性是在CSS1和CSS2中定义的。如果您的浏览器不支持CSS3，CSS3特有的属性可能会导致解析错误。目前，我们将专注于颜色。

颜色

CSS颜色可以通过三种方式之一定义：

  1. 关键字颜色
  2. RGB颜色
  3. 十六进制颜色

关键字颜色是X11颜色的一个修改子集（最初来自X Window System），它通过名称本身就能让您大致了解看到的效果。上面body选择器中指定的背景颜色“lightskyblue”只是众多预定义颜色之一，每种颜色都对应一个特定的颜色值。以下是一些示例：

AntiqueWhite #FAEBD7
黑色 #000000
Coral #FF7F50
DarkSeaGreen #8FBC8F
Gold #FFD700
LightSkyBlue #87CEFA
SandyBrown #F4A460
SteelBlue #4682B4
白色 #FFFFFF

RGB颜色使用rgb函数表示法。颜色值可以表示为0到255之间的十进制数或百分比值。

background : rgb(0, 0, 255);        /* blue */ 
background : rgb(0%, 0%, 100%);     /* blue */ 
background : rgb(128, 128, 128);    /* gray  */ 
background : rgb(-23, 999, 0);      /* Green.  CSS is smart enough to clip values. */

不透明度默认设置为100%，但也可以通过使用rgb表示法的变体：rgba来更改。第四个参数，alpha通道，必须包含一个介于0和1（包括）之间的浮点值。

background : rgba(135, 206, 250, .5)   /* lightskyblue with 50% opacity */ 
background : rgba(53%, 81%, 98%, .5)   /* same thing, but using color channel pcts */

十六进制颜色表示为哈希字符（#），后跟三位或六位数字。如果是三位，则通过复制每位数字来生成结果。因此，#3c9 实际上表示 #33cc99。

background : #00f;          /* blue */ 
background : #0000ff;       /* same thing: blue */
background : #87cefa;       /* hexadecimal value for lightskyblue */

还有一个特殊的颜色称为“transparent”（透明）。它使元素的背景不可见。

background : transparent    /* equivalent to rgba(0,0,0,0)  */

图像

图片呢？CSS使用url函数表示法指向图像文件。以下是如何指定与网页位于同一目录中的图像：

body {
    background: url('bkg_1.jpg'); 
}

背景图像默认情况下是平铺的。以下是如何在网页背景中显示图像的单个实例，位于页面的左上角：

background: url('bkg_1.jpg') top left no-repeat;

background属性中值的顺序不是固定的。然而，必须小心处理position属性。值是单词对，必须按正确的顺序指定：

属性 值
background-position left top
  left center
  left bottom
  right top
  right center
  right bottom
  center top
  center center
  center bottom
  xpos ypos（像素或百分比值）

大多数人遵循一些假定和不成文的标准，要么是因为他们一直以来都这样做，要么是因为他们从错误中吸取了教训。其中一个标准是建议CSS作者在定义背景时，始终包含一个带有图像的color属性。

body {
    background: url('bkg_1.jpg');
    background-color: lightskyblue; 
}

原因很简单：如果图像丢失或无法加载，您总会有一个备用颜色显示，因为网页上没有任何东西可以指示丢失的背景图像文件。

包含文本

在讨论字体和文本之前，最好先看一下文本可以被隔离的三种方式。

  1. 段落（p元素）
  2. 块（div元素）
  3. 行内（span元素）

p元素已经介绍过了。它对特定量的文本进行分组，并通过元素上方和下方的边距将其与文档的其余部分在视觉上分开。

但是，在许多情况下，不需要边距，或者文本需要被限制在网页上的特定区域内。段落（使用p元素）无法设置特定的宽度或高度，因为p元素不是块元素。块元素可以受宽度和高度的限制，这意味着块元素的内容也可以受到限制。

div元素就是这样一个块元素。

<div></div>

div没有关联的特殊属性。然而，div的位置和大小可以通过CSS定义来控制。这使得div成为文本需要以某种方式隔离或限制时的一个非常好的元素。

<div style="width: 220px;">
    Block elements can be positioned and sized.  The div element is
    an excellent example of a block element.  Prior to HTML5, it
    was used as the go-to element for web designers who opted to
    stay away from tables and frames in their designs.  This text
    is constrained by a div that is 220 pixels wide.
</div>

上面的代码显示了div元素内的文本，该div的宽度为220像素。由于div是受限的，因此div内的所有文本行宽度都不会超过220像素。在Chrome浏览器中看起来是这样的：

另一方面，span元素与p元素类似，它不能被调整大小，但它不会以任何可见的方式将其内容与文档的其余部分分开，除非它有样式更改。

这里有一些包含两个span元素的 कोड。一个没有样式，另一个有。（请注意，我们在这里使用的是内联样式。）

<div style="width: 300px;">
    <p>
    This is some text <span>with part of it wrapped
        in a span element.</span> Notice the browser
        does not indicate anything special.</p>
    <p>
    This is some text <span style="color: green;">with part of it wrapped
        in a span element with CSS styling.</span> Notice the browser
        shows a change in text color.</p>
    <p>
</div>

渲染后，浏览器仅显示有样式的span的文本变化：

div和span元素可用于通过CSS属性修改文本的外观。现在让我们看一下其他文本属性如何更改。

文本和字体属性

网页上的文本以字体显示，并带有文本装饰属性。如果没有自定义CSS选择器，浏览器将控制默认的字体、大小和装饰值。CSS使您能够以多种不同的方式显示文本，从而使您的页面能够覆盖默认设置。

字体属性如下：

Font Property Example Values
font-family Arial, Helvetica, sans
font-style normal, italic, oblique
font-variant normal, small-caps
font-weight normal, bold, 700
font-size 20pt, larger, 1.2em, 150%

还有一些系统字体名称可用于指定字体：

System Font 描述
caption captioned controls (button, etc)
icon icon labels
菜单 font used in menus
message-box dialog boxes font
small-caption labels for small controls
status-bar window status bar font

以下是为网页指定各种字体属性的示例：

body {
    font-family: Helvetica, Arial, sans;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    font-size: 12pt; 
}

有一个设置字体属性的简写方式：

font: font-style font-variant font-weight font-size/line-height font-family

使用简写时，任何未指定的属性都默认为normal。例如，以下代码与上面的声明具有相同的作用：

body {
    font: italic 12pt Helvetica, Arial, sans; 
}

注意font-family的逗号分隔列表。CSS将此列表解释为一种请求；左侧最重要，右侧最不重要。如果列表中的第一个字体不可用，CSS将检查下一个字体。列表的遍历方式是这样的，直到在客户端系统中找到一个有效的字体。

例如，如果我们系统中没有加载Helvetica，但有Arial，那么上面body的声明将导致body中的文本显示为Arial字体。

还有一些通用字体名称可用于表示用户代理定义的字体：

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

在CSS中指定字体时，最好使用这些通用名称之一作为最后的选择。如果列表中没有字体匹配，将根据通用字体名称使用默认字体（假设通用字体已列出）。如果列表中未定义通用字体，则浏览器将使用其自己的默认字体。

文本的表示也可以通过属性进行更改。以下是可用选项的列表：

Decoration Property 描述
text-indent value to indent first line of text
text-align describes horizontal alignment of text
text-decoration decorates text using text color
text-transform controls capitalization effects
letter-spacing defines spacing between characters
word-spacing defines spacing between words
white-space defines how white space is handled

以下演示了text-indent和text-align属性：

<div style="width: 240px; text-indent: 30px;">
    Notice how the first line of text in this div element
    is indented 30 pixels. Alignment defaults to the left.
</div>
<div style="width: 240px; text-align: center;">
    This text is<br />centered.<br /> Line breaks have been added to
    empasize the alignment.  Also note the lack of space
    between these two divs, unlike the spacing feature of
    the p element.
</div>
 
 

在哪里以及如何使用CSS

当CSS还年轻时，浏览器并未实现其许多功能，Web设计师们不得不使用<font>和<blink>等元素。快进到现在，您会发现CSS几乎无处不在。

为了说清楚，让我们看看CSS不能做什么：

  • 使您的网站更具信息量（一切都取决于内容。）
  • 加快您的页面显示速度（抱歉，这通常是带宽问题。）
  • 让您致富（如果真的能，这个世界上就会有更多百万富翁了。）
  • 解决您的个人问题（伙计……真的……CSS？）

CSS就是关于样式的，而样式应该在结构和实质之后。

所以，推荐的操作顺序是：

  1. 确定愿景。您可能有一个很酷的网站的想法，但您脑海中看到的一切只是一个很酷的蓝色背景和太空字体文本，围绕着令人惊叹的图片。不幸的是，如果您对网页的唯一设想是颜色和字体，那么您需要着手进行基础工作。“愿景”是它存在的理由以及它试图完成的事情。
  2. 画一两张草图。所有最好的艺术家在应用墨水之前都会画草图。将脑海中的图像取出并将其写在纸上，可以帮助您专注于合理的目标。
  3. 用没有CSS的HTML5代码创建。是的，这听起来像是一种折磨，但创建平淡内容的目的是双重的：
    1. 您可以在没有样式干扰的情况下形成实质内容。
    2. 您首先创建语义，这有助于组织内容。
  4. 用CSS使其美观。.

还有另一个我喜欢向易受影响的人强调的推荐程序：

始终使用外部CSS文件。

作者之所以推荐这样做，是因为您可以将CSS文件放在文本编辑器中打开，同时在浏览器窗口中打开网页，进行修改，然后按F5（或您的浏览器使用的任何键）刷新。更改会立即更新，您可以非常快速地进行迭代更改。

对于那些创建从其他源代码（如C#或Java）编译的网页的人来说，这里有一个更大的好处。使用CSS，您通常不需要为每次微小的样式更改而反复重新编译代码。

哦，第二个好处在于标准化。我的意思是，外部CSS文件在网站的所有页面上重复使用类和定义时充当模板。在多个文件中更改嵌入式CSS代码通常会导致令人尴尬的错误。

摘要

好了，这只是对CSS所能提供的略微的触及。本章向您介绍了CSS的简单语法和一些有用的属性。

在下一章中，我们将言行一致，通过视觉、草图、编码和样式来设计一个网页。

历史

2014-04-01：初次发布。

© . All rights reserved.