当前位置：首页 > news >正文

【前端学习】CSS三大特性

news 文章来源：https://blog.csdn.net/crashzzzllq/article/details/140696088 2025/5/11 2:16:19

CSS三大特性

CSS的三大特性是为了化简代码、定位问题并且解决问题

继承性

继承性特点：

子级默认继承父级的文字控制属性。
注意：如果标签自己有样式则生效自己的样式，不继承。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-继承性</title><style>body {font-size: 30px;color: aquamarine;font-weight: 700;}</style>
</head><body><div>div标签</div><p>p标签</p><span>span标签</span><a href="#">a标签</a>
</body>
</html>

其中div、p、span、a标签都会继承父级body标签所定义的属性。
但由于a标签有自己的颜色属性，则此处的a标签不会继承body的color属性，仍然为默认的蓝色。
在这里插入图片描述

层叠性

层叠性特点：

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-层叠性</title><style>div {color: red;font-weight: 700;}div {color: green;font-size: 30px;}</style>
</head><body><div>div 标签</div>
</body></html>

两个相同的div，后面div的color属性相同，会覆盖前面的，只生效第二个。
而第一个的font-weight和第二个font-size属性不同，则都生效。
在这里插入图片描述

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选中标签的范围越大，优先级越低)
注意：!important可以提高权重，让优先级到最高，但谨慎使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-优先级</title><style>* {color: rebeccapurple !important;}div {color: red;}.box {color: aquamarine;}#test {color: chocolate;}</style>
</head><body><div class="box" id="test" style="color: cornflowerblue;">div 标签</div>
</body>
</html>

此时虽然通配符优先级最低，但由于后面有提高权重的!important，让权重提到最高。
在这里插入图片描述

【前端学习】CSS三大特性

CSS三大特性 CSS的三大特性是为了化简代码、定位问题并且解决问题继承性继承性特点： 子级默认继承父级的文字控制属性。注意：如果标签自己有样式则生效自己的样式，不继承。 <!DOCTYPE html> <html lang"en"><…...

编程日记 2024/7/25 23:14:06

了解网络是如何运作

“Web 的工作原理”提供了一个简化的视图，用于了解在计算机或手机上的 Web 浏览器中查看网页时发生的情况。这个理论对于短期内编写 Web 代码来说并不是必需的，但不久之后，你就会真正开始从理解后台发生的事情中受益。客户端和服务器连接到 Internet 的计算机称为客户端和…...

编程日记 2024/7/25 23:13:05

传输层协议——TCP

TCP协议 TCP全称为“传输控制协议”，要对数据的传输进行一个详细的控制。特点面向连接的可靠性字节流 TCP的协议段格式源/目的端口：表示数据从哪个进程来，到哪个进程4位首部长度：表示该TCP头部有多少字节（注意它…...

编程日记 2024/7/25 23:10:03

C++相关概念和易错语法（23）（set、仿函数的应用、pair、multiset）

1.set和map存在的意义 （1）set和map的底层都是二叉搜索树，可以达到快速排序（当我们按照迭代器的顺序来遍历set和map，其实是按照中序来遍历的，是排过序的）、去重、搜索的目的。 （2&a…...

编程日记 2024/7/25 23:09:02

netty入门-3 EventLoop和EventLoopGroup，简单的服务器实现

文章目录 EventLoop和EventLoopGroup服务器与客户端基本使用增加非NIO工人NioEventLoop 处理普通任务与定时任务结语 EventLoop和EventLoopGroup 二者大概是什么这里不再赘述，前一篇已简述过。不理解也没关系。下面会简单使用，看了就能明白是什么这…...

编程日记 2024/7/25 23:08:01

通信原理-思科实验五：家庭终端以太网接入Internet实验

实验五家庭终端以太网接入Internet实验一实验内容二实验目的三实验原理四实验步骤 1.按照上图选择对应的设备，并连接起来为路由器R0两个端口配置IP 为路由器R1端口配置IP 为路由器设备增加RIP，配置接入互联网的IP的动态路由项 5.为路由器R1配置静…...

编程日记 2024/7/25 23:07:00

【Vue】vue概述

1、简介 Vue.js（简称Vue）是一款用于构建用户界面的渐进式JavaScript框架。由前Google高级软件工程师尤雨溪（Evan You）于2014年创建，是一个独立且社区驱动的开源项目。Vue.js基于标准的HTML、CSS和JavaScript&#xff…...

编程日记 2024/7/25 23:05:59

Docker use experience

#docker command docker load -i <镜像文件.tar> docker run -it -d --name 容器名 -p 宿主机端口:容器端口 -v 宿主机文件存储位置:容器内文位置镜像名:Tag /bin/bash docker commit -m"提交的描述信息" -a"作者" 容器ID 要…...

编程日记 2024/7/25 23:02:55

Android平台RTSP|RTMP直播播放器技术接入说明

技术背景大牛直播SDK自2015年发布RTSP、RTMP直播播放模块，迭代从未停止，SmartPlayer功能强大、性能强劲、高稳定、超低延迟、超低资源占用。无需赘述，全自研内核，行业内一致认可的跨平台RTSP、RTMP直播播放器。本文以Android平台…...

编程日记 2024/7/25 22:56:50

数据结构——栈（顺序结构）

一、栈的定义栈是一种数据结构，它是一种只能在一端进行插入和删除操作的特殊线性表。这一端被称为栈顶，另一端被称为栈底。栈按照后进先出（LIFO）的原则进行操作（类似与手枪装弹后射出子弹的顺序）。在计算…...

编程日记 2024/7/25 22:55:49

速盾：cdn能防御ddos吗？

CDN（内容分发网络）是一种广泛应用于互联网中的技术，它通过将内容分发到全球各地的服务器上，以提高用户在访问网站时的加载速度和稳定性。然而，CDN是否能够有效防御DDoS（分布式拒绝服务）攻击是一…...

编程日记 2024/7/25 22:53:47

分享 2 个 .NET EF 6 只更新某些字段的方法

前言 EF 更新数据时，通常情况下，是更新全部字段的，但实际业务中，更新全部字段的情况其实很少，一般都是修改其中某些字段，所以为了实现这个目标，很多程序员通常会这样作： 先从数据库…...

编程日记 2024/7/25 22:52:47

vs code解决报错（c/c++的配置环境远端机器为Linux ubuntu）

参考链接：https://blog.csdn.net/fightfightfight/article/details/82857397 https://blog.csdn.net/m0_38055352/article/details/105375367 可以按照步骤确定那一步不对，如果一个可以就不用往下看了目录一、检查一下文件扩展名二、安装扩展包并…...

编程日记 2024/7/25 22:51:46

08 字符串和字节串

使用单引号、双引号、三单引号、三双引号作为定界符（delimiter）来表示字符串，并且不同的定界符之间可以相互嵌套。很多内置函数和标准库对象也都支持对字符串的操作。 x hello world y Python is a great language z Tom said, "Le…...

编程日记 2024/7/25 22:46:41

vue使用mavonEditor(流程图、时序图、甘特图实现)

mavonEditor 安装mavonEditor $ npm install mavon-editor --save使用 // 全局注册import Vue from vueimport mavonEditor from mavon-editorimport mavon-editor/dist/css/index.css// useVue.use(mavonEditor)new Vue({el: #main,data() {return { value: }}})//局部使用…...

编程日记 2024/7/25 22:44:39

Java实现短信验证码服务

1.首先这里使用的是阿里云的短信服务。 package com.wzy.util;; import cn.hutool.captcha.generator.RandomGenerator; import com.aliyun.dysmsapi20170525.Client; import com.wzy.entity.Ali; import org.springframework.stereotype.Component;/*** Author: 顾安* Descri…...

编程日记 2024/7/25 22:40:36

python中的线程

线程线程概念线程在一个进程的内部, 要同时干多件事, 就需要同时运行多个"子任务", 我们把进程内的这些"子任务"叫做线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中, 是进程的实际运作单位。一条线程指的是进程中一个单一顺序的控制流…...

编程日记 2024/7/25 22:38:34

hcip学习多实例生成树，VRRP工作原理

一、STP 和 RSTP 解决了什么问题 1、STP：解决了在冗余的二层网络中所出现的环路问题 2、RSTP：在 STP 的基础上，解决了 STP 收敛速度慢的问题，引入了一些 STP 保护机制，使其网络更加稳定二、MSTP 针对 RSTP 的改进 …...

编程日记 2024/7/25 22:36:31

Docker搭建群晖

Docker搭建群晖本博客介绍在docker下搭建群晖 1.编辑docker-compose.yml文件 version: "3" services:dsm:container_name: dsmimage: vdsm/virtual-dsm:latestenvironment:DISK_SIZE: "16G"cap_add:- NET_ADMIN ports:- 8080:50…...

编程日记 2024/7/25 22:35:29

【java】BIO,NIO,多路IO复用，AIO

在Java中，处理I/O操作的模型主要有四种：阻塞I/O (BIO), 非阻塞I/O (NIO), 异步I/O (AIO), 以及IO多路复用。下面详细介绍这四种I/O模型的工作原理和应用场景。 1. 阻塞I/O (BIO) 工作原理阻塞I/O是最传统的I/O模型。在这种模型中，当一个线…...

编程日记 2024/7/25 22:33:27

服务器怎样减少带宽消耗的问题？

择业在使用服务器的过程中会消耗大量的带宽资源，而减少服务器的带宽消耗则可以帮助企业降低经济成本，同时还能够提高用户的访问速度，那么服务器怎样能减少带宽的消耗呢？本文就来带领大家一起来探讨一下吧！ 企业可以选择…...

编程日记 2024/7/25 22:32:26

linux 报错：bash: /etc/profile: 行 32: 语法错误：未预期的文件结束符

目录注意错误不一定错在最后一行 i进入编辑 esc退出编辑 ：wq 保存编辑退出 ：q！不保存退出 if [ $# -eq 3 ] then if [ ! -e "$1" ]; then miss1 $1 elif [ ! -e "$2" -a ! -e "$3" ]; then miss2and3…...

编程日记 2024/7/25 22:27:20

MySQL练习（5）

作业要求： 实现过程： 一、触发器 （1）建立两个表：goods（商品表）、orders（订单表） （2）在商品表中导入商品记录 （3）建立触发…...

编程日记 2024/7/25 22:25:18

泛型新理解

1.创建三个类，并写好对应关系 package com.jmj.gulimall.study;public class People { }package com.jmj.gulimall.study;public class Student extends People{ }package com.jmj.gulimall.study;public class Teacher extends People{ }2.解释一下这三个方法 pub…...

编程日记 2024/7/25 22:24:17

JavaSE--基础语法--继承和多态(第三期)

一.继承 1.1我们为什么需要继承? 首先，Java中使用类对现实世界中实体来进行描述，类经过实例化之后的产物对象，则可以用来表示现实中的实体，但是现实世界错综复杂，事物之间可能会存在一些关联，那在设计程…...

编程日记 2024/7/25 22:16:09

高级java每日一道面试题-2024年7月23日-什么时候用包装类, 什么时候用原始类

面试官: 你在什么时候用包装类, 什么时候用原始类? 我回答: 在Java开发中，理解何时使用包装类（Wrapper Classes）和何时使用原始类（Primitive Types）是非常重要的。这主要取决于你的具体需求以及Java语言本身的一些限…...

编程日记 2024/7/25 22:12:05

LINUX之MMC子系统分析

目录 1. 概念1.1 MMC卡1.2 SD卡1.3 SDIO 2. 总线协议2.1 协议2.2 一般协议2.3 写数据2.4 读数据2.5 卡模式2.5.1 SD卡模式2.5.2 eMMC模式 2.6 命令2.6.1 命令类2.6.2 详细命令 2.7 应答2.8 寄存器2.8.1 OCR2.8.2 CID2.8.3 CSD2.8.4 RCA2.8.5 扩展CSD 3. 关键结构3.1 struct sdh…...

编程日记 2024/7/25 22:10:02