CSS学习笔记1：引入方式

最新推荐文章于 2024-10-05 17:04:37 发布

提辖鲁

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量92

点赞数

分类专栏： Web # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/lj402159806/article/details/122481609

版权

Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <!--rel属性  relative的缩写，取值固定"stylesheet"，表示引入的是一个样式表文件(即CSS文件)-->
    <!--type属性 取值固定"text/css"，表示这是标准的CSS-->
    <!--href属性 表示CSS文件的路径-->
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div>外部样式</div>
<div>外部样式</div>
<div>外部样式</div>
</body>
</html>

在这里插入图片描述

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style type="text/css">
        div {
            color: red;
        }
    </style>
</head>
<body>
<div>内部样式</div>
<div>内部样式</div>
<div>内部样式</div>
</body>
</html>

在这里插入图片描述

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
<div style="color: red;">行内样式</div>
<div style="color: red;">行内样式</div>
<div style="color: red;">行内样式</div>
</body>
</html>