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

web前端-CSS

news 2026/5/21 22:36:18

CSS

CSS概述:

CSS是Cascading Style Sheets（级联样式表）,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等)

可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处

CSS是网页样式,HTML是网页内容

基本语法-行内样式表
行内样式表 , 又有人称内联样式、行间样式、内嵌样式。是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：
                     < 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名>

基本语法-内嵌样式表
内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义 
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title>.<style>/* css是样式表语言，将内容与样式分离开 *//* 类选择器 */.p1{color: aquamarine;}<!-- 标签选择器 -->a{color: aqua;}/* id选择器 */#aid{color: blueviolet;}/* 通配选择器 */*{color: blue;}/*  */</style></head><body><!-- 导入外部样式表 --><link href="css/wai.css"/>  <!-- 行内样式表优先级最高 --><a style="color: aliceblue;" id="aid" class="p1"></a></body>
</html>

基本语法-外部样式表
外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通
过 link 标签将外部样式表文件链接到 HTML 文档中
文本&背景

直接看代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{color: aliceblue;font-size: 10px; /* px像素单位*/font-family: 楷体;font-weight: 200;/*加粗*/text-align: center;/*水平文字对齐*/font-style: initial;/*字体 例如：斜体*//* text-decoration: underline; 修饰文本添加下滑线 line-height: 50px; 行高letter-spacing: 20px; 字符间距word-spacing: 20px; 单词间距text-indent: 2em; em当前文本中一个字符的大小  缩进量2em*//* background-repeat: repeat; */background-color: aqua;background-size: 250px;/* background-position-x: 250px; */background-image: url(img/img/grape.jpg);}a{text-decoration: none;}a:hover{text-decoration: underline;color: #}</style></head><body><p class="p1"></p></body>
</html>

CSS列表属性
CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 
CSS伪类

css伪类专门用来表示标签的一种特殊状态,当我们需要为这些特殊状态的标签设置样式时,就可以使用伪类

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
<style>/* 鼠标移入改变 */a:hover{color: red;}/* 点击改变 */a:active{color: aqua;}/* 向拥有键盘输入焦点的标签添加样式 */.btn:focus{color: red;}.te{background-color: blue;color: aqua;}</style></head><body><a href="" >百度</a><input type="text" class="te"/><br /><input type="button"/ value="保存" class="btn"></body>
</html>
透明
定义透明效果的属性是 opacity 。
opacity 属性设置标签的不透明级别 值为 1 。
规定不透明度：从 0.0 （完全透明）到 1.0 （完全不透明）
块级标签/行级标签/行级块标签
Display

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签 p  h1-h6 div 特点:自动占一行,可以放置任何标签,可以设置宽高--><!-- 行级标签a     b s  font 特点是设置宽高无效,不会自动占一行作用:对网页中的文字进行选中修饰--><span style="color: blue; height: 60cm; width: 20cm;  display: none;">hello</span><!-- div  span都是纯净版标签--><div style="color: aqua; height: 200px; width: 600px; display: inline;" >div</div><!-- 行级块标签,不占一行又可以设置宽高 input image--><!-- 通过display样式可以修改标签的类型可选值：block ：设置标签为块标签inline ：设置标签为行级标签inline-block ：设置标签为行级块标签none ：隐藏标签（标签将在页面中完全消失）--></body>
</html>

div是"纯净的"块级标签,span是"纯净的"行级标签       纯净=没有任何附加功能

盒子模型

盒子模型
         css中每一个标签都像一个盒子,网页布局本质就是摆放盒子
         
         每一个又分为了四个区域
         内容区:放内容的区域
         内边距:内容区到边框的距离
         边框:标签的最外层
         外边距:一个标签距离另一个标签的距离

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: red;width: 300px;height: 20px;/* 设置内边距 */padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;}.sz{padding-top: 15px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: aqua;}</style></head><body><!-- 盒子模型每一个标签都像一个盒子,网页布局本质就是摆放盒子每一个又分为了四个区域内容区:放内容的区域内边距:内容区到边框的距离边框:标签的最外层外边距:一个标签距离另一个标签的距离--><div class="box">盒子模型</div><div class="sz"  style="width: 300px;height: 70px; display: block;"><img src="img/wemeet image_20240602143005399.png"  /></div></body>
</html>

盒子模型-内容区-content

盒子模型-内边距-padding

盒子模型-边框-boeder

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.text{border-color: red;border-radius: 15px;border: 2px red solid;padding: 15px;}.text:active{color: blueviolet;}.text:hover{color: aqua;}.p11:hover{color: blue;}</style></head><body><a href="" class="p11">百度</a><input type="text" class="text"/></body>
</html>
盒子模型-外边距-margin:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 清除浏览器默认格式 *//* *{padding: 0px;margin: 0px;} */.z1{border: 60px;margin: 10px auto;padding-left: 600px;color: red;}</style></head><body><div class="z1">盒子模型</div><div class="z1"  style="width: 300px;height: 70px; display: block;"><img src="img/wemeet image_20240602143005399.png"  /></div></body>
</html>

清除浏览器的默认样式:
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin 和 padding ，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。
代码:
*{
margin: 0;
padding: 0;
}
文档流

文档流指的是文档中的标签在排列时所占用的位置,

          将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流
浮动

当一个标签浮动后,其原本下方的标签会上移

浮动会使标签完全脱离文档流,也就是不再在文档流中占用位置,这时不会再影响父标签的高度,也就是浮动标签 不会撑开父标签

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nac{background-color: aqua;float: left;padding: 10px 20px;}.nax_box{/* 大小不够就效果错误 */width: 600px;margin: 10px auto;}</style></head><body><!-- 浮动会使标签脱离原来的文档流(二维平面) ,悬浮起来float:left浮动后不占用原来的二维空间,会影响后续布局--><div class="nax_box"><div class="nac">新闻首页</div><div class="nac">新闻联播</div><div class="nac">娱乐至死</div><div class="nac">加沙新闻</div><div style="clear: left;"></div>	<!-- 清除浮动 --></div><div>assd</div></body>
</html>

运行结果:

CSS定位(position)
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置
相对定位和绝对定位
绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

相关文章：

web前端-CSS

CSS CSS概述: CSS是Cascading Style Sheets&#xff08;级联样式表&#xff09;,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等) 可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处 CSS是网页样式,HTML是网页…...

编程日记 2024/6/20 1:44:21

u8g2 使用IIC驱动uc1617 lcd 字符显示只显示上半部分，不显示下半部

使用u8g2 使用硬件iic驱动某些page为4个字节 带灰度的lcd显示屏幕的时候有时候只显示上半部，下半部不显示，例如uc1617等。 原因： 以uc1617为例，链接https://github.com/olikraus/u8g2/blob/master/csrc/u8x8_d_uc1617.c 在u8x8_d_uc1617_common方法中的case U8X8_MSG_DI…...

编程日记 2024/6/20 1:43:20

单片机第五季-第八课：STM32CubeMx和FreeRTOS

1&#xff0c;FreeRTOS背景介绍 RTOS简介&#xff1a; 实时操作系统&#xff0c;本用于追求实时性的嵌入式系统&#xff0c;典型&#xff1a;ucos/uclinux/vxworks&#xff1b; 特点&#xff1a;中断响应快、一般可嵌套中断、使用实地址、多任务&#xff1b; &#xff08;实…...

编程日记 2024/6/20 1:42:19

【Linux】进程控制1——进程创建和进程终止

1.进程创建 1.1.再谈fork 在linux中fork函数时非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 #include <unistd.h> pid_t fork(void);//pid_t为整形 返回值&#xff1a;子进程中的fork()返回0&#xff…...

编程日记 2024/6/20 1:41:17

计算机图形学入门16：曲线

1.曲线 曲线&#xff08;Curves&#xff09;在图形学中应用非常广泛&#xff0c;比如&#xff1a;相机的拍摄路径、物体的移动路径、动画曲线、矢量字体等。如下图所示&#xff0c;是使用曲线到矢量字体的应用&#xff0c;通过移动一些控制点来改变字体。 2.贝塞尔曲线 2.1 贝…...

编程日记 2024/6/20 1:39:15

【Ruby基础01】windows和termux中搭建Ruby开发环境

windows下环境搭建 railsinstaller官方git地址 按照文档安装git、nodejs、yarn&#xff0c;安装教程百度一下。railsinstall可以从release页面下载最新版本4.1.0。 安装完成如下 安装RubyMine 下载RubyMine RubyMine下载地址 安装激活 下载文件&#xff0c;按照里面的流程…...

编程日记 2024/6/20 1:38:13

2406c++,iguana动态反射

原文 iguana是一个基于编译期反射的序化库,支持从结构序化到不同数据格式. iguana可序化一个C结构到json,xml,yaml和protobuf格式.这都是通过编译期反射实现的. 现在iguana也支持了动态反射,主要特征: 1,通过对象名创建对象实例 2,取对象所有字段名 3,根据字段名取字段值 4,根…...

编程日记 2024/6/20 1:37:12

干货分享——AB站帮你解决独立站收款难题

目前&#xff0c;国内已经有抖音、拼多多和淘宝平台推出“仅退款”售后服务&#xff0c;无疑是加剧了原本就在疯狂打价格战的国内电商的严峻现状&#xff0c;使得商家不得不担心被顾客“薅羊毛”。在国内电商环境严重“内卷”的情况下&#xff0c;拓宽海外市场不失为一大妙计。…...

编程日记 2024/6/20 1:36:11

C++继承与派生

1.基本知识 类的继承是新类从已有类那里获得特性&#xff0c;从已有的类产生新类的过程称为类的派生&#xff1b; 已有类称为基类或父类&#xff0c;派生出的新类则称为派生类或子类&#xff1b; 继承的功能&#xff1a; &#xff08;1&#xff09;使得基类与派生类之间建立…...

编程日记 2024/6/20 1:35:09

Survival Animations

一套生存游戏的动画集，包括采集、建造、捕鱼、剥皮/鞣制、篝火等更多内容。 总动画数：89 建造/制作 30 篝火 28 饮水 3 水壶 3 觅食 2 治疗 3 空闲 1 原始捕鱼 7 剥皮 1 矛捕鱼 4 伐木 5 下载：​​Unity资源商店链接资源下载链接 效果图：...

编程日记 2024/6/20 1:33:06

Cargo 教程

Cargo 教程 1. 引言 Cargo 是 Rust 编程语言的包管理器和构建工具。它为 Rust 项目提供了依赖管理、编译和打包等功能。本教程将详细介绍 Cargo 的基本用法，帮助您快速上手 Rust 项目开发。 2. 安装 Cargo 在开始使用 Cargo 之前，您需要确保已经安装了 Rust 编程语言。Ru…...

编程日记 2024/6/20 1:32:04

linux中“PXE高效批量装机”

在大规模的 Linux 应用环境中&#xff0c;如 Web 群集、分布式计算等&#xff0c;服务器往往并不配备光驱设备&#xff0c;在这种情况下&#xff0c;如何为数十乃至上百台服务器裸机快速安装系统呢&#xff1f;传统的 USB光驱、移动硬盘等安装方法显然已经难以满足需求。 PXE …...

编程日记 2024/6/20 1:31:03

emm, ComfyUI的作者从Stability.AI离职了

&#x1f356;背景 今天在更新ComfyUI的过程中&#xff0c;看到Manager中有这样一段描述&#xff1a; 嗯&#xff1f;做了新的官方网站&#xff1f;然后开始新篇章&#xff1f; 难道说ComfyUI的作者从Stability.AI离职了&#xff1f; 赶紧点开链接看了下&#xff0c;emm&…...

编程日记 2024/6/20 1:29:00

Redis-五种数据结构之列表（ziplist、quicklist）

列表 文章目录 列表压缩列表-ziplistziplist 定义级联更新 快速列表-quicklistquicklistNode 定义quicklist 定义quicklist常用操作其他操作quicklist 相对于普通链表优点quick应用场景在redis 中使用quicklist 列表数据类型可以存储一组按插入顺序排序的字符串&#xff0c;他很…...

编程日记 2024/6/20 1:27:59

记一次全设备通杀未授权RCE的挖掘经历

想来上一次挖洞还在一年前的大一下&#xff0c;然后就一直在忙活写论文&#xff0c;感觉挺枯燥的&#xff08;可能是自己不太适合弄学术吧QAQ&#xff09;&#xff0c;所以年初1~2月的时候&#xff0c;有空的时候就又会挖一挖国内外各大知名厂商的设备&#xff0c;拿了几份思科…...

编程日记 2024/6/20 1:26:58

【数据库编程-SQLite3（一）】sqlite3数据库在Windows下的配置及测试

学习分析 1、资源准备2、环境配置2.1、将资源包下载解压缩保存。2.2、在QT中创建工程,配置环境 3、测试配置3.1、 sqlite3_open函数3.2、sqlite3_close函数3.3、代码测试 1、资源准备 资源包 2、环境配置 2.1、将资源包下载解压缩保存。 解压缩得到以下文件 2.2、在QT中创建…...

编程日记 2024/6/20 1:23:53

YOLOv10改进 | 主干篇 | YOLOv10引入华为VanillaNet替换Backbone

1. VanillaNet介绍 1.1 摘要： 基础模型的核心是“越多越好”的理念，计算机视觉和自然语言处理领域取得的惊人成功就是例证。 然而，优化的挑战和变压器模型固有的复杂性要求范式向简单性转变。 在这项研究中，我们介绍了 VanillaNet，一种设计优雅的神经网络架构。 通过避免…...

编程日记 2024/6/20 1:22:51

C++ 迷宫问题

描述 定义一个二维数组 N*M &#xff0c;如 5 5 数组下所示&#xff1a; int maze[5][5] { 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, }; 它表示一个迷宫&#xff0c;其中的1表示墙壁&#xff0c;0表示可以走的路&#xff0c;只能横着走…...

编程日记 2024/6/20 1:21:50

【Linux】Linux文件系统中主要文件夹列举_作用说明

在Linux系统中&#xff0c;文件夹&#xff08;或称为目录&#xff09;的组织结构是系统功能和用户数据的重要组成部分。以下是Linux系统中一些主要文件夹的列举及其作用说明&#xff1a; / (根目录): 是Linux文件系统的起点。通常只包含其他目录&#xff0c;不建议直接在其中存…...

编程日记 2024/6/20 1:19:47

移植案例与原理 - HDF驱动框架-驱动配置（1）

HCS(HDF Configuration Source)是HDF驱动框架的配置描述源码&#xff0c;内容以Key-Value为主要形式。它实现了配置代码与驱动代码解耦&#xff0c;便于开发者进行配置管理。应该&#xff0c;类似Linux DTS(Device Tree Source)设备树。 HC-GEN(HDF Configuration Generator)是…...

编程日记 2024/6/20 1:18:45

AMD Ryzen SMU Debug Tool完整指南：轻松掌握硬件级调试的5个关键步骤

AMD Ryzen SMU Debug Tool完整指南&#xff1a;轻松掌握硬件级调试的5个关键步骤 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地…...

编程新知 2026/5/21 22:35:00

MySQL中redo log 和 bin log的本质区别，别再搞混了！

很多初学者容易把 redo log 和 binlog 搞混&#xff0c;它们都是 MySQL 的日志&#xff0c;但有着本质的区别&#xff1a;对比维度redo logbin log所属层级InnoDB 存储引擎层MySQL Server 层日志类型物理日志&#xff0c;记录数据页的修改逻辑日志&#xff0c;记录SQL语句或行变…...

编程新知 2026/5/21 22:14:08

《CVPR2025-DEIM创新改进项目实战：从原理到部署的深度学习优化全攻略》018、DeepLab-DEIM与SegFormer-DEIM语义分割优化全记录

CVPR2025-DEIM创新改进项目实战：DeepLab-DEIM与SegFormer-DEIM语义分割优化全记录 一、从一次令人崩溃的显存溢出说起 上周三凌晨两点，我盯着屏幕上那个“CUDA out of memory”的红色报错，差点把咖啡泼到键盘上。当时正在跑一个DeepLabV3+的语义分割实验，输入尺寸不过是1…...

编程新知 2026/5/21 22:10:26

告别演讲焦虑：PPTTimer如何让时间管理变得简单智能

告别演讲焦虑&#xff1a;PPTTimer如何让时间管理变得简单智能 【免费下载链接】ppttimer 一个简易的 PPT 计时器 项目地址: https://gitcode.com/gh_mirrors/pp/ppttimer 你是否曾在重要演讲时频繁看表&#xff0c;担心时间不够用&#xff1f;是否在PPT演示中因时间控制…...

编程新知 2026/5/21 21:19:50

MC端口映射完全教程：路由器虚拟服务器配置+防火墙放行+内网穿透备用方案

一、什么是MC端口映射MC端口映射是指将运行《我的世界》服务器的电脑内网IP和端口&#xff08;Java版默认25565&#xff09;&#xff0c;通过路由器设置“映射”到公网&#xff0c;让外网玩家能够连接进来。简单说&#xff0c;就是把你自己电脑上开的游戏房“门牌号”告诉全世界…...

编程新知 2026/5/21 20:11:45

2026亲测：专业AI智能降重工具选这款就对了

2026 年降 AIGC 工具已经从“基础语义改写”进化为多维度智能优化系统&#xff0c;核心评测指标涵盖 AI 痕迹清除精准度、学术表达一致性、格式结构完整性、长段落逻辑流畅性、降重适配范围以及高校检测合规性。本次测评覆盖 8 款主流工具&#xff0c;测试内容包括中英文论文处…...

编程新知 2026/5/21 19:29:56

泥沙自动监测仪：从“估算”到“实测”，水保验收不再凭感觉

泥沙自动监测仪搭载一体化智能监测架构&#xff0c;聚焦水保监测核心指标&#xff0c;可全天候无人值守自动采集关键数据&#xff0c;精准监测径流量、实时径流含沙量、阶段性径流总量三大核心参数&#xff0c;全面覆盖水土保持监测刚需指标。区别于人工定时取样的片面性&#…...

编程新知 2026/5/21 19:06:03

Apache APISIX Dashboard完全指南：5分钟掌握可视化API网关管理

Apache APISIX Dashboard完全指南&#xff1a;5分钟掌握可视化API网关管理 【免费下载链接】apisix-dashboard Dashboard for Apache APISIX 项目地址: https://gitcode.com/gh_mirrors/ap/apisix-dashboard Apache APISIX Dashboard是Apache APISIX API网关的可视化控制…...

编程新知 2026/5/21 17:30:10

ElevenLabs瑞典文语音生成延迟超800ms？独家逆向分析其WebRTC音频缓冲机制，给出3行代码级低延迟注入方案

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;ElevenLabs瑞典文语音生成延迟超800ms&#xff1f;独家逆向分析其WebRTC音频缓冲机制&#xff0c;给出3行代码级低延迟注入方案 ElevenLabs 在瑞典语&#xff08;sv-SE&#xff09;TTS 服务中默认启用高保真音…...

编程新知 2026/5/21 17:07:29

终极直播输入可视化指南：如何用开源工具展示键盘鼠标操作

终极直播输入可视化指南&#xff1a;如何用开源工具展示键盘鼠标操作 【免费下载链接】input-overlay Show keyboard, gamepad and mouse input on stream 项目地址: https://gitcode.com/gh_mirrors/in/input-overlay 在游戏直播、教学演示或技术分享中&#xff0c;观众…...

编程新知 2026/5/21 16:15:28