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.rhkb.cn/news/217263.html

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

相关文章

智慧灯杆技术应用分析

智慧灯杆是指在传统灯杆的基础上&#xff0c;通过集成多种先进技术实现城市智能化管理的灯杆。智慧灯杆技术应用的分析如下&#xff1a; 照明功能&#xff1a;智慧灯杆可以实现智能调光、时段控制等功能&#xff0c;根据不同的需求自动调节照明亮度&#xff0c;提高照明效果&am…

铭飞CMS list 接口 SQL注入漏洞复现

0x01 产品简介 铭飞CMS是一款基于java开发的一套轻量级开源内容管理系统,铭飞CMS简洁、安全、开源、免费,可运行在Linux、Windows、MacOSX、Solaris等各种平台上,专注为公司企业、个人站长快速建站提供解决方案 0x02 漏洞概述 铭飞CMS在5.2.10版本以前list 接口处存在sql注入…

Axure的动态面板

目录 动态面板 什么是Auxre动态模板 动态模板的步骤 应用场景 实战案例 轮播图 多功能登录界面 主界面左侧菜单栏 动态面板 什么是Auxre动态模板 动态面板是Axure中的一个重要功能&#xff0c;它允许用户创建可交互的页面&#xff0c;并模拟用户与页面的交互。通过添加元素…

Python - 搭建 Flask 服务实现图像、视频修复需求

目录 一.引言 二.服务构建 1.主函数 upload_gif 2.文件接收 3.专属目录 4.图像修复 5.gif2mp4 6.mp42gif 7.图像返回 三.服务测试 1.服务启动 2.服务调用 四.总结 一.引言 前面我们介绍了如何使用 Real-ESRGAN 进行图像增强并在原始格式 jpeg、jpg、mp4 的基础上…

计算机毕业设计 SpringBoot的医院门诊在线挂号系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

计算机网络应用层(期末、考研)

计算机网络总复习链接&#x1f517; 目录 DNS域名服务器域名解析过程分类递归查询&#xff08;给根域名服务器造成的负载过大&#xff0c;实际中几乎不用&#xff09;迭代查询 域名缓存&#xff08;了解即可&#xff09;完整域名解析过程采用UDP服务 FTP控制连接与数据连接 电…

【期末向】“我也曾霸榜各类NLP任务”-bert详解

预训练语言模型 预训练语言模型于 2015 年被首次提出&#xff08;Dai & Le,2015&#xff09;。首先我们要了解一下什么是预训练模型&#xff0c;举个例子&#xff0c;假设我们有大量的维基百科数据&#xff0c;那么我们可以用这部分巨大的数据来训练一个泛化能力很强的模型…

LV.13 D2 开发板启动流程 学习笔记

一、开发板启动过程 EMMC&#xff1a;相当于电脑的外存&#xff0c;断电不丢失 开发板上电后首先运行SOC内部iROM中固化的代码(BL0)&#xff0c;这段代码先对基本的软硬件环境(时钟等...)进行初始化&#xff0c;然后再检测拨码开关位置获取启动方式&#xff0c;然后再将对应存储…

【Python】conda镜像配置,.condarc文件详解,channel镜像

1. conda 环境 安装miniconda即可&#xff0c;Miniconda 安装包可以到 http://mirrors.aliyun.com/anaconda/miniconda/ 下载。 .condarc是conda 应用程序的配置文件&#xff0c;在用户家目录&#xff08;windows&#xff1a;C:\users\username\&#xff09;&#xff0c;用于…

3-分布式存储之Ceph

任务背景 虽然使用了分布式的glusterfs存储, 但是对于爆炸式的数据增长仍然感觉力不从心。对于大数据与云计算等技术的成熟, 存储也需要跟上步伐. 所以这次我们选用对象存储. 任务要求 1, 搭建ceph集群 2, 实现对象存储的应用 任务拆解 1, 了解ceph 2, 搭建ceph集群 3, 了…

智能优化算法应用:基于差分进化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于差分进化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于差分进化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.差分进化算法4.实验参数设定5.算法结果6.…

智能守护,数据安全稳中求胜!上海迅软DSE助力家具家电行业引领潮流!

随着中国经济的蓬勃发展&#xff0c;家具家电企业正迎来“精品制造”的时代&#xff0c;业内竞争日益激烈。为了提升产品竞争力、扩大市场占有率&#xff0c;企业亟需加强对自主品牌的安全建设&#xff0c;确保品牌的自主知识产权、产品生产资料以及销售信息等核心数据不受泄漏…

如何部署Portainer容器管理工具+cpolar内网穿透实现公网访问管理界面

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 前言 本文主要介绍如何本地安装Portainer并结合内网穿透工具实现任意浏览器远程访问管理界面。Portainer 是一个轻量级…

从零开发短视频电商 AWS OpenSearch Service开发环境申请以及Java客户端介绍

文章目录 创建域1.创建域2.输入配置部署选项数据节点网络精细访问控制访问策略 获取域端点数据如何插入到OpenSearch ServiceJava连接OpenSearch Servicespring-data-opensearchelasticsearch-rest-high-level-clientopensearch-rest-clientopensearch-java 因为是开发测试使用…

VSCode 配置自动生成头文件

相关文章 VSCode 开发C/C实用插件分享——codegeex VSCode 开发C/C实用插件分享——koroFileHeader VSCode 配置自动生成头文件 一、snippets二、配置步骤三、效果展示 一、snippets 相信大家对C、C都头文件都不陌生&#xff0c;都会发现每个头文件都会包括下面的这些格式&…

Bypass open_basedir

讲解 open_basedir是php.ini中的一个配置选项&#xff0c;可用于将用户访问文件的活动范围限制在指定的区域。 假设open_basedir/var/www/html/web1/:/tmp/&#xff0c;那么通过web1访问服务器的用户就无法获取服务器上除了/var/www/html/web1/和/tmp/这两个目录以外的文件。…

【洛谷算法题】P5717-【深基3.习8】三角形分类【入门2分支结构】Java题解

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5717-【深基3.习8】三角形分类【入门2分支结构】&#x1f30f;题目描述&#x1…

ArrayList集合的两个实例应用,有趣的洗牌算法与杨辉三角

本节课的内容&#xff0c;就让我们来学习一下ArrayList集合的应用&#xff0c;ArrayList的本质就是一个顺序表&#xff0c;那下面一起来学习吧 目录 一、杨辉三角 1.题目详情及链接 2.剖析题目 3.思路及代码 二、洗牌算法 1.创造牌对象 2.创造一副牌 3.洗牌操作 4.发…

linux 定时任务

使用 crontab Usage: crontab [-u user] [-e|-l|-r] Crontab 的格式说明如下: * 逗号(‘,’) 指定列表值。如: “1,3,4,7,8″ * 中横线(‘-’) 指定范围值 如 “1-6″, 代表 “1,2,3,4,5,6″ * 星号 (‘*’) 代表所有可能的值 */15 表示每 15 分钟执行一次 # Use the ha…

异常检测 | 基于孤立森林(Isolation Forest)的数据异常数据检测(结合t-SNE降维可视化)

异常检测 | MATLAB实现基于孤立森林的数据异常检测 目录 异常检测 | MATLAB实现基于孤立森林的数据异常检测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现基于孤立森林(Isolation Forest)的数据异常数据检测可视化&#xff08;完整源码和数据) 基于孤立森林(…