CSS 基础知识-01

CSS 基础知识

1.CSS概述
2. CSS引入方式
3. 选择器
4.文字控制属性
5. 复合选择器
6. CSS 特性
7.背景属性
8.显示模式
9.选择器
10.盒子模型

1.CSS概述

在这里插入图片描述

2. CSS引入方式

在这里插入图片描述

3. 选择器

在这里插入图片描述

4.文字控制属性

在这里插入图片描述

5. 复合选择器

在这里插入图片描述

6. CSS 特性

在这里插入图片描述

7.背景属性

在这里插入图片描述

8.显示模式

在这里插入图片描述

9.选择器

在这里插入图片描述

<!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>结构伪类选择器-基本使用</title>
  <style>
    /* 第一个 */
    /* li:first-child {
      background-color: green;
    } */

    /* 最后一个 */
    /* li:last-child {
      background-color: green;
    } */

    /* 任意个 */
    /* li:nth-child(3) {
      background-color: green;
    } */

    li:nth-child(1) {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
  </ul>
</body>
</html>
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

<!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>结构伪类选择器-公式用法</title>
  <style>
    /* 偶数 */
    /* li:nth-child(2n) {
      background-color: green;
    } */

    /* 奇数 */
    /* li:nth-child(2n+1) {
      background-color: green;
    } */

    /* 倍数 */
    /* li:nth-child(5n) {
      background-color: green;
    } */

    /* n 从0开始 */
    /* 第5个以后的标签 */
    /* li:nth-child(n+5) {
      background-color: green;
    } */

    /* 第5个以前的标签 */
    li:nth-child(-n+5) {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
    <li>li 9</li>
    <li>li 10</li>
  </ul>
</body>
</html>
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

10.盒子模型

在这里插入图片描述

相关阅读:
拉电流、灌电流和漏电流
Qt学习--QT Creator使用基本介绍
SpringBoot携带Jre绿色部署项目_免安装Jdk[Linux服务器]
如何成为前1%的程序员
【试题037】逻辑非！例题2
qt day 5
【算法刷题】—7.21带你了解矩阵，矩阵置零
Springboot整合ElasticSearch
JavaScript之事件高级（53rd）
JavaEE——No.1 线程安全问题

原文地址：https://blog.csdn.net/weixin_39451323/article/details/133879203