添加CSS的方式

最新推荐文章于 2024-04-06 22:43:58 发布

聪明乖巧的小狮子

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/m0_52295416/article/details/124410386

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

添加CSS的几种方式

1.外部样式表

css放在.css文件里
html文件中使用<link>标签进行引用

//css文件：
.box{color: green;}

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="box">
        <h1>hello</h1>
    </div>
</body>

2.内部样式表

将css放在html文件的 <style> 标签中

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
    <style>
        p {color: red;}   <!--对p标签进行操作，将颜色变为红色-->
    </style>
</head>
<body>
    <p>
        aaaaa
    </p>
</body>

结果：
在这里插入图片描述

3.内联样式

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>

</head>
<body>
    <p style="color: blue;">
        aaaaa
    </p>
</body>

添加css样式

.box{color: green;}
p {color: aqua;}
.pargh{color: rgb(230, 59, 59);}  /*查找class*/
#mn{color: aquamarine;}   /*查找id*/

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="box">
        <h1 class="pargh" id="par">hello</h1>
    </div>
    <div>
        <h1  id="mn">hello</h1>
    </div>
    <p>
        world
    </p>
</body>

结果：
在这里插入图片描述

聪明乖巧的小狮子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
添加CSS的方式

添加CSS的几种方式1.外部样式表css放在.css文件里html文件中使用<link>标签进行引用//css文件：.box{color: green;}<!DOCTYPE html><html lang="en"><head> <title>Document</title> <link rel="stylesheet" href="./style.css"></head><
复制链接

扫一扫