二维码
搜索 ×

HTML 样式 - CSS

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

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 标记参考]。

推荐教程