CSS入门指南：零基础学习CSS

文章目录

CSS入门

一、CSS概述

1、概述

2、CSS的作用

3、初体验

4、CSS基础语法

4、HTML引入CSS

二、选择器 ⭐️⭐️⭐️

1、基本选择器

2、扩展选择器

3、超链接选择器

三、样式权重问题

1、权重计算规则

2、权重示例

3、具体示例

4、 !important

四、CSS常用样式

1、字体和文本属性

2、背景属性

3、显示属性

4、浮动属性

五、盒子模型

CSS入门

一、CSS概述

1、概述

CSS（Cascading Style Sheet）层叠样式表，用于美化页面

层叠样式：对同一个标签，添加多个不同的样式，所有样式会叠加在一起展示出效果。

2、CSS的作用

HTML 标签也有属性，为什么还要 CSS ？

CSS 可以给任意标签添加样式（可以实现 HTML 做不到的效果）

解耦（让 HTML 专注于网页结构搭建，CSS 专注于样式效果）

CSS 实现了样式与内容的分离，提高了显示效果和样式的复用性。

3、初体验

4、CSS基础语法

CSS 基本语法：

样式名 和 样式值 之间 以 冒号 分隔。

一个样式名 可以跟 多个样式值，以 空格 分隔。

多个样式之间，以 分号 分割。

4、HTML引入CSS

CSS有自己单独的语法，但是必须要引入到HTML中才能使用。一般有以下三种方式：

优先级：

行内 > 内部 = 外部 （优先级低的样式会被优先级高的覆盖，一样的优先级看先后）

浏览器加载网页从上至下加载，属性相同会覆盖（后面的覆盖前面的），不相同会叠加。

位置：

style标签和link标签可以放在html中任意位置，一般放head标签内。

二、选择器 ⭐️⭐️⭐️

选择器 selector：

格式：选择器 {css样式}

作用：通过选择器，选中指定的标签，为选中的标签添加css样式

1、基本选择器

包括 标签选择器、id选择器、class选择器

2、扩展选择器

扩展选择器：基本选择器延伸出来的选择器，在某些场景下，用基本选择器太麻烦。

3、超链接选择器

三、样式权重问题

当多个规则适用于同一个元素时，CSS 会根据权重来确定使用哪个样式。权重较高的样式会覆盖权重较低的样式。

权重由选择器的类型和数量决定。

1、权重计算规则

CSS 的权重可以分为四个部分，通常用四个数字表示（a, b, c, d）：

a：行内样式的数量（例如：style="..."）。行内样式的权重最高。

b：ID 选择器的数量（如 #id）。

c：类选择器、伪类选择器、属性选择器的数量（如 .class、:hover、[type="text"]）。

d：元素选择器、伪元素选择器的数量（如 div、p、::before）。

2、权重示例

3、具体示例

在这个例子中，div 的背景颜色将被黄色覆盖，因为 行内样式 的权重最高。

4、 !important

使用 !important 可以强制某个规则获得更高的优先级，但应谨慎使用，因为这会影响代码的可维护性。

四、CSS常用样式

1、字体和文本属性

2、背景属性

3、显示属性

4、浮动属性

打破常规，让div也能变小（实际大小跟 宽和高）

五、盒子模型

在 html 中，所有的标签都可以看成一个盒子。

在浏览器 F12 可以看一下