2024.4.1-[作业记录]-day06-认识 CSS(三大特性、引入方式)


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


day06-认识 CSS(三大特性、引入方式)

文章目录

  • day06-认识 CSS(三大特性、引入方式)
  • 作业
  • 2024-4-1 学习笔记
    • 1 CSS三大特性
      • 1.1 层叠性
      • 1.2 继承性
      • 2 text-align注意事项
      • 3 a标签注意事项
      • 4 优先级
      • 5 a:hover
      • 6 CSS引入方式
      • 7 chrome调试技巧

作业

在这里插入图片描述

.text-center {text-align:center;font-size: 30px;color: red;
}
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="测试" content="测试"><meta description="测试" content="测试"><title>测试</title><link rel="stylesheet" href="./test.css"><style>.text-right{text-align:right;color:green;font-size:50px;}</style></head><body><div class="text-center"><p>这是一个链接式</p><span class="text-right"><p>这是一个链接式+嵌入式,遵循就近原则</p><p style="text-align:left;color:blue;font-size:70px;">这是一个链接式+嵌入式+行内式,也遵循就近原则</p></span></div></body>
</html>

优先级的计算

ul li a ----> (0,0,0,1)+(0,0,0,1)+(0,0,0,1)=(0,0,0,3)
#bbb a ----> (0,1,0,0)+(0,0,0,1)=(0,1,0,1)
a:hover div .red —>(0,0,1,1)+(0,0,0,1)+(0,0,1,0)=(0,0,2,2)
.abc!important ---->(0,0,1,0)+无穷=无穷

2024-4-1 学习笔记

1 CSS三大特性

1.1 层叠性

1相同属性:.就近原则
2.不同属性:合并

1.2 继承性

自身有该样式,不能继承,就近原则
百分号%的line-height不会继承,会先算好再到下一个,这时候子元素设置font-size就无效了

在这里插入图片描述

在这里插入图片描述

2 text-align注意事项

text-align不能放到行内元素上面,因为行内元素它本身就是内容的宽度,没有剩余空间,所以对齐方式无意义
text-align要放在块的最外面的那个标签

在这里插入图片描述

在这里插入图片描述

3 a标签注意事项

a 标签可以继承color,但是要注意有可能本来a标签浏览器给它添加了一些样式了的,那么继承的权重是小于标签本身的权重,所以可能无效。

在这里插入图片描述

4 优先级

继承<标签,伪类<id<行内<!important
继承的优先级是最弱的,有!important也没用

在这里插入图片描述

5 a:hover

a是标签选择器 :hover 是伪类选择器,是两个

在这里插入图片描述

在这里插入图片描述

6 CSS引入方式

css一般添加顺序:1.链接式,2.嵌入式,3.行内式。

在这里插入图片描述

7 chrome调试技巧

可以只用chrome查看deatails,然后回vscode按ctrl+g输入行数修改

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796879.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实践笔记-03 docker buildx 使用

docker buildx 使用 1.启用docker buildx2.启用 binfmt_misc3.从默认的构建器切换到多平台构建器3.1创建buildkitd.toml文件&#xff08;私有仓库是http没有证书的情况下&#xff0c;需要配置&#xff09;3.2创建构建器并使用新创建的构建器 4.构建多架构镜像并推送至harbor仓库…

JVM—对象的创建流程与内存分配

JVM—对象的创建流程与内存分配 创建流程 对象创建的流程图如下&#xff1a; 对象的内存分配方式 内存分配的方式有两种&#xff1a; 指针碰撞&#xff08;Bump the Pointer&#xff09;空闲列表&#xff08;Free List&#xff09; 分配方式说明收集器指针碰撞&#xff08…

RIPv1和RIPv2的区别

RIP&#xff08;Routing Information Protocol&#xff09;是一种内部网关协议&#xff0c;用于在局域网或广域网中进行路由信息的传递。RIP有两个版本&#xff1a;RIPv1和RIPv2。以下是两者之间的主要区别&#xff1a; 子网掩码支持&#xff1a;RIPv2支持子网掩码的传送&…

嵌入式设备低功耗无线通信协议

嵌入式设备低功耗无线通信协议 随着物联网&#xff08;IoT&#xff09;技术的迅速发展&#xff0c;嵌入式设备之间的无线通信变得越来越重要。为了满足长时间运行、减少能源消耗以及实现更广泛的网络覆盖等需求&#xff0c;低功耗无线通信协议在嵌入式系统中扮演着举足轻重的角…

三防笔记本丨加固笔记本丨三防笔记本电脑赋能车辆检修

随着汽车数量的不断增加和交通运输行业的发展&#xff0c;车辆检修行业成为了保障交通安全和延长车辆寿命的重要领域。在车辆检修过程中&#xff0c;需要使用各种工具和设备来进行检测、维修和保养&#xff0c;而信息化技术的应用正逐渐渗透到这一行业中&#xff0c;为检修工作…

51单片机实验03-定时器T0来实现流水灯从左到右再从右到左

目录 一、实验目的 二、实验说明 1、51单片机有两个16位内部计数器/定时器&#xff08;C/T&#xff0c; Counter/Timer&#xff09;。 2、模式寄存器TMOD 1) M1M0工作模式控制位&#xff1b; 2) C/T定时器或计数器选择位&#xff1a; 3&#xff09;GATE定时器/计数器运行…

day20-二分法计算 X 的算术平方根

问题描述&#xff1a; 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 示例 1&#xff1a; 输入&#xff1a;x 4 输出&#xff1a;2示例 2&#xff1a; 输入&#…

v-on配置methods

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>v-on配置methods</title> </head>…

外刊杂志经济学人获取方式

经济学人2017~2019 项目地址&#xff1a;https://github.com/nailperry-zd/The-Economist 下载地址&#xff1a;https://github.com/nailperry-zd/The-Economist/archive/refs/heads/master.zip 或使用git同步项目 git clone https://github.com/nailperry-zd/The-Economis…

超声波清洗机哪家强?超声波清洗机排行榜!最强超声波清洗机推荐

眼镜作为日常生活中不可或缺的用品&#xff0c;对于很多人来说是必备的。然而&#xff0c;随着使用时间的增长&#xff0c;眼镜表面往往会沾染灰尘、污垢等&#xff0c;这不仅影响了镜片的透光性&#xff0c;也可能影响到使用者的视力和舒适度。因此&#xff0c;清洁眼镜成了一…

2_6.Linux高级存储管理

##1.逻辑卷## pv ##物理卷 被处理过的物理分区 pe ##物理扩展 设定存储最小单元 vg ##物理卷组 捆绑pv到一个组中 lv ##逻辑卷 分配最终的使用设备 监控建立过程&#xff1a; watch -n 1 "pvs;echo ;vgs;echo ;lvs;echo ;df -h /weixindata" &#xff08;1&#xf…

wheeltec轮趣ROS教育机器人的网络连接

一、术语解析 宿主机&#xff1a;宿主机是指物理主机&#xff0c;比如用于开发测试的笔记本电脑和台式机电脑。 虚拟机&#xff1a;虚拟机是指安装在宿主机的VMware&#xff0c;推荐在宿主机上安装虚拟机&#xff0c;官方提供虚拟机的镜像以及配套的开发环境。 ROS主机&…

DC/DC1A30V高效同步降压转换器H4010

DC/DC 1A30V高效同步降压转换器是一种高频、同步、整流、降压、开关模式转换器&#xff0c;内置功率MOSFET。它可以在宽输入电源范围内实现1.5A峰值输出电流&#xff0c;并具有出色的负载和线路调节性能。此外&#xff0c;该转换器需要最少数量的现成外部元件&#xff0c;并采用…

RabbitMQ3.13.x之八_RabbitMQ中数据文件和目录位置

RabbitMQ3.13.x之_RabbitMQ中数据文件和目录位置 文章目录 RabbitMQ3.13.x之_RabbitMQ中数据文件和目录位置1. 概述2. 覆盖位置1. 路径和目录名称限制2.所需的文件和目录权限 3. 环境变量4. Linux、macOS、BSD上的默认位置5. Windows上的默认位置6. 通用二进制构建默认值 1. 概…

微信聊天记录恢复只需简单3招,快速找回聊天内容!

各种社交软件早已深深融入我们的日常生活&#xff0c;无论是与亲朋好友的闲聊&#xff0c;还是与同事伙伴的工作沟通&#xff0c;都离不开它们的陪伴。然而&#xff0c;有时由于误操作、系统更新或手机故障等原因&#xff0c;我们可能会不小心删除了重要的聊天记录&#xff0c;…

PCI总线学习笔记:读写篇

前言 最近在写E1000网卡的驱动&#xff0c;这其中涉及到了PCI总线的相关内容。但是网上大部分关于PCI的文章都只局限在概念上的描述&#xff0c;并没有给出具体的例子来解释。这其实也是情理之中的&#xff0c;因为PCI总线规范就像是一个抽象的接口&#xff0c;其具体怎么实现…

C语言如何声明外部变量?

一、问题 由于C语⾔允许将⼀个较⼤的程序分成若⼲独⽴模块⽂件分别编译&#xff0c;如果⼀个源⽂件中的函数想引⽤其他源⽂件中的变量&#xff0c;那么就要想到如何声明外部变量。 二、解答 外部变量可以⽤ extern 来声明。这就是说&#xff0c;extern 变量可以扩展外部变量的…

C语言之自定义类型联合和枚举

目录 前言 一&#xff1a;联合体&#xff08;共用体&#xff09;union 1.联合体类型的声明 2.联合体的特点 3.联合体大小的计算 4.联合体判断机器的大小端 二&#xff1a;枚举enum 1.概念 2.枚举的优点 3.枚举的使用 接下来的日子会顺顺利利&#xff0c;万事胜意…

Android Binder——Java服务注册(九)

对于 Java 端使用 Binder 服务,主要就是注册服务和获取服务,入口都是通过 ServiceManager.java 中的对应方法实现。这里我们就先介绍一下 Java 注册 Binder 服务的流程。 一、ServiceManager代理 无论是 ServiceManager.addService() 还是 ServiceManager.getService() 最终…

第9章 安全漏洞、威胁和对策(9.17)

9.17 移动设备(mobile device) 移动设备是指电池驱动的任何东西,通常不需要电源线就可以运行的任何东西。 备考时要把智能手机与移动设备、笔记本电脑、平板电脑乃至智能手表或计步器也考虑进来。 一些移动设备连典型的默认安全设置都做不到&#xff0c;更别提可供使用的安全…