二维码

HTML 样式 - CSS

HTML 样式 - CSS

CSS 代表 级联样式表。

CSS节省了大量的工作。它可以控制多个布局 网页一次全部。

CSS = 样式和颜色

什么是CSS?

级联样式表 (CSS) 用于设置网页布局的格式。

使用 CSS,您可以控制颜色、字体、文本大小、间距 元素之间,元素的定位和布局方式,背景是什么 使用图像或背景颜色,不同设备的不同显示 和屏幕尺寸,还有更多!

提示: 级联这个词的意思是一种风格 应用于父元素也将应用于 父母。因此,如果将正文文本的颜色设置为“蓝色”,则所有标题, 段落和正文中的其他文本元素也将获得相同的颜色(除非您指定 别的东西)!

使用 CSS

CSS 可以通过 3 种方式添加到 HTML 文档中:

  • 内联 - 通过使用 HTML 元素中的属性style
  • 内部 - 通过使用节中的元素<style>``<head>
  • 外部 - 使用元素链接到外部 CSS 文件<link>

添加 CSS 的最常见方法是将样式保留在外部 CSS 中 文件。但是,在本教程中,我们将使用内联样式和内部样式,因为这更容易 演示,并且更容易让您自己尝试。

内联 CSS

内联 CSS 用于将唯一样式应用于单个 HTML 元素。

内联 CSS 使用 HTML 元素的属性。style

以下示例将元素的文本颜色设置为蓝色。 并将元素的文本颜色变为红色:<h1>``<p>

1
2
3
<h1 style="color:blue;">A Blue Heading</h1>  

<p style="color:red;">A red paragraph.</p>

内部 CSS

内部 CSS 用于定义单个 HTML 页面的样式。

内部 CSS 在 HTML 页面的部分中定义, 在元素中。<head>``<style>

以下示例设置所有元素的文本颜色 (在该页面上)设置为蓝色,并将所有元素的文本颜色更改为 红。此外,该页面将以“粉蓝色”背景显示 颜色:<h1>``<p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>

<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部 CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:<head>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部样式表可以在任何文本编辑器中编写。该文件不得包含任何 HTML 代码,并且必须使用 .css 扩展名保存。

下面是“styles.css”文件的样子:

“样式.css”:
1
2
3
body {  background-color: powderblue;}  
h1 {  color: blue;}
p {  color: red;}

提示: 使用外部样式表,您可以通过更改一个文件来更改整个网站的外观!

CSS 颜色、字体和大小

在这里,我们将演示一些常用的 CSS 属性。您将学习 稍后会详细介绍它们。

CSS 属性定义要使用的文本颜色。color

CSS 属性定义要使用的字体。font-family

CSS 属性定义要使用的文本大小。font-size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
使用 CSS color、font-family 和 font-size 属性:

<!DOCTYPE html>

<html>
<head>
<style>
h1 {  color: blue;
  font-family: verdana;
  font-size: 300%;}
p {  color: red;
  font-family: courier;
  font-size: 160%;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS 边框

CSS 属性定义边框 围绕 HTML 元素。border

提示: 您可以为几乎所有 HTML 元素定义边框。

1
2
3
CSS border 属性的使用:

p {  border: 2px solid powderblue;}

CSS 填充

CSS 属性定义填充 (空格)在文本和边框之间。padding

1
2
3
4
CSS 边框和填充属性的使用:

p {  border: 2px solid powderblue;
  padding: 30px;}

CSS 边距

CSS 属性定义边距 (空格)在边界之外。margin

1
2
3
4
CSS 边框和边距属性的使用:

p {  border: 2px solid powderblue;
  margin: 50px;}

链接到外部 CSS

可以使用完整 URL 或相对于当前网页的路径来引用外部样式表。

1
2
3
4
此示例使用完整的 URL 链接到样式表:


<link rel="stylesheet" href="/examples/other/html/CSS/css/styles.css">

1
2
3
此示例链接到位于当前网站上 html 文件夹中的样式表:

<link rel="stylesheet" href="/html/styles.css">

1
2
3
此示例链接到与当前页位于同一文件夹中的样式表:

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

您可以在 HTML 一章中阅读有关文件路径的更多信息 [文件路径]。

本章小结

  • 将 HTML 属性用于内联样式style
  • 使用 HTML 元素定义内部 CSS<style>
  • 使用 HTML 元素引用外部 CSS 文件<link>
  • 使用 HTML 元素存储 <style><link>元素 <head>
  • 将 CSS 属性用于文本颜色color
  • 将 CSS 属性用于文本字体font-family
  • 将 CSS 属性用于文本大小font-size
  • 将 CSS 属性用于边框border
  • 将 CSS 属性用于边框内的空间padding
  • 将 CSS 属性用于边框外的空间margin

提示: 您可以在我们的 [CSS 教程中了解有关 CSS] 的更多信息。

HTML Style标签

Tag Description
[<style>] Defines style information for an HTML document
[<link>] Defines a link between a document and an external resource

有关所有可用 HTML 标记的完整列表,请访问我们的 [HTML 标记参考]。