前端三大件---CSS
目录
一、CSS 概述
二、引入 CSS 的三种方式
2.1 内联样式
2.2 内部样式表
2.3 外部样式表
三、CSS 选择器
3.1 ID 选择器
3.2 class 选择器
3.3 标签选择器
3.4 通配选择器
3.5 分组选择器
3.6 层级选择器
3.7 属性选择器
3.8 伪类选择器
3.9 同辈选择器
四、CSS 字体设置
五、CSS 布局
5.1 盒子模型
5.2 行块元素
5.3 定位
在网页开发领域,HTML 负责搭建网页结构,而 CSS 则是赋予网页美观样式的关键技术,它能让静态的网页变得丰富多彩、布局合理。下面将从多个维度深入剖析 CSS 的核心知识。
一、CSS 概述
CSS 即层叠样式表(Cascading Style Sheets) ,用于定义 HTML 或 XML 等文件的样式。随着 HTML 功能不断增加导致代码臃肿,CSS 应运而生,它不仅能静态修饰网页,还可配合脚本语言实现动态样式效果,极大提升了网页开发的效率与质量。
二、引入 CSS 的三种方式
2.1 内联样式
在 HTML 元素中直接使用style
属性设置样式,适用于单独修改某一个标签的样式。
<p style="color:red; font-size: 16px;">这是一段红色16px字体的文字</p>
2.2 内部样式表
在<head>
标签中通过<style>
标签定义样式,对当前页面内元素进行样式设置。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>内部样式表示例</title><style>div {width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div></div>
</body>
</html>
2.3 外部样式表
将 CSS 代码保存为单独的.css
文件,通过<link>
标签引入到 HTML 页面,适合多个页面共用样式。
styles.css
文件内容:
body {font-family: Arial, sans-serif;
}
h1 {color: #333;
}
HTML 页面引入代码:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>外部样式表示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是一个标题</h1>
</body>
</html>
三、CSS 选择器
3.1 ID 选择器
通过元素的id
属性选取唯一元素,在 CSS 中用#
加id
名定义,如:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ID选择器示例</title><style>#specialDiv {border: 2px solid green;}</style>
</head>
<body><div id="specialDiv">具有特殊样式的div</div>
</body>
</html>
3.2 class 选择器
根据class
属性选取一类元素,CSS 中用.
加class
名定义,支持一个元素多个类名:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>class选择器示例</title><style>.highlight {background-color: yellow;}</style>
</head>
<body><p class="highlight">高亮段落1</p><span class="highlight">高亮文本</span>
</body>
</html>
3.3 标签选择器
直接通过 HTML 标签名称选取所有同类元素,如:
p {text-align: justify;line-height: 1.6;
}
3.4 通配选择器
*
可选取页面所有元素,常用于初始化样式:
* {margin: 0;padding: 0;box-sizing: border-box;
}
3.5 分组选择器
用逗号分隔多个选择器,对不同元素设置相同样式:
h1, h2, h3 {color: purple;
}
3.6 层级选择器
后代选择器(空格)选取某元素的所有后代,子元素选择器(>
)只选直接子元素:
/* 后代选择器 */
nav ul li {list-style: none;
}
/* 子元素选择器 */
.container > p {font-weight: bold;
}
3.7 属性选择器
根据元素属性及属性值选取元素:
a[target="_blank"] {text-decoration: underline;
}
input[type="text"] {border: 1px solid #ccc;
}
3.8 伪类选择器
用于选取特定状态元素,如链接的不同状态:
a:link {color: blue;
}
a:visited {color: purple;
}
a:hover {color: red;
}
a:active {color: orange;
}
3.9 同辈选择器
+
选取相邻同辈元素,如:
h2 + p {font-style: italic;
}
四、CSS 字体设置
p {font-family: "微软雅黑", sans-serif; /* 字体类型 */font-size: 14px; /* 字体大小 */font-style: italic; /* 字体风格 */text-align: center; /* 水平居中 */line-height: 24px; /* 垂直居中 */text-decoration: underline; /* 下划线 */
}
五、CSS 布局
5.1 盒子模型
.box {width: 200px;height: 150px;padding: 10px;border: 2px solid black;margin: 20px auto;background-color: lightgray;
}
5.2 行块元素
行内元素如<span>
,块级元素如<div>
,可通过display
转换:
span {display: block; /* 行内转块级 */
}
div {display: inline; /* 块级转行内 */
}
5.3 定位
/* 绝对定位 */
.absolute {position: absolute;top: 50px;left: 100px;
}
/* 相对定位 */
.relative {position: relative;left: 20px;top: 10px;
}
CSS 作为网页样式设计的核心技术,掌握这些基础与核心要点,能够帮助开发者打造出美观、实用且具有良好用户体验的网页。
相关文章:
前端三大件---CSS
目录 一、CSS 概述 二、引入 CSS 的三种方式 2.1 内联样式 2.2 内部样式表 2.3 外部样式表 三、CSS 选择器 3.1 ID 选择器 3.2 class 选择器 3.3 标签选择器 3.4 通配选择器 3.5 分组选择器 3.6 层级选择器 3.7 属性选择器 3.8 伪类选择器 3.9 同辈选择器 四、…...
蓝桥杯FPGA赛道第二次模拟题代码
一、顶层文件 module test( input wire sys_clk, input wire sys_rst, input wire [3:0]key_in, output reg [7:0]led,output wire scl, inout wire sda,//i2c的信号output wire [7:0]sel, output wire [7:0]seg//数码管的驱动 );wire [23:0] data ; reg [31:0] dsp_dat…...
keep the pipe Just full But no fuller - BBR 与尘封 40 年的求索
推荐一部短视频 Keep the pipe just full, but no fuller,作者就是大名鼎鼎的 L. Kleinrock,现代分组交换网的奠基人,这里有关于他这个人的介绍: https://www.lk.cs.ucla.edu/index.html https://en.wikipedia.org/wiki/Leonard…...
《React Native热更新实战:用Pushy打造无缝升级体验》
《React Native热更新实战:用Pushy打造应用“空中加油”,实现无缝升级体验》 写在前面:当你的APP需要"空中加油"时… 想象一下这样的场景:凌晨2点,你的React Native应用刚上线就爆出重大BUG,用户差评如潮水般涌来,应用商店审核至少需要3天…此刻你多么希望能…...
【开源解析】基于Python的智能文件备份工具开发实战:从定时备份到托盘监控
📁【开源解析】基于Python的智能文件备份工具开发实战:从定时备份到托盘监控 🌈 个人主页:创客白泽 - CSDN博客 🔥 系列专栏:🐍《Python开源项目实战》 💡 热爱不止于代码࿰…...
第四章:基于langchain构造一个完整RAG系统
文章目录 引言一、RAG的基本原理1.1 什么是RAG?1.2 RAG的应用场景 二、RAG系统的构建步骤2.1 环境准备2.2 加载和处理文档2.2.1 文档加载2.2.2 文本分割 2.3 构建嵌入模型2.4 创建向量存储与检索器2.5 检索与生成2.5.1 检索相关文档2.5.2 生成答案 三、完整代码示例…...
uniapp|实现多终端视频弹幕组件、内容轮询、信息表情发送(自定义全屏半屏切换、弹幕启用)
基于UniApp框架实现跨终端视频弹幕组件的开发,结合CSS3动画与setInterval轮询机制,完成弹幕从右向左的动态滚动效果,针对交互需求,设计弹幕启用开关、全屏/半屏模式切换功能,并利用cover-view组件解决原生层级覆盖问题。 目录 引言视频弹幕的交互价值与多终端适配需求Un…...
数据结构(四)——栈的应用—数制转换
利用栈进行数制转换: 十进制转换八进制:先将十进制数除以八得到余数,余数入栈,然后将得到的商继续除以八,直到商为零 #include <stdio.h> #include <stdlib.h>#define MAXSIZE 100//数制转换//定义链表节…...
flinksql bug : Max aggregate function does not support type: CHAR
这个问题是flink中 CHAR 存在语义歧义,主要涉及到位数的关系,这里不做多讨论。 这个问题已经有人提了pr,新版本可以关注是否有解决 这个报错发生在 max(测试字段) ,这个测试字段如果是char 就会报错不支持 解决办法:…...
解决社区录音应用横屏状态下,录音后无法播放的bug
最近看到社区有小伙伴反映,社区录音应用横屏时,录音后无法播放的问题。现分享解决办法。 社区录音应用的来源:https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-5.0.2-Release/code/SystemFeature/Media/Recorder …...
【MySQL】存储引擎 - InnoDB详解
📢博客主页:https://blog.csdn.net/2301_779549673 📢博客仓库:https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! &…...
软件工程之形式化说明技术深度解析
按照形式化的程度,可以把软件工程使用的方法划分成非形式化、半形式化和形式化3种。用自然语言描述需求规格说明书,是典型的非形式化方法。用数据流图或实体-联系图建立模型,是典型的半形式化方法。 所谓形式化方法,是描述系统性…...
Nacos源码—6.Nacos升级gRPC分析一
大纲 1.Nacos 2.x版本的一些变化 2.客户端升级gRPC发起服务注册 3.服务端进行服务注册时的处理 4.客户端服务发现和服务端处理服务订阅的源码分析 1.Nacos 2.x版本的一些变化 变化一:客户端和服务端的交互方式由HTTP升级为gRPC Nacos 1.x服务端会提供一系列的…...
使用 React 实现语音识别并转换功能
在现代 Web 开发中,语音识别技术的应用越来越广泛。它为用户提供了更加便捷、自然的交互方式,例如语音输入、语音指令等。本文将介绍如何使用 React 实现一个简单的语音识别并转换的功能。 功能概述 我们要实现的功能是一个语音识别测试页面࿰…...
2.5 点云数据存储格式——大型点云传输格式
通常,进行大型点云数据传输时,一般采用一种后缀为bin的文...
Windows系统下使用Kafka和Zookeeper,Python运行kafka(一)
下载和安装见Linux系统下使用Kafka和Zookeeper 配置 Zookeeper Zookeeper 是 Kafka 所依赖的分布式协调服务。在 Kafka 解压目录下,有一个 Zookeeper 的配置文件模板config/zookeeper.properties,你可以直接使用默认配置。 启动 Zookeeper 打开命令提示符(CMD),进入 K…...
数据结构(三)——栈和队列
一、栈和队列的定义和特点 栈:受约束的线性表,只允许栈顶元素入栈和出栈 对栈来说,表尾端称为栈顶,表头端称为栈底,不含元素的空表称为空栈 先进后出,后进先出 队列:受约束的线性表࿰…...
零基础入门Hadoop:IntelliJ IDEA远程连接服务器中Hadoop运行WordCount
今天我们来聊一聊大数据,作为一个Hadoop的新手,我也并不敢深入探讨复杂的底层原理。因此,这篇文章的重点更多是从实际操作和入门实践的角度出发,带领大家一起了解大数据应用的基本过程。我们将通过一个经典的案例——WordCounter&…...
在Postman中高效生成测试接口:从API文档到可执行测试的完整指南
引言 在API开发与测试流程中,Postman是一款高效的工具,能将API文档快速转化为可执行的测试用例。本文以《DBC协议管理接口文档》为例,详细讲解如何通过Postman实现接口的创建、配置、批量生成及自动化测试,帮助开发者和测试人员提升效率,确保接口质量。 一、准备工作:理…...
飞云分仓操盘副图指标操作技术图文分解
如上图,副图指标-飞云分仓操盘指标,指标三条线蓝色“首峰线”,红色“引力1”,青色“引力2”,多头行情时“首峰线”和“引力1”之间显示为红色,“引力1”和“引力2”多头是区间颜色显示为紫色。 如上图图标信…...
K8s中的containerPort与port、targetPort、nodePort的关系:
pod中的containerPort与service中的port、targetPort、nodePort的关系: 1、containerPort为pod的配置,对应pod内部服务监听的具体端口,例如nginx服务默认监听80端口,那么nginx的pod的containerPort应该配置为80,例如m…...
jquery+ajax+SpringBoot实现前后端分离技术
一、前端方面: 第1步,在前端HTML页面的头部引入jquery <head><meta http-equiv"Content-Type" content"text/html;charsetUTF-8"><title>XXX</title><link rel"stylesheet" type"text/…...
阀门产业发展方向报告(石油化工阀门应用技术交流大会)
本文大部分内容来自中国通用机械工业协会副会长张宗列在“2024全国石油化工阀门应用技术交流大会”上发表的报告。 一、国外阀门产业发展 从全球阀门市场分布看,亚洲是最大的工业阀门市场,美洲是全球第二大工业阀门市场,欧洲位列第三。 从国…...
华为云Astro后端开发中对象、事件、脚本、服务编排、触发器、工作流等模块的逻辑关系如何?以iotDA数据传输过程举例演示元素工作过程
目录 🏭 类比总览:低代码平台就像一座自动化工厂 🧱 1. 对象(Object) = 工厂里的“原材料仓库” 🧱 2. 结构体(Structure) = 自定义的“装配模具” 🔔 3. 事件(Event) = 触发的“感应器” ✍️ 4. 脚本(Script) = 后台的“逻辑处理代码” ⚙️ 5. 服务编…...
面向小型企业顶点项目的网络安全咨询人机协作框架
1. 简介 1.1. 背景和动机 由于小型企业无法访问结构化系统,且缺乏大型组织通常拥有的专用资源,它们经常面临巨大的网络安全挑战 [ [1 ]。为大型企业设计的网络安全框架通常对小型企业来说过于复杂且不切实际,导致它们容易受到复杂的网络威胁 2 ]。这种复杂性可能导致小型…...
RSAC 2025观察:零信任+AI=网络安全新范式
2025年4月28日~5月1日,全球最具影响力的网络安全盛会RSAC 2025在美国旧金山举办,吸引了全球44,000名网络安全从业者参与。大会以“Many Voices. One Community.”为主题,聚焦AI安全、供应链风险、零信任等核心议题。其中,AI Agent…...
ruoyi-flowable-plus 前端框架启动报错修复
版本 1. ruoyi-flowable-plus 前端框架启动报错修复 启动时设置环境变量 "scripts": {"dev": "SET NODE_OPTIONS--openssl-legacy-provider && vue-cli-service serve","build:prod": "vue-cli-service build",&qu…...
安全可控·高效响应|北峰智能互通矿业通信系统解决方案
项目概况 随着矿业行业工作环境日益复杂,涵盖地下开采、露天挖掘、矿物运输及深加工等多个环节,作业区域呈现广阔且分散的特点,往往存在诸多安全风险。当面临突发事故,由于应急救援体系不完善,救援通信系统相对落后&a…...
ubuntu查看安装的软件包的位置
在 Ubuntu 中,libcli11-dev 是一个 头文件库(header-only),因此它不会像动态库(.so 文件)那样有明确的下载路径。但你可以通过以下方法查看它的安装位置: 1. 查看 libcli11-dev 安装的文件 使用…...
【金仓数据库征文】金仓数据库 KES 助力企业数据库迁移的实践路径
在企业数字化转型浪潮的强力推动下,数据库迁移已成为企业升级 IT 架构、提升数据管理能力的关键环节。从 MySQL 到金仓数据库 KingbaseES(KES)的迁移方案,为企业提供了一条高效、可靠的数据库升级路径。 一、迁移挑战与金仓数据…...
Nginx1.26.2安装包编译安装并配置stream模块
准备nginx安装文件:nginx-1.26.2.tar.gz cd /usr/local wget http://nginx.org/download/nginx-1.26.2.tar.gz tar -zxvf nginx-1.26.2.tar.gz && cd nginx-1.26.2 1.创建安装目录 mkdir nginx 2.解压安装文件nginx-1.26.2.tar.gz tar -zxvf nginx-1.26…...
kotlin @JvmStatic注解的作用和使用场景
1. JvmStatic 的作用 JvmStatic 是 Kotlin 提供的一个注解,用于在 JVM 上将伴生对象(companion object)中的方法或属性暴露为 Java 静态方法或字段。 作用对象:只能用在 companion object 中的函数或属性。效果: 在 …...
Blind SSRF with Shellshock exploitation过关
Blind SSRF with Shellshock exploitation 生活就像一杯咖啡,苦与甜都是必需的,关键是要学会享受每一口。 先说通关方法: 1.首先在bp的扩展商店安装插件 Collaborator Everywhere 2.进入靶场首页 复制url https://0af600d3048daad080e6…...
2025-05-08 Unity 网络基础9——FTP通信
文章目录 1 FTP1.1 工作原理1.2 传输模式 2 搭建 FTP 服务器2.1 启用服务2.2 配置站点2.3 设置防火墙2.4 指定用户登录 3 常用 API3.1 NetworkCredential3.2 FtpWebRequest3.3 FtpWebResponse 4 实战操作4.1 上传文件4.2 下载文件4.3 删除文件4.4 获取文件大小4.5 创建文件夹4.…...
3.2.3 掌握RDD转换算子 - 5. 合并算子 - union()
在本节课中,我们学习了Spark RDD的union()算子,它能够将两个数据类型一致的RDD合并为一个新的RDD,主要用于整合不同数据源。通过案例演示,我们成功将两个简单的数字RDD合并,直观地看到合并结果是按原顺序纵向拼接&…...
数据来源合法性尽职调查:保障权益的关键防线
首席数据官高鹏律师团队 在当今数字化时代,数据已成为企业和个人最为宝贵的资产之一。然而,伴随着数据的广泛应用与流通,其来源的合法性问题愈发凸显,犹如隐藏在暗处的礁石,稍不留神就可能让涉事主体陷入法律的漩涡。…...
sui在windows虚拟化子系统Ubuntu和纯windows下的安装和使用
一、sui在windows虚拟化子系统Ubuntu下的安装使用(WindowsWsl2Ubuntu24.04) 前言:解释一下WSL、Ubuntu的关系 WSL(Windows Subsystem for Linux)是微软推出的一项功能,允许用户在 Windows 系统中原生运行…...
springmvc的入门案例
springmvc的概述 SpringMVC的概述 是一种基于Java实现的MVC设计模型的请求驱动类型的轻量级WEB框架。Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架…...
【MCP】为什么使用Streamable HTTP: 相比SSE的优势与实践指南
在现代Web开发中,实时通信已经成为许多应用的核心需求。从聊天应用到股票市场更新,从游戏服务器到AI模型通信,各种技术应运而生以满足这些需求。最近,Model Context Protocol (MCP) 引入了一种新的传输机制 —— Streamable HTTP&…...
CentOS的防火墙工具(firewalld和iptables)的使用
CentOS的防火墙工具因版本不同而异,以下是具体操作步骤: 一、firewalld(CentOS 7及以上默认工具) 1、安装与启动: 安装:sudo yum install firewalld 启动服务:sudo systemctl start fir…...
解析小米大模型MiMo:解锁语言模型推理潜力
一、基本介绍 1.1 项目背景 在大型语言模型快速发展的背景下,小米AI团队推出MiMo系列模型,突破性地在7B参数规模上实现卓越推理能力。传统观点认为32B以上模型才能胜任复杂推理任务,而MiMo通过创新的训练范式证明:精心设计的预训练和强化学习策略,可使小模型迸发巨大推理…...
web 自动化之 Selenium 元素定位和浏览器操作
文章目录 一、元素定位的八大方法1、基于 id/name/class/tag_name 定位2、基于 a 标签元素的链接文本定位3、基于xpath定位4、css定位 二、浏览器操作1、信息获取2、 浏览器关闭3、 浏览器控制 一、元素定位的八大方法 web 自动化测试就是通过代码对网页进行测试,在…...
vscode如何使用 GitHub Copilot
1.在vscode中扩展工具栏搜索“copilot”,选择GitHub Copilot安装。 2.使用快捷键CtrlAltI 打开聊天界面,输入问题后回车即可使用。 注意: 使用copilot需要使用GitHub账号先登录,如果打不开登录页面,需要修改host文件&a…...
AWS之存储服务
存储术语 分类 接口/技术类型 应用场景特点 关系及区别 机械硬盘接口 IDE(Integrated Drive Electronics) 早期用于个人电脑,现已逐渐淘汰 机械硬盘接口、固态硬盘接口是硬盘与主机或其他设备连接的物理和协议规范; FC - …...
安装 Docker
一、CentOS 系统安装 Docker 1. 卸载旧版本(如有) sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 2. 安装依赖工具 sudo yum install -y…...
代理协议解析:如何根据需求选择HTTP、HTTPS或SOCKS5?
在现代网络中,代理服务器是一种常见的工具,用于提高安全性、匿名性和访问速度。常见的代理协议包括HTTP、HTTPS和SOCKS5。本文将详细解析这三种代理协议,并帮助您根据具体需求选择最合适的代理协议。 一、HTTP代理 1.1 特点 用途广泛&…...
用于构建安全AI代理的开源防护系统
大家读完觉得有帮助记得及时关注!!! 大型语言模型(LLMs)已经从简单的聊天机器人演变为能够执行复杂任务的自主代理,例如编辑生产代码、编排工作流程以及基于不受信任的输入(如网页和电子邮件&am…...
CTF-DAY10
[SWPUCTF 2021 新生赛]zipbomb 题目描述: 请注意,不要以任何方式尝试完全解压该文件,运存被塞满后果自负。请尝试分析该文件。 使用WinRAR解压打开 CTFSHOW刷题 crypto11 密文:a8db1d82db78ed452ba0882fb9554fc 提交 flag{明…...
WHAT - react-query(TanStack Query) vs swr 请求
文章目录 react-query什么是 TanStack Query(原 React Query)核心特性 TanStack Query vs SWR 对比具体特性对比哪个更适合你 总结 react-query react-query(现已更名为 TanStack Query)和 SWR 一样,都是专注于 远程数…...
WebFlux与HttpStreamable关系解析
1-Streamable 1-WebFlux与HttpStreamable关系解析2-MCP协议Streamable HTTP 2-参考网址 MCP协议Streamable HTTPMCP协议重大升级,Spring AI Alibaba联合Higress发布业界首个Streamable HTTP实现方案 3-WebFlux与HttpStreamable关系解析 WebFlux 和 HttpStreamabl…...