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

web前端-CSS

news 2026/2/1 16:45:12

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/1/31 18:28:41

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/1/26 21:35:44

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00