0基础学前端-----CSS DAY6

0基础学前端-----CSS DAY6

视频参考:B站Pink老师
今天是CSS学习的第六天,今天开始的笔记对应Pink老师课程中的CSS第三天的内容。
本节重点:CSS的三大特性以及CSS的盒子模型。

1.CSS的三大特性

CSS有三个重要特性:层叠性、继承性、优先性

1.1 层叠性

相同选择器给设置相同的样式,此时一个样式就会**覆盖(层叠)**另一个冲突的样式。
层叠性主要解决样式冲突性问题。
原则:

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近就执行哪个样式。
  • 样式不冲突,不会层叠。

参考代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: red;font-size: 18px;}div {color: pink;}</style>
</head><body><div>长江后浪推前浪,前浪死在沙滩上</div>
</body></html>

结果展示:
在这里插入图片描述
使用了最近的样式。

1.2 继承性

CSS中的继承:子标签会继承父标签的某些样式,如文字颜色和字号。

  • 恰当使用继承可以简化代码,降低CSS样式的复杂性。
  • 子元素可以继承父元素的样式(text-,font-,line-这些开头的以及color属性可以继承,其他不可以)
    行高的继承性:
 body {font:12px/1.5 'Microsoft YaHei';#1.5为行高}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5
  • body行高1.5这样的写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高
    参考代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: pink;font-size: 14px;}</style>
</head><body><div><p>龙生龙,凤生凤,老鼠儿子会打洞</p></div>
</body></html>

结果展示:
在这里插入图片描述
继承了div的标签样式。
行高的继承性:
参考代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {color: pink;/* font: 12px/24px 'Microsoft Yahei'; */font: 12px/1.5 'Microsoft Yahei';}div {/* 子元素继承父元素body的行高1.5 *//* 这个1.5就是当前元素文字大小font-size的1.5倍 =21px*/font-size: 14px;}p {font-size: 16px;/*16*1.5=24*/}</style>
</head><body><div>粉红色的回忆</div><p>粉红色的回忆</p><ul><li>我没有指定文字大小</li></ul>
</body></html>

结果展示:
在这里插入图片描述
行高变为了当前字体大小的1.5倍。

1.3 优先级

当同一个元素指定多个选择器,就会产生优先级问题。

  • 选择器相同,则执行层叠性
  • 选择器不同,则使用选择器权重执行
    权重如下(优先级逐渐增大):
选择器权重
1 继承或*(通配符选择器)0,0,0,0
2 元素选择器0,0,0,1
3 类选择器、伪类选择器0,0,1,0
4 ID选择器0,1,0,0
5 行内样式style=“”1,0,0,0
6 !important重要的
参考代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: pink !important;}.test {color: red;}#demo {color: green;}</style>
</head><body><div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body></html>

结果展示:
在这里插入图片描述

优先级注意点:

  1. 权重由四位数字组成,但是不会有进位
  2. 选择器权重依次增大
  3. 等级判断从左到右,如果一位数值相同,则判断下一位
  4. 可以简单记忆1为0,2为1,3为10,4为100,5为1000,6为∞,1,2,3,4,5,6分别对应六个选择器
  5. 继承的权重为0,如果该元素没有直接选中,不管父元素权重多高,子元素权重都为0
    参考代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#father {color: red;}p {color: pink;}body {color: red;}/*a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue }*/a {color: green;}</style>
</head><body><div id="father"><p>你还是很好看</p><a href="#">我是单独的样式</a></div>
</body></html>

结果展示:
在这里插入图片描述
注意<a>标签是有默认样式的,继承权重为0!!!

权重叠加:如果是复合选择器则会有权重叠加,需要计算权重,但不需要进位。
参考代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {color: red;}/*权重叠加,但不会进位 0,0,0,1+0,0,0,1=0,0,0,2*/ul li {color: green;}/*权重叠加 0,0,1,0+0,0,0,1=0,0,1,1*/.nav li {color: pink;}</style>
</head><body><ul class="nav"><li>大猪蹄子</li><li>大肘子</li><li>猪尾巴</li></ul>
</body></html>

结果展示:
在这里插入图片描述

权重练习

练习1:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {color: red;}li {color: pink;}</style>
</head><body><ul class="nav"><li>人生四大悲</li><li>家里没宽带</li><li>网速不够快</li><li>手机没流量</li><li>学校没wifi</li></ul>
</body></html>

阅读练习一的代码猜测文字颜色。
练习2:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav li {color: red;}/*要求:把第一个小li颜色改为粉色加粗*/.nav .pink {color: pink;font-weight: bold;}</style>
</head><body><ul class="nav"><li class="pink">人生四大悲</li><li>家里没宽带</li><li>网速不够快</li><li>手机没流量</li><li>学校没wifi</li></ul>
</body></html>

如果写的是.pink而不是.nav .pink请问字体颜色是什么。
答案1:
在这里插入图片描述

答案2:
.pink
在这里插入图片描述
.nav .pink
在这里插入图片描述

—————————————————————————————————————————
第三天CSS的三大特性已讲解完毕,下面更新CSS盒子模型(ง •_•)ง,有什么问题都可以在评论区进行讨论哦!

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

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

相关文章

本地部署大模型QPS推理测试

目录 1、测试环境1.1、显卡1.2、模型1.3、部署环境1.3.1、docker1.3.2、执行命令 2、测试问题2.1、20字左右问题2.2、50字左右问题2.3、100字左右问题 3、测试代码3.1、通用测试代码3.2、通用测试代码&#xff08;仅供参考&#xff09; 4、测试结果4.1、通用测试结果4.2、RAG测…

测试工程师八股文04|计算机网络 和 其他

一、计算机网络 1、http和https的区别 HTTP和HTTPS是用于在互联网上传输数据的协议。它们都是应用层协议&#xff0c;建立在TCP/IP协议栈之上&#xff0c;用于客户端&#xff08;如浏览器&#xff09;和服务器之间的通信。 ①http和https的主要区别在于安全性。http是一种明…

【Tomcat】第一站:理解tomcat与Socket

目录 1. Tomcat 1.1 Tomcat帮助启动http服务器。 1.2 tomcat理解&#xff1a; 2. 计算机网络最基本的流程 2.1 信息是怎么来的&#xff1f; 2.2 端口是干什么的&#xff1f; 3. 简单的Socket案例 服务端 客户端 启动&#xff1a; 3.2 在Tomcat发送信息&#xff0c;看…

抖音SEO短视频矩阵源码系统开发分享

在数字营销的前沿阵地&#xff0c;抖音短视频平台凭借其独特的魅力和庞大的用户基础&#xff0c;已成为社交媒体领域一股不可小觑的力量。随着平台影响力的持续扩大&#xff0c;如何有效提升视频内容的可见度与流量成为了内容创作者关注的焦点。在此背景下&#xff0c;一套专为…

使用 DeepSpeed 微调 OPT 基础语言模型

文章目录 OPT 基础语言模型Using OPT with DeepSpeedmain.py 解析1、导入库和模块2、解析命令行参数3、main 函数3.1 设备与分布式初始化3.2 模型与数据准备3.3 定义评估函数3.4 优化器与学习率调度器设置3.5 使用 deepspeed 进行模型等初始化3.6 训练循环3.7 模型保存 4、dsch…

window QT/C++ 与 lua交互(mingw + lua + LuaBridge + luasocket)

一、环境与准备工作 测试环境:win10 编译器:mingw QT版本:QT5.12.3 下载三种源码: LuaBridge源码:https://github.com/vinniefalco/LuaBridge LUA源码(本测试用的是5.3.5):https://www.lua.org/download.html luasocket源码:https://github.com/diegonehab/luasocket 目…

边缘智能创新应用大赛获奖作品系列三:边缘智能强力驱动,机器人天团花式整活赋能千行百业

边缘智能技术快速迭代&#xff0c;并与行业深度融合。它正重塑产业格局&#xff0c;催生新产品、新体验&#xff0c;带动终端需求增长。为促进边缘智能技术的进步与发展&#xff0c;拓展开发者的思路与能力&#xff0c;挖掘边缘智能应用的创新与潜能&#xff0c;高通技术公司联…

中后台管理信息系统:Axure12套高效原型设计框架模板全解析

中后台管理信息系统作为企业内部管理的核心支撑&#xff0c;其设计与实现对于提升企业的运营效率与决策能力具有至关重要的作用。为了满足多样化的中后台管理系统开发需求&#xff0c;一套全面、灵活的原型设计方案显得尤为重要。本文将深入探讨中后台管理信息系统通用原型方案…

云计算HCIP-OpenStack03

书接上回&#xff1a; 云计算HCIP-OpenStack02-CSDN博客 10.KeyStone keystone-Openstack&#xff0c;IAM服务&#xff08;统一身份认证&#xff09;-云服务 建议先去了解Hadoop&#xff08;大数据生态系统&#xff09;中的kerberos&#xff08;LDAPkerberos的鉴权机制&#xf…

el-table打印PDF预览,表头错位的解决方案

文章目录 背景与需求需求分析解决方案方案一&#xff1a;vue-print-nb插件安装引入使用 方案二安装使用 方案三 总结 背景与需求 本例以vue2项目为例&#xff0c;vue3与react等同理。 有个项目需要打印的功能&#xff0c;网页使用vue2写的&#xff0c;主体内容为表格el-table&a…

uniapp炫酷导航按钮及轮播指示器组件

一个拥有炫酷动效的导航按钮和指示器uniapp组件&#xff0c;帮你构建更炫酷的官网、宣传页、产品介绍等页面。 目前测试了vue2语法在h5和微信小程序的适配&#xff0c;其他平台理论上也能用。 下载及使用方法地址&#xff1a;iliya-desgin 展示&#xff1a; 目标页面出现在可视…

SAM大模型实践(一)

参考着segment-geospatial 项目主页的介绍&#xff0c;尝试复现一下Example-satallite的案例。 Satellite - segment-geospatialhttps://samgeo.gishub.org/examples/satellite/ 过程当中遇到了一些坑给大家做点分享&#xff0c;主要有几种情况&#xff0c;一个是torch…

如何为IntelliJ IDEA配置JVM参数

在使用IntelliJ IDEA进行Java开发时&#xff0c;合理配置JVM参数对于优化项目性能和资源管理至关重要。IntelliJ IDEA提供了两种方便的方式来设置JVM参数&#xff0c;以确保你的应用程序能够在最佳状态下运行。本文将详细介绍这两种方法&#xff1a;通过工具栏编辑配置和通过服…

解决电脑网速慢问题:硬件检查与软件设置指南

电脑网速慢是许多用户在使用过程中常见的问题&#xff0c;它不仅会降低工作效率&#xff0c;还可能影响娱乐体验。导致电脑网速慢的原因多种多样&#xff0c;包括硬件问题、软件设置和网络环境等。本文将从不同角度分析这些原因&#xff0c;并提供提高电脑网速的方法。 一、检查…

探索Starship:一款用Rust打造的高性能终端

在终端的世界里&#xff0c;效率和美观往往并行不悖。今天&#xff0c;我们要介绍的是一款名为Starship的终端工具&#xff0c;它以其轻量级、高颜值和强大的自定义功能&#xff0c;赢得了众多开发者的青睐。 安装 任选一种方式进行安装 Windows &#x1fa9f; # scoop scoo…

快速启动Go-Admin(Gin + Vue3 + Element UI)脚手架管理系统

Go-Admin 是一个基于 Gin Vue Element UI & Arco Design & Ant Design 的前后端分离权限管理系统脚手架。它包含了多租户支持、基础用户管理功能、JWT 鉴权、代码生成器、RBAC 资源控制、表单构建、定时任务等功能。该项目的主要编程语言是 Go 和 JavaScript。 ps&a…

SEC_ASA 第二天作业

拓扑 按照拓扑图配置 NTP&#xff0c;Server端为 Outside路由器&#xff0c;Client端为 ASA&#xff0c;两个设备的 NTP传输使用MD5做校验。&#xff08;安全 V4 LAB考点&#xff09; 提示&#xff1a;Outside路由器作为 Server端要配置好正确的时间和时区&#xff0c;ASA防…

《深入探究:C++ 在多方面对 C 语言实现的优化》

目录 一、C 在 C 上进行的优化二、C 关键字&#xff08;C 98&#xff09;三、C 的输入输出1. cin 和 cout 的使用2. cin、cout 和 scanf()、printf() 的区别 三、命名空间1. 命名空间的使用2. 嵌套命名空间3. 在多个头文件中使用相同的命名空间 四、函数缺省值1. 缺省值的使用2…

vue3修改elementui-plus的默认样式的几种方法

#创作灵感 今天写vue的前端项目&#xff0c;因为需要去修改elementui-plus中drawer的默认样式&#xff0c;所以刚好将修改步骤记录下来。 一共提供了三种方法&#xff0c;但亲测第二种最好用。 使用第二种是可以无视自己的代码中是否定义了该盒子&#xff0c;因为有时候盒子的…

Fiddler简单使用

Fiddler使用方法 1.作用 接口测试&#xff0c;发送自定义请求&#xff0c;模拟小型的接口测试定位前后端bug&#xff0c;抓取协议包&#xff0c;前后端联调构建模拟测试场景&#xff0c;数据篡改&#xff0c;重定向弱网测试&#xff0c;模拟限速操作&#xff0c;弱网&#xf…