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

css-选择器、常见样式、标签分类

news 2025/11/30 6:49:48

CSS

CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

1.层叠

多个样式可以作用在同一个html的标签上

2.样式表

提供了丰富的样式修饰内容

3.作用

样式丰富，功能强大
内容和样式分离(解耦)

CSS的使用

1.行内样式

在标签中使用style属性进行CSS样式设置
样式名与样式值之间用冒号隔开
样式与样式之间用分号隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div style="width:500px;height:500px;background-color: rgb(90, 139, 102);"></div>
</body>
</html>

2.内部样式

在<head>标签中使用<style>标签进行设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

3.外部样式

将CSS样式独立到.css的文件中
再将这个文件导入到需要使用这些样式的HTML文件中，使用标签。

（1）index.html 页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link href="css/demo.css" rel="stylesheet">
</head>
<body><div></div><div></div>
</body>
</html>

(2) demo.css css文件

div{width: 200px;height: 200px;background-color: red;
}

4.三种样式的优先级 (就近原则)

行内样式>(内部样式&外部样式)

5.三种样式的生效范围

外部样式>内部样式>行内样式

CSS选择器

1.CSS选择器

（1）为什么需要选择器

内部样式和外部样式中，需要去找到要设置样式的标签，这时就需要选择器。

（2）语法

选择器{样式名1:样式值1;……}

2.基本选择器

（1）标签选择器

通过标签名来获取标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div></div><div></div>
</body>
</html>

(2) ID选择器

通过标签的ID属性的值来获取标签
注意：ID属性值在当前页面上是唯一的
使用 ‘*’

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#test{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div>div1</div><div>div2</div><div id="test">div3</div><div>div4</div>
</body>
</html>

（3）class选择器

通过标签的class属性值来获取标签
注意：class属性值可以重复
使用 ‘.’

<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.demo{color: red;}</style>
</head>
<body><div>div1</div><div class="demo">div2</div><div>div3</div><div>div4</div><p class="demo">p1</p>
</body>
</html>

（4）三大基本选择器的优先级

ID选择器>class选择器>标签选择器

2.其他选择器

（1）全局选择器

选中当前页面上所有的标签
使用 ‘*’

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>*{background-color: red;}</style>
</head>
<body><div>这是DIV</div><div>这是DIV</div><div class="last">这是DIV</div><p>这是P标签</p><p class="last">这是P标签</p>
</body>
</html>

（2）组合选择器

选中当前页面上所选中的标签
使用 ‘,’

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>#test,p,span{color: red;}</style>
</head>
<body><div>这是DIV</div><div id="test">这是DIV</div><div>这是DIV</div><p>这是P标签</p><p>这是P标签</p><span>这是span</span>
</body>
</html>

（3）层级选择器（后代选择器）

使用空格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div span{color: red;}</style>
</head>
<body><div><p><span>这是最里面的span</span></p><span>这是div的儿子span</span></div><span>这是div的兄弟span</span>
</body>
</html>

（4）子选择器

选择定位到的标签
使用 ‘>’

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div>span{color: red;}</style>
</head>
<body><div><p><span>这是最里面的span</span></p><span>这是div的儿子span</span></div><span>这是div的兄弟span</span>
</body>
</html>

（5）属性选择器

使用：[属性名=属性值]
获取所有属性名是属性值的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>[title=last]{color: red;}</style>
</head>
<body><div title="first">这是DIV</div><div>这是DIV</div><div title="last">这是DIV</div><div>这是DIV</div><div title="last">这是DIV</div><p title="last">这是P</p>
</body>
</html>

（6）伪类选择器

主要针对超链接
a:link{}：未被访问时
a:visited{}：访问过后
a:hover{}：鼠标悬浮时（hover也可以用于其他标签）
a:active{}：鼠标激活时，点击未释放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>a:link{color: black;text-decoration: none;}a:visited{color: gainsboro;}a:hover{color: pink;}a:active{color: aqua;}</style>
</head>
<body><a href="http://www.taobao.com">淘宝</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的选择器</title><style>div:hover{color: pink;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

CSS常见样式

1.尺寸样式

height：设置元素的高度
width：设置元素的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div>这是DIV</div>这是测试
</body>
</html>

2.字体样式

font-size：字体大小
font-style：字体风格(取值：italic/normal…)
- italic 斜体
- normal : 默认值。正常的字体
font-family：字体类型(取值：隶书/微软雅黑…)
font-weight：字体粗细取值:Normal 默认值。
- bold 粗体字符
- bolder 更粗的字符
- lighter 定义更细的字符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>span{font-size: 42px;font-style: italic;font-family: '宋体';font-weight: bold;}</style>
</head>
<body><span>这是SPAN</span>
</body>
</html>

3.字体样式

color：文本颜色（取值：colorname或#0000FF）
text-align：文本对齐（取值：left/right/center…）
text-decoration：文本装饰，取值:none默认。
- underline下划线。
- overline上划线
- line-through删除线
line-height：设置行高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 400px;height: 200px;background-color: aquamarine;color: red;text-align: center;text-decoration: line-through;line-height: 200px;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

4.边框样式

border-width：边框宽度，按方向设置：border-(left/right/top/bottom)-width
border-color：边框颜色，按方向设置：border-(left/right/top/bottom)-color
border-style：边框风格，按方向设置：border-(left/right/top/bottom)-style

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: aquamarine;/* border: 10px black solid; */border-top-width: 10px;border-right-width: 20px;border-bottom-width: 30px;border-left-width: 40px;border-top-color: red;border-right-color: gray;border-bottom-color: yellow;border-left-color: orange;border-top-style: solid;border-right-style: double;border-bottom-style: dashed;border-left-style: dotted;}</style>
</head>
<body><div>这是DIV</div>
</body>
</html>

border-radius：圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;/* border-radius: 1px; */border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 30px;border-bottom-right-radius: 40px;}</style>
</head>
<body><div></div>
</body>
</html>

5.背景样式

background-color：yellow;背景颜色
background-image：url(img/1.jpeg);背景图片
background-repeat：背景是否平铺，
- 取值:repeat-x:水平方向平
- repeat-y :垂直方向平，
- repeat :水平和垂直方向同时平
- no - repeat : 不平铺
background-size：背景图片大小
background-position：center;背景偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 500px;height: 500px;background-color: red;background-image: url(img/gouza.png);background-size: 50px 50px;background-repeat: no-repeat;background-position: center;}</style>
</head>
<body><div></div>
</body>
</html>

6.盒子模型

在这里插入图片描述

content：内容
padding：内边距
border：边框
margin：外边距

（1）内边距

padding：内容与边框之间的距离
常用样式
- padding：
- padding-top：
- padding-right：
- padding-bottom：
- padding-left：
主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化

padding:10px;代表四个方向的内边距都是10个像素padding:10px 20px;代表上下内边距是10像素，左右内边距是20像素padding:10px 20px 30px;代表上内边距10像素，右内边距20像素，下内边距30像素，左内边距同右padding:10px 20px 30px 40px;分别代表上，右，下，左内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;border: 10px black solid;/* padding: 50px; *//* padding: 50px 100px; *//* padding: 50px 100px 150px; */padding: 50px 100px 150px 200px;}</style>
</head>
<body><div>这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容</div>
</body>
</html>

（2）外边距

margin：边框与父容器之间的距离
常用样式
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
主要作用：调整标签本身相对于父标签的位置
外边距的常用方式：设置标签水平居中
- margin: auto;

margin:10px;代表四个方向的外边距都是10个像素margin:10px 20px;代表上下外边距是10像素，左右外边距是20像素margin:10px 20px 30px;代表外内边距10像素，右外边距20像素，下外边距30像素，左外边距同右margin:10px 20px 30px 40px;分别代表上，右，下，左外边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 200px;height: 200px;background-color: red;border: 10px black solid;/* margin: 50px; *//* margin: 50px 100px; *//* margin: 50px 100px 150px; *//* margin: 50px 100px 150px 200px; */}</style>
</head>
<body><div>这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容</div>
</body>
</html>

7.布局样式

（1）样式

float

（2）常用值

left
right

（3）理解

在Z轴上往人的方向移动，再进行左移和右移。
左移或右移时，碰到父标签边框或者碰到另一个浮动框的边框就会停下来。
实现框横向排列：将需要横向排列的框往同一个方向浮动就行了。

（4）出现问题

由于浮动脱离了原本的平面，所以原本的位置会被后面的标签挤占掉，能不能让后面的标签不去挤占呢？

（5）解决方案

清除前面浮动对后面的标签造成的影响
样式：clear
常用值：left，right，both

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;float: left;}#third{width: 300px;height: 300px;background-color: pink;float: left;}#fourth{width: 400px;height: 400px;background-color: purple;float: left;}#five{width: 1000px;height: 500px;background-color: black;clear:left}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"></div><div id="five"></div>
</body>
</html>

8.定位样式

为了将标签放到指定的位置上。
通常情况下，能用盒子模型解决，就不要用定位。

（1）样式

position

（2）常用值

absolute：绝对定位
relative：相对定位
fixed：固定定位

（3）调整位置的样式

left
right
top
bottom

（4）绝对样式

Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
相对于页面的顶点进行移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;position: absolute;left: 100px;top: 50px;}#third{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div>
</body>
</html>

（5）相对定位

原本的位置会一直保留
相对于原来的位置进行偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 200px;background-color: gray;position: relative;left: 0px;top: 0px;}#third{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div>
</body>
</html>

（6）固定定位

原来的位置不保留
相对于页面的顶点进行偏移
不受滚动条的影响

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>#first{width: 100px;height: 100px;background-color: red;}#second{width: 200px;height: 1000px;background-color: gray;}#third{width: 300px;height: 300px;background-color: pink;}#fourth{width: 50px;height: 50px;position: fixed;right: 50px;bottom: 50px;}</style>
</head>
<body><div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"><a href="#" style="font-size:40px;text-decoration: none;color: black;">^</a></div>
</body>
</html>

9.列表修饰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;/*取消图标*//* list-style-image: url(img/gouza.png); */float: left;}</style>
</head>
<body><ul><li>橘子</li><li>香蕉</li><li>火龙果</li></ul>
</body>
</html>

标签的分类

1.块标签

独占一行，自动换行
可以手动设置宽高

<div>,<p>,<h*>,<ol>,<ul>,<li>,<table>,<form>……

2.行标签

不会自动换行
不能设置宽高

<span>,<font>,<strong>,<b>,<em>,<i>,<a>,<input>,<select>……

3.行块标签

不能自动换行
可以设置宽高

<img>

4.标签类型的转换

（1）样式

display

（2）常用值

block(：转成块标签
inline：转成行标签
inline-block：转成行块标签
none：隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>div{width: 100px;height: 100px;background-color: red;display: inline-block;}span{width: 100px;height: 100px;background-color: green;display: inline-block;}img{width: 100px;height: 100px;display: block;}</style>
</head>
<body><div>这是DIV</div><span>这是Span</span><img src="img/gouza.png">
</body>
</html>

综合练习

1.实现如下效果

在这里插入图片描述

2.浮动完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;float: left;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

3.使用标签类型转换完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;display: inline-block;margin-left: -5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

enter;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
ul{
width: 400px;
margin: auto;
}

首页
天猫
聚划算
超市
支付宝

```

3.使用标签类型转换完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的使用</title><style>li{list-style-type: none;background-color: green;color: white;text-align: center;width: 80px;height: 30px;line-height: 30px;border-radius: 5px;display: inline-block;margin-left: -5px;}ul{width: 400px;margin: auto;}</style>
</head>
<body><ul><li>首页</li><li>天猫</li><li>聚划算</li><li>超市</li><li>支付宝</li></ul>
</body>
</html>

css-选择器、常见样式、标签分类

CSS CSS简介层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可…...

编程日记 2023/8/27 17:37:42

三星申请新商标：未来将应用于智能戒指，作为XR头显延伸设备

三星最近向英国知识产权局提交了名为“Samsung Curio”的新商标，这预示着三星正积极扩展可穿戴设备生态。该商标被分类为“Class 9”，这表明它有可能被用于未来的智能戒指。据报道，三星计划将智能戒指作为XR头显设备的延伸，与苹果…...

编程日记 2023/8/27 17:36:40

0201hdfs集群部署-hadoop-大数据学习

文章目录 1 前言2 集群规划3 hadoop安装包上传与安装3.1 上传解压 4 hadoop配置5 从节点同步和环境变量配置6 创建用户7 集群启动8 问题集8.1 Invalid URI for NameNode address (check fs.defaultFS): file:/// has no authority. 结语 1 前言下面我们配置下单namenode节点h…...

编程日记 2023/8/27 17:35:39

DevOps中的持续测试优势和工具

持续测试 DevOps中的持续测试是一种软件测试类型，它涉及在软件开发生命周期的每个阶段测试软件。持续测试的目标是通过早期测试和经常测试来评估持续交付过程的每一步的软件质量。 DevOps中的持续测试流程涉及开发人员、DevOps、QA和操作系统等利益相关者。持续…...

编程日记 2023/8/27 17:34:38

函数-C语言（初阶）

目录一、什么是函数二、函数的分类 2.1 库函数 2.2 自定义函数三、函数的参数 3.1 实际参数（实参） 3.2 形式参数（形参） 四、函数的调用 4.1 传值调用 4.2 传址调用五、函数的嵌套调用和链式访问 5.1 嵌套调用 5.2 链式访问…...

编程日记 2023/8/27 17:33:37

elementuiplus设置scroll-to-error之后提示被遮挡的解决方案

项目场景： 普通的头部固定，中间滑动的布局，中间内容有表单，提交校验不通过时滚动到第一个错误项问题描述 elementuiplus的scroll-to-error设置之后是局部滚动当头部内容层级高于中间表单的时候，错误会被遮挡。 ---…...

编程日记 2023/8/27 17:32:36

vue中将新添加的div标签自动定位到可视区域内

可以结合使用Vue的ref和scrollIntoView()方法来实现 <template><div><button click"addDiv">添加新的<div>标签</button><div ref"container" class"container"><div v-for"（item,inde…...

编程日记 2023/8/27 17:31:34

Vue3笔记——（尚硅谷张天禹Vue笔记)

Vue3 Vue3简介 1.Vue3简介 .2020年9月18日，Vue.js发布3.0版本，代号: One Piece(海贼王)。耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者 . github上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 .性能…...

编程日记 2023/8/27 17:30:33

正则表达式一小时学完

闯关式学习Regex 正则表达式，我感觉挺不错的，记录一下。遇到不会的题，可以评论交流。真的很不错链接 Regex Learn - Step by step, from zero to advanced....

编程日记 2023/8/27 17:29:32

上门服务系统|上门服务小程序如何提升生活质量？

上门服务其实就是本地生活服务的升级，上门服务包含很多行业可以做的。例如：厨师上门、上门家电维修、跑腿等等。如今各类本地化生活服务越来越受大家的喜爱。基于此市场愿景，我们来谈谈上门服务系统功能。一、上门服务系统功能 1、预约服务…...

编程日记 2023/8/27 17:28:31

系统报错msvcp120.dll丢失的解决方法，常见的三种解决方法

今天为大家讲述关于系统报错msvcp120.dll丢失的解决方法。在这个信息爆炸的时代，我们每个人都可能遇到各种各样的问题，而这些问题往往需要我们去探索、去解决。今天，我将带领大家走进这个神秘的世界，一起寻找解决msvcp120.dll丢失…...

编程日记 2023/8/27 17:27:29

数据库备份工具有哪些

本文主要介绍下数据库备份工具。数据库备份工具有很多种，以下是一些常见的数据库备份工具： mysqldump：MySQL官方提供的命令行备份工具，适用于MySQL和MariaDB数据库。它可以将数据库导出为SQL文件，方便进行备份和恢复…...

编程日记 2023/8/27 17:26:28

Sentinel流量控制与熔断降级

📝 学技术、更要掌握学习的方法，一起学习，让进步发生 👩🏻 作者：一只IT攻城狮 ，关注我，不迷路。 💐学习建议：1、养成习惯，学习java的任何一个技术…...

编程日记 2023/8/27 17:25:27

The Connector 周刊#10：你真的知道什么是DevOps文化吗？

AI 探索用 LLM 构建企业专属的用户助手：很好的 LLM 应用工程实践，主要介绍了 PingCAP 如何使用大型语言模型（Large Language Model，LLM）构建一个搭载企业专属知识库的智能客服机器人。除了采用行业内通行的基于知识库…...

编程日记 2023/8/27 17:24:25

leetcode438. 找到字符串中所有字母异位词(java)

滑动窗口找到字符串中所有字母异位词滑动窗口数组优化上期经典找到字符串中所有字母异位词难度 - 中等 Leetcode 438 - 找到字符串中所有字母异位词给定两个字符串 s 和 p，找到 s 中所有 p 的异位词的子串，返回这些子串的起始索引。不考虑答案输出…...

编程日记 2023/8/27 17:23:25

【锐捷】OSPF 多区域配置

【实验名称】配置 OSPF 多区域。【实验目的】配置 OSPF 多区域，理解 OSPF 层次型网络的特点。【背景描述】本实验拓扑图中有 3 台路由器，路由器在区域 0 和区域 1 中，路由器 B 在区域 0 和区域 30， 路由器 C 在区域 30。【需…...

编程日记 2023/8/27 17:22:23

Linux常用命令_权限管理命令

文章目录 1. 权限管理命令: chmod2. 其他权限管理命令2.1 权限管理命令: chown2.2 权限管理命令: chgrp2.3 权限管理命令: umask 1. 权限管理命令: chmod {ugoa}中分别为：u-user、g-group、a-all；谁创建文件，谁是所有者；所属组为所…...

编程日记 2023/8/27 17:21:20

【黑马头条之热点文章kafkaStream】

本笔记内容为黑马头条项目的热点文章-实时计算部分目录一、实时流式计算 1、概念 2、应用场景 3、技术方案选型二、Kafka Stream 1、概述 2、Kafka Streams的关键概念 3、KStream 4、Kafka Stream入门案例编写 5、SpringBoot集成Kafka Stream 三、app端热点文章…...

编程日记 2023/8/27 17:20:19

【SpringSecurity】三、访问授权

文章目录 1、配置用户权限2、针对URL授权3、针对方法的授权 1、配置用户权限继续上一章，给在内存中创建两个用户配置权限。配置权限有两种方式： 配置roles配置authorities //哪个写在后面哪个起作用 //角色变成权限后会加一个ROLE_前缀，比…...

编程日记 2023/8/27 17:19:15

你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢？

一、什么是SPA SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必…...

编程日记 2023/8/27 17:18:13

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/11/16 8:24:16

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/11/27 19:07:44

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/11/27 13:28:27

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...

编程新知 2025/11/27 16:31:20

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/11/25 19:20:26

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/10/7 4:57:55

如何为服务器生成TLS证书

TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...

编程新知 2025/11/26 10:33:16

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/11/17 7:30:28

CSS

CSS简介

1.层叠

2.样式表

3.作用

CSS的使用

1.行内样式

2.内部样式

3.外部样式

（1）index.html 页面

(2) demo.css css文件

4.三种样式的优先级 (就近原则)

5.三种样式的生效范围

CSS选择器

1.CSS选择器

（1）为什么需要选择器

（2）语法

2.基本选择器

（1）标签选择器

(2) ID选择器

（3）class选择器

（4）三大基本选择器的优先级

2.其他选择器

（1）全局选择器

（2）组合选择器

（3）层级选择器（后代选择器）

（4）子选择器

（5）属性选择器

（6）伪类选择器

CSS常见样式

1.尺寸样式

2.字体样式

3.字体样式

4.边框样式

5.背景样式

6.盒子模型

（1）内边距

（2）外边距

7.布局样式

（1）样式

（2）常用值

（3）理解

（4）出现问题

（5）解决方案

8.定位样式

（1）样式

（2）常用值

（3）调整位置的样式

（4）绝对样式

（5）相对定位

（6）固定定位

9.列表修饰

标签的分类

1.块标签

2.行标签

3.行块标签

4.标签类型的转换

（1）样式

（2）常用值

综合练习

1.实现如下效果

2.浮动完成

3.使用标签类型转换完成

3.使用标签类型转换完成

相关文章：