如何在HTML文档中使用CSS样式表？

由 hcduguo

在HTML中，我们可以通过以下三种不同的方法将CSS样式表链接到Html文档：

  1. 使用内联样式
  2. 使用嵌入样式或内部样式
  3. 使用外部样式

使用内联样式

这是将CSS样式添加到HTML文档或代码中的最简单方法。但我们无法重用此方法，因此可重用性是此方法的缺点。如果使用内联样式将CSS添加到HTML文档中，可以参考以下步骤：

步骤1：首先，在文本编辑器中输入HTML代码，或者打开现有的HTML文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head> 
    <body>
    ................
    ................
    </body>

</html>

步骤2：现在，HTML标签对的起始标签中使用style属性。

<p style=" ">输入文本...</p>

步骤3：为style属性输入具体属性值。

<p style="color:blue;font-size:16px;font-weight:bold;">输入文本...</p>

color：字体颜色；font-size：字号大小；font-weight：字体粗细；

步骤4：保存HTML代码，然后运行它。在浏览器中成功执行代码后会得到输出结果。

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
    </head>
    
    <body>
        <h2>《江城子·记梦》</h2>
        <h3>宋·苏轼</h3>
        <p style="color:blue;font-size:16px;font-weight:bold;">十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
        <p>夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。</p>
    </body>

</html>

效果展示：

《江城子·记梦》

宋·苏轼

十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。

夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。

使用内部样式

那些仅影响当前HTML文档的CSS样式表称为内部样式表。这些样式表定义在<head>开始和结束标签之间。

如果我们想使用“内部样式表”将CSS添加到我们的Html文档中，请参考以下步骤。

步骤1：首先，在文本编辑器中输入HTML代码，或者打开现有的HTML文件。

步骤2：将<style>标签放置在<head>标签的开始和结束之间，在<title>标签之后。

<head>
    <meta charset="utf-8">
    <title>奔月教程(runoon.com)</title>
    <style>
    ..................
    ..................
    </style>
</head>

步骤3：通常我们会给<style>标签加上type属性，此属性不是必选。

<style type="text/css">

步骤4：根据我们使用的元素，在<style>标签内定义这些元素的样式。

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>	
        <style>
            body{color:green;}
            p{color:purple;font-size:16px;font-weight:bold;}
        </style>
    </head>
    
    <body>
        <h2>《江城子·记梦》</h2>
        <h3>宋·苏轼</h3>
        <p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
        <p>夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。</p>
    </body>

</html>

步骤5：最后保存HTML文件并运行它。在浏览器中成功执行代码后会得到输出结果。

效果展示：

《江城子·记梦》

宋·苏轼

十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。

夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。

亲自试试

使用外部样式

这些包含CSS格式或代码的文件称为外部样式表文件或CSS文件。文件的扩展名必须以.css扩展名结尾。这些文件可以使用<link>标记轻松地包含在HTML文件中。

如果我们想使用外部样式表将CSS添加到Html文档中，可以参考以下步骤：

步骤1：首先，在文本编辑器中输入HTML代码，或者打开现有的HTML文件。

步骤2：创建CSS文件，打开文本编辑器，然后在文件中键入CSS代码。

body{color:green;}
p{color:purple;font-size:16px;font-weight:bold;}

步骤3：将代码保存成扩展名为.css的文件。将CSS文件放在示例代码目录下的CSS目录中。

第4步：进入HTML文件，在<head>开始和结束标签之间，在<title>标记之后，输入<link>标签及其属性和值。

<link rel="stylesheet" href="css/csscode.css">

步骤5：最后保存HTML文件并运行它。在浏览器中成功执行代码后会得到输出结果。

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>奔月教程(runoon.com)</title>
        <link rel="stylesheet" href="css/csscode.css">  
    </head>
    
    <body>
        <h2>《江城子·记梦》</h2>
        <h3>宋·苏轼</h3>
        <p>十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
        <p>夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。</p>
    </body>

</html>

亲自试试

相关