前端基础(九)_CSS的三大特征

news/2025/3/14 21:33:11/

CSS的三大特征

1、层叠性

1.样式冲突,遵循就近原则
2.样式不冲突,不会层叠,会叠加

1.1.样式冲突,遵循就近原则例子:

<!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>div {padding: 0;}.div2 {width: 50px;padding: 10px;}.div2 {width: 100px;border: 2px solid red;}</style>
</head><body><div class="div2">我是内容</div>
</body></html>

在这里插入图片描述

在这里插入图片描述
页面的最终展示效果
在这里插入图片描述
代码
样式冲突,遵循就近原则,所以width的值为100px;padding的值为10px

1.2.样式不冲突,不会层叠,会叠加例子

<!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>div {color: pink;}.div2 {padding: 10px;}.div2 {width: 100px;border: 2px solid red;}</style>
</head><body><div class="div2">我是内容</div>
</body></html>

在这里插入图片描述
样式不重叠,所有针对于这个元素的样式会叠加,都加到这个元素身上,如果其中有重叠的某个样式,也会按照样式冲突,遵循就近原则进行替换。

2、继承性–子元素会继承父元素的样式

1、a标签不会继承父元素的文字颜色,h1-h6标题标签不会继承父元素的字体大小
2、字体系列属性
font-family字体系列属性
font-size字号属性
font-weight文字加粗属性
Font-style 文字风格属性
Line-height 行高属性
3.文本系列属性
text-indent 文本缩进属性
text-align文本水平对齐方式属性
text-decoration文本装饰线属性
color文本颜色属性
4.列表中list-开头的属性

3、优先级

选择器的权值越大,优先级越高,权值相同时,谁在后面显示谁
基本选择器权值:
通配符选择器0、标签选择器1、类选择器10、id选择器100
复合选择器权值计算方式:组成复合选择器的所有单一算账去的权值累加

.box div{} 10+1 =11
#box .box p{} 100+10+1=111

1.行间样式的优先级高于id选择器的优先级;
2.继承央视的权值为0;子元素中设置的样式,会覆盖继承到的样式;
3.在样式中定义!Important,优先级高于行内样式;


http://www.ppmy.cn/news/3876.html

相关文章

读写锁的学习与实验

目录 目录 1&#xff0c;场景 2&#xff0c;接口 3&#xff0c;场景模拟 1&#xff0c;场景 有一种场景&#xff0c;读者多&#xff0c;写者少&#xff0c;绝大多数的情况下我们都是在进行读取而不修改&#xff0c;只有少数的情况下我们才会修改。 场景一&#xff1a;比如…

【水果识别】苹果质量检测及分级系统(带面板)【含GUI Matlab源码 1613期】

⛄一、简介 1 案例背景 目前&#xff0c;苹果的分级主要靠人工完成&#xff0c;该方法存在主观误差大、效率低和苹果易造成二次损伤等问题。随着机器视觉技术的快速发展&#xff0c; 图像处理在水果质量检测方面也取得了深入进展。 试验拟通过采集视野内苹果图&#xff0c; 综…

基于java+springmvc+mybatis+vue+mysql的学生竞赛模拟系统

项目介绍 本系统采用java语言开发&#xff0c;后端采用springboot框架&#xff0c;前端采用vue技术&#xff0c;数据库采用mysql进行数据存储。 前台&#xff1a; 首页、公交信息、论坛交流、试卷、校园资讯、个人中心、后台管理 后台&#xff1a; 首页、个人中心、用户管理…

【C语言进阶】不会处理字符串?一万三千五百字包会保姆级教程

目录 &#x1f618;前言&#x1f618;&#xff1a; 一、字符串处理函数介绍&#x1f92f;&#xff1a; 1.strlen 函数&#x1f94e;&#xff1a; 2.strcpy 函数⚾&#xff1a; 3.strcat 函数&#x1f3c0;&#xff1a; 4.strcmp 函数&#x1f3c8;&#xff1a; 5.strncpy 函数…

知识付费系统源码,可直接打包成app、H5、小程序

知识付费&#xff0c;在近几年来&#xff0c;越来越受到大家的关注。知识付费系统源码是将知识通过互联网渠道变现的方式。以知识为载体&#xff0c;通过付费获得在线知识以及在线学习所带来的收益。知识付费平台主要以分享知识内容&#xff0c;内容分为直播、录播、图文等形式…

JavaScript刷LeetCode拿offer-分治

前言 今天没啥前言&#xff0c;分治很难&#xff0c;主要难在如何拆分后比较好治理合并&#xff0c;这比二分这些只要拆了就结束要难上一个 level&#xff0c;所以这里属于出入 分治 这种想法的思维&#xff0c;后续会尽可能的锻炼这样的做法&#xff1b;做一道分治&#xff0…

【DALI笔记】Python调用C++扩展库联合调试的学习笔记

我们目前计划了三种调试方式&#xff1a; VisualStudio&#xff1a; VisualStudio可以支持WSL2系统&#xff1b;VSCode联合调试&#xff1a;使用插件 Python C Debugger&#xff1b;TotalView&#xff1a;TotalView支持Python&C联合调试&#xff1b; 关于VSCode使用GDB进行…

NoSQL进阶实战 2,NoSQL数据存储模式

目录一、NoSQL的数据存储模式二、键值数据存储结构1、什么是键值数据库2、键值数据库的优缺点三、文档数据存储模式四、列族存储实现1、列族数据库存储结构基本要素2、列族的存储特点五、图数据存储模式1、图数据库存储结构基本要素2、处理各种图结构的数据3、应用领域广泛一、…