如何将 CSS 链接到 HTML

2025 年 3 月 25 日 | 阅读 5 分钟

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

使用内联样式
使用嵌入式样式或内部样式
使用外部样式

使用内联样式

这是向我们的 HTML 文档或代码中添加 CSS 样式的最简单方法。但是我们无法重用此方法，因此可重用性是此方法的缺点。如果我们想使用内联样式将 CSS 添加到我们的 HTML 文档中，那么我们必须遵循下面给出的步骤：

第一步： 首先，我们必须在任何文本编辑器中输入 HTML 代码，或者在文本编辑器中打开我们想要使用内联样式链接 CSS 的现有 HTML 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Link the CSS using Inline style to Html
</Title>
</Head>
<Body> 
This page helps you to understand how to link the CSS to the Html page. <br>
<br>
And, this section helps you to understand how to link the CSS using Inline Style.
</Body>
</Html>

第二步： 现在，我们必须在我们想要使用 CSS 的文本的开头使用 style 属性。所以，我们必须在一个特定的标签内输入 style 属性，以便使用内联样式将 CSS 链接到 HTML，如下面的代码块所示：

第三步： 现在，我们必须在 style 属性中给出属性，如下面的代码块所示：

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Link the CSS using Inline style to Html
</Title>
</Head>
<Body> 
This page helps you to understand how to link the CSS to the Html page. <br>
<p style="color:green;">
And, this section helps you to understand how to link the CSS using Inline Style.
</p>
</Body>
</Html>

第四步： 现在，保存 HTML 代码然后运行它。当代码在浏览器中成功执行后，它将显示输出。下面的截图显示了上述 HTML 代码的输出：

使用内部样式表

那些只影响它们嵌入的 HTML 文档的样式表被称为内部样式表。这些样式表在<head>标签的开始和结束之间定义。

如果我们想使用内部样式表向我们的 HTML 文档中添加 CSS，那么我们必须遵循下面给出的步骤：

第一步： 首先，我们必须在任何文本编辑器中输入 HTML 代码，或者在文本编辑器中打开我们想要使用内部样式表链接 CSS 的现有 HTML 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Link the CSS using Inline style to Html
</Title>
</Head>
<Body> 
This page helps you to understand how to link the CSS to the Html page. <br>
<br>
And, this section helps you to understand how to link the CSS using Internal Style Style.
</Body>
</Html>

第二步： 现在，我们必须将 style 标签放置在 <head> 标签的开始和结束之间，紧跟在 <title> 标签之后。我们在下面的代码块中描述了这一步：

<Head>    
<Title>   
Link the CSS using Internal Style Sheet to Html
</Title>
<style>
.....
.....
</style>
</Head>

第三步： 现在，我们必须使用 style 标签的名为 "type" 的属性。所以，我们必须总是像这样开始 <style> 标签：

第四步： 现在，我们必须添加我们想要在同一个 HTML 页面上的文本中使用的那些元素。我们可以在 <head> 标签中定义的 style 标签内添加这些元素。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Link the CSS using Internal Style Sheet to Html
</Title>
<style>
Body
{
color:green;
margin-left:200px;
}
p
{
color:pink;
}
</style>
</Head>
<Body> This page helps you to understand how to link the CSS to the Html page. 
<p>
And, this section helps you to understand how to link the CSS using Internal Style Style.
</p>
</Body>
</Html>

第五步： 最后，保存 HTML 文件并运行它。当代码被浏览器成功执行后，它将显示输出。下面的截图提供了上述 HTML 代码的输出。

使用外部样式

那些只包含 CSS 格式或代码的文件被称为外部样式表文件或 CSS 文件。这些文件的扩展名必须以 .css 结尾。这些文件与 HTML 文件不同，并且可以使用 <link> 标签轻松地包含在 HTML 文件中。

如果我们想使用外部样式表向我们的 HTML 文档中添加 CSS，那么我们必须遵循下面给出的步骤：

第一步： 首先，我们必须在任何文本编辑器中输入 HTML 代码，或者在文本编辑器中打开我们想要链接 CSS 文件的现有 HTML 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Link the CSS code using External style sheet to Html
</Title>
</Head>
<Body> 
This page helps you to understand how to link the CSS to the Html page. <br>
<br>
And, this section helps you to understand how to link the CSS using External Style Style.
</Body>
</Html>

第二步：现在，我们必须创建 CSS 文件。所以，打开文本编辑器并在文件中输入 CSS 代码。

Body
{
color:green;
margin-left:200px;
}
p
{
color:pink;
}

第三步：然后，将文件保存为 .css 扩展名。

第四步： 再次回到 HTML 文件。然后，我们必须将光标放在 <head> 标签的开始和结束之间，紧跟在 <title> 标签之后。然后输入 <tag> 及其属性和值。我们在下面的代码块中对此进行了描述：

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Link the CSS code using External style sheet to Html
</Title>
<link rel="stylesheet" href="csscode.css">
</Head>
<Body> 
This page helps you to understand how to link the CSS to the Html page. 
<p>
And, this section helps you to understand how to link the CSS using External Style Style.
</p>
</Body>
</Html>

第五步： 现在，我们必须将 HTML 文件保存在与 CSS 文件相同的路径或目录中。然后，在浏览器中运行 HTML 文件。上述 HTML 代码的输出显示在下面的截图中：

下一个主题如何在 HTML 中添加背景图片

如何将 CSS 链接到 HTML

使用内联样式

使用内部样式表

使用外部样式

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何将 CSS 链接到 HTML

使用内联样式

使用内部样式表

使用外部样式

相关帖子

HTML P 标签

如何制作 HTML 搜索栏

HTML 版权符号

HTML 中的语义标签

HTML 副标题

HTML 电子邮件

HTML IDE

哪个内联属性用于指定样式

HTML 中的标记含义

HTML 注释快捷键

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器