CSS3学习随记1⃣️

最新推荐文章于 2025-08-16 09:21:42 发布

不要必应

最新推荐文章于 2025-08-16 09:21:42 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 html css

本文链接：https://blog.youkuaiyun.com/aston5128/article/details/54744015

CSS3 专栏收录该内容

2 篇文章

订阅专栏

CSS3

关于怎么在html文件中使用CSS，总共有4种方法：行内样式、内嵌样式、链接样式和导入样式。

1.行内样式

最直观的样式，但是维护难度大。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之行内样式</title>
</head>
<body>
<p style="color:red">这里使用的是行内样式</p>
</body>
</html>

行内样式

2.内嵌样式

内嵌样式是指把< style>标签内嵌到< head>标签中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之内嵌样式</title>
    <style>
        <!--可以看到CSS标签在这里-->
        p {
            color: #39f;
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>这里使用的是内嵌样式</p>
</body>
</html>

内嵌样式

3.链接样式

链接样式是最常见的样式，它优点有很多，瘦身html文件、同一个css文件能被多个不同的html文件使用等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之链接样式</title>
    <!--可以看见CSS在此处链接到html中-->
    <link rel="stylesheet" type="text/css" href="text.css">
</head>
<body>
<p>这里使用的是链接样式</p>
</body>
</html>

<!--text.css-->
p {
    color: #994422;
    font-size: 20px;
}

这里写图片描述

4.导入样式

与链接样式不同的是，导入样式会在html初始化时，将css文件导入到html文件中，作为html文件的一部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之导入样式</title>
    <style type="text/css">
        @import "text.css"
    </style>
</head>
<body>
<p>这里使用的是导入样式</p>
</body>
</html>

<!--text.css-->
p {
    color: #003728;
    font-size: 23px;
    font-style: italic;
}

这里写图片描述