CSS高级学习笔记

学习时间：2023年7月16日

学习来源：黑马

1 vertical-align

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

1
vertical-align : baseline | top | middle | bottom

image-20230716164705499

四条线的划分：

image-20230716165046487

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

image-20230716165439186

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用vertical-align实现图片文字垂直居中对齐</title>
    <style>
      img {
        /* vertical-align: bottom; */
        /* 让图片和文字垂直居中 */
        vertical-align: middle;
        /* vertical-align: top; */
      }
      textarea {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="images/ldh.jpg" alt="">  pink老师是刘德华
    </div>
    <div>
      <textarea name="" id="" cols="30" rows="10"></textarea> 请您留言
    </div>
  </body>
</html>

image-20230716165351334

2 HTML5新特性

2.1 新增的语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

新增的语义标签：

  • <header>：头部标签
  • <nav>：导航标签
  • <article>：内容标签
  • <section>：定义文档某个区域
  • <aside>：侧边栏标签
  • <footer>：尾部标签

image-20230716170002806

注意：

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在 IE9 中，需要把这些元素转换为块级元素

2.2 新增的多媒体标签

略

2.3 新增的 input 类型

略

3 CSS3的新特性

3.1 新增选择器

3.1.1 属性选择器

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。

选择符 简介
E[att] 选择具有att属性的E元素
E[att=”val”] 选择具有att属性且属性值等于val的E元素
E[att^=”val”] 匹配具有att属性、且值以val开头的E元素
E[att$=”val”] 匹配具有att属性、且值以val结尾的E元素
E[att*=”val”] 匹配具有att属性、且值中含有val的E元素

类选择器、属性选择器、伪类选择器，权重为 10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增属性选择器</title>
    <style>
      /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
      /* input[value] {
      color:pink;
      } */
      /* 只选择 type =text 文本框的input 选取出来 */
      input[type=text] {
        color: pink;
      }
      /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
      div[class^=icon] {
        color: red;
      }
      section[class$=data] {
        color: blue;
      }
      div.icon1 {
        color: skyblue;
      }
      /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
  </head>
  <body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
<input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>
  </body>
</html>

image-20230716170759817

3.1.2 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素。

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

示例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增结构伪类选择器</title>
    <style>
      /* 1. 选择ul里面的第一个孩子 小li */
      ul li:first-child {
        background-color: pink;
      }
      /* 2. 选择ul里面的最后一个孩子 小li */
      ul li:last-child {
        background-color: pink;
      }
      /* 3. 选择ul里面的第2个孩子 小li */
      ul li:nth-child(2) {
        background-color: skyblue;
      }
      ul li:nth-child(6) {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>
  </body>
</html>

image-20230716170830644

示例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增结构伪类选择器-nth-child</title>
    <style>
      /* 1.把所有的偶数 even的孩子选出来 */
      ul li:nth-child(even) {
        background-color: #ccc;
      }

      /* 2.把所有的奇数 odd的孩子选出来 */
      ul li:nth-child(odd) {
        background-color: gray;
      }
      /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
      /* ol li:nth-child(n) {
      background-color: pink;
      } */
      /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
      /* ol li:nth-child(2n) {
      background-color: pink;
      }
      ol li:nth-child(2n+1) {
      background-color: skyblue;
      } */
      /* ol li:nth-child(n+3) {
      background-color: pink;
      } */
      ol li:nth-child(-n+3) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>
    <ol>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ol>
  </body>
</html>

image-20230716170857228

示例3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增选择器nth-type-of</title>
    <style>
      ul li:first-of-type {
        background-color: pink;
      }
      ul li:last-of-type {
        background-color: pink;
      }
      ul li:nth-of-type(even) {
        background-color: skyblue;
      }
      /* nth-child 会把所有的盒子都排列序号 */
      /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */

      section div:nth-child(1) {
        background-color: red;
      }
      /* nth-of-type 会把指定元素的盒子排列序号 */
      /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
      section div:nth-of-type(1) {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>
  </body>
</html>

image-20230716170925117

3.1.3 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

注意：

  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法： element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1

示例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器before和after</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      /* div::before 权重是2 */
      div::before {
        /* 这个content是必须要写的 */
        content: '我';
      }
      div::after {
        content: '小猪佩奇';
      }
    </style>
  </head>
  <body>
    <div>
      是
    </div>
  </body>
</html>

image-20230716171308853

示例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
    <style>
      .tudou {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 30px auto;
      }

      .tudou img {
        width: 100%;
        height: 100%;
      }

      .tudou::before {
        content: '';
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
      }

      /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
      .tudou:hover::before {
        /* 而是显示元素 */
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="tudou">
      <img src="images/tudou.jpg" alt="">
    </div>
  </body>
</html>

3.2 过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

1
transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。

2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s

3. 运动曲线： 默认是 ease （可以省略）

4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

我们现在经常和 :hover 一起 搭配使用。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 过渡效果</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
        /* transition: width .5s ease 0s, height .5s ease 1s; */
        /* 如果想要写多个属性，利用逗号进行分割 */
        /* transition: width .5s, height .5s; */
        /* 如果想要多个属性都变化，属性写all就可以了 */
        /* transition: height .5s ease 1s; */
        /* 谁做过渡，给谁加 */
        transition: all 0.5s;
      }
      div:hover {
        width: 400px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>