在HTML中引用CSS的三种主要方式

非自律懒癌患者

已于 2024-03-09 03:43:22 修改

阅读量932

点赞数 9

文章标签： html css 前端

于 2024-03-09 03:13:40 首次发布

本文链接：https://blog.csdn.net/weixin_51397022/article/details/136575623

版权

在HTML中引用CSS的三种主要方式

HTML组成了网页的基本结构，CSS则给网页当中所有的结构添加样式，使网页更加好看。

外部样式表（External Style Sheet）
使用元素在HTML文档的部分引用外部CSS文件。这是最常见且推荐的方式，因为它允许样式和内容分离，使得样式更易于管理和复用。
```
<!DOCTYPE html>  
<html>  
<head>  
    <title>外部样式表示例</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
    <h1>欢迎来到我的网站！</h1>  
    <p>这是一个使用外部样式表的段落。</p>  
</body>  
</html>
```
在这个例子中，styles.css是外部样式表文件，它应该位于与HTML文件相同的目录或指定的路径下。

内部样式表（Internal Style Sheet）
使用<style>元素在HTML文档的<head>部分定义CSS规则。这种方式适用于单个文档的特定样式，但不利于样式复用。

<!DOCTYPE html>  
<html>  
<head>  
    <title>内部样式表示例</title>  
    <style>  
        body {  
            background-color: lightblue;  
        }  
        h1 {  
            color: white;  
            text-align: center;  
        }  
        p {  
            font-family: verdana;  
            font-size: 20px;  
        }  
    </style>  
</head>  
<body>  
    <h1>欢迎来到我的网站！</h1>  
    <p>这是一个使用内部样式表的段落。</p>  
</body>  
</html>

在这个例子中，所有的CSS规则都定义在<style>标签内。

内联样式（Inline Style）
使用style属性直接在HTML元素上定义CSS规则。这种方式应该谨慎使用，因为它增加了HTML的复杂性，并且不利于样式的维护和复用。
```
<!DOCTYPE html>  
<html>  
<head>  
    <title>内联样式示例</title>  
</head>  
<body>  
    <h1 style="color: white; text-align: center; background-color: black;">欢迎来到我的网站！</h1>  
    <p style="font-family: verdana; font-size: 20px;">这是一个使用内联样式的段落。</p>  
</body>  
</html>
```
在这个例子中，每个HTML元素都通过style属性直接指定了CSS样式。这种方式通常用于覆盖其他样式表中的特定样式或为单个元素应用一次性样式。然而，对于大型项目或需要一致样式的场景，外部样式表通常是更好的选择。

非自律懒癌患者

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
在HTML中引用CSS的三种主要方式

在这个例子中，每个HTML元素都通过style属性直接指定了CSS样式。然而，对于大型项目或需要一致样式的场景，外部样式表通常是更好的选择。这种方式应该谨慎使用，因为它增加了HTML的复杂性，并且不利于样式的维护和复用。这是最常见且推荐的方式，因为它允许样式和内容分离，使得样式更易于管理和复用。这种方式适用于单个文档的特定样式，但不利于样式复用。在这个例子中，styles.css是外部样式表文件，它应该位于与HTML文件相同的目录或指定的路径下。在这个例子中，所有的CSS规则都定义在标签内。
复制链接

扫一扫