CSS简介以及导入方式
你可以把 HTML 想象成一个人的骨架和五官，而 CSS 就是给这个人穿衣服、化妆、决定发型和站姿的东西。
比如：
字体多大？颜色是什么？
按钮是圆的还是方的？背景是红的还是蓝的？
图片在左边还是右边？页面在手机上看是不是自动变窄？
这些样式和排版的事情，都是 CSS 管的
总结：HTML 负责编内容，CSS 负责编好看
css通常由选择器,属性,属性值组层
CSS三种导入方式的优先级:内联样式>内部样式表>外部样式表
优先级高的样式会覆盖优先级低的样式
内联样式
直接使用标签属性,在h1标签中使用style属性,将颜色设置为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS导入方式</title>
</head>
<body>
<h1 style="color: red;">这是一个一级标题</h1>
</body>
</html>
内部样式
直接在html中,将style标签添加在head中,将p标签设置为蓝色,字体大小设置为20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS导入方式</title>
<!-- 将P标签的样式定义在css文件中,颜色设置为蓝色,字体设置为20px -->
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个应用了css样式的文本</p>
</body>
</html>
效果如下
外部样式
直接将CSS单独放在一个CSS文件中,然后链接到html中
我们新建一个文件夹,然后创建一个Style.CSS的样式文件,将h3标签的颜色设置为紫色
在head中使用link标签,将我们的style.css样式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=<