CSS概述（一）

h1 {  /* h1称为选择器 */
     color: red;
     font-size: 20px;
  } /* { 属性: 值 }: 声明，声明语句可以多行，以“;”分隔 */

注释：
     /* 这是一行单行注释 */

     /*
       这个注释分散
         在多个行上面
     */

以上代码是css的基本结构。

如何引入CSS？
有三种方法使用CSS。

• 行内样式：<h1 style="color: red;">行内样式</h1>
  该方法只能改变当前标签的样式，如果想要多个元素都使用同一种样式，每个元素都要添加一遍，这样不仅导致HTML代码冗长难以阅读，而且后期维护起来也非常艰难。所以不推荐使用

• style标签 内嵌方式：

/* 在同一个HTML文件中 */
h1 {
  color: red;
}
<h1>内嵌方式</h1>

该方法有效解决了第一个行内方式的带来的多元素不能重用同一个样式的问题，但是同时又暴露出了另一个问题：没有办法和其他页面共用，只能本页面使用。所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

• link引入 外链方式：
  <link rel="stylesheet" href="style.css">
  这是我们网页最常见的也是最推荐的引入 CSS 的方式，具备良好的可维护性。并且如果多个页面共用一个 CSS 文件的话，一般只在第一次加载时需要下载，以后切换页面时根本不需要加载该文件（浏览器一般有缓存）。

---

选择器

1. 基础选择器

• 元素选择器，选择所有的对应元素

p {
      color: red;
 }
body {
      background-color: #fff;
}

• ID选择器，ID是唯一的，取值全局唯一

    #green {
      color: green;
    }
    <div id="green">green</div>

• 类选择器，类选择器有两个的特点：重复使用和组合使用。
  重复使用是指可应用于多个元素；组合使用是指多个 class 可以组合用于同一个元素。

    .fs14 {
      font-size: 14px;
    }
    <div class="fs14">设置字体14px</div>

• 通用选择器，可以应用于所有元素

    * {
      margin: 0;
      padding: 0
    }

• 选择器分组

    p, div, #green, .fs14 {
      background: red;
    }

2. 关系选择器

• 后代选择器

    .block p {
      color: green;
    }

• 子元素选择器

    .block > p {
      color: red;
    }

• 后面兄弟选择器

    p ~ div {
      width: 100px;
    }

• 紧跟其后一个兄弟的选择器

    p + div {
      width: 100px;
    }

3. 伪类选择器
   格式：

    选择器:关键字 {

    }

• 鼠标悬浮上

    a:hover {
      color: blue;
    }

• 选择第一个

li:first-child {

 }

• 选择最后一个

    li:last-child {

    }

• 选择第x个

    li:nth-child(x) {

    }

• 选择第偶数个

li:nth-child(even) {}

• 选择第奇数个

li:nth-child(odd) {}

• 选择第2n+1个

li:nth-child(2n+1) {}

4. 伪元素选择器

• 第一个字

    ::first-letter {
      font-size: 30px;
    } 

• 第一行

    ::first-line {
      color: red;
    }

• 内容之前插入元素

    ::before {
      width: 10px;
      height: 10px;
      content: 'before';
    }

• 内容之后插入元素

    ::after {
      width: 10px;
      height: 10px;
      content: 'after';
    }