【HTML5+CSS3+JavaScript(ES6)】CSS篇

本文详细介绍了CSS的基础知识,包括标签与类选择器、ID选择器、样式类型(行内、内部、外部)、选择器优先级、属性(如背景、字体、文本等)、盒子模型、元素类型、浮动和定位方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

1 CSS介绍

2 div和span标签

3 选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

3.4 全局选择器

3.5 属性选择器

3.6 子字符串匹配选择器

3.7 伪类选择器

3.8 交集选择器和并集选择器

3.9 后代选择器

3.10 子代选择器

3.11 兄弟选择器

4 样式

4.1 行内样式

4.2 内部样式

4.3 外部样式

5 选择器优先级

5.1 从层叠来理解样式控制原理

5.2 非关系选择器优先级

5.3 关系选择器优先级

6 属性

6.1 背景颜色属性

6.2 字体属性

6.2.1 字体族属性

6.2.2 字体大小属性

6.2.3 字体风格属性

6.2.4 字体粗细属性

6.2.5 字体复合属性

6.3 文本属性

6.3.1 文本颜色属性

6.3.2 文本间距属性

6.3.3 文本划线属性

6.3.4 文本缩进属性

6.3.5 文本对齐属性

6.3.6 文本行高属性

6.4 其他属性

6.4.1 列表属性

6.4.2 边框属性

7 盒子模型

8 元素

8.1 块级元素

8.2 行内元素

8.3 行内块级元素

8.4 元素类型转换

9 浮动

10 定位

10.1 静态定位

10.2 相对定位

10.3 绝对定位

10.4 固定定位


1 CSS介绍

学习网站:

https://developer.mozilla.org/zh-CN/docs/Web

https://www.w3school.com.cn/

Cascading Style Sheets 层叠样式表

2 div和span标签

<div></div>和<span></span>是无语义化标签,只希望对标签进行样式控制和样式设置,不希望标签带有语义化。无语义化含义,可以将它们用于任何地方,都不会产生歧义,只受样式控制。

3 选择器

3.1 标签选择器

标签选择器也叫类型选择器、元素选择器

3.2 类选择器

3.3 ID选择器

多个标签用类class,单个的一般用id

3.4 全局选择器

3.5 属性选择器

3.6 子字符串匹配选择器

3.7 伪类选择器

普通伪类选择器:

行为伪类选择器:

3.8 交集选择器和并集选择器

3.9 后代选择器

3.10 子代选择器

3.11 兄弟选择器

邻接兄弟选择器:

通用兄弟选择器:

4 样式

4.1 行内样式

4.2 内部样式

4.3 外部样式

5 选择器优先级

5.1 从层叠来理解样式控制原理

5.2 非关系选择器优先级

加载文档流:

5.3 关系选择器优先级

关系选择器也叫组合选择器,将多个选择器以一种关系的方式组合在一起

6 属性

6.1 背景颜色属性

background-color

6.2 字体属性

6.2.1 字体族属性

font-family

6.2.2 字体大小属性

font-size

6.2.3 字体风格属性

font-style

6.2.4 字体粗细属性

font-weight

6.2.5 字体复合属性

font属性,支持同时设置多个字体属性,但顺序必须是:其他字体属性,字体大小,字体族

6.3 文本属性

6.3.1 文本颜色属性

6.3.2 文本间距属性

6.3.3 文本划线属性

6.3.4 文本缩进属性

6.3.5 文本对齐属性

6.3.6 文本行高属性

6.4 其他属性

6.4.1 列表属性

6.4.2 边框属性

7 盒子模型

8 元素

8.1 块级元素

8.2 行内元素

8.3 行内块级元素

8.4 元素类型转换

display属性

9 浮动

10 定位

定位:如何确定当前元素的位置

10.1 静态定位

position: static;

10.2 相对定位

position: relative;

10.3 绝对定位

position: absolute;

10.4 固定定位

position: fixed;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开五档的蒙奇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值