css引入方式

首先，我们来看一下css是怎么控制html标签的样式的：

内嵌式css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式css</title>
    <style>
        p {
            color: blue;
        }
    </style>
    <!-- 内嵌式css适合写在小案例中 -->
</head>
<body>
    <p>p</p>
</body>
</html>

上述代码所展示的的css是内嵌式css，在html文件内即可控制html标签的样式，在style标签中控制。在上述代码中可以看到，style标签最好写在head标签中。
内嵌式css适合写在小案例中，即一个内嵌式css只能控制其所属的html文件中html标签的样式。
上述代码的浏览器效果如图所示:

行内式css

<p style="color: red;">p</p>

上述代码所展示的的css是行内式css，将css写在标签中，优先度比内嵌式高。
但是要谨慎使用，因为多个元素难以共享样式，不利于代码复用；且HTML和CSS代码混杂，结构样式没有分离，不利于程序员和搜索引擎阅读，不利于后期维护。上述代码的浏览器效果与内嵌式css的图上演示相同。

外联式css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外联式css</title>
    <link rel="stylesheet" href="./外联式css.css">
    <!-- 外联式css适合写在项目中 -->
</head>
<body>
    <p>p</p>
</body>
</html>

上述代码所展示的的css是外联式css，这种方式，css代码储存在css文件中，上述代码中link标签就是指定html文件寻找名为 ‘外联式css.css’ 的css文件以美化样式。href属性指定css文件路径。外联式css的css代码与style标签中的css代码写法相同。
外联式css适合写在项目中。

css选择器的使用

上面的代码中，除了行内式css中的css代码只控制它所在的标签，所有css代码中的选择器都是标签选择器，它们选中html文件中所有对应的标签。
下面来介绍一下css的基础选择器:

<head>
  <style>
    p {
      color: darkorange;
    }

    .color {
      color: skyblue;
    }

    .size {
      font-size: 30px;
      <!-- 改变字体大小 -->
    }

    #1 {
      color: black;
    }
  </style>
</head>

<!-- html正文内容 -->

<body>
  <p>p</p>
      
  <p class="color size">p</p>
      
  <div id="1">div</div>
</body>

首先就是标签选择器，以标签名创建，作用于所有对应的标签。
其次是类选择器（用的最多），创建时类名前+. 不能以数字和中划线开头，可以由数字，字母，下划线，中划线组成。一个html标签可以使用多个类选择器，两两空格隔开。
然后是id选择器（尽量不用），创建时id名+#. id不可重复，一个标签只能有一个id属性值，一个id选择器只能选中一个标签。
上述代码的浏览器效果如图所示:

最后是通配符选择器，较为特殊：通配符选择器作用于当前页面的所有标签，开发过程中常用于清除标签的默认margin和padding值。关于margin和padding的功能我将在后续的文章中介绍。代码演示:

  <style>
    * {
      color: red;
      margin: 0;
      padding: 0;
    }
  </style>
  
  <!-- html正文内容 -->
  
  <body>
    <p>p</p>
    <div>div</div>
  </body>

上述代码的浏览器效果如图所示:（为了图片美观易懂，我将p标签和div标签加上了外边距，外边距就是margin，其功能将在后续文章介绍）

css基础1

css引入方式

内嵌式css

行内式css

外联式css

css选择器的使用

感谢支持！