CSS（day01）

最新推荐文章于 2023-10-15 13:34:11 发布

September_MOTH

最新推荐文章于 2023-10-15 13:34:11 发布

阅读量44

点赞数

分类专栏： web前端入门

本文链接：https://blog.csdn.net/weixin_51341201/article/details/119739905

版权

web前端入门专栏收录该内容

38 篇文章 2 订阅

订阅专栏

CSS 概述

什么是 css

css: cascading style sheets （层叠样式表 | 级联样式表）简称样式表
css 作用

设置 html 网页中元素的样式
HTML 于 CSS 的关系

HTML: 负责网页的搭建, 内容的展示
CSS: 负责网页的修饰
对于元素样式的修饰建议使用 css 而不使用 html 的属性
html的属性, 代码不能能重用, 没有维护性

CSS 的语法规范

使用 css 的方式
① 行内样式（内联样式）

将 css 的样式写在元素的 style 属性中

color: white; 字体颜色

background-color: gary; 背景颜色

font-size: 30px; 字号大小

语法:

<any style="样式声明"></any> 样式声明由样式属性和样式值组成, 样式属性: 值;

内联样式不能重用

内联样式的优先级是最高的

在项目中基本不用, 只有在学习和测试中使用

② 内部样式

在 head 标签内, 使用 < style > 定义内部样式

语法:
```
<head>
   <style>
      选择器 { 属性: 属性值; }
   </style>
</head>
```
选择器就是页面能够使用当前样式条件 div{} p{} img{} span{}

总结: 内部样式只能在本页面使用

内部样式在项目中用的少, 主要用户学习和测试

③ 外部样式

单独创建一个 css 文件, 在 html 文件中的 head 里使用 link 标签引入 css 文件 rel 属性必须写, 不写没有效果

项目中大量的使用外部样式, 学习中用的少
css 样式的特性
① 继承性

大部分的CSS效果是可以直接被子元素继承的
必须是有层级嵌套关系的元素, 才能继承。孩子继承父亲
a 标签的字体颜色是不继承的

② 层叠性

可以为同一个元素定义多个样式
如果样式属性不冲突时可以同时作用到这个元素上

③ 优先级

样式属性冲突时, 根据优先级去应用样式

默认优先级, 由高到低

1 内联样式
2 内部样式和外部样式, 使用就近原则
3 浏览器默认样式

解释型语言：代码逐行往下依次运行, 后执行会覆盖之前执行的

④ 调整优先级

!important 规则
选择器 { 属性:值 !important; } 写在值和分号之间, 前面要有空格
意义, 我这个值是最重要的, 其它的值不要覆盖
如果有多个 !important; 那么还是遵循就近原则

基础选择器（重点）

选择器的作用

规范了页面中哪些元素能够使用定义好的样式
选择器就是一个定义好的条件, 符合这个条件的元素, 可以应用这个样式

选择器详解
① 通用选择器（通配符选择器）

* { 样式声明 }
* { margin: 0; padding: 0; } 所有元素内外边距清 0
如果取值为 0, 可以省略单位

② 元素选择器（标签选择器）

元素 { 样式声明 } 页面中所有对应元素, 都使用这个样式, 设置页面中某种元素的默认样式
特殊用法: body { margin: 0; padding: 0; } body 及 body 内元素, 都会内外边距清 0

③ ID选择器, 专属定制

只对当前页面, 一个元素生效
<any id="id值"></any>
#id 值 {}
总结: 一般 id 选择器在项目中很少单独使用, 通常会作为子代选择器和后代选择器的一部分

④ 类选择器

定义页面上某个或某类元素的样式
是一个公共的样式, 谁想使用, 就用 class 调用一下

类名的声明

声明类选择器 .类名 { 样式声明 }

类名的特点

1、必须有点
2、类名不能以数字开头
3、只能使用 -_ 两种符号

引用类名

<any class="类名">

特殊用法

1、多类选择器（一个元素引入多个选择器） <any class="类1 类2..">

2、分类选择器（更精准的确定这个样式元素, 增加了选择器的权值）
① .类名1.类名2 { 样式声明 } 匹配同时引用类名1 和类名2 的元素
② 元素名.类名 匹配指定元素引用了某个类名的元素

⑤ 群组选择器（分组选择器, 选择器之间使用逗号连接）

将多个选择器放在一起, 定义公共样式
选择器1, 选择器2, .. { 样式声明 }

⑥ 后代选择器

通过元素的后代关系匹配元素

语法

选择器1 选择器2 ... { 样式声明 }

⑦ 子代选择器

子代关系: 就是一级嵌套关系

语法:

选择器 > 选择器 >... { 样式声明 } 子代选择器和后代选择器可以混写

⑧ 伪类选择器（匹配元素不同状态的选择器）

伪类选择器, 都是以冒号开头

1、匹配为访问的链接 选择器:link

2、匹配访问后的链接 选择器:visited

3、匹配鼠标悬停时的状态 选择器:hover

4、元素激活状态, 鼠标按住不松开 选择器:active

以上四个伪类同时作用在一个元素上时需要有严格的书写顺序 l o v e & h a t e

link visited haver active

:focus 匹配获取焦点时的状态

⑨ 选择器的权值问题

选择器默认自带权值, 权值越高优先级越高

权值

属性值
!important > 1000
内联样式 = 1000
ID 选择器 = 100
类与伪类 = 10
元素选择器 = 1
通配符 = 0
继承的样式无权值

当一个选择器有多个选择器组成时, 需要将所有的选择器进行相加, 然后比较, 权值最大的优先显示

权值相同, 就近原则

群组选择器的权值, 单独计算, 不能相加

样式后边添加 !important, 直接获取最高权重

内联样式不能添加 !important

选择器权值的计算, 不会超过自己最大数量级 (100个元素选择器不会大于 10)

属性	值
!important	> 1000
内联样式	= 1000
ID 选择器	= 100
类与伪类	= 10
元素选择器	= 1
通配符	= 0
继承的样式	无权值

September_MOTH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（day01）

CSS 概述什么是 csscss: cascading style sheets （层叠样式表 | 级联样式表）简称样式表css 作用设置 html 网页中元素的样式HTML 于 CSS 的关系HTML: 负责网页的搭建, 内容的展示CSS: 负责网页的修饰对于元素样式的修饰建议使用 css 而不使用 html 的属性html的属性, 代码不能能重用, 没有维护性CSS 的语法规范使用 css 的方式① 行内样式（内联样式）将 css 的样式写在
复制链接

扫一扫