如何把CSS加入HTML？教你如何快速实现！

2024-04-01 05:09:02 搜狗SEO ℃

在网页设计中，CSS与HTML是密不可分的。HTML（HyperText Markup Language）用于创建页面的结构，而CSS（Cascading Style Sheets）用于使页面变得更美观。在网站制作中，要将CSS加入HTML，我们可以使用以下几种方法：

内联样式（Inline Styles）

内联样式的应用方式是在HTML元素的style属性中直接编写CSS代码，这样即可在页面中应用该CSS样式。这种方法适用于对单个元素进行样式设置的情况。

如下代码展示了如何将内联样式应用于HTML元素中：

<!DOCTYPE html>
<html><head>    
<title>CSS in HTML</title>    
</head>
<body>    
<h1 style="color: blue;">这是一个标题</h1>    
<p style="fontsize: 18px;">这是一个段落。</p>
</body></html>

内部样式表（Internal Style Sheets）

内部样式表是在HTML文档的<head>标签中使用<style>标签编写CSS代码，相比于内联样式，这种方法适用于对多个元素进行样式设置的情况。

如下代码展示了如何将内部样式表应用于HTML元素中：

<!DOCTYPE html>
<html><head>    
<title>CSS in HTML</title>    
<style>        
h1 { color: blue; }        
p { fontsize: 18px; }    
</style>
</head>
<body>    
<h1>这是一个标题</h1>    
<p>这是一个段落。</p>
</body></html>

外部样式表（External Style Sheets）

外部样式表是将CSS代码保存在一个单独的文件中，然后在HTML文档中使用<link>标签引入该文件。这种方法适用于对整个网站或多个页面进行样式设置的情况。

如下代码展示了如何将外部样式表应用于HTML元素中：

在文件夹中创建一个名为 styles.css 的文件，并将以下CSS代码保存在其中：

h1 { color: blue; }
p { fontsize: 18px; }

在HTML文档中使用<link>标签引入该文件：

<!DOCTYPE html>
<html><head>    
<title>CSS in HTML</title>    
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>    
<h1>这是一个标题</h1>    
<p>这是一个段落。</p>
</body></html>