CSS 用法-之路教程

内联样式

要定义样式规则，我们可以使用任何 HTML 元素的 style 属性。

我们只能将这些规则应用于该元素。
style 属性可以包含任何 CSS 属性。

为 HTML 文档创建内联样式的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 style="color:#1c87c9">Some heading</h2>
    <p style="color:#8ebf42; font-size:15px">Some paragraph</p>
  </body>
</html>

现在让我们解释上面提到的我们使用内联样式的例子。
在 <h2> 标签中，我们写了 style="color: #1c87c9"，这意味着我们的标题（标题）应该是 #1c87c9.

与我们对 <p> 标签所做的一样。

我们已经写了颜色：#8ebf42； font-size: 15px 在我们的标签中，这意味着打开的 <p> 和关闭的 </p> 标签之间的信息将为 #8ebf42，文本大小将为 15px。

CSS 用法

有 3 种方法可以将 CSS 样式添加到 HTML 文档。

内联样式 - 为 HTML 元素赋予样式属性
内部样式 - 使用 <head> 部分中的 <style> 元素
外部样式 - 创建外部 CSS 文件

内部样式

对于内部样式，每个 HTML 文件都包含设置页面样式所需的 CSS 代码。
我们只需将 CSS 代码放在要设置样式的每个 HTML 文件的 <head> </head> 标记中。
下面的例子说明了这一点。

我们所做的更改只会影响一页。
如果我们需要设置更多页面的样式，则应一一进行更改。

下面的例子显示段落为白色，页面为#1c87c9.

为 HTML 文档创建内部样式的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      p {
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Some information</p>
  </body>
</html>

外部样式

外部样式被广泛用于将通用样式应用于整个。
它指的是创建一个包含所有样式信息的外部 CSS 文件。
我们可以使用任何文本或者 HTML 编辑器（例如“记事本”或者“Sublime text”）创建此类文件。

CSS 文件仅包含 CSS，我们只需使用 .css 文件扩展名保存它。
要将外部样式表链接到网页，我们应该在 HTML 文档的 <head> 部分中使用 <link> 标记。

每个网页都应该链接到样式表。

使用外部样式表时，所有 HTML 文件都链接到一个 CSS 文件，从而产生一致的外观。
如果你想改变网页的样式，你只需要在一个.css文件中做相应的改变。

为 HTML 文档创建外部样式的示例：

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

日期：2020-06-02 22:14:27 来源：oir作者：oir

←CSS 文本

CSS3 属性→