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

02-CSS

news 文章来源：https://blog.csdn.net/qq_62594984/article/details/129401836 2025/4/9 20:46:54

一、emmet语法

1、简介

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

快速生成HTML结构语法

快速生成CSS样式语法

2、快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>

如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div

如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

如果有兄弟关系的标签，用 + 就可以了比如 div+p

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

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

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

3、快速生成CSS样式语法

CSS 基本采取简写形式即可

比如 w200 按tab 可以生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

4、快速格式化代码

Vscode 快速格式化代码: shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

"editor.formatOnType": true,

"editor.formatOnSave": true

二、css的复合选择器

1、什么是复合选择器？

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

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

2、后代选择器 (重要）

定义：

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

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

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

例如：

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开

元素1 是父级，元素2 是子级，最终选择的是元素2

元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

元素1 和元素2 可以是任意基础选择器

3、子选择器 (重要）

定义：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。（简单理解就是选亲儿子元素）

语法：

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

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

例如：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和元素2 中间用大于号隔开

元素1 是父级，元素2 是子级，最终选择的是元素2

元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

课堂提问

1. 请将下面的链接文字修改为红色。

<div class="nav"><ul><li><a href="#">百度</a></li><li><a href="#">百度</a></li></ul>
</div>

.nav ul li a {color: red;
}

2. 请将下面的大肘子文字修改为红色。

<div class="hot"><a href="#">大肘子</a><ul><li><a href="#">猪头</a></li><li><a href="#">猪尾巴</a></li></ul>
</div>

.hot>a {color: red;
}

4、并集选择器 (重要）

定义：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和元素2。

例如：

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和元素2 中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

5、伪类选择器

定义：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法：

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

a:link没有点击过的(访问过的)链接

a:visited点击过的(访问过的)链接

a:hover鼠标经过的那个链接

a:active鼠标正在按下还没有弹起鼠标的那个链接

6、链接伪类选择器

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

记忆法：love hate 或者 lv 包包 hao 。

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

 /* a 是标签选择器 所有的链接 */ a { color: gray;}/* :hover 是链接伪类选择器 鼠标经过 */a:hover { color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */}

7、:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取

例子：

input:focus { background-color:yellow;
}

8、复合选择器总结

三、css的显示模式

1、什么是元素的显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML 元素一般分为块元素和行内元素两种类型。

2、元素显示模式的分类

2.1、块元素

常见的块元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>>等，其中 <div> 标签是最典型的块元素。

块级元素的特点：

比较霸道，自己独占一行。

高度，宽度、外边距以及内边距都可以控制。

宽度默认是容器（父级宽度）的100%。

是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能放块级元素

<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2.2、行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

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

高、宽直接设置是无效的。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接

特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

2.3、行内块元素

常见的行内块标签：

<img />、<input />、<td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。

一行可以显示多个（行内元素特点）。

默认宽度就是它本身内容的宽度（行内元素特点）。

高度，行高、外边距以及内边距都可以控制（块级元素特点）。

2.4、元素显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

3、元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性

比如想要增加链接 <a> 的触发范围。

转换方式

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

案例：简洁版小米侧边栏

案例的核心思路分为两步:

1. 把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.

2. 鼠标经过a 给链接设置背景颜色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简单版小米侧边栏</title><style>/* 1. 把a转换为块级元素 */a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;}/* 2 鼠标经过链接变换背景颜色 */a:hover {background-color: #ff6700;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

4、单行文字垂直居中的代码

解决方案:

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

简单理解:

行高的上空隙和下空隙把文字挤到中间了，

如果行高小于盒子高度,文字会偏上，

如果行高大于盒子高度,则文字偏下。

四、css的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1、背景颜色

样式名称：

background-color 定义元素的背景颜色

使用方式：

background-color:颜色值;

其他说明：

元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent;

2、背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url)background-image : none
background-image : url (./url/1.jpg)

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

3、背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

4、背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

其他说明：

1、参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5、背景图片固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

background-attachment : scroll | fixed

6、背景样式合写

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

这是实际开发中，我们更提倡的写法。

7、背景色半透明

CSS3 提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间

我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

注意：

背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

8、背景总结

案例：五彩导航

1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.

2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.

3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.

4. 鼠标经过变化背景图片,因此需要用到链接伪类选择器.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>综合案例-五彩导航</title><style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url(images/bg1.png) no-repeat;}.nav .bg1:hover {background-image: url(images/bg11.png);}.nav .bg2 {background: url(images/bg2.png) no-repeat;}.nav .bg2:hover {background-image: url(images/bg22.png);}</style>
</head><body><div class="nav"><a href="#" class="bg1">五彩导航</a><a href="#" class="bg2">五彩导航</a><a href="#">五彩导航</a><a href="#">五彩导航</a><a href="#">五彩导航</a></div>
</body></html>

02-CSS

一、emmet语法1、简介Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。快速生成HTML结构语法快速生成CSS样式语法2、快速生成HTML结构语法生成标签直接输入标签名按tab键即可比如 div 然后tab 键， 就可以生成 <…...

编程日记 2023/3/9 13:50:03

JavaScript 中的类型转换机制以及==和===的区别

目录一、概述二、显示转换Number()parseInt()String()Boolean()三、隐式转换自动转换成字符串自动转换成数值四、和区别1、等于操作符2、全等操作符3、区别小结一、概述我们知道，JS中有六种简单数据类型：undefined、null、boolean、string、number、…...

编程日记 2023/3/9 13:48:56

RocketMQ基础篇（一）

目录一、发送消息类型1、同步消息2、异步消息3、单向消息4、顺序消费5、延迟消费二、消费模式1、集群模式2、广播模式3、消费模式扩展4、如何配置三、其他用法1、事务消息2、过滤消息1）Tag过滤2）SQL方式过滤源码放到了GitHub仓库上，地址 http…...

编程日记 2023/3/9 13:47:54

Android前沿技术—gradle中的build script详解

build.gradle是gradle中非常重要的一个文件，因为它描述了gradle中可以运行的任务，今天本文将会带大家体验一下如何创建一个build.gradle文件和如何编写其中的内容。 project和task gradle是一个构建工具，所谓构建工具就是通过既定的各种规则…...

编程日记 2023/3/9 13:46:51

深入浅出PaddlePaddle函数——paddle.zeros_like

分类目录：《深入浅出PaddlePaddle函数》总目录相关文章： 深入浅出PaddlePaddle函数——paddle.Tensor 深入浅出PaddlePaddle函数——paddle.ones 深入浅出PaddlePaddle函数——paddle.zeros 深入浅出PaddlePaddle函数——paddle.full 深入浅出Padd…...

编程日记 2023/4/15 8:09:23

物料-零部件分类属性

离散制造业的研发、生产跟产品零部件紧密联系在一起，从企业业务流程来说零部件涉及研发、采购、仓储、生产、质量、售后和配件等多个部门，为了更好地管理零部件，下面我们一起来看看零部件概念及分类。 1、按行业属性分类 （1&…...

编程日记 2023/4/15 8:09:19

TypeError: cannot pickle ‘module‘ object

创建python对象时报错： TypeError: cannot pickle module object 原因： 很大可能是类成员错误的使用了第三方包（别名）等，具体排查方法可参考： import redisimport pickle from pprint import pformat as …...

编程日记 2023/4/15 8:09:16

[MySQL索引]3.索引的底层原理（二）

索引的底层原理（二）InnoDB的主键和二级/辅助索引树（涉及回表）MyISAM存储引擎的主键和二级索引树InnoDB的主键和二级/辅助索引树（涉及回表） 看下面这张student数据库表： 场景一：uid…...

编程日记 2023/4/15 8:09:13

JavaScript混淆——逆向思维的艺术

在本文中我们将介绍三种常见的JavaScript混淆技术。 1.混合名称通过将函数名称和变量名混合使用，我们可以使代码更难读。下面是一个使用名称混合的JavaScript函数。 function c(a){var b[2,4,8,a],db[0]b[1]b[2]b[3],ed""a;return e}混合名称技术通过…...

编程日记 2023/4/15 8:09:10

数据库管理-第六十期监听（20230309）

数据库管理 2023-03-09第六十期期监听1 无法访问2 监听配置3 问题复现与解决4 静态监听5 记不住配置咋整总结第六十期期监听不知不觉又来到了一个整10期数，我承认上一期有很大的划水的。。。嫌疑吧，本期内容是从帮群友解决ADG前置配置时候的一个问题…...

编程日记 2023/4/14 15:33:52

概率论与数理统计相关知识

本博客为《概率论与数理统计－－茆诗松（第二版）》阅读笔记，目的是查漏补缺前置知识数学符号连乘符号：；总和符号：；“任意”符号：∀；“存在”符号&…...

编程日记 2023/4/15 8:09:07

SOC计算方法：卡尔曼滤波算法

卡尔曼滤波算法是一种经典的状态估计算法，它广泛应用于控制领域和信号处理领域。在电动汽车领域中，卡尔曼滤波算法也被广泛应用于电池管理系统中的电池状态估计。其中，电池的状态包括电池的剩余容量（SOC）、内阻、温度等…...

编程日记 2023/4/15 8:09:04

【C语言】自定义类型、枚举类型与宏定义

目录一、自定义类型二、宏定义三、枚举类型一、自定义类型自定义类型关键字：typedef，用新的类型名称代替原有的类型名。例如： typedef char u8; u8 x;表示指定u8为新的类型名，代替char，作用与char相同，…...

编程日记 2023/4/15 8:09:00

Java进阶（下篇2）

Java进阶（下篇2）一、IO流01.File类的使用1.1、File类的实例化1.2、File类的常用方法11.3、File类的常用方法21.4、课后练习02、IO流原理及流的分类2.1、IO流原理2.2、流的分类2.3、IO 流体系03、节点流(或文件流)3.1、FileReader读入数据的基本操作3.2、…...

编程日记 2023/4/15 8:08:55

03单链表

、# 单链表单链表是一种链式存储的数据结构，用一组地址任意的存储单元存放线性表中的数据元素。单链表中的每个结点包含一个数据域和一个指针域，数据域存放数据元素，指针域存放下一个结点的地址。单链表的第一个结点称为头结点，…...

编程日记 2023/4/15 8:08:52

ESLint、Prettier插件的安装与使用

在统一代码风格这一块，通常大家都会用到ESLint。虽然 ESLint 本身具备自动格式化代码的功能，但ESLint 的主要优势在于代码的风格检查并给出提示，而在代码格式化这一块 Prettier 做的更加专业，因此在实际项目开发中我们经常将 ESLi…...

编程日记 2023/4/15 8:08:49

matlab在管理学中的应用简matlab基础【三】

规划论及MATLAB计算 1、线性规划问题的提出例1. 某工厂在计划期内要安排甲、乙两种产品的生产，已知生产单位产品所需的资源A、B、C的消耗以及资源的计划期供给量，如下表： 问题：工厂应分别生产多少单位甲、乙产品才能使工厂获…...

编程日记 2023/4/15 8:08:45

NDK JNI 变声器实现

Android NDK 导入 C库的开发流程学习；通过使用fmod的C库，实现变声器功能。导入库文件1）复制fmod的C库到cpp目录下2）复制fmod的so库到jniLibs目录下3）复制fmod的jar库到libs目录下4）将声音文件复制到assets目…...

编程日记 2023/4/15 8:08:42

VMLogin防关联指纹浏览器的主帐号和子账号区别介绍

VMLogin主账户管理子账户，主要用于团队协作，分账户登录使用，主账户相当于老板，子账户相当于员工。主账户创建并管理子账户； 主账户可以修改子账户的密码； 主账户可以设置子账户是否有创建配置文件权限&a…...

编程日记 2023/4/15 8:08:39

Apache DolphinScheduler GitHub Star 突破 10000！

点击蓝字关注我们今天，Apache DolphinScheduler GitHub Star 突破 10000，项目迎来一个重要里程碑。这表明 Apache DolphinScheduler 已经在全球的开发者和用户中获得了广泛的认可和使用。DolphinScheduler 旨在解决公司日常运营中的大数据处理工作流调度…...

编程日记 2023/4/15 8:08:35

程序员中的女性力量——做不被定义的自己

她是office lady，亦是程序媛，程序员界的靓丽色彩，不可或缺。 “只有那些疯狂到以为自己能够改变世界的人——才能真正改变世界。” 女性该如何定义自己？程序媛怎么发挥自己最大的价值。争取自己做选择，经济和思想都独…...

编程日记 2023/4/15 8:08:32

pb中Datawindow中每页打印固定行

Datawindow中每页打印固定行第一步：增加一个计算列,此计算列必须放在Detail段，Expression中输入:ceiling(getrow()/20)，这里20还可以用全局函数取代，这样可以允许用户任意设置每页打印多少行。第二步：定义分组,选择菜单Rows->Create Group...按计算列字段…...

编程日记 2023/4/15 8:08:29

华为OD机试 - 内存池（C 语言解题）【独家】

最近更新的博客华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理已参加机试人员的实战技巧文章目录使用说明本期题目：内存池题…...

编程日记 2023/4/15 8:08:26

SaaS简介

SaaS 简介 SaaS被认为是云计算的一部分，其他包括基础设施即服务(IaaS)、平台即服务(PaaS)、桌面即服务(DaaS)、托管软件即服务(MSaaS)、移动后端即服务(MBaaS)、数据中心即服务(DCaaS)、集成平台即服务(iPaaS)和信息技术管理即服务(ITMaaS) SaaS应用程序通常由web浏…...

编程日记 2023/4/15 8:08:23

//速度 public Image SpeedNums_Unit; public Image SpeedNums_Ten; //public Image SpeedNums_Hundred; //kw public Image MileageNums_Unit; public Image MileageNums_Ten; /// /// 仪表速度UI /// private void SpeedUI(string speedStr) {if (SpeedNums_Unit == null) …...

编程日记 2023/4/15 8:08:20