HTML CSS 样式

CSS 代表级联样式表，是 Cascading Style Sheets 的缩写，它可以同时控制多个网页的布局和样式。

CSS 代表级联样式表，是 Cascading Style Sheets 的缩写，它可以同时控制多个网页的布局和样式。

使用 CSS，您可以做到这些（当然不止这些）：

  • 控制颜色，包括背景色，前景色
  • 设定字体、文本大小
  • 设定背景图像
  • 控制元素之间的间距、元素的定位和布局方式
  • 控制不同设备和屏幕尺寸的不同显示

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

使用 CSS

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

  • 内联 - 在 HTML 元素内的 style 属性中设定
  • 内部 - 在 HTML 文档 <head> 元素中的 <style> 元素中进行设定
  • 外部 - 使用 <link>  元素引入外部 CSS 文件

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

内联 CSS

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

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

以下例子中将 <h1> 元素的文本颜色设置为蓝色，将 <p> 元素的文本颜色设置为红色：

<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>元素的文本颜色设置为红色。另外，页面会以“粉蓝”的背景色显示：

例子

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
        background-color: powderblue;
      }
      h1    {
        color: blue;
      }
      p     {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>这里是标题</h1>
    <p>这里是正文的一段内容。</p>
  </body>
</html>

外部 CSS

外部样式表可以作为多个 HTML 页面公用的样式。

要使用外部样式表，请在每个 HTML 页面的 <head> 部分中使用 link 标签添加指向它的链接。

下面的例子引入了一个名称为 styles.css 样式文件

<!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”文件的样子：

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

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

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

    <link rel="stylesheet" href="https://www.gobeta.net/assets/e0c21a9e0556e119baa5fda6b071ed71.css" />

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

    <link rel="stylesheet" href="/assets/e0c21a9e0556e119baa5fda6b071ed71.css" />

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

CSS 颜色、字体和大小

在这里，我们演示一些常用的 CSS 属性。

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

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

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

下面是一个使用 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>这是一级标题</h1>
    <p>这是正文的内容。</p>
  </body>
</html>

CSS 边框

CSS border 属性定义了围绕 HTML 元素的边框的外观。

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

CSS 边框属性的实例：

p {
  border: 2px solid powderblue;
}

CSS 内边距

CSS padding 属性定义文本和边框之间的间距。

CSS 边框和内边距的使用实例

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

CSS 外边距

CSS margin 属性定义了外边距（边框外的边距）。

例子

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

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

总结

  • 使用 HTML 元素的 style 属性进行内联样式
  • 在 HTML <style> 元素定义内部 CSS
  • 使用 HTML 的 <link> 元素引用外部 CSS 文件
  • <style> 和 <link> 元素放在 HTML 的 <head> 元素中
  • 使用 CSS 的 color 属性设置文本颜色
  • 使用 CSS 的 font-family 属性设置文本的字体
  • 使用 CSS 的 font-size 属性设置文本字体大小
  • 使用 CSS 的 border 属性设置元素的边框
  • 使用 CSS 的 padding 属性设置元素的内边距
  • 使用 CSS 的 margin 属性设置元素的外边距

HTML 样式标签

标签 说明
<style> 为 HTML 文档定义样式表
<link> 定义一个 HTML 文档的外部文档之间的连接

如需所有可用 HTML 标签的完整列表，请访问 HTML 标签参考。

HTML 颜色 HTML 链接