添加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>
结果：
1.css的使用方式
每个样式属性之间用分号连接，例：
color:red; 字体颜色
background-color:yellow; 背景颜色
font-size: 50px; 字号大小
①行内样式，内联样式 在元素中，写style属性，在style属性中编写样式 <元素 style="样式声明;样式声明....."></元素>
1 只对当前元素生效，代码没有可重用性 内联样式默认优先级最高 内联样式只在学习和测试中使用，项目基本不用
②内部样式 在head标签中，编写style标签，在style标签内部，编写属性 选择器{样式声明;样式声明…} 选择器：定义页面中使用这个样式的元素条件
p{ color:purple; background-color: pink; } 1 2 3 4 只能在当前页面中使用，项目中使用较少， 学习和测试使用较多
③外部样式 创建一个.css文件，在html中的head标签里，使用link引入
1 必须有rel=“stylesheet”，代表当前文件和引入文件的关系 项目中大量使用
