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>

等有时间了来聊聊行高

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

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

相关文章

常见计算机网络知识整理(未完,整理中。。。)

TCP和UDP区别 TCP是面向连接的协议&#xff0c;发送数据前要先建立连接&#xff1b;UDP是无连接的协议&#xff0c;发送数据前不需要建立连接&#xff0c;是没有可靠性&#xff1b; TCP只支持点对点通信&#xff0c;UDP支持一对一、一对多、多对一、多对多&#xff1b; TCP是…

javascript实现国密sm4算法(支持微信小程序)

概述&#xff1a; 本人前端需要实现sm4计算的功能&#xff0c;最好是能做到分多次计算。 本文所写的代码在现有sm4的C代码&#xff0c;反复测试对比计算过程参数&#xff0c;成功改造成sm4的javascript代码&#xff0c;并成功验证好分多次计算sm4数据 测试平台&#xff1a; …

深度解读AI在数字档案馆中的创新应用:高效识别与智能档案管理

一、项目背景介绍 在信息化浪潮推动下&#xff0c;基于OCR技术的纸质档案电子化方案成为解决档案管理难题的有效途径。该方案通过先进的OCR技术&#xff0c;能够统一采集各类档案数据&#xff0c;无论是手写文件、打印文件、复古文档还是照片或扫描的历史资料&#xff0c;都能实…

C++ | Leetcode C++题解之第554题砖墙

题目&#xff1a; 题解&#xff1a; class Solution { public:int leastBricks(vector<vector<int>>& wall) {unordered_map<int, int> cnt;for (auto& widths : wall) {int n widths.size();int sum 0;for (int i 0; i < n - 1; i) {sum wi…

【机器学习】强化学习(1)——强化学习原理浅析(区分强化学习、监督学习和启发式算法)

文章目录 强化学习介绍强化学习和监督学习比较监督学习强化学习 强化学习的数学和过程表达动作空间序列决策策略&#xff08;policy&#xff09;价值函数&#xff08;value function&#xff09;模型&#xff08;model&#xff09; 强化学习和启发式算法比较强化学习步骤代码走…

模糊搜索:在不确定性中寻找精确结果

目录 模糊搜索&#xff1a;在不确定性中寻找精确结果 一、引言 二、模糊搜索的背景 三、模糊搜索的原理 1、编辑距离&#xff08;Levenshtein Distance&#xff09;&#xff1a; 2、Jaccard 相似系数&#xff1a; 3、Soundex 算法&#xff1a; 4、TF-IDF&#xff08;词…

MyBatis5-缓存

目录 一级缓存 二级缓存 MyBatis缓存查询的顺序 整合第三方缓存EHCache 一级缓存 一级缓存是 SqlSession 级别的&#xff0c;通过同一个 SqlSession 查询的数据会被缓存&#xff0c;下次查询相同的数据&#xff0c;就会从缓存中直接获取&#xff0c;不会从数据库重新访问 一…

95.【C语言】数据结构之双向链表的头插,头删,查找,中间插入,中间删除和销毁函数

目录 1.双向链表的头插 方法一 方法二 2.双向链表的头删 3.双向链表的销毁 4.双向链表的某个节点的数据查找 5.双向链表的中间插入 5.双向链表的中间删除 6.对比顺序表和链表 承接94.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删文章 1.双向链表的头插 方法…

24-11-9-读书笔记(三十二)-《契诃夫文集》(六)上([俄] 契诃夫 [译] 汝龙)药品是甜的,真理是美的,咖啡是苦的,生活是什么啊?

文章目录 《契诃夫文集》&#xff08;六&#xff09;上&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;药品是甜的&#xff0c;真理是美的&#xff0c;咖啡是苦的&#xff0c;生活是什么啊&#xff1f;目录阅读笔记1. 新年的苦难2. 香槟3. 乞丐4. 仇敌5.薇罗琪卡6.在家里7. 太早…

【从零开始鸿蒙开发:01】自定义闪屏页

文章目录 大体介绍文件介绍各部分代码SplashPage.etsIndex.etsHomePage.etsroute_map.jsonmodule.json5 流程 大体介绍 文件介绍 其中&#xff1a; pages为我们的页面内容&#xff08;我个人理解功能性小于activity但是大于fragment&#xff09;route_map.json 为自定义的路由…

【Spring】获取Cookie和Session(@CookieValue()和@SessionAttribute())

文章目录 获取 Cookie传统获取 Cookie简洁获取 Cookie&#xff08;注解&#xff09; 获取 SessionSession 存储和获取简洁获取 Session (1)简洁获取 Session (2) 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给…

【机器学习】任务十:从函数分析到机器学习应用与BP神经网络

目录 1.从函数分析到机器学习应用 1.1 3D曲面图可视化报告 1.1.1 目标 1.1.2 代码分析 1.1.3 结果分析 1.1.4 观察与总结 1.1.5 结论 1.2 一元函数梯度计算报告 1.2.1 目标 1.2.2 代码分析 1.2.4 计算结果 1.2.5 优势与意义 1.2.6 结论 1.3 一元函数梯度和二阶导…

ios打包文件上传App Store windows工具

在苹果开发者中心上架IOS APP的时候&#xff0c;在苹果开发者中心不能直接上传打包文件&#xff0c;需要下载mac的xcode这些工具进行上传&#xff0c;但这些工具无法安装在windows或linux电脑上。 这里&#xff0c;我们可以不用xcode这些工具来上传&#xff0c;可以用国内的香…

Rust @绑定(Rust@绑定)(在模式匹配的同时将值绑定到变量)

文章目录 Rust中的绑定基础概念示例&#xff1a;基本模式匹配 绑定的使用示例&#xff1a;范围匹配并绑定变量 深入探索绑定的好处示例&#xff1a;复杂数据结构中的应用 总结 附加 Rust中的绑定 Rust 语言以其强类型系统和内存安全的特性著称。在进行模式匹配时&#xff0c;R…

JVM知识点大全(未完...)

JVM运行时数据区域 堆 堆是Java虚拟机中用于存储对象的主要区域&#xff0c;包括字符串常量池。绝大多数对象都是在堆中创建的&#xff08;少部分对象可能会在栈上分配&#xff09;。为了更好地进行垃圾回收&#xff0c;堆被划分为年轻代和老年代两部分。年轻代又被进一步分为E…

Nginx(编译)+Lua脚本+Redis 实现自动封禁访问频率过高IP

1.安装lua 1.1安装LuaJIT yum install readline-devel mkdir -p lua-file cd lua-file/ wget https://github.com/LuaJIT/LuaJIT/archive/refs/tags/v2.0.5.tar.gz tar -zxvf LuaJIT-2.0.5.tar.gz cd LuaJIT-2.0.5 make && make install PREFIX/usr/local/luajit 1.2…

Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型多变量回归预测

Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型多变量回归预测 目录 Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型多变量回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Transformer-GRU、Transformer、CNN-GRU、GRU、CNN五模型多变量回归预…

Java - SpringBoot之logback设置日期分割并设置指定时间自动清除,Linux启动运行

一、SpringBoot之logback-spring.xml配置 在Spring Boot中&#xff0c;要设置日志按照日期进行分割输出&#xff0c;并设置日志文件的大小自动清除&#xff0c;可以使用logback日志框架的配置 1、创建文件 在项目的resources目录下&#xff0c;创建logback-spring.xml文件 …

window11安装elasticsearch+Kibana

1、下载elasticsearch与elasticsearch 下载elasticsearch 查看elasticsearch对应的Kibana版本 下载elasticsearch解压后文件目录如下 可执行脚本文件,包括启动elasticsearch服务、插件管理、函数命令等 bin配置文件目录,如elasticsearch配置、角色配置、jvm配置等 conf 默认…

【HCIP园区网综合拓扑实验】配置步骤与详解(已施工完毕)

一、实验要求 实验拓扑图如上图所示 1、按照图示的VLAN及IP地址需求&#xff0c;完成相关配置 2、要求SW1为VLAN 2/3的主根及主网关 SW2为vlan 20/30的主根及主网关 SW1和SW2互为备份 3、可以使用super vlan&#xff08;本实验未使用&#xff09; 4、上层…