1. CSS引入
1.1 HellowCSS
CSS 作用：美化网页，为 HTML 便签设置样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloCSS</title>
<style>
/* 选中body标签 */
body{
background-color: #a1d7d7;
}
/* 选中id为container的div标签 */
#container{
/* CSS 样式 */
border: 5px solid red;
width: 500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>1.2 三种引入方式
-
行内样式
缺点 ：如果多个标签完全一致怎么办？ 行内样式只能给某个标签设置样式，单行，造成代码的冗余。 ==> 考虑使用内联样式，为所有的相同样式的标签设置样式（代码的复用性）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式</title>
</head>
<body>
<!-- 行内样式 -->
<div style="background-color: pink;width: 500px;height: 500px;"></div>
<div style="background-color: pink;width: 500px;height: 500px;"></div>
<div style="background-color: pink;width: 500px;height: 500px;"></div>
<div style="background-color: pink;width: 500px;height: 500px;"></div>
<div style="background-color: pink;width: 500px;height: 500px;"></div>
</body>
</html>
-
内联样式（教学）
缺点 ：CSS 和 HTML 代码难分离 ==> 考虑使用外部样式，让 CSS 和 HTML完全分离，各写各的
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联样式</title>
<style>
div{
width: 500px;
height: 500px;
background-color: rgb(95, 220, 145);
}
</style>
</head>
<body>
<!-- 内联样式 -->
<div width="500px" height="500px" style="background-color: pink;"></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>
-
外部样式（建议开发时使用）
优点：专注点更高，CSS 和 HTML完全分离，好维护
- 引入CSS文件的方式 ①：通过
link标签 - 引入CSS文件的方式 ②：通过
@import（不建议使用，不支持JS）
- 引入CSS文件的方式 ①：通过
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<!-- 引入方式1 -->
<link rel="stylesheet" href="./1.2三种引入方式 .css">
<!-- 引入方式2 -->
<style>
@import url(./1.2三种引入方式\ .css);
</style>
</head>
<body>
<!-- 外部样式 -->
<div></div>
<div></div>
</body>
</html>
-
三种方式的优先级问题
行内 > （内联 ≈ 外部 谁在下就覆盖谁）