【CSS】html中引入css的三种形式 | ♥毛球Josey♥的博客

行内样式

<html>
<head>
    <meta charset="utf-8">
    <title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>
</body>
</html>

行内样式为在标签<>内插入style=”你想要的样式;”。

内嵌样式

<html>
<head>
    <meta charset="utf-8">
    <title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>
</body>
</html>

内嵌样式为把所有css设置写在内，一般放在后。

外部样式

html文件、css文件分别为

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>css外部样式</title>
    <link rel="stylesheet" type="text/css" href="css.css"> //href="你所存的css文件名.css"
</head>
<body>
<div id="div"></div>
</body>
</html>

1	div{width:100px;height:100px;background:red;}

需要注意的是，在使用外部样式时，html文件和css文件必须在同一根目录下。

通常来说，为了使标签语义化，我们一般采用外部样式来引入css。

什么是标签语义化？为什么要实现标签语义化