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>

内部样式

将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>

外部样式

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

CSS文件(demo.css)

div {
    color: green;
}

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>

猜你喜欢

转载自blog.csdn.net/feiying0canglang/article/details/128099669