码农教程 - 一技在手,衣食无忧! tools

HTML 样式 - CSS

❮ 上一节 下一节 ❯

CSS 代表层叠样式表。

CSS 节省了大量工作。它可以同时控制多个网页的布局。

CSS = 样式和颜色

操作文本
颜色， 盒子

什么是CSS？

层叠样式表 (CSS) 用于格式化网页的布局。

使用 CSS，您可以控制颜色、字体、文本大小、元素之间的间距、元素的定位和布局方式、要使用的背景图片或背景颜色、不同设备和屏幕尺寸的不同显示，以及多得多！

提示：这个单词级联意味着应用于父元素的样式也将应用于父元素中的所有子元素。因此，如果将正文文本的颜色设置为"blue"，正文中的所有标题、段落和其他文本元素也将获得相同的颜色（除非您指定其他内容）！

使用CSS

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

  • 排队- 通过使用styleHTML 元素内的属性
  • 内部的- 通过使用<style>中的元素<head>部分
  • 外部的- 通过使用<link>链接到外部 CSS 文件的元素

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

内联CSS

内联 CSS 用于将独特的样式应用于单个 HTML 元素。

内联 CSS 使用styleHTML 元素的属性。

下面的例子设置了文本的颜色<h1>元素为蓝色，文本颜色<p>元素变为红色：

示例

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

<p style="color:red;">A red paragraph.</p>
亲自试一试 »

内部CSS

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

内部 CSS 定义在<head>HTML 页面的一部分，在<style>元素。

以下示例设置所有的文本颜色<h1>元素（在该页面上）为蓝色，并且所有元素的文本颜色<p>元素变为红色。此外，该页面将以 "powderblue" 背景颜色显示：

示例

<!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

外部样式表用于定义许多 HTML 页面的样式。

要使用外部样式表，请在<head>每个 HTML 页面的部分：

示例

<!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" 文件如下所示：

"styles.css"：

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

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

CSS 颜色、字体和大小

在这里，我们将演示一些常用的 CSS 属性。稍后您将了解更多有关它们的信息。

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

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

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

示例

CSS 颜色、字体系列和字体大小属性的使用：

<!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 边框

CSSborder属性定义 HTML 元素周围的边框。

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

示例

CSS边框属性的使用：

p {
  border: 2px solid powderblue;
}
亲自试一试 »

CSS 填充

CSSpadding属性定义文本和边框之间的填充（空间）。

示例

CSS 边框和填充属性的使用：

p {
  border: 2px solid powderblue;
  padding: 30px;
}
亲自试一试 »

CSS 边距

CSSmargin属性定义边框外的边距（空间）。

示例

CSS 边框和边距属性的使用：

p {
  border: 2px solid powderblue;
  margin: 50px;
}
亲自试一试 »

链接到外部 CSS

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

示例

此示例使用完整的 URL 链接到样式表：

<link rel="stylesheet" href="https://www.91xjr.com/html/styles.css">

亲自试一试 »

示例

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

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

亲自试一试 »

示例

此示例链接到与当前页面位于同一文件夹中的样式表：

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

亲自试一试 »

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

章节总结

  • 使用 HTMLstyle内联样式属性
  • 使用 HTML<style>定义内部 CSS 的元素
  • 使用 HTML<link>引用外部 CSS 文件的元素
  • 使用 HTML<head>存储 <style> 和 <link> 元素的元素
  • 使用CSScolor文本颜色属性
  • 使用CSSfont-family文本字体的属性
  • 使用CSSfont-size文本大小属性
  • 使用CSSborder边界属性
  • 使用CSSpadding边界内空间的属性
  • 使用CSSmargin边界外空间的属性

提示：您可以在我们的网站中了解有关 CSS 的更多信息CSS 教程。

HTML练习

通过练习测试一下

练习:

使用CSS将文档（正文）的背景颜色设置为黄色。

<!DOCTYPE html>
<html>
<head>
<style>

   :yellow;

</style>
</head>
<body>

<h1>My Home Page</h1>

</body>
</html>

开始练习

HTML 样式标签

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

有关所有可用 HTML 标签的完整列表，请访问我们的HTML 标签参考。


❮ 上一节 下一节 ❯