CSS第一章 CSS引入

1. CSS引入

1.1 HellowCSS

CSS 作用：美化网页，为 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 三种引入方式

• 行内样式

  缺点 ：如果多个标签完全一致怎么办？ 行内样式只能给某个标签设置样式，单行，造成代码的冗余。 ==> 考虑使用内联样式，为所有的相同样式的标签设置样式（代码的复用性）

<!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完全分离，各写各的

<!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）

<!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>

• 三种方式的优先级问题

  行内 > （内联 ≈ 外部 谁在下就覆盖谁）