[JavaScript知识库] 添加CSS的方式

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 添加CSS的方式 -> 正文阅读

[JavaScript知识库]添加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>
<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>