CSS第二天导读

1,Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html / css 的编写速度,Vscode内部已经集成该语法

1.1,快速生成HTML结构语法

1.想要快速生成多个相同标签,加上*就可以了,比如 div*3

2.如果有父子级关系的标签,可以用>,比如ul>li

3.如果有兄弟关系的标签,用+,比如div+p

4.如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了

.nav(类名)     #.nav(id名) p.nav(p标签)

5.如果生成的div类名是有顺序的,可以用自增符号$

.demo$*5(回车)

 6,如果想要在生成的标签内部写内容可以用{ }表示

div{}

1.2,快速生成CSS样式语法

CSS基本采取简写形式即可

1,比如w200 按tab 可以生成 width:2000px;

2,比如lh26 按tab 可以生成 line-weight:26px;

1.3,快速格式化代码

Shift+Alt+F

9c5b7cc6f31b4b93bf3961a239cbce90.jpg

2,CSS的复合选择器

2.1 什么是复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的

· 复合选择器可以更准确,更高效的选择目标元素(标签)

· 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

· 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

2.2 后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代

元素1  元素2{样式声明}

上述语法表示选择元素1里面的所以元素2(后代元素)

 ul li{ 样式声明 }    /*   选择ul里面所有的li标签元素   */

 注意:

元素1和元素2中间用空格隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

2.3 子选择器(重要)

子元素选择器(子选择器)只能作为某元素的最近一级子元素。简单理解就是选亲儿子元素

语法:

元素1>元素2{样式声明}

上述语法表示选择元素1里面的所以直接后代(子元素)元素2

例如:

div > p{  样式声明  }  选择div里面所以最近一级p标签元素 

注意:

元素1和元素2中间用大于号隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2必须是亲儿子,其孙子、重孙之类都不归他管,也可以叫他亲儿子选择器

2.4 并集选择器(重要)

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明

并集选择器是各选择器通过(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分

语法:

元素1,元素2{样式声明}

例如:

ul,div{ 样式声明 } 

注意:

元素1和元素2中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

 2.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第1个,第n个元素

伪类选择器书写最大的特点是用冒号(:)表示,比如hover:first-child

2.5.1 链接伪类选择器

a:link                 选择所有未被访问的链接

a:visited             选择所有已被访问的链接

a:hover              选择鼠标指针位于其上的连接

a:active              选择活动链接(鼠标按下未弹起的链接)

 (1)链接伪类选择器注意事项

①,为了确保生效,按照顺序声明:link—visited—hover—active

②,因为a链接在浏览器中具有默认样式,所以实际工作中需要给链接单独指定样式

(2)链接伪类选择器实际开发中的书写

a{

        color:gray;

        text-decoration:none;

}

a:hover{

        color:red;

        text-decoration:underline;

}

2.6 focus伪类选择器

:focus 伪类选择器 用于选取获得焦点的表单元素

焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对表单元素来说

input: focus{

        background-color:yellow;

}

72c151d45fd74e789046a24a80736229.png

 

 

 

 

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

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

相关文章

物流实时数仓:数仓搭建(DWD)一

系列文章目录 物流实时数仓&#xff1a;采集通道搭建 物流实时数仓&#xff1a;数仓搭建 物流实时数仓&#xff1a;数仓搭建&#xff08;DIM&#xff09; 物流实时数仓&#xff1a;数仓搭建&#xff08;DWD&#xff09;一 文章目录 系列文章目录前言一、文件编写1.目录创建2.b…

iPhone 16 的电池供应可能来自印度

据英国《金融时报》报道&#xff0c;据报道&#xff0c;苹果已通知其供应链&#xff0c;包括中国德赛公司和台湾新普科技等电池供应商&#xff0c;其倾向于将 iPhone 16 的电池供应转移到印度。苹果鼓励供应商将现有产能迁往印度&#xff0c;以扩大该地区的生产规模。 鉴于电池…

Redis高级特性解析:持久化、主从复制与哨兵机制全面探讨

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c; Redis 将内存数据库快照保存在名字为 dump.rdb 的二进制文件中。 你可以对 Redis 进行设置&#xff0c; 让它在“ N 秒内数据集至少有 M 个改动”这一条件被满足时&#xff0c; 自动保存…

Java使用Microsoft Entra微软 SSO 认证接入

1. Microsoft Entra Microsoft Entra ID 是基于云的标识和访问管理服务&#xff0c;可帮助员工访问外部资源。 示例资源包括 Microsoft 365、Azure 门户以及成千上万的其他 SaaS 应用程序。 Microsoft Entra ID 还可帮助他们访问你的企业 Intranet 上的应用等内部资源&#x…

2019年第八届数学建模国际赛小美赛B题数据中心冷出风口的设计解题全过程文档及程序

2019年第八届数学建模国际赛小美赛 B题 数据中心冷出风口的设计 原题再现&#xff1a; 这是数据中心空调设计面临的一个问题。在一些数据中心&#xff0c;计算机机柜是开放的&#xff0c;在一个房间里排列成三到四排。冷却后的空气通过主管进入房间&#xff0c;并分为三到四个…

【华为数据之道学习笔记】5-2华为数据湖的特点

华为数据湖是逻辑上对内外部的结构化、非结构化的原始数据的逻辑汇聚。数据入湖要遵从6项入湖标准&#xff0c;基于6项标准保证入湖的质量&#xff0c;同时面向不同的消费场景提供两种入湖方式&#xff0c;满足数据消费的要求。经过近两年的数据湖建设&#xff0c;目前已经完成…

0-50KHz频率响应模拟量高速信号隔离变送器

0-50KHz频率响应模拟量高速信号隔离变送器 型号&#xff1a;JSD TA-2322F系列 高速响应时间&#xff0c;频率响应时间快 特点&#xff1a; ◆小体积,低成本,标准 DIN35mm 导轨安装方式 ◆六端隔离(输入、输出、工作电源和通道间相互隔离) ◆高速信号采集 (-3dB,Min≤ 3.5 uS,订…

谷歌上架或更新被拒审的可能原因有哪些?

众所周知&#xff0c;在Google play应用商店上架或更新应用时&#xff0c;开发者需要遵守谷歌的相关规定和政策&#xff0c;否则可能会导致审核不通过&#xff0c;甚至永久封号。 很多开发者在提交应用到谷歌Play商店或进行应用更新时&#xff0c;即便了解了Google Play商店的…

unity 双摇杆控制教程(方向和旋转)

使用工具&#xff1a; unity 2021.2.8f1c1 visual studio 2022 插件&#xff1a; Joystick Pack 准备工作&#xff1a; 1.新建一个plane&#xff08;作为地面&#xff09;&#xff0c;一个胶囊体&#xff08;作为玩家&#xff09;&#xff0c;并在胶囊体上添加刚体组件&am…

java实现冒泡排序及其动图演示

冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。重复这个过程直到整个数列都是按照从小到大的顺序排列。 具体步骤如下&#xff1a; 比较相邻的两个元素&#xff0c;如果前…

hive聚合函数之排序

1 全局排序&#xff08;Order By&#xff09; Order By&#xff1a;全局排序&#xff0c;只有一个Reduce。 (1&#xff09;.使用Order By子句排序 asc&#xff08;ascend&#xff09;&#xff1a;升序&#xff08;默认&#xff09; desc&#xff08;descend&#xff09;&#…

分布式解决方案与实战

分布式多线程性能调优 使用多线程优化接口 //下单业务public Object order( long userId){long start System.currentTimeMillis();//方法的开始时间戳&#xff08;ms&#xff09;JSONObject orderInfo remoteService.createOrder(userId);Callable<JSONObject> calla…

C++笔记之system()用于在Qt中执行系统命令的习惯

C笔记之system()用于在Qt中执行系统命令的习惯 参考博文&#xff1a;qt-C笔记之std::tostring()、.toStdString()、.toLocal8Bit().constData()的使用场景 code review! 文章目录 C笔记之system()用于在Qt中执行系统命令的习惯一.一般我用的int system( const char *command…

HarmonyOS学习0基础版

1.安装并配置DevEco 访问 HUAWEI开发者官网 找到 DevEco点击下载,我这里以windows版为例 点击下载并安装 (安装时直接点击下一步下一步,然后运行安装好的DevEco) 注意&#xff1a;第一次安装没有开发环境的时候&#xff0c;这里点击Do not import settings&#xff0c;进入软…

modelbox线程爆满宕机bug

序 该bug的解决需要特别感谢张同学。有了大佬的帮助&#xff0c;这个bug才得以解决。 问题现象 modelbox可以进行模型推理&#xff0c;但压测一段时间后&#xff0c;modelbox会宕机&#xff0c;并发生段错误。 “libgomp: Thread creation failed: Resource temporarily una…

MacOS多屏状态栏位置不固定,程序坞不小心跑到副屏

目录 方式一&#xff1a;通过系统设置方式二&#xff1a;鼠标切换 MacOS多屏状态栏位置不固定&#xff0c;程序坞不小心跑到副屏 方式一&#xff1a;通过系统设置 先切换到左边 再切换到底部 就能回到主屏了 方式二&#xff1a;鼠标切换 我的两个屏幕放置位置如下 鼠标在…

实验03:OSPF配置网络实验

1.实验目的&#xff1a; 本实验的主要目的是了解OSPF协议的基本概念、OSPF网络的配置及验证&#xff0c;通过实验来掌握OSPF协议的工作原理、配置方法、路由表的生成过程等。 2.实验内容&#xff1a; 设计一个拓扑结构&#xff0c;并在网络设备上进行配置&#xff1b;配置OS…

架构简洁之道有感,谈谈软件组件聚合的张力

配图由腾讯混元助手生成 这篇文章介绍了软件架构设计中组件设计思想&#xff0c;围绕“组件间聚合的张力”这个有意思的角度&#xff0c;介绍了概念&#xff0c;并且结合架构设计示例对这个概念进行了进一步阐述。 组件聚合&#xff1f;张力&#xff1f;这标题&#xff0c;有种…

Matlab绘图添加背景色,动态添加背景

Matlab绘图添加背景色&#xff0c;动态添加背景 有没有小伙伴想过绘制这种有背景的曲线图呢&#xff1f;因为矩形是背景&#xff0c;所以要先绘制&#xff0c;然后再绘制曲线&#xff0c;因此&#xff0c;最先想到的思路可能是&#xff1a;先绘制三个背景矩形&#xff0c;然后填…

编译Sqlite3记录

下载源文件&#xff1a; 下载地址&#xff1a;SQLite Download Page 打开QtCreator创建新的工程&#xff0c;选择纯C工程&#xff0c;将main.c删除&#xff0c;将下载的源码解压后的文件复制到并添加到工程中&#xff0c;其中的文件包括&#xff1a;sqlite3ext.h、sqlite3.h、…