当前位置: 首页 > news >正文

css:还是语法

emmet的使用

emmet是一个插件,Emmet 是 Zen Coding 的升级版,由 Zen Coding 的原作者进行开发,可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持,我们只是学会使用它:

生成html结构

<!-- emmet语法 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!--div*3--> <div></div><div></div><div></div><!--ul>li--><ui><l></l></ui><!--div+p--><div></div><p></p><!--.classname--><div class="nav"></div><!--#idname--><div id="user"></div><!--p.classname--><p class="numb"></p><span class="hello"></span><!--结合使用--><!--ui>li#username--><ul><li id="username"></li></ul><!--生成五个一样的,但是有序号区分,¥:自增--><!--.demo$*5--><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div><!--生成标签内默认文字--><!--div{文字}--><div>橘绿之泉</div><p>清晨茉莉</p>  </body></html>

生成css样式

可以用缩写,例如设置文本布局的时候需要输:text-align:center来设置在中间对齐,但是因为emmet的加持,输入tac(首字母缩写)就可以了

想设置长宽只要输入w100,h100,就可以把长和宽设置为100了

复合选择器

上一篇提到了选择器包括基础选择器和复合选择器,基础选择器包括:标签选择器,类选择器,id选择器,通配符选择器

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

复合选择器就是把我们常用的基础选择器进行了组合使用

后代选择器

后代选择器也叫包含选择器,可以选择父元素内的子元素

元素1和元素2 中间一定要空格隔开

元素1 元素2 {样式声明}
<!-- emmet语法 -->
<!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>/* 选中ol里的li */ol li {color: deeppink}</style>
</head><body><ol><li>我是ol的子元素1</li><li>我是ol的子元素2</li><li>我是ol的子元素3</li></ol><ul><li>我是ul的子元素1</li><li>我是ul的子元素2</li><li>我是ul的子元素3</li></ul>
</body></html>

因为我们是后代选择器,所以元素2可以是子代,也可以是孙代,总之是后代就行

<!-- emmet语法 -->
<!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>/* 选中ol里的li */ol li {color: deeppink}ol li a{color: cornflowerblue;}</style>
</head><body><ol><li>我是ol的子元素1</li><li>我是ol的子元素2</li><li>我是ol的子元素3</li><li><a href="#">我是ol的孙元素,li的子元素</a></li></ol><ul><li>我是ul的子元素1</li><li>我是ul的子元素2</li><li>我是ul的子元素3</li></ul>
</body></html>

这个元素1 除了是标签,也可以是类名。

例如一个body里有多个ul,我们就需要用class名来获取改变样式的对象,class也是一样可以这样一级一级索引的:

<!-- emmet语法 -->
<!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>ol li {color: deeppink}ol li a {color: cornflowerblue;}.ol2 li a {color: darkslateblue}</style>
</head><body><ol><li>我是ol的子元素1</li><li>我是ol的子元素2</li><li>我是ol的子元素3</li><li><a href="#">我是ol的孙元素,li的子元素</a></li></ol><ol class="ol2"><li>我是ol的子元素4</li><li>我是ol的子元素5</li><li>我是ol的子元素6</li><li><a href="#">我是ol的孙元素,li的子元素</a></li></ol><ul><li>我是ul的子元素1</li><li>我是ul的子元素2</li><li>我是ul的子元素3</li></ul>
</body></html>

子选择器

只能选择某元素的最近一级子元素,只能选亲儿子元素

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

并集选择器

选择多组标签一起定义样式

任何形式的选择器都可以作为并集选择器的一部分

用逗号分割:

元素1,元素2{声明
}
   div,p,ul>li {text-decoration: line-through;}

这句的意思就是把div,p,ul下的子li都变成line-through样式的

伪类选择器

给处于不同状态的选择器添加特殊效果,例如当我把鼠标放在一个链接上,这个链接的字体会改变:

伪类选择器有很多种,例如链接伪类、结构伪类

a:link             /*选择所有未被访问的链接 */
a:visited        /*选择所有已被访问的链接*/
a:hover         /*选择鼠标指针位于其上的链接*/
a:active        /*选择活动链接(鼠标按下未弹起的链接)*/

链接伪类

伪类选择器的特定是用冒号书写:

 a:link {color: black;text-decoration: none;}a:visited {color: aquamarine;}a:hover {color: blue;}a:active {color: fuchsia;}

四种样式:没点击过的是黑色,点击过的是青色,鼠标放置其上的是普鲁士蓝,按住链接的颜色是粉色

一样的代码放谷歌上可以,edge就不行,想把默认浏览器改成谷歌而也不行

怎么把浏览器默认改成谷歌啊啊啊啊啊edge一直爆bug

弹幕说在链接前面加一个#就会变为未访问,确实但是:

  • # 符号表示锚点链接,通常用于页面内跳转。例如:<a href="#section1">Go to section 1</a>

  • 如果 href 是以 # 开头并且没有指定具体的锚点 ID,那么它不会跳转到外部网址,而是仍停留在当前页面。这是为何你在不加井号时无法触发样式的问题,因为浏览器默认将其视为尚未访问的页面。

也就是说真的变成了一个访问不了的新连接,才会变成未访问

好了现在换了个插件,叫preview on web server,除了每次打开右上角会提示链接成功和需要自己ctrl+s以外没什么讨厌的东西,默认浏览器缓存谷歌了

(vscode中f11是全屏)

注意事项:

为了确保生效,按照:live-:visited-:hover-:active的顺序

链接和标题一样,需要自己单独指定样式,单独选择body标签是不会对里面的链接起作用的

按需写功能:有时候不需要写link和visited

focus伪类选择器

对表单的选择器,一般情况下作用在<input>类元素

input:focus {background-color: aquamarine;}

元素显示模式

元素<标签>是以什么方式进行显示,就叫元素显示模式

块元素

块元素一般用于结构化布局,特性是:

独占一行

高度、宽度、外边距和内边距可以自己控制

宽度是默认容器(也就是它的父级)的100%

他们自己也是一个容器,里面可以放行内元素或块元素

有的元素里是不能放块元素的,例如<p>,里面一般都是存放文字的,是放不了<div>等块元素,当然<h1>~<h6>.这种也不可以

常见的块元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,<div>是最典型的块状元素

行元素

行元素也叫内联元素,主要用于文本内容中

相邻行内元素在一行上,一行可以显示多个

设置不了宽和高

默认宽度就是内容的宽度

只能容纳文本和其他行内元素,不能容纳块元素

ps:链接里不能再放链接,特殊情况可以在里面放块级元素,例如一个块表示一个链接,但是这种情况需要转换

其中<span>是最典型的行内元素,一行可以放多个

ps:行内块元素

官方不这么叫,但是有些资料将有行也有块特性的元素称为行内块元素,例如<img/><input/><td>

特点:

相邻行内块元素在一行,但是直接略有空隙,一行可以显示多个(行内元素特点)

默认宽度就算内部内容的宽度(行内)

可以调整高、行高、外边距、内边距(块级)

并列的表单:

显示模式的转换

一个模式的元素需要另一个模式元素的特性的时候,就需要转换。比如我们需要一个链接作用到一个块上,比如这种:

一个小咒语:

display:block

这样用:

a {width: 150px;height: 50px;background-color: hotpink;display: block;
}

可以把元素转换未块元素,点击块就可以进入链接

转换为行内元素:

display:line

本来是这样:改完以后是这样:

可以看见宽度变成和内容一样长了(行内元素的特性)

转换为行内块元素:

display: inline-block;

小tip:如何使单行文字垂直居中

行高=盒子的高度

行高=一行文字距离上层文字底部的高度+文字高度+一行文字距离下层顶部的高度

一个小示例:

.css:

a {background-color: rgb(150, 144, 187);color: black;width: 230px;height: 40px;display: block;text-indent: 2em;text-decoration: none;line-height: 40px;
}a:hover {color: rgb(255, 255, 255);background-color: khaki;
}

.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo3</title><link rel="stylesheet" href="demo3.css">
</head><body><a href="#">大学英语</a><a href="#">数理方程</a><a href="#">模拟电子技术</a><a href="#">概率论与数理统计</a><a href="#">嵌入式与微机原理</a><a href="#">大学物理</a>
</body></html>

等有时间了来聊聊行高

相关文章:

css:还是语法

emmet的使用 emmet是一个插件&#xff0c;Emmet 是 Zen Coding 的升级版&#xff0c;由 Zen Coding 的原作者进行开发&#xff0c;可以快速的编写 HTML、CSS 以及实现其他的功能。很多文本编辑器都支持&#xff0c;我们只是学会使用它&#xff1a; 生成html结构 <!-- emme…...

关于 el-table 的合计行问题

目录 一.自定义合计行 二.合计行不展示&#xff0c;只有缩放/变大窗口或者F12弹出后台时才展示 三.合计行出现了表格滚动条下方 四.合计行整体样式的修改 五.合计行单元格样式修改 1.css 2.jsx方式 六.合计行单元格合并 一.自定义合计行 通过 show-summary 属性开启合计…...

解决SVN更新,提交错误乱码

执行清理操作&#xff0c;没有菜单的情况 1.点击TortoiseSVN-设置-如图勾选 注意&#xff1a;下图没有点击上下文菜单勾选清理 选择对应文件目录&#xff0c;执行【清理】操作 2.如果还是乱码&#xff0c;如上操作勾选解除文件锁定&#xff0c; 执行【破除锁定】后再次执行【…...

《Python网络安全项目实战》项目4 编写网络扫描程序

《Python网络安全项目实战》项目4 编写网络扫描程序 项目4 编写网络扫描程序任务4.1 扫描内网有效IP地址任务描述任务分析任务实施任务拓展 任务4.2 编写端口扫描工具任务描述任务分析任务实施相关知识任务评价任务拓展项目评价 项目4 编写网络扫描程序 许多扫描工具是由Pytho…...

Python金融大数据分析概述

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【海拥导航】&#x1f485; 想寻找共同学习交流&#xff0c;摸鱼划水的小伙伴&#xff0c;请点击【全栈技术交流群】 金融大数据分析在金融科技领域越来越重要&#xff0c;它涉及从海量数据中提取洞察&#xff0c;为金…...

黑马产品经理

1、合格的产品经理 什么是产品&#xff1f; 什么是产品经理&#xff1f; 想清楚产品怎么做的人。 合格的产品经理 2、产品经理的分类 为什么会有不同的分类&#xff1f; 按服务对象划分 按产品平台划分 公司所属行业不同&#xff08;不限于以下&#xff09; 工作内容划分 …...

机器学习——损失函数、代价函数、KL散度

&#x1f33a;历史文章列表&#x1f33a; 机器学习——损失函数、代价函数、KL散度机器学习——特征工程、正则化、强化学习机器学习——常见算法汇总机器学习——感知机、MLP、SVM机器学习——KNN机器学习——贝叶斯机器学习——决策树机器学习——随机森林、Bagging、Boostin…...

首次超越扩散模型和非自回归Transformer模型!字节开源RAR:自回归生成最新SOTA!

文章链接&#xff1a;https://arxiv.org/pdf/2411.00776 项目链接&#xff1a;https://yucornetto.github.io/projects/rar.html 代码&模型链接&#xff1a;https://github.com/bytedance/1d-tokenizer 亮点直击 RAR&#xff08;随机排列自回归训练策略&#xff09;&#x…...

C语言最简单的扫雷实现(解析加原码)

头文件 #define ROW 9 #define COL 9 #define ROWS ROW2 #define COLS COL2 #include <stdio.h> #include <stdlib.h> #include <time.h> #define numlei 10do while可以循环玩 两个板子&#xff0c;内板子放0&#xff0c;外板子放* set函数初始化两个板子 …...

20. 类模板

一、什么是类模板 类模板用于建立一个通用类&#xff0c;类中的成员数据类型可以不具体指定&#xff0c;用一个虚拟的类型来代替。它的语法格式如下&#xff1a; template<typename T>类模板与函数模板相比主要有两点区别&#xff1a;1) 类模板没有自动类型推导的方式。…...

SSL证书以及实现HTTP反向代理

注意&#xff1a; 本文内容于 2024-11-09 19:20:07 创建&#xff0c;可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容&#xff0c;请访问原文地址&#xff1a;SSL证书以及实现HTTP反向代理。感谢您的关注与支持&#xff01; 之前写的HTTP反向代理工具&…...

多种算法解决组合优化问题平台

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月11日7点12分 点击开启你的论文编程之旅https://www.aspiringcode.com/content?id17302099790265&uidef7618fa204346ff9…...

【笔记】LLC电路工作频点选择 2-1 输出稳定性的限制

LLC工作模式的分析参考了&#xff1a;现代电力电子学&#xff0c;电力出版社&#xff0c;李永东 1.LLC电路可以选择VCS也可以选择ZVS 1.1选择ZCS时&#xff0c;开关管与谐振电感串联后&#xff0c;与谐振电容并联&#xff1a; 1.2选择ZVS时&#xff0c;开关管仅仅安装在谐振电…...

Linux系统程序设计--2. 文件I/O

文件I/O 标准C的I/O FILE结构体 下面只列出了5个成员 可以观察到&#xff0c;有些函数没有FILE类型的结构体指针例如printf主要是一些标准输出&#xff0c;因为其内部用到了stdin&#xff0c;stdout&#xff0c;stderr查找文件所在的位置:find \ -name stat.h查找头文件所…...

右值引用——C++11新特性(一)

目录 一、右值引用与移动语义 1.左值引用与右值引用 2.移动构造和移动赋值 二、引用折叠 三、完美转发 一、右值引用与移动语义 1.左值引用与右值引用 左值&#xff1a;可以取到地址的值&#xff0c;比如一些变量名&#xff0c;指针等。右值&#xff1a;不能取到地址的值…...

JavaScript 观察者设计模式

观察者模式:观察者模式&#xff08;Observer mode&#xff09;指的是函数自动观察数据对象&#xff0c;一旦对象有变化&#xff0c;函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。 ES5/ES6实现观察者模式(自定义事件) - 简书 先搭架子 要有一个对象&#xff…...

鸿蒙进阶篇-网格布局 Grid/GridItem(二)

hello大家好&#xff0c;这里是鸿蒙开天组&#xff0c;今天让我们来继续学习鸿蒙进阶篇-网格布局 Grid/GridItem&#xff0c;上一篇博文我们已经学习了固定行列、合并行列和设置滚动&#xff0c;这一篇我们将继续学习Grid的用法&#xff0c;实现翻页滚动、自定义滚动条样式&…...

数据仓库之 Atlas 血缘分析:揭示数据流奥秘

Atlas血缘分析在数据仓库中的实战案例 在数据仓库领域&#xff0c;数据血缘分析是一个重要的环节。血缘分析通过确定数据源之间的关系&#xff0c;以及数据在处理过程中的变化&#xff0c;帮助我们更好地理解数据生成的过程&#xff0c;提高数据的可靠性和准确性。在这篇文章中…...

AndroidStudio-滚动视图ScrollView

滚动视图 滚动视图有两种: 1.ScrollView&#xff0c;它是垂直方向的滚动视图;垂直方向滚动时&#xff0c;layout_width属性值设置为match_parent&#xff0c;layout_height属性值设置为wrap_content。 例如&#xff1a; &#xff08;1&#xff09;XML文件中: <?xml ve…...

嵌入式硬件实战基础篇(一)-STM32+DAC0832 可调信号发生器-产生方波-三角波-正弦波

引言&#xff1a;本内容主要用作于学习巩固嵌入式硬件内容知识&#xff0c;用于想提升下述能力&#xff0c;针对学习STM32与DAC0832产生波形以及波形转换&#xff0c;对于硬件的降压和对于前面硬件篇的实际运用&#xff0c;针对仿真的使用&#xff0c;具体如下&#xff1a; 设…...

ElasticSearch的Python Client测试

一、Python环境准备 1、下载Python安装包并安装 https://www.python.org/ftp/python/3.13.0/python-3.13.0-amd64.exe 2、安装 SDK 参考ES官方文档: https://www.elastic.co/guide/en/elasticsearch/client/index.html python -m pip install elasticsearch一、Client 代…...

【eNSP】企业网络架构链路聚合、数据抓包、远程连接访问实验(二)

一、实验目的 网络分段与VLAN划分&#xff1a; 通过实验了解如何将一个大网络划分为多个小的子网&#xff08;VLAN&#xff09;&#xff0c;以提高网络性能和安全性。 VLAN间路由&#xff1a; 学习如何配置VLAN间的路由&#xff0c;使不同VLAN之间能够通信。 网络设备配置&am…...

独立站 API 接口的性能优化策略

一、缓存策略* 数据缓存机制 内存缓存&#xff1a;利用内存缓存系统&#xff08;如 Redis 或 Memcached&#xff09;来存储频繁访问的数据。例如&#xff0c;对于商品信息 API&#xff0c;如果某些热门商品的详情&#xff08;如价格、库存、基本描述等&#xff09;被大量请求…...

不一样的CSS(一)

目录 前言&#xff1a; 一、规则图形 1.介绍&#xff1a; 2.正方形与长方形&#xff08;实心与空心&#xff09; 2.1正方形&#xff1a; 2.2长方形 3.圆形与椭圆形&#xff08;空心与实心&#xff09; 3.1圆形与椭圆形 4.不同方向的三角形 4.1原理 4.2边框属性 5.四…...

题目:Wangzyy的卡牌游戏

登录 - XYOJ 思路&#xff1a; 使用动态规划&#xff0c;设dp[n]表示当前数字之和模三等于0的组合数。 状态转移方程&#xff1a;因为是模三&#xff0c;所以和的可能就只有0、1、2。等号右边的f和dp都表示当前一轮模三等于k的组合数。以第一行为例&#xff1a;等号右边表示 j转…...

国外云服务器高防多少钱一年?

国外云服务器高防多少钱一年&#xff1f;入门级高防云主机&#xff1a;这类主机通常具有较低的防御峰值&#xff0c;如30G或60G&#xff0c;价格相对较低。例如&#xff0c;30G峰值防御的高防云主机年费可能在2490元左右&#xff0c;而60G峰值防御的则可能在5044元左右。中等防…...

架构篇(04理解架构的演进)

目录 学习前言 一、架构演进 1. 初始阶段的网站架构 2. 应用服务和数据服务分离 3. 使用缓存改善网站性能 4. 使用应用服务器集群改善网站的并发处理能力 5. 数据库读写分离 6. 使用反向代理和CDN加上网站相应 7. 使用分布式文件系统和分布式数据库系统 8. 使用NoSQL和…...

【363】基于springboot的高校竞赛管理系统

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统高校竞赛管理系统信息管理难度大&#xff0c;容错率低&am…...

Spring Boot 监视器

一、Spring Boot 监视器概述 &#xff08;一&#xff09;什么是 Spring Boot 监视器 定义与作用 Spring Boot 监视器&#xff08;Spring Boot Actuator&#xff09;是一个用于监控和管理 Spring Boot 应用程序的工具集。它提供了一系列的端点&#xff0c;可以获取应用程序的运…...

Javascript如何获取指定网页中的内容?

这两天有一个需求&#xff0c;就是通过JS去获取网页的内容&#xff0c;当然&#xff0c;除了今天我要分享的这个方法以外&#xff0c;其实通过Ajax的Get方法也是可以实现这个功能的&#xff0c;但是Ajax就比较麻烦一些了&#xff0c;如果只是单纯的想要获取一下纯内容&#xff…...

腾讯网页游戏排行榜/朝阳区seo搜索引擎优化怎么样

在Android系统中用来显示界面的组件&#xff08;Component&#xff09;为Activity&#xff0c;也就是说只有重写Activity的onKeyDown方法来监控/拦截/屏蔽系统的返回键&#xff08;back&#xff09;、菜单键&#xff08;Menu&#xff09;及Home键。 1、拦截/屏蔽返回键、菜单键…...

茶叶公司网站的建设/百度框架户开户渠道代理

杂谈PHP极少关注的问题 本话题来自于我使用PHP进行网页爬虫的一次经历。对于一个web开发者来说&#xff0c;PHP解释器本身却知之甚小&#xff0c;实在是惭愧呐&#xff01; 首先这个话题要从几个提问开始。 PHP是什么&#xff1f; 外文名:PHP: Hypertext Preprocessor&#xff…...

阿里云怎么做静态网站/优化清理大师

shader language&#xff0c;称为着色语言&#xff0c;shade在英语是阴影、颜色深浅的意思。shader language基于物体本身属性和光照条件&#xff0c;计算美格橡塑的颜色值。 实际上这种解释具有明显的时代局限性&#xff0c;在GPU编程发展的早期&#xff0c;shader language的…...

ss网站代码/知乎推广

线程从创建、运行到结束总是处于下面五个状态之一&#xff1a;新建状态、就绪状态、运行状态、阻塞状态及死亡状态。 1.新建状态(New)&#xff1a; 当用new操作符创建一个线程时&#xff0c; 例如new Thread(r)&#xff0c;线程还没有开始运行&#xff0c;此时线程处在…...

网站怎么提高权重/网络推广合同

编码规范之低级BUG Author&#xff1a;OnceDay Date&#xff1a;2022年7月16日 1.要求 低级bug务必在代码自审的时候解决。 重点在于编程思维模型的优化。 2.九类低级BUG 编号BUG类型1内存使用后未释放2使用已释放的内存3变量未有效初始化&#xff08;特别是指针变量&…...

卫生计生加强门户网站建设/qq群推广网站免费

http://ac.jobdu.com/problem.php?pid1123 题目描述&#xff1a;辰辰是个很有潜能、天资聪颖的孩子&#xff0c;他的梦想是称为世界上最伟大的医师。为此&#xff0c;他想拜附近最有威望的医师为师。医师为了判断他的资质&#xff0c;给他出了一个难题。医师把他带到个到处都是…...