HTML中CSS的三种写法-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML中CSS的三种写法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原文网址：HTML中CSS的三种写法_IT利刃出鞘的博客-CSDN博客

简介

本文介绍在前端HTML中写CSS的三种方法。

有内联样式、内部样式、外部样式。优先级为：内联样式 > 内部样式 > 外部样式。当同一个样式在不同位置定义时，会使用优先级高的样式。

内联样式

行内样式，又叫做标签样式，写在标签的 style 属性上。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>

<div style="color: green">
    这是div元素
</div>

</body>
</html>

内部样式

写法1：写到head

将CSS样式写到页面头部，写在<style></style>之间。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        div {
            color: green;
        }
    </style>
</head>

<body>

<div>
    这是div元素
</div>

</body>
</html>

写法2：写到body

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>

<style>
    div {
        color: green;
    }
</style>

<div>
    这是div元素
</div>

</body>
</html>

外部样式

把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内。

CSS文件（demo.css）

div {
    color: green;
}

HTML文件文章来源地址https://www.toymoban.com/news/detail-535414.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <link rel="stylesheet" href="./demo.css">
</head>

<body>

<div>
    这是div元素
</div>

</body>
</html>

到了这里，关于HTML中CSS的三种写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！