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

【web前端】CSS语法

news 2026/5/28 21:43:47

CSS语法

1. CSS语法格式

通常情况下语法格式如下:

选择器{属性名:属性值;属性名:属性值;属性名:属性值;...
}

2. CSS添加方式

2.1 行内样式

直接将样式写在本行的标签内。

    <h1><p style="font-size: 48px;  color:red;";>行内样式测试</p></h1><p>行内样式-对比行</p>

运行效果：

在这里插入图片描述

可以看出，行内样式只对当前行产生效果。

2.2 内嵌样式

内嵌样式一般放在HTML文件的 header 中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内嵌样式</title><style>/* P标签的内容全部遵循style格式 */p {font-size: 24px;color: red;font-weight: bold;}</style>
</head>
<body><p>第一行</p><p>第二行</p>
</body>
</html>

运行效果:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 单独文件

  1. 这种方式适用于多个页面需要设置为统一的样式。（可以代码复用）

  2. 保存时文件扩展名为.css

  3. 也是在head中使用

格式：

<link rel="stylesheet" href="D:\code\4html+css+JS\2024_03_19\global.css">

运行结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. CSS选择器

4.1 标签选择器

标签在最前面

选择器 {属性名:属性值;...
}

只要带有选择器的标识的，都会使用此样式

4.2 类选择器

使用 “.” 开头

.类名 {属性名:属性值;...
}

多类选择器：

.类名1.类名2 {属性名:属性值;...
}

4.3 ID选择器

使用 “#” 开头

#ID名 {属性名:属性值;...
}

4.4 复合选择器

多个标签在前面

a b c {属性名:属性值;...
}

a标签下的 b标签下的 c标签设置css样式

相关文章：

【web前端】CSS语法

CSS语法 1. CSS语法格式 通常情况下语法格式如下: 选择器{属性名:属性值;属性名:属性值;属性名:属性值;... }2. CSS添加方式 2.1 行内样式 直接将样式写在本行的标签内。 <h1><p style"font-size: 48px; color:red;";>行内样式测试</p></…...

编程日记 2024/3/23 22:13:48

JS+CSS3点击粒子烟花动画js特效

JSCSS3点击粒子烟花动画js特效 JSCSS3点击粒子烟花动画js特效...

编程日记 2024/3/23 22:10:46

docker镜像复制与常见命令

一、前言 最近通过阿里的镜像仓库远程拉取镜像&#xff0c;发现以前的版本不见了&#xff0c;拉取了最新的镜像&#xff0c;有发现版本不配问题。那么想使用老版本的镜像那就要从别的环境获取。于是就需要进行离线镜像复制&#xff0c;打包&#xff0c;上传&#xff0c;重新导入…...

编程日记 2024/3/23 22:09:45

如何在linux环境上部署单机ES（以8.12.2版本为例）

ES安装&#xff08;以8.12.2版本为例&#xff09; 首先创建好对应的文件夹然后在对应的文件夹下执行依次这些命令 1.wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.12.2-linux-x86_64.tar.gz 2.wget https://artifacts.elastic.co/downloads/…...

编程日记 2024/3/23 22:08:44

如何利用人工智能技术实现企业营销效率提升10倍（下）

01. AI在私域运营中可扮演重要角色 私域用户体验历程中的不满&#xff0c;对企业来说&#xff0c;无疑是一记沉重的打击。这些不满不仅会让用户感到失望和沮丧&#xff0c;更会在无形中侵蚀企业的各个环节&#xff0c;给业务带来不可估量的损失。 在私域环境中&#xff0c;每…...

编程日记 2024/3/23 22:06:42

【PHP + 代码审计】数组函数

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…...

编程日记 2024/3/23 22:05:41

Keepalive与idle监测及性能优化

Keepalive 与 idle监测 Keepalive&#xff08;保活&#xff09;: Keepalive 是一种机制&#xff0c;通常用于TCP/IP网络。它的目的是确保连接双方都知道对方仍然存在并且连接是活动的。这是通过定期发送控制消息&#xff08;称为keepalive消息&#xff09;实现的。如果在预定时…...

编程日记 2024/3/23 22:04:40

DS-红黑树(RBTree)

一.红黑树 1.1 红黑树的起源 当对对AVL树做一些结构修改的操作时候&#xff0c;性能较为低下&#xff0c;比如&#xff1a;插入时要维护其绝对平衡&#xff0c;旋转的次数比较多&#xff0c;更差的是在删除时&#xff0c;有可能一直要让旋转持续到根的位置。 因此1972年Rudolf…...

编程日记 2024/3/23 22:02:38

ubuntu 如何使用阿里云盘

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…...

编程日记 2024/3/23 22:00:36

sqlite3 交叉编译

#1.下载源码并解压 源码路径如下&#xff0c;下载autoconf版本 SQLite Download Page 解压 tar -zxvf sqlite-autoconf-3450200.tar.gz cd sqlite-autoconf-3450200 mkdir build # 2. 配置源代码 # 假设你已经安装了交叉编译工具链&#xff0c;如gcc-arm-linux-gnueabih…...

编程日记 2024/3/23 21:58:34

【AI生成文章】flutter ChangeNotifierProvider 实用场景举例

内容由Ai 大模型生成&#xff0c;不能完全保障真实 ChangeNotifierProvider 是 Flutter 中一个非常实用的工具&#xff0c;用于在应用程序中管理和传递状态。以下是一些实用的场景举例&#xff1a; 1. 用户信息管理 在应用程序中&#xff0c;用户信息&#xff08;如用户名、…...

编程日记 2024/3/23 21:57:33

【0274】从shared init file或local init file加载relation cache（2 - 1）

上一篇： 【0273】深入分析 relcache（relation descriptor cache）初始化第一阶段（1） 【0264】深入分析relcache（relation descriptor cache）缓存初始化第2阶段（2） 1. 前言 本文内容是作为《【0264】深入分析relcache（relation descriptor cache）缓存初始化第2阶段…...

编程日记 2024/3/23 21:54:31

蓝桥杯-02-2023蓝桥杯c/c++省赛B组题目

参考 2023 年第十四届蓝桥杯 C/C B组省赛题解 2023蓝桥杯c/c省赛B组题目(最全版)&#xff1a; A&#xff1a;日期统计 这题方法应该很多&#xff0c;没有和别人讨论想法。我的解法思路是&#xff1a;先 load 函数生成所有这一年的合法日期&#xff0c;然后枚举所有可以从数据…...

编程日记 2024/3/23 21:53:30

欧拉筛+并查集

集合 - 洛谷 std::vector<int> minp, primes,primes1;void sieve(int n,int p) {minp.assign(n 1, 0);primes.clear();for (int i 2; i < n; i) {if (minp[i] 0) {minp[i] i;primes.push_back(i);}for (auto p : primes) {if (i * p > n) {break;}minp[i * p]…...

编程日记 2024/3/23 21:51:27

《桥接模式（极简c++）》

本文章属于专栏《设计模式&#xff08;极简c版&#xff09;》 继续上一篇《原型模式&#xff08;极简c&#xff09;》。本章简要说明桥接模式。本文分为模式说明、本质思想、实践建议、代码示例四个部分。 模式说明 方案&#xff1a; 将抽象部分与它的实现部分分离&#xff0c…...

编程日记 2024/3/23 21:49:25

jconsole的使用

前提 已安装jdk 使用步骤 1、命令行输入jconsole...

编程日记 2024/3/23 21:43:21

JavaScript详细教程

文章目录 前言一、代码位置二、注释三、变量1.字符串类型2.数组3.对象&#xff08;字典&#xff09; 四、条件语句五、函数六、DOM模板 前言 JavaScript 是一种脚本编程语言&#xff0c;它可以在网页上实现复杂的功能&#xff0c;网页展现给你的不再是简单的静态信息&#xff0…...

编程日记 2024/3/23 21:41:19

Hive自定义GenericUDF函数

Hive自定义GenericUDF函数 当创建自定义函数时&#xff0c;推荐使用 GenericUDF 类而不是 UDF 类&#xff0c;因为 GenericUDF 提供了更灵活的功能和更好的性能。以下是使用 GenericUDF 类创建自定义函数的步骤&#xff1a; 编写Java函数逻辑&#xff1a;编写继承自 GenericUDF…...

编程日记 2024/3/23 21:38:16

伊理威科技：抖音开网店新手刚做选啥品

在数字浪潮中&#xff0c;抖音不仅是展示才艺的舞台&#xff0c;更是创业者的新天地。新手若想在这片热土上开垦网店&#xff0c;选品便是首要课题。选择产品如同种下希望的种子&#xff0c;既要考量土壤肥沃度&#xff0c;也得预测风雨适宜期。 兴趣与专长是选品的罗盘。热爱所…...

编程日记 2024/3/23 21:37:15

【爬虫】专栏文章索引

为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 爬虫 目录&#xff1a; &#xff08;一&#xff09;web自动化和接口自动化 &#xff08;二&#xff09;实战-爬取Boss直聘信息数据...

编程日记 2024/3/23 21:36:14

【DeepSeek测试用例生成实战指南】：20年QA专家亲授5大高覆盖率生成模式与3个避坑红线

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek测试用例生成的核心价值与适用边界 DeepSeek系列大模型在代码理解与生成任务中展现出显著的上下文建模能力&#xff0c;其测试用例生成功能并非通用“黑盒测试器”&#xff0c;而是聚焦于**单元级、函…...

编程新知 2026/5/26 1:53:13

终极鼠标连点器使用指南：3分钟掌握高效自动化技巧

终极鼠标连点器使用指南&#xff1a;3分钟掌握高效自动化技巧 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界面美观 &#xff0c;操作…...

编程新知 2026/5/26 1:06:50

学术写作创新突破！2026全流程AI论文工具精选指南

2026 年 AI 论文写作工具已进入全流程闭环 学术合规时代&#xff0c;千笔 AI&#xff08;综合评分 99 分&#xff09;中文学术场景标杆&#xff1b;Grammarly Academic与Elicit为英文论文写作首选&#xff1b;按需求匹配度 - 数据可信度 - 成本承受力三维模型选型&#xff0c;…...

编程新知 2026/5/26 0:26:14

科华UPS电源全品类汇总：选型与场景适配指南

科华UPS电源作为国内智慧电能领域的主流产品&#xff0c;覆盖家用、办公、机房、工业等全场景&#xff0c;产品系列丰富、规格齐全&#xff0c;但多数用户在选型时&#xff0c;常因分不清系列差异、功率适配、架构类型而踩坑。本文系统汇总科华UPS电源的核心分类、主流系列、核…...

编程新知 2026/5/25 23:29:24

别再死磕USB HID了！用ESP32的Arduino框架手把手教你实现蓝牙鼠标键盘（附完整代码）

ESP32蓝牙HID实战&#xff1a;零基础打造自定义键盘鼠标 手里那块吃灰的ESP32开发板终于能派上用场了&#xff01;上周我用它做了个无线演示控制器&#xff0c;在会议室里走着就能翻PPT&#xff0c;同事们都问是怎么实现的。其实秘诀就在于ESP32的蓝牙HID功能——不需要任何USB…...

编程新知 2026/5/25 22:12:18

DIY四路自动音频源切换器：从信号检测到继电器隔离的完整设计

1. 项目概述与核心需求解析作为一个喜欢在工作室里捣鼓各种音频设备的玩家&#xff0c;我经常遇到一个挺烦人的问题&#xff1a;我的功放只有一组输入&#xff0c;但我想接的设备却有好几个——台式电脑、平板、蓝牙接收模块&#xff0c;还有一台树莓派。每次想切换音源&#x…...

编程新知 2026/5/25 20:59:15

别再手动测模型了！用Simulink Test Manager实现自动化测试（附Excel表格配置详解）

从手动测试到智能验证&#xff1a;Simulink Test Manager全流程自动化实战指南 在模型开发的迭代过程中&#xff0c;工程师们常常陷入"修改-测试-记录"的循环泥潭。每次参数调整后&#xff0c;手动运行模型、记录数据、比对结果不仅消耗大量时间&#xff0c;更可能因…...

编程新知 2026/5/25 20:55:13

别再只用鼠标了！用Leap Motion手势控制Unity游戏，保姆级配置避坑指南（2024版）

2024年Unity手势交互开发实战&#xff1a;Leap Motion从配置到游戏逻辑全解析在游戏开发领域&#xff0c;交互方式的创新往往能带来全新的体验。想象一下&#xff0c;玩家不再需要键盘鼠标&#xff0c;仅凭自然的手部动作就能操控游戏角色——这正是Leap Motion手势识别技术为U…...

编程新知 2026/5/25 20:49:10

微信小程序项目实战：从npm安装Vant Weapp到解决样式冲突的完整避坑指南

微信小程序工程化实战&#xff1a;Vant Weapp集成与样式冲突解决方案全解析 第一次在小程序里引入Vant Weapp时&#xff0c;我对着满屏错位的组件样式发呆了半小时——原本优雅的按钮变成了扭曲的色块&#xff0c;表单元素叠在一起像抽象画。这不是个例&#xff0c;根据社区反…...

编程新知 2026/5/25 20:20:03

3分钟告别英文恐惧：Android Studio中文界面轻松切换指南

3分钟告别英文恐惧&#xff1a;Android Studio中文界面轻松切换指南 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 你是否曾经因…...

编程新知 2026/5/25 20:11:59