css:还是语法

news2024/11/13 4:01:21

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.coloradmin.cn/o/2238047.html

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

相关文章

YOLO即插即用---PConv

Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks 论文地址&#xff1a; 1. 论文解决的问题 2. 解决问题的方法 3. PConv 的适用范围 4. PConv 在目标检测中的应用 5. 评估方法 6. 潜在挑战 7. 未来研究方向 8.即插即用代码 论文地址&#xff1a; …

小白NAS磁盘规划实践:一次科学、高效的存储旅程

引言 如今,数字化生活正逐步渗透到我们生活的方方面面。从家庭影音到工作文件,从珍贵的照片到大型游戏库,数据的存储需求日益增加。许多朋友开始关注NAS(网络附加存储)设备。作为一个专为数据存储和管理设计的系统,NAS能为我们提供安全、高效的存储方案。但如何科学地规…

ADC前端控制与处理模块--AD7606_Module

总体框架 AD7606_Module主要由3个模块组成组成&#xff0c;AD7606_Data_Pkt和AD7606_Drive以及AD7606_ctrl。 1.AD7606_Data_Pkt主要作用是把AD芯片数据组好数据包&#xff0c;然后发送给上位机&#xff1b; 2.AD7606_Drive主要负责和芯片的交互部分 3.AD7606_ctrl控制模块的作…

注意力机制篇 | YOLO11改进 | 即插即用的高效多尺度注意力模块EMA

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。与传统的注意力机制相比&#xff0c;多尺度注意力机制引入了多个尺度的注意力权重&#xff0c;让模型能够更好地理解和处理复杂数据。这种机制通过在不同尺度上捕捉输入数据的特征&#xff0c;让模型同时关注局部细节和全局…

dell服务器安装ESXI8

1.下载镜像在官网 2.打开ipmi&#xff08;idrac&#xff09;&#xff0c;将esxi镜像挂载&#xff0c;然后服务器开机 3.进入bios设置cpu虚拟化开启&#xff0c;进入boot设置启动选项为映像方式 4..进入安装引导界面3.加载完配置进入安装 系统提示点击继 5.选择安装磁盘进行…

Linux -- 操作系统(软件)

目录 什么是操作系统&#xff1f; 计算机的层状结构 为什么要有操作系统 操作系统到底层硬件 驱动程序 操作系统如何管理硬件&#xff1f; 操作系统到用户 系统调用接口 库函数 回到问题 什么是操作系统&#xff1f; 操作系统&#xff08;Operating System&#xf…

【大数据算法】MapReduce算法概述之:MapReduce基础模型

MapReduce基础模型 1、引言2、MapReduce基础模型2.1 定义2.2 核心原理2.3 优点2.4 缺点2.5 局限性2.6 实例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;鱼哥&#xff0c; 不得了啊 小鱼&#xff1a;啥事情这么慌慌张张的 小屌丝&#xff1a;这不是慌张啊 小鱼&#x…

深入解析 Transformers 框架(四):Qwen2.5/GPT 分词流程与 BPE 分词算法技术细节详解

前面我们已经通过三篇文章&#xff0c;详细介绍了 Qwen2.5 大语言模型在 Transformers 框架中的技术细节&#xff0c;包括包和对象加载、模型初始化和分词器技术细节&#xff1a; 深入解析 Transformers 框架&#xff08;一&#xff09;&#xff1a;包和对象加载中的设计巧思与…

商品详情 API 接口的返回结果通常包含哪些信息?

商品详情 API 接口的返回结果通常包含以下几类信息&#xff1a; 一、商品基本信息&#xff1a; 商品 ID&#xff1a;唯一标识商品的编号&#xff0c;在电商平台的数据库中具有唯一性&#xff0c;用于区分不同的商品。商品标题&#xff1a;对商品的简要描述&#xff0c;通常包…

探索 Seata 分布式事务

Seata&#xff08;Simple Extensible Autonomous Transaction Architecture&#xff09;是阿里巴巴开源的一款分布式事务解决方案&#xff0c;旨在帮助开发者解决微服务架构下的分布式事务问题。它提供了高效且易于使用的分布式事务管理能力&#xff0c;支持多种事务模式&#…

AI写作(七)的核心技术探秘:情感分析与观点挖掘

一、AI 写作中的关键技术概述 情感分析与观点挖掘在 AI 写作中起着至关重要的作用。情感分析能够帮助 AI 理解文本中的情感倾向&#xff0c;无论是正面、负面还是中性。在当今信息时代&#xff0c;准确把握用户情绪对于提供个性化体验和做出明智决策至关重要。例如&#xff0c;…

容器化技术入门:Docker详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 引言 Doc…

Flutter运行App时出现“Running Gradle task ‘assembleDebug“问题解决

在参考了众多解决办法中最有用并且最快的方法 Gradle Distributions 在这个地方下载对应你这个文件中的gradle版本 然后将 最后一行本来不是这样的,我们把下载好的zip包保存到本地,然后用这个代替网址,最后成功运行

Spark中的shuffle

Shuffle的本质基于磁盘划分来解决分布式大数据量的全局分组、全局排序、重新分区【增大】的问题。 1、Spark的Shuffle设计 Spark Shuffle过程也叫作宽依赖过程&#xff0c;Spark不完全依赖于内存计算&#xff0c;面临以上问题时&#xff0c;也需要Shuffle过程。 2、Spark中哪…

window11安装elasticsearch+Kibana

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

linux rocky 9.4部署和管理docker harbor私有源

文章目录 Harbor简介安装Harbor技术细节1.安装系统(略),设置主机名和IP2.安装docker3.安装docker-compose4.安装Harbor私有源仓库5 测试登录1.本机登录2.客户端登录Harbor服务器配置docker源1. 下载镜像2.把镜像上传到Harbor私有仓库源3.客户端下载镜像,并且启动容器linux …

【计算机网络五】HTTP协议!网站运行的奥秘!

目录 HTTP协议 1.HTTP是什么&#xff1f; 2.Fiddler抓包查看HTTP协议格式 3.HTTP请求 4.HTTP响应 HTTP协议 1.HTTP是什么&#xff1f; HTTP ( 全称为 " 超文本传输协议 ") 诞生与 1991 年 . 目前已经发展为最主流使用的一种应用层协议 . HTTP 的前几个版本…

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

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

ubuntu 24.04运行chattts时cuda安装错误原因分析

使用ubuntu 24.04&#xff0c;按照2noise/ChatTTS官方流程安装依赖时报错。ChatTTShttps://github.com/2noise/ChatTTS 这是因为cuda版本不对&#xff0c;ChatTTS目前的版本&#xff0c;要求支持cuda 12.4及以上&#xff0c;但是如果nvidia显卡驱动版本较老&#xff0c;无法支…

【动态规划】斐波那契数列模型总结

一、第 N 个泰波那契数 题目链接&#xff1a; 第 N 个泰波那契数 题目描述&#xff1a; 题目分析&#xff1a; 1、状态表示&#xff1a; dp[i] 表示&#xff1a;第 i 个斐波那契数的值 2、状态转移方程&#xff1a; 由题意可知第 i 个数等于其前三个数之和 dp[i] dp[i-…