CSS导读 (Emmet语法)

(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

续:七、Chrome调试工具

一、Emmet语法

1.1  快速生成HTML结构语法

1.2  快速生成CSS样式语法


续:CSS样式表:Chrome调试工具。

续:七、Chrome调试工具

Chrome 浏览器提供了一个非常好用的周试工具,可以用来调试我们]的HTML结构何css样式。

1. 打开调试工具: 打开Chrome 浏览器,按下 F12键 或 右击空白页面处→检查

2.使用调试工具:

  • ctrl+滚轮可以放大开发者工具代码大小。 
  • 左边是HTML元素结构,右边是CSS样式。 
  • 右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。 
  • ctrl+0复原浏览器大小。
  • 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
  • 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。 

 

续 结束,接下来是新的知识


目标

  • 能使用emmet语法
  • 能够使用CSS复合选择器
  • 能够写出伪类选择器的使用规范
  • 能够说出元素有几种显示模式
  • 能够写出元素显示模式的相互转换代码
  • 能够写出背景图片的设置方式
  • 能够计算CSS权重

目录大纲

  • emmet语法
  • CSS的复合选择器
  • CSS的元素显示模式
  • CSS的背景
  • CSS的三大特性
  • CSS的注释

一、Emmet语法

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

1.1  快速生成HTML结构语法

1. 生成标签,直接输入标签名,按tab链即可;

 比如   div,然后tab键,就可以生成<div>/div>

2.  如果想要生成多个相同标签,加上 * 就可以了。

比如  div+3,就可以快速生成3个div

3.  如果有父子级关系的标签,可以用>;

比如  ul> li 就可以了

4.  如果有兄弟关系的标签,用+就可以了;

比如div + p

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

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

.demo $*5

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

1.2  快速生成CSS样式语法

CSS基本采取简写形式即可:

  1.  比如  w200 按tab 可以生成width: 200px;
  2.  比如  lh26   按tab可以生成line-height: 26px;

自动格式化设置:

  1. 打开设置
  2. 点击文本编辑器
  3. 点击其中的格式化
  4. 勾选其中的 Format On Paste 和 Format On Save即可

 

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:人生就是这样,要耐的住寂寞,才守得住繁华。) 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从概念到实践:揭开枚举与联合体在数字化创新时代的神秘面纱

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 在编程的世界中&#xff0c;枚举和联合体是两种非常基础且重要的数据结构。它们各自具有独特的特点和用途&#xff0c;为程序员提供…

【人工智能】AI赋能城市交通 未来城市的驱动力

前言 随着城市化进程的不断加速&#xff0c;交通拥堵、环境污染等问题日益凸显&#xff0c;人们对交通系统的效率和可持续性提出了更高的要求。在这样的背景下&#xff0c;智能交通技术正成为改善城市交通的重要驱动力。本文将探讨智能交通技术在解决城市交通挑战方面的应用和未…

算法打卡26

今日任务&#xff1a; 1&#xff09;332.重新安排行程 2&#xff09;51.N皇后 3&#xff09;37.解数独 332.重新安排行程 题目链接&#xff1a;332. 重新安排行程 - 力扣&#xff08;LeetCode&#xff09; 给定一个机票的字符串二维数组 [from, to]&#xff0c;子数组中的两个…

Junit单元测试框架 --java学习笔记

单元测试 就是针对最小的功能单元(方法)&#xff0c;编写测试代码对其进行正确性测试 之前是如何进行单元测试的?有什么问题? 只能在main方法编写测试代码&#xff0c;去调用其他方法进行测试无法实现自动化测试&#xff0c;一个方法测试失败&#xff0c;可能影响其他方法…

Android Studio 生成 keystore 签名文件及打包验证流程

一、创建keystore签名文件 1、在菜单栏中&#xff0c;依次点击 Build - Generate Signed Bundle/Apk...(生成签名) 2、选择 APK 选项&#xff0c;点击按钮 Next 到下一步 3、新建key store秘钥文件&#xff0c;点击按钮 Next 到下一步 4、按如下提示填写信息&#xff0c;点击按…

微服务篇面试题

1、SpringCloud的组件有哪些&#xff1f; 2、负载均衡如何实现&#xff1f; 3、什么是服务雪崩&#xff1f;怎么解决&#xff1f; 4、项目中有没有做过限流&#xff1f; Tomcat单体可以&#xff0c;分布式不适合 5、解释一下CAP和BASE P&#xff1a;加入node03这边的网络断了&a…

逆向案例十六——简单webpack逆向,财联社信息

网址链接&#xff1a;财联社A股24小时电报-上市公司动态-今日股市行情报道 数据包sign参数为加密&#xff0c;可以直接搜索找参数的位置&#xff0c;搜索不到的情况下&#xff0c;在断点跟栈&#xff1a; 确定js文件所在位置&#xff0c;并打上断点。 点击加载刷新页面。可以发…

diffusion model(十五) : IP-Adapter技术小结

infopaperhttps://arxiv.org/pdf/2308.06721.pdfcodehttps://github.com/tencent-ailab/IP-Adapterorg.Tencent AI Lab个人博客地址http://myhz0606.com/article/ip_adapter 1 Motivation 为了对文生图diffusion model进行特定概念的定制&#xff0c;常用LoRA[1]、textual in…

一种驱动器的功能安全架构介绍

下图提供了驱动器实现安全功能的架构 具有如下特点&#xff1a; 1.通用基于总线或者非总线的架构。可以实现ethercat的FSOE&#xff0c;profinet的profisafe&#xff0c;或者伺服本体安全DIO现实安全功能。 2.基于1oo2D架构&#xff0c;安全等级可以达到sil3。 3.高可用性。单…

【数据库】PostgreSQL源码编译安装方式与简单配置(v16.2)

PostgreSQL源码编译安装方式与简单配置&#xff08;v16.2&#xff09; 一、PostgreSQL安装基本介绍1.1 几种PostgreSQL的安装方式1.2 删除原有的PostgreSQL1.3 编译安装过程简介 二、源码编译安装方式详情2.1 下载源代码2.2 编译安装运行 configure执行 make执行 make install …

制造业、能源等传统行业进行数字化转型时要注意哪些问题?

制造业、能源等传统行业在进行数字化转型时需要注意以下几个关键问题&#xff1a; 1、明确转型目标和战略规划&#xff1a;企业需要根据自身的业务特点、市场需求和长远发展目标&#xff0c;制定清晰的数字化转型战略。包括确定转型的重点领域、预期成果、时间表和资源投入。 …

【二叉树】【递归】Leetcode 543. 二叉树的直径

【二叉树】【递归】Leetcode 543. 二叉树的直径 解法1 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 解法1 class Solution {int result 0; // 定义一个全局变量result收获每一个节点为转折点的长度public int diame…

Python基础语法及应用

一、基本数据类型及应用 1、基本数据 &#xff08;1&#xff09;整数&#xff08;int&#xff09; 在 Python 中&#xff0c;整数是一种基本的数据类型&#xff0c;用于表示没有小数部分的数字&#xff0c;整数没有固定的最大值&#xff0c;可以根据系统内存动态调整。Pytho…

LeetCode-移除元素

题目 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长…

最简单知识点PyTorch中的nn.Linear(1, 1)

一、nn.Linear(1, 1) nn.Linear(1, 1) 是 PyTorch 中的一个线性层&#xff08;全连接层&#xff09;的定义。 nn 是 PyTorch 的神经网络模块&#xff08;torch.nn&#xff09;的常用缩写。 nn.Linear(1, 1) 的含义如下&#xff1a; 第一个参数 1&#xff1a;输入特征的数量…

服务器 安装1Panel服务器运维管理面板

服务器 安装1Panel服务器运维管理面板 SSH链接服务器安装1Panel 出现此提示时输入目标路径&#xff0c;须以“/”开头&#xff0c;默认&#xff1a;/opt&#xff0c;本例&#xff1a;/www。 出现此提示时输入目标端口&#xff0c;须未被使用的端口&#xff0c;默认&#xff1…

媒体邀约专访如何深入地做一篇专访报道?流程分享

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 进行媒体邀约专访并深入撰写一篇专访报道是一个系统性工作&#xff0c;涉及多个环节。以下是一个详细的流程分享&#xff1a; 一、前期准备 确定专访目的与主题&#xff1a;明确专访希望…

一文了解低功耗蓝牙BLE

低功耗蓝牙技术可以构建两种类型的设备:双模设备和单模设备。双模设备既支持经典蓝牙又支持低功耗蓝牙。单模设备只支持低功耗蓝牙。还有仅支持经典蓝牙的设备。 在链路层,设备被分为广播者、扫描者、从设备和主设备。广播者是传输数据包的设备,扫描者是接收广播者的数据包…

华大单片机新建工程步骤

1.新建文件夹&#xff0c;比如00_LED 2.拷贝 hc32f460_ddl_Rev2.2.0\driver 到 00_LED 3.拷贝 hc32f460_ddl_Rev2.2.0\mcu\common 到 00_LED 4.拷贝 hc32f460_ddl_Rev2.2.0\example\ev_hc32f460_lqfp100_v2\gpio\gpio_output\source 到 00_LED 5.拷贝 hc32f460_ddl_Rev2.2.…

【C++】C++11可变参数模板

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 可变参数模板的定义…