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

HTML5/CSS3 初学者指南 - 样式化您的第一个网页（系列 3，共 12 篇）

Ranjan.D
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.74/5 (17投票s)

2015年8月6日

CPOL

10分钟阅读

viewsIcon

69273

downloadIcon

541

所有关于使用 CSS 样式化网页或文档的内容。我们还将看到不同的样式包含方式等。

 

引言

在本文中，我们将详细介绍以下主题并提供示例。阅读本文后，您应该学习 CSS 的基础知识并开始将样式应用于 HTML 文档。您还将学习在 HTML 文档中包含 CSS 的各种技术、结构和方法。

背景

如果您是初学者，强烈建议阅读我的第一篇文章

HTML5 和 CSS3 新手指南 - 编写你的第一个代码（系列 1/12）

设置 CSS 文档

在上一篇文章中，我们简要了解了 CSS 以及为什么需要它。在这里，我们将详细讨论 CSS 及其在 Web 文档中的用法。

回顾一下，CSS 用于样式化网页或文档。在定义 HTML 的外观和格式时，我们需要使用 CSS。请记住，CSS 用于呈现，它可以以内联方式存在于 HTML 文档中，也可以作为外部文件独立存在。我们利用单独定义样式表，因为同一组样式可以应用于多个网页或文档。

现在让我们尝试了解如何构建 CSS，以及在应用程序级别、模块或页面级别等定义样式的好习惯。

所有应用程序级样式都可以通过名为“application.css”的样式表进行定义。将所有应用程序样式定义在一个文件中是一个好习惯，这样可以轻松维护。

定义样式没有单一的方法。下面您将看到可用于正确构建样式以便可以重用和适当维护的各种方法。如果我们将样式基于标签等进行分离，那么就可以轻松维护，因为您不必深入一个大的 CSS 文件来查找或修改样式。

下面您可以看到样式是如何根据特定元素以及在应用程序级别持有的其他常见和自定义样式进行分离的。

body

layouts

通用样式

自定义样式

div 特定样式

表格特定样式

下面是一种定义页面特定样式的方法。

home.css

products.css

orders.css

about.css

contactus.css

现在让我们看看如何定义模块级样式。模块是指内容的一个片段或部分，它要么在多个页面中重复使用，要么可以被视为一个独立的实体。

这是一个模块级样式的示例。假设您希望在文档中显示 RSS 订阅。您可以只应用一些样式来呈现订阅。您可以将其视为一个模块。

以下是模块级样式的示例。

rss.css

lists.css

comments.css

基本CSS语法

现在让我们学习一些 CSS 的基本语法。CSS 由三部分组成：选择器、属性和值。

选择器 { 属性: 值 }

选择器是您感兴趣进行样式化的 X(HTML) 元素或标签。

属性是实际的属性名称，例如：background。您可以为选择器定义任意数量的属性。

值是您感兴趣为属性设置的值。如果有多个值，则需要用逗号分隔每个值。

这是一个例子。请注意，您可以看到多个元素之间用逗号分隔。

body, p, h1, h2, h3, h4, h5, h6, li, tr, td, th
{
font-family: "Segoe UI",Arial,Sans-Serif;

font-size: 14px;

line-height: normal;

color: #111;
}

这是高层级的 CSS 声明。

css declaration

让我们看看如何在 CSS 中包含注释。下面是通用语法。我们有一个选择器，它可以是 Id 或类选择器。接下来我们将详细介绍这些选择器。在下面的示例中，您可以在第一行看到 CSS 注释。

/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

ID和Class选择器

谈到 Id 选择器，它是用于指定样式的 Id 属性。Id 属性在文档中应该是唯一的，我们使用“Id”选择器定义的样式只适用于文档中的单个 HTML 元素。

这是语法

#id_value { style properties }

示例

#Id1
{
text-align:center;
color:blue;
}

Id 选择器由一个“#”（哈希）符号后跟 HTML 元素的 Id 定义。

示例：您可以看到下面带有 id 选择器的 CSS 样式应用于 div 元素。

#top {
    background-color: red;
    padding: 10px
}

<div id="top">
    some text here
</div>

类选择器

现在让我们尝试了解类选择器是什么以及它相对于 Id 选择器的优势

类选择器是另一种在文档内部或跨文档定义可重用样式的方法。为了将类选择器用于 HTML 元素，只需使用 class = classelector 引用给定 HTML 元素的类选择器，您对该元素应用基于类选择器的样式感兴趣。

示例

.RedBold { 
    color: red;
    font-weight: bold;
} 
 <p class="RedBold">Sample css class selector. Shows text in bold with Red color</p>

这是类选择器用法的示例

css selector

背景、文本和字体

CSS 背景用于定义 HTML 元素的背景效果。以下是背景属性及其用法。

注意 - 以下背景属性参考自 https://w3schools.org.cn/cssref/css3_pr_background.asp

background - 简写属性，允许您指定所有背景特定属性。
background-color - 用于指定纯色背景颜色。
background-image - 用于指定背景图像作为元素的背景。
background-repeat – 指示背景图像是否应重复。
background-position – 指示图像应如何定位。

现在我们来看一些例子

背景颜色

h4 { background-color: red; } 
p  { background-color: #1078E1; } 
ul { background-color: rgb( 200, 206, 145); }

简单的 CSS 背景图像

p { background-image: url(testPic.jpg); }
h1{ background-image: url(http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif); 
}

重复的背景图像

p {  
        background-image: url(testPic.jpg); 
        background-repeat: repeat-x; 
}

h1 {  
        background-image: url(testPic.jpg);
        background-repeat: repeat-y;
}

带位置的背景图像

h1 { 
    background-image: url(testPic.jpg); 
    background-position: 20% 20%;
}

这是一个示例 HTML 背景相关 CSS 页面。

您可以看到背景图像应用于 HTML Body 和元素 H2。您还可以看到 background-position 的用法以及如何使用 background-color 等。

<HTML>

<HEAD>
<style type="text/css">

body
{ 
background-image: url(http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif); 
background-repeat:no-repeat;
background-position:right bottom;
}

h1 {background-color:gray;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

h2 { 
    background-image: url(http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif); 
    background-position: 10% 10%;
}

</style>

</HEAD>

<BODY>

<h1>Hello CSS Background </h1>
<h2>Background image with position </h2>
<p> CSS Background Image Sample</p>
<b class="simpleStyle">Here we will learn how to apply various CSS Background Image. </b>

</BODY>

</HTML>

让我们学习如何在 CSS 中格式化文本。更具体地说是文本颜色、转换、缩进和装饰。

使用 HTML，您可以使用 HTML 元素定义文本。您还可以应用 HTML 文本格式。使用 CSS，您可以做更多的事情，例如格式化文本颜色、对齐、缩进、装饰、转换等。

这是一个关于如何应用 CSS 文本颜色的示例。

h1 {color:red;}
h2 {color:rgb(255,200,0);}

CSS3 文本阴影的示例

h2
{
     text-shadow: 2px 2px 2px #FF0000;
}

我们将在这里看到一些更有趣的 CSS 文本属性。

说到文本装饰，您可以通过设置 text-decoration 属性轻松地使用 CSS 进行如下操作。

text-decoration: value;

以下是这些值

  • none
  • underline (下划线)
  • overline (上划线)
  • line through (删除线)
  • blink (闪烁)

示例

<HTML>

<HEAD>
<style type="text/css">

.underLine {
text-decoration: underline;
}

.overLine {
text-decoration: overline;
}

.lineThrough {
text-decoration: line-through;
}

.blink {
text-decoration: blink;
}

</style>

</HEAD>

<BODY>

<h1>CSS Text Decorations </h1>

<p class="underline"> CSS Text Underline</p>
<p class="overLine"> CSS Text OverLine</p>
<p class="lineThrough"> CSS Text Line Through</p>
<p class="underline"> CSS Text Underline</p>
<p class="blink"> CSS Text Blink</p>

</BODY>

</HTML>

这是一个 CSS 文本转换的例子。假设您有兴趣将文本转换为小写、大写等。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}

现在我们来看一下文本缩进的实现方法。我们只需要定义一个 CSS 样式：
text-indent: value;

您可以将值设置为以下任一选项

length
百分比

示例

p { text-indent: 10px; }

<p>This text is indented 10px pixels. </p>

现在让我们学习一些关于 CSS 字体的内容

以下是一些基本的字体属性

注意 - 以下字体属性参考自 https://tutorialspoint.org.cn/css/css_fonts.htm

font-family - 用于改变字体的外观。

font-style - 用于使字体斜体或倾斜。

font-variant - 用于创建小型大写字母效果。

font-weight - 用于增加或减少字体的粗细或轻重。

font-size - 用于增加或减少字体大小。

font - 用作简写，用于指定许多其他字体属性。

示例

body {  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 14px;  
    font-weight: normal;  
    font-variant: small-caps;  
    font-style: italic;  
    line-height: 150%;  
}

简而言之，您可以如下定义

body {  
    font: font-style font-variant font-weight font-size/line-height font-family;  
}

在哪里以及如何使用 CSS

有三种不同的方法可以包含 CSS 样式。

1. 内部样式 – 内部样式是页面特定的样式。定义后，样式可以在整个页面中使用。范围仅限于页面级别。

2. 外部样式 – 外部样式是全局的，可以应用于多个网页文档，因此可以定义和重用样式。通过在网页中定义 CSS 的外部链接来应用样式。范围是全局的。

3. 行内样式 – 行内样式是 HTML 元素或标签特有的。范围仅限于标签级别。无法在网页文档内部或跨文档重用样式。

让我们看看如何在 HTML 文档中包含样式。以下是我们如何在 Web 文档中嵌入内联样式。我们只能在包含这些样式的页面中使用它们。

<style type="text/css">
      body {background-color:orange;}
      H1 {color:red;} 
</style>

这是定义内部样式的图示

当您希望将样式应用于多个页面时，我们可以将样式包含在一个文件中，并在网页文档中包含该文件。以下是我们如何在 head 标签中包含样式。下面的这种方式被称为外部样式，因为我们从外部 CSS 文件中包含样式。

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

您也可以使用 @import 导入外部样式表。这是一个示例

<style type="text/css" media="screen">
  @import url("styles.css");

  Other CSS styles 
   
</style>

下面是我们可以如何包含外部样式表的图示

现在让我们看看如何定义内联样式。下面是一个如何定义内联样式的示例。请注意，下面的样式仅适用于此 div 标签，且仅限于此网页文档内。

<div style="background: red;"> The inline styles for this div should make it 

</div>

这是内联样式的图示

现在我们来看一些实际的 CSS 用法示例。

以下是您可以使用的示例 CSS，用于布局您的主页，包括页眉、页脚、左侧、右侧和内容。

<HTML>

<HEAD>
<style type ="text/css">

body {
  margin: 0px;
  padding: 0px;
}

#header {
  background: orange;
  width: 100%;
}

#left {
  background: gray;
  float: left;
  width: 20%;
  height: 500px;
}

#right {
  background: gray;
  float: right;
  width: 20%;
  height: 500px;
}

#content {
  background: white;
  float: left;
  width: 59%;
  height: 500px;
}

#footer {
  background: #aba;
  clear: both;
  width: 100%;
}
</style>

</HEAD>

<BODY>

<div id="header">
Header
</div>

<div id="left">
Left
</div>

<div id="right">
Right
</div>

<h1>CSS Layout </h1>

3 Column Layout With Header , Footer and Content

<p>
The 3 column layout is common these days. The following HTML and CSS enables you to create a flexible 3 column layout.
</p>

<div id="footer">
Footer
</div>

</BODY>
</HTML>

这是它的样子

现在我们将看到一些更有趣的内容，关于如何应用字体样式，包括级联样式以及应用我们学过的各种 CSS 样式。

我们将构建一个简单的 HTML 和 CSS 演示页面并包含样式。

这是我们正在使用的导航栏。您可以看到一些指向 CodeProject 网站的链接。您还可以注意到这里应用了类选择器“navbar”。我们稍后将详细介绍样式。

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="https://codeproject.org.cn/">CodeProject Home Page</a>
  <li><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Latest Articles</a>
  <li><a href="https://codeproject.org.cn/script/Answers/List.aspx?tab=active">Question Answers</a>
</ul>

以下是我们演示 HTML 的一些内容。我们有一个带有字体效果的欢迎 div，一个图像和一个应用了类选择器样式的 HTML 表格。

<!-- Main content -->
<h1>CodeProject HTML & CSS Demo</h1>
<div class="font-effect-shadow-multiple">Welcome to CodeProject!<div>
<img id="Logo" tabindex="1" 
title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"
 alt="Home" style="height:135px;width:250px;border-width:0px;">
<table id="stat" class="our-stats">
    <tbody>
    <tr valign="top">
        <td><div class="value">47,291</div><div class="title"><a href="https://workspaces.codeproject.com">Workspaces</a></div></td>
        <td><div class="value">10.5 Million</div><div class="title"><a href="https://codeproject.org.cn/lounge.aspx">Members</a></div></td>
        <td><div class="value">3 Billion</div><div class="title"><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Article views</a></div></td>
    </tr>
    </tbody>
</table>

现在我们将应用一些主体样式。下面是相应的代码片段。我们将把所有这些样式定义在一个单独的 *.css 文件中，并将其包含在 HTML 页面中。

注意 - 下面用于 HTML 主体和导航栏的样式已从 http://www.w3.org/Style/Examples/011/firstcss 修改和重用

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: orange;
}

我们将为导航栏定义一些样式。您可以看到下面导航栏“li”的背景设置为白色，并且还应用了一些其他样式。

ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em 
}

ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black 
} 

ul.navbar a {
  text-decoration: none 
}

我们将为我们的演示 HTML 和 CSS 表格应用一些样式。

table.our-stats {
  background-color: #f7f7f7;
  border: 1px dotted #ccc;
  margin: 10px 0 27px 6px;
  width: 50%;
}

现在我们将为我们的演示 HTML 页面应用样式。我们需要像下面这样在 HTML 头部包含样式。您会注意到字体样式是从外部网站引用的。此外，我们还创建了 demoCss.css 文件。您可以下载演示示例代码以获取此样式表。

<head>
  <title>My first styled page</title>
  <link href="Style/demoCss.css" rel=stylesheet type="text/css"> 
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 28px;
      }
 </style>
</head>

最终的 HTML 将如下所示。

<!DOCTYPE html>
<html>

<head>
  <title>My first styled page</title>
 <link href="Style/demoCss.css" rel=stylesheet type="text/css"> 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 28px;
      }
 </style>
</head>

<body>
<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="https://codeproject.org.cn/">CodeProject Home Page</a>
  <li><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Latest Articles</a>
  <li><a href="https://codeproject.org.cn/script/Answers/List.aspx?tab=active">Question Answers</a>
</ul>
<!-- Main content -->
<h1>CodeProject HTML & CSS Demo</h1>
<div class="font-effect-shadow-multiple">Welcome to CodeProject!<div>
<img id="Logo" tabindex="1" 
title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"
 alt="Home" style="height:135px;width:250px;border-width:0px;">
<table id="stat" class="our-stats">
    <tbody>
    <tr valign="top">
        <td><div class="value">47,291</div><div class="title"><a href="https://workspaces.codeproject.com">Workspaces</a></div></td>
        <td><div class="value">10.5 Million</div><div class="title"><a href="https://codeproject.org.cn/lounge.aspx">Members</a></div></td>
        <td><div class="value">3 Billion</div><div class="title"><a href="https://codeproject.org.cn/script/Articles/Latest.aspx">Article views</a></div></td>
    </tr>
    </tbody>
</table>
</body>

</html>

这是我们最终的 CSS 演示样式表。

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: orange;
}

ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em 
}

h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif 
}

ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black 
}

ul.navbar a {
  text-decoration: none 
}

a:link {
  color: red
}

a:visited {
  color: blue
}

table.our-stats {
  background-color: #f7f7f7;
  border: 1px dotted #ccc;
  margin: 10px 0 27px 6px;
  width: 50%;
}

这是在浏览器中查看页面时的快照。您现在一定感到兴奋了 :)

关注点

我非常享受撰写本文。我希望读者能学到新知识或温故知新。CSS 样式虽然不难，但您必须真正精通使用 HTML 和 CSS 进行设计，才能使其专业化，这并非一蹴而就。设计来自于经验 :)

参考文献

http://www.w3.org/Style/Examples/011/firstcss

https://w3schools.org.cn/cssref/css3_pr_background.asp

历史

版本 1.0 - 初次创建“样式化您的第一个网页” - 2014年4月3日

版本 1.1 - 添加文章参考文献 - 2015年8月5日

© . All rights reserved.