当前位置：网站首页 > 技术文章 > 正文

css入门

myzbx 2025-01-15 15:54 28 浏览

文章目录

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 可以看一下

CSS 教程

上一篇：css3新手入门(1)基础选择器
下一篇：web前端HTML教程——开发环境搭建下载和安装编辑器

css入门

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用