当前位置：首页 > 行业动态 > 正文

html如何添加外部css样式

admin
行业动态
2024-03-30
1

添加外部CSS样式到HTML文档中，可以通过以下步骤实现：

1、创建外部CSS文件：在与HTML文件相同的目录下创建一个CSS文件，可以使用任何文本编辑器（如记事本、Sublime Text等）来创建和编辑CSS文件。

2、编写CSS样式：在CSS文件中，你可以编写各种CSS样式规则来定义网页的外观和布局，可以设置字体、颜色、背景、边框等属性。

3、链接外部CSS文件：在HTML文件中，使用<link>标签将外部CSS文件链接到HTML文档中。<link>标签应该放在<head>标签内，以确保在加载页面时同时加载CSS样式。

下面是一个简单的示例，演示如何添加外部CSS样式到HTML文档中：

HTML文件（index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <!在这里链接外部CSS文件 >
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

CSS文件（styles.css）：

/* 在这里编写CSS样式 */
body {
    backgroundcolor: lightblue; /* 设置背景颜色为浅蓝色 */
    fontfamily: Arial, sansserif; /* 设置字体为Arial */
}
h1 {
    color: darkblue; /* 设置标题颜色为深蓝色 */
}

在上面的示例中，我们创建了一个名为styles.css的外部CSS文件，并在HTML文件的<head>标签中使用<link>标签将其链接到HTML文档中，我们在CSS文件中编写了一些样式规则，用于定义网页的背景颜色、字体和标题颜色，当浏览器加载HTML文档时，它会自动应用这些样式规则，使网页呈现出预期的外观和布局。