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>

<!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>