![](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)](https://i-blog.csdnimg.cn/blog_migrate/576340a359de17e3fcd2b936316c88cf.png#pic_center)
🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”
CSS
- 层叠样式表(Cascading Style Sheets)
👉CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cb98ffad2fb0ed9e9036447baae67625.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b91be5b4baa17bdb9955db4937538dae.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>hello world</p>
<p>Aileen</p>
<h1>你好</h1>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d7758437e7d753d7054be6cba11e0b42.png)
选择器+{一条/N条声明}
- 选择器(selector)决定针对谁修改使用:区分键值对,使用:区分键(property)和值(value)
- 声明决定修改啥
- 声明的属性是键值对,
selector{ property:value }
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b2c022d81f0e515a83ced1322bdbde12.png)
CSS引入方式
内部样式表
- 将css嵌套到html中 (通过style)标签嵌套
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/da05fe0817f8a134d61b8af14c589f84.png)
行内样式表
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/95e3f12e95a959f43d434cc109407865.png)
外部样式表
- 1.创建一个css文件
- 2.使用 link 标签引入 css
<link rel="stylesheet" href="/path/example.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo02.css">
</head>
<body>
<p>hello css</p>
</body>
</html>
p{
color:crimson;
font-size: 80px;
}
Summary
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6f44c4f0ed428a41836d3e0233933828.png)
![](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)](https://i-blog.csdnimg.cn/blog_migrate/a3933983f953d71ef6bad48b225f5ec5.gif#pic_center)
![](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)](https://img-blog.csdnimg.cn/cc002cbd5c414c5393e19c5e0a0dbf20.gif#pic_center#pic_center)