12月16日学习笔记

CSS 基本语法

<style>
  h1 {
    color: red;
  }
</style>

h1 选择器
{...} 声明块，由一个或多个分号隔开的声明构成
h1+{...} = 规则

CSS 样式引入方式

任何元素如果想引入到 HTML 文档中，必须要使用一个适当的标签，CSS 也不例外

1.内部样式：仅对当前文档的元素有效，使用的是 style 标签来定义的 2.外部样式/公共样式：适用于所有引入了 CSS 样式表的 HTML 文档，使用的是 link 标签 3.行内样式：仅适用于当前页面中的指定的，特定的元素。使用的是 style 属性

如下代码 :

<html>
  <head>
    <meta charset="UTF-8" />
    <title>引入CSS样式的几种方式</title>
    <!--使用link标签外部引入-->
    <link rel="stylesheet" href="style.css" />
    <style>
      /* 内部样式 */
      h1 {
        color: blue;
      }
      /* 外部引入  */
      @import url(style.css);
    </style>
  </head>
  <body>
    <h1>引入CSS样式的几种方式</h1>
    <!--style属性 -->
    <h1 style="color:red">style属性样式</h1>
  </body>
</html>

样式表的模块化

1.将公共样式部分进行分离，并创建一些独立的样式表
2.使用@import 指令将这些独立的公共样式表引入到指定的 CSS 文档或标签中

css

@import url(header.css);
@import url(footer.css);
main {
  min-width: 500px;
  background-color: darkgrey;
}

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>
      @import url(header.css);
      @import url(footer.css);
      main {
        min-width: 500px;
        background-color: darkgrey;
      }
      /*对于一个网站来说，许多页面的页眉和页脚是相同的，可以考虑将它们的样式剥离出来，实现模块化编程
        */
    </style>
    -->
  </head>
  <body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页尾</footer>
  </body>
</html>

选择器

1.标签选择器

返回的是一组元素

li {
  background-color: violet;
  color: darkred;
}

2.类选择器

返回一组，选取一类具有共同特征的

.on {
  background-color: wheat;
}

3.ID 选择器

浏览器不检查 ID 的唯一性，必须由开发者自行保证

#foo {
  background-color: blue;
}

4.上下文选择器

因为 HTML 是一个结构化的文档：第一个元素在文档中有确切的位置,所以根据元素的上下文环境来选择是完全没有问题的

1.后代选择器 :所有层级

ul li {
  background-color: red;
}

2.子元素选择器 :仅父子层级

body > ul > li {
  background-color: blue;
}

3.同级相邻选择器：仅选择与之相邻的第一个兄弟元素

.start + li {
  background-color: tomato;
}

4.同级所有选择器：选中与之相邻的所有兄弟元素

.start1 ~ li {
  background-color: rgb(255, 230, 0);
}

HTML

<html>
  <head>
    <meta charset="UTF-8" />
    <title>上下文选择器</title>
    <style>
      ul li {
        background-color: red;
      }
      body > ul > li {
        background-color: blue;
      }
      .start + li {
        background-color: tomato;
      }
      .start1 ~ li {
        background-color: rgb(255, 230, 0);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>上下文选择器</li>
      <li>上下文选择器</li>
      <li class="start">上下文选择器</li>
      <li>上下文选择器</li>
      <li>
        上下文选择器
        <ul>
          <li>adfasdf</li>
          <li>adfasdf</li>
          <li>adfasdf</li>
          <li>adfasdf</li>
          <li>adfasdf</li>
        </ul>
      </li>
      <li>上下文选择器</li>
      <li class="start1">上下文选择器</li>
      <li>上下文选择器</li>
      <li>上下文选择器</li>
      <li>上下文选择器</li>
    </ul>
  </body>
</html>

重点
1.空格所有层级
2.>:父子级
3.+：相邻兄弟
4.~：所有相邻兄弟

5.伪类选择器

结构伪类

1.匹配任意位置的元素：nth-of-type(an+b);an+b: an 起点，b 是偏移量，n = (0,1,2,3,4….)

2.反向获取任意位置的元素：nth-last-of-type(an+b)

3.只选择索引为偶数的子元素：nth-of-type(2n)，nth-of-type(even);只选择索引为奇数的子元素：nth-of-type(2n-1)，nth-of-type(2n+1),nth-of-type(odd)

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>
      /* 选中第三个li元素
      .start li:nth-of-type(0n + 3) {
        background-color: salmon;
      }
      */
      /* 因为0*0等于0所以 0n就没有意义可以简化为： */
      .start li:nth-of-type(3) {
        background-color: salmon;
      }
      /*全部选中
      如果直接全选这样就没有意义，可直接使用标签选择器。但是带上偏移量就不同了
      .start1 li:nth-of-type(1n) {
        background-color: sandybrown;
      }
      */
      /*从第4个开始全部选中
      .start1 li:nth-of-type(1n + 4) {
        background-color: seagreen;
      }
      1*1还是等于1可简化如下写法：
      */
      .start1 li:nth-of-type(n + 4) {
        background-color: seagreen;
      }
      /* 选中最后3个
      .start1 li:nth-of-type(n + 8) {
        background-color: skyblue;
      }
      考虑到有可能元素过多，可以使用反向获取 ：
        */
      .start1 li:nth-last-of-type(-n + 3) {
        background-color: rgb(255, 0, 0);
      }
      /*选中倒数第2个*/
      .start1 li:nth-last-of-type(2) {
        background-color: rgb(0, 174, 255);
      }
      /*选中所有索引为偶数的元素 */
      /*
      .start2 li:nth-of-type(2n) {
        background-color: yellowgreen;
      }
      */
      /*选中所有索引为偶数的元素 */
      /*
      .start2 li:nth-of-type(2n + 1) {
        background-color: rgb(223, 51, 151);
      }
      */
      /*这里还可以用even odd */
      .start2 li:nth-of-type(even) {
        /*偶数*/
        background-color: yellowgreen;
      }
      .start2 li:nth-of-type(odd) {
        /*奇数*/
        background-color: rgb(223, 51, 151);
      }
    </style>
  </head>
  <body>
    <ul class="start1">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
    </ul>
    <ul class="start2">
      <li>item101</li>
      <li>item102</li>
      <li>item103</li>
      <li>item104</li>
      <li>item105</li>
      <li>item106</li>
      <li>item107</li>
      <li>item108</li>
      <li>item109</li>
      <li>item1010</li>
    </ul>
  </body>
</html>

语法糖

选择第一个子元素
first-of-type

ul li:first-of-type {
  background-color: blue;
}

选中最后一个子元素
last-of-type

ul li:last-of-type {
  background-color: red;
}

如果只想匹配父元素中唯一子元素，使用 only-of-type 可快速实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>only-of-type</title>
    <style>
      /*选中最后一个ul里的所有子元素 */
      ul:last-of-type li {
        background-color: yellowgreen;
      }
      /*也可以用only-of-type */
      ul li:only-of-type {
        background-color: rgb(205, 50, 115);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>item11</li>
      <li>item12</li>
      <li>item13</li>
      <li>item14</li>
      <li>item15</li>
    </ul>
    <ul>
      <li>item21</li>
      <li>item22</li>
      <li>item23</li>
      <li>item24</li>
      <li>item25</li>
    </ul>
  </body>
</html>