在HTML中嵌入css的三种方式
1：第一种：直接在标签的内部写如style属性：
<h1 style="color: aqua">我是一个大标题</h1> 2：写在head标签内部的style标签里面：

<!--    内部样式  -->
    <style >
        h2{
            color: brown;
        }
    </style>

3：写在单独的css文件里面，然后导入html中，如下：

<!--    第三中方式:外部样式-->
    <link href="css/style.css" rel="stylesheet" />

其实还有一种方式是css2.1新加入的方式，如下：

<!--    在css2.1中还引入了一种新的方式是下面这样-->
    <style>
        @import "css/style1.css";
    </style>

整体的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式  -->
    <style >
        h2{
            color: brown;
        }
    </style>
<!--    第三中方式:外部样式-->
    <link href="css/style.css" rel="stylesheet" />
<!--    在css2.1中还引入了一种新的方式是下面这样-->
    <style>
        @import "css/style1.css";
    </style>
</head>
<body>
<!-- 行内样式:   第一种导入css的方式直接在标签内部写-->
  <h1 style="color: aqua">我是一个大标题</h1>
<!--第二种方式-->
  <h2 >我是一个小标题</h2>
  <h3 >我是一个小小标题</h3>
  <h4>我是一个小小小标题</h4>
</body>
</html>

假如我们在不同的导入css的代码中控制字体不同的颜色，那么就会遵循就近原则，跟那个方式的代码比较近就显示哪个的控制。

三种选择器
标签选择器
类选择器
id选择器
优先级 :id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        h1{
            color: aqua;
        }

        .text1{
            color: #b90707;
            size: A3;
        }

        #text2{
            color: #b90707;
        }
    </style>
</head>
<body>
    <h1>标签选择器</h1>
    <input type="text" class="text1" value="类选择器" readonly>
    <textarea id="text2">id选择器</textarea>
</body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器，选择所有的后代*/
        /*body p{
            color: #b90707;
        }*/

        /*子选择器 只选中下一级的。*/
        /*body >p{
            color: #b90707;
        }*/

        /*相邻兄弟选择器*/
        /*只有一个相邻的被选中,对下不对上.而且必须是跟它下面的哪个标签相邻才可以,
        不相邻不行,比如我下面这样写就不行*/
        /*.active+p{
            color: aqua;
        }*/
        /*通用选择器,同级的所有选择的标签*/
        .active~p{
            color: #b90707;
        }
    </style>
</head>
<body>
  <p>p1</p>
  <p class="active">p2</p>
  <textarea>123456</textarea>
  <p>p3</p>

  <ul>
      <li>
          <p>p4</p>
      </li>
      <li>
          <p>p5</p>
      </li>
      <li>
          <p>p6</p>
      </li>
  </ul>
  <p>p7</p>
  <p>p8</p>
  <textarea>123456</textarea>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*选中ul中的第一个li*/
        /*ul li:first-child{
            color: #b90707;
        }*/

        /*选中ul中的最后一个li*/
        /*ul li:last-child{
            color: #1fb907;
        }*/

        /*选中父标签的第一个子标签,而且这个标签必须是p才能选中*/
        /*p:nth-child(1){
            color: aqua;
        }*/

        /*选中所有p标签的父标签的第二个是标签是p的子标签*/
        p:nth-of-type(2){
            color: aqua;
        }

    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <p>p4</p>
        <p>p5</p>
        <p>p6</p>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*属性选择器*/

    /*选中属性中包含id的标签*/
    /*p[id]{
        background: #b90707;
    }*/

    /*选中id等于i的标签*/
    /*p[id="i"]{
        background: #b90707;
    }*/


    /*选中id以i开始的标签*/
    /*p[id^="i"]{
        background: #b90707;
    }*/

    /*选中title以pdf结尾的标签*/
    p[title$="pdf"]{
        background: #b90707;
    }
</style>
<body>
    <p id="i">1</p>
    <p class="23">2</p>
    <p title="26.pdf">3</p>
    <p title="27.pdf">4</p>
    <p title="47.pdf">5</p>
    <p id="23">6</p>
    <p id="2i">7</p>
    <p id="i00">8</p>
</body>
</html>