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

HTML和CSS入门 - 第3部分/12 - 样式化你的第一个网页

Guruprasad.K.Basavaraju
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (14投票s)

2014年4月2日

CPOL

12分钟阅读

viewsIcon

26392

downloadIcon

458

本文是为 HTML 和 CSS 新手提供的入门套件。

引言

本文是12篇文章系列中的第三篇，将带我们学习HTML5和CSS3。

本文旨在介绍

背景

HTML基础知识将有助于更好地理解本文。以下是链接

HTML和CSS入门 - 第1部分/12 - 编写你的第一个代码

HTML5 & CSS3新手指南 - 第2部分共12部分 - 构建基础作者：James Jensen

HTML中的样式化

虽然我们现在知道HTML定义结构和内容，但CSS定义了Web文档中相同内容的呈现方式。HTML中的样式化可以通过CSS表在元素级别直接应用样式来实现。

例如，一个无序列表在没有样式的情况下可能看起来像下面这样。

    <ul>
        <li>Georgia</li>
        <li>Oregon</li>
        <li>Washington</li>
        <li>Nevada</li>
        <li>California</li>
    </ul>

结果将如下所示。

现在让我们尝试让它看起来更好一点。

我们将为UL和LI元素添加边框，并为交替的LI元素添加不同的边框颜色。

 <ul style="border:double;text-align:left;width:10%">
        <li style="border:groove;border-bottom-color:aquamarine;">Georgia</li>
        <li style="border:groove;border-bottom-color:darkorange;">Oregon</li>
        <li style="border:groove;border-bottom-color:aquamarine;">Washington</li>
        <li style="border:groove;border-bottom-color:darkorange;">Nevada</li>
        <li style="border:groove;border-bottom-color:aquamarine;">California</li>
    </ul>

现在是不是看起来好多了？ :)

这就是样式化的一个快速示例。到目前为止，您可能还注意到我们正在重复LI元素上的一些样式标签，如果我们必须全局定义样式，我们可以使用层叠样式表来实现。CSS中的样式可以通过选择器来定义。

什么是层叠样式表 (CSS)

CSS文档包含将应用于HTML（或XML以及其他几种格式）的样式规则。那么，为什么我们称它们为“层叠样式表”而不是“样式表”呢？我们称这些样式表是层叠的，因为当多个样式适用时，样式表可以应用格式。例如，如果您说所有段落都应该是蓝色字体，但您特别指定一个段落应该是红色字体，CSS可以做到这一点！

一个页面可以应用多个样式表。例如，您可以有一个在母版页级别定义的通用样式表，以及针对单个页面的更具体的样式。 或者在页面中链接多个样式表。层叠规则将决定哪个样式要应用于元素。

那么这些规则是什么？

我将尽量保持本节的简洁。

由于有多种方法可以指定样式表。例如：

  • 链接样式表
<head>    <link rel="stylesheet" type="text/css" href="HelloWorld.css"></head>
  • 嵌入样式表（使用HTML STYLE元素 [-->Index DOT Html]）
<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/background.gif");}
    </style>
</head>
  • 导入样式表
@import "HelloWorld.css";
  • 内联样式规则
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

样式的优先级/权重顺序如下，1为最高优先级。

  1. 内联样式规则
  2. 内部样式表（嵌入或链接）
  3. 外部样式表（@import）
  4. 浏览器默认样式（例如：蓝色链接）

假设如果两条规则的权重相同，那么后面的规则生效。导入样式表和内部样式表具有相同的权重，但由于根据规范，导入标签在声明任何样式之前，内部样式将优先。

同样，当使用#id选择器定义样式时，它的权重与内联样式相同。我们很快就会看看什么是选择器。

确定了上述优先级之后，下一级优先级是在页面级别。我们可以称之为内部优先级。下面是一个通用的内部优先级列表。同样，1为最高优先级。

  1. #id
  2. .class
  3. 元素（可能是嵌套的，在这种情况下，嵌套中最后一个样式生效）

现在，轮到“万能钥匙”了。(!important)

!important规则是覆盖所有这些的方法。在声明后，分号前加上!important，将简单地覆盖所有先前的层叠，并赋予它最高优先级。如果为同一元素指定了多个!important，它们将回退到正常的层叠规则。此外，将简写属性声明为!important等同于将其所有子属性声明为!important。

继承 :

样式值将从文档树中其父元素的样式继承。值为“inherit”的属性将继承其父元素同属性的值作为**计算后的**值。请注意，计算后的值以粗体显示 :) 。下面是一个基本示例，说明为什么它是粗体。

下面的代码将简单地渲染文本“big text”的字体大小为10，这是简单的继承。

<p style="font-size: 10px;"><span>big text</span></p>

但是当渲染下面的带有span样式的代码时，文本的字体大小将是20px，这是带有计算值的继承。

<p style="font-size: 10px;"><span style="font-size: 200%;">big text</span></p>

CSS如何链接到HTML文件？

就是这样。有多种方法可以做到（参考上面）。下面是我们将会使用的方法。

 <link rel="stylesheet" type="text/css" title="Hello World style sheet" href="./CSS/HelloWorld.css">

您将上述行添加到文档的Head标签内，您的页面现在就有了一个名为Helloworld.CSS的样式表。很简单，不是吗？

基本CSS语法：

CSS规则由三个部分组成。

  1. 选择器：选择器是样式将应用的HTML标签。它可以是任何标签，如<div>、<table>等。
  2. 属性：属性是HTML标签的一种属性。简单地说，所有的HTML属性都被转换为CSS属性。它们可以是颜色、字体、边框等。
  3. 值：值为属性赋值。例如，color属性的值可以是red或#FFFFFF等。

所以基本语法是 选择器 { 属性: 值 }

例如，为表格定义边框可以写成 table{ border :1px solid #C00; }

在上面的例子中，table是选择器，border是属性，其余是属性的值。

选择器

我们可以根据我们的需求和习惯，以各种简单的方式定义选择器。下面是一些选择器。

类型选择器

我们在例子中已经看到了这一点。 table{ border :1px solid #C00; } ，我们只是按类型“table”选择并在此处为其分配边框属性。任何类型的元素都可以这样做，例如，为了确保所有h1标题具有特定的颜色，我们可以说：

h1 { color: #36CFFF; }

通用选择器：

名字就说明了一切，这个选择器将选择所有元素，而不是选择特定类型（元素）。这里是如何使用它：

 * {   color: #000000; }

类选择器

您可以根据元素的class属性定义样式规则。任何具有已分配class的元素都将根据定义的规则进行格式化。 

.black {  color: #000000; } 
Usage: 
<table class="black"> ....</table>

此规则使文档中class属性设置为black的每个元素的内​​容以黑色呈现。您可以使其更具体。例如：

h1.black {  color: #000000; } 
Usage: 
<h1 class="black">I am a black header-1</h1>

此规则仅为class属性设置为black的<h1>元素渲染黑色内​​容。如果一个表格使用了这个class，那么将不会有任何影响。

您可以将多个类选择器应用于给定的元素。考虑以下示例： 

<h1 class="center bold">This header will be styled by the classes center and bold.
</h1>

ID选择器

基于元素的id属性进行选择。所有具有该id的元素都将根据定义的规则进行格式化。 

#black {  color: #000000; } 
Usage:  
<table id="black"> ....</table>

此规则使文档中id属性设置为black的每个元素的内​​容以黑色呈现。您可以使其更具体。例如： 

h1#black {  color: #000000; } 
Usage: 
<h1 id="black"> ....</h1>   /*Style will be applied */ 
<h1> ....</h1>   /*Style will NOT be applied */

此规则仅为id属性设置为black的<h1>元素渲染黑色内​​容。

后代选择器

假设您只想在某个元素位于特定元素内部时才对该特定元素应用样式规则。如以下示例所示，样式规则仅在<em>元素位于<ul>标签内部时适用。

ul em { color: #000000; }

另外需要注意的是，ID选择器的真正强大之处在于它们可以作为后代选择器的基础，例如：

#BlackGrid td {  color: #000000; }

在此示例中，所有td将以黑色显示，仅当这些td位于id属性设置为“BlackGrid”的标签（Table/TR）内时。

子选择器

这些几乎与后代选择器一样，但功能不同。考虑以下示例：

body > p {  color: #000000; }

如果段落是<body>元素的直接子元素，此规则将以黑色渲染所有段落。其他放置在<div>或<td>等元素内的段落将不受此规则的影响。

属性选择器

您还可以为具有特定属性的HTML元素应用样式。以下样式规则将匹配所有具有brand属性且值为text的div元素。

div[brand]{  color: #000000; } /*Selects all divs with a brand attribute */ 
div[brand="honda"]{  color: #000000; } /*Selects all divs with brand attribute is honda */ 
div[brand~="toyota"]{  color: #ffffff; } /*Selects all divs with brand attribute is not toyota*/

分组选择器

您可以将一组样式规则应用于一组元素或类。示例如下：

div, table, section {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
#content, #footer, #header {
position: absolute;
left: 510px;
width: 200px;
}

另外，您可能想知道CSS中的度量单位是什么，因为有些地方我使用了.em，有些地方使用了px。下面的表格应该能解决您的疑问。（我假设它是自明的）

单位 描述 示例
% 将测量值定义为相对于另一个值（通常是包含元素）的百分比。 p {font-size: 16pt; line-height: 125%;}
厘米 将测量值定义为厘米。 div {margin-bottom: 2cm;}
em 以em空间衡量字体高度的相对度量。因为一个em单位等于给定字体的大小，如果您将字体设置为12pt，则每个“em”单位将是12pt；因此，2em将是24pt。 p {letter-spacing: 7em;}
ex 此值定义了相对于字体x高度的度量。x高度由字体小写字母x的高度决定。 p {font-size: 24pt; line-height: 3ex;}
in 将测量值定义为英寸。 p {word-spacing: .15in;}
mm 将测量值定义为毫米。 p {word-spacing: 15mm;}
pc 将测量值定义为picas。1 pica等于12点；因此，每英寸有6 picas。 p {font-size: 20pc;}
pt 将测量值定义为点。1点定义为1/72英寸。 body {font-size: 18pt;}
px 将测量值定义为屏幕像素。 p {padding: 25px;}

背景、文本和字体

背景、文本和字体是最常样式化的属性。让我们一一来看。

背景：顾名思义，Background属性用于定义元素的背景效果。

有许多背景属性，以下是其中一些。

  • background-color : 指定元素的背景颜色。
  • background-image :指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。
  • background-repeat : 水平和垂直重复图像。
  • background-position : 指定图像的位置。
  • 背景 - 简写属性：一种快捷方式，可以将所有上述属性和更多属性值组合到一个属性中。属性名称将仅为“Background”。以下是属性值的顺序。
    1. background-color
    2. background-image
    3. background-repeat
    4. background-attachment
    5. background-position

以下是上述属性的一些示例。

body {background-color:#b0c4de;} /*Color*/
h1 {background-color:#6495ed;}/*Color*/
p {background-color:#e0ffff;}/*Color*/
div {background-color:#b0c4de;}/*Color*/
body {background-image:url("superimage.gif");} /*Image*/
body
{
background-image:url("myPicture.png");
background-repeat:repeat-x;
}
body
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
background-position:right top;
}
body {background:#ffffff url("img_tree.png") no-repeat right top;} /*Short hand*/

文本：以下是一些文本属性及其描述。

  • color : 设置文本颜色
  • direction : 指定文本方向/书写方向
  • letter-spacing : 增加或减少文本中字符之间的间距
  • line-height : 设置行高
  • text-align : 指定文本的水平对齐方式
  • text-decoration : 指定添加到文本的装饰
  • text-indent : 指定文本块中第一行的缩进
  • text-shadow : 指定添加到文本的阴影效果
  • text-transform : 控制文本的大小写
  • unicode-bidi : 与direction属性一起使用，用于设置或返回文本是否应被覆盖以支持同一文档中的多种语言
  • vertical-align : 设置元素的垂直对齐方式
  • white-space : 指定如何处理元素内的空白符
  • word-spacing : 增加或减少文本中单词之间的间距

字体：与上面的文本类似，我将字体属性列在下面。

  • font : 在一次声明中设置所有字体属性
  • font-family : 为文本指定字体系列
  • font-size : Specify the font size of text
  • font-style : 为文本指定字体样式
  • font-variant : 指定文本是否应以小型大写字体显示
  • font-weight : 指定字体的粗细

在哪里以及如何使用CSS

有了以上所有信息以及我们对之前课程中HTML的理解。让我们尝试通过应用我们上面学到的一些样式来创建一个好看的HTML页面。

下面是没有样式的HTML文件样子。

首先，让我们为页面添加一个header、section、aside和footer。

现在让我们将以下样式添加到下面的元素中。

<body style="color:#444;     font:1em/1.5 Georgia, "Times New Roman", Times, serif;"> 
<table style="width:98%"><tr><td style="text-align:center"><a href="http:\\Codeproject.com"><img src="images/CodeprojectBob.png" /></a></td></tr></table> 
 <section style="background:#e7e7e7;     border:1px solid #e7e7e7;         float:left;     margin:0 20px 0 0;     padding:19px;         width:560px;"> 
<article style="background:#f7f7f7;     border:1px solid #f7f7f7;     padding:19px;">

如果您使用的是IE8及以下版本，您需要在head标签关闭前添加以下代码，以支持新的HTML5标签。

<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->

现在您看到页面看起来更好，但是如果页面增长，我们有更多的表格、更多的div、更多的section呢？我们不想记住要将什么精确的样式应用于每个元素，更重要的是，当我们决定更改样式时，我们不想对每个元素都这样做。这正是CSS发挥作用的地方。现在让我们创建一个包含大部分元素的CSS。我们将使用前面提到的不同类型的选择器。

在您的Helloworld/CSS文件夹中创建一个名为HelloWorld.css的新文件，并将以下CSS样式复制粘贴进去。我已尝试添加注释以便于理解，如果您需要更多信息，请留言。

 #main-header header.realHeader {
    background-image: url("../images/CodeprojectBob.png");
    top: 0;
    height:100px;
    width: 98%;
    background-position:center; 
    background-repeat:repeat-x;
}
/*type selectors*/
html {
    font-size:100%;
}
body {
    color:#444;     font:1em/1.5 Georgia, "Times New Roman", Times, serif;
}
section {
    background:#e7e7e7;     border:1px solid #e7e7e7;     -moz-border-radius:10px;     -webkit-border-radius:10px;     float:left;     margin:0 20px 0 0;     padding:19px;         width:560px;
}
aside {
    float:left;
    width:300px;
}
article {
    background:#f7f7f7;     border:1px solid #f7f7f7;     -moz-border-radius:10px;     -webkit-border-radius:10px;     padding:19px;
}
footer {
    clear:left;
    padding:20px 0 0;
}
span {
    font-weight:bold;
}
/*id selectors*/
#wrap {
    background:#eee;     border:1px solid #eee;     -moz-border-radius:10px;     -webkit-border-radius:10px;     margin:20px auto;     overflow:hidden;     padding:19px;     width:920px;
}
#menu a {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    padding-left:100px;
    text-align: left;
}
#menu tr a{
    display: inline;
    list-style: none;
    padding-left: 15px;
}

#menu tr td a {
        background: none;
        color: #999;
        text-decoration: none;
    }
#menu tr td a:hover {
        color: #333;
        text-decoration: none;
    }
/*Class selector*/
table.results {
    width: 90%;
    margin: 0px auto 20px auto; /* center the table */
    border-collapse: collapse; 
    border: 2px solid blue;
    padding: 15px 15px 15px 15px;
    }
table.results tr.alt-item /*all table tr with class alt-item*/
{
    background-color:lightblue;
}
table.results tr td /*all table td with class results*/
{
    padding: 2px;
    height: 5px;
    color: #404040;
    border: 2px solid blue;
}
table.results thead tr td { /*all table headers td with class results*/
    background-color: #0F74BB;
    color: white;
    border: 2px solid blue;
}
div.grid {
    text-align: left;
    margin: 0px 40px 0px 20px; /* center the table */
    border: 2px solid RED;
    padding: 15px 15px 15px 15px;
}

现在，在关闭head标签之前添加下面这行。这将把您的css链接到您的html页面。

<link rel="stylesheet" type="text/css" title="Hello World style sheet" href="./CSS/HelloWorld.css">

现在，如果您打开您的网页，您会看到如下内容。

是不是很漂亮？ :)

课程到此结束。下篇文章再见！ :)

关注点

理解层叠优先级会非常令人困惑，需要一段时间才能习惯计算决定优先级的点数。

历史

v0.1 - 初始版本 - Guruprasad KB - 2014/02/04

© . All rights reserved.