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

【web前端】CSS语法

news 2025/9/21 7:45:14

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

linux之kylin系统nginx的安装

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

编程新知 2025/9/18 1:41:40

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/8/19 5:37:33

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/9/4 15:28:38

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/2 19:12:02

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/9/2 17:49:27

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/7/14 0:13:22

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2025/9/2 16:50:38

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

编程新知 2025/7/20 9:03:21

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2025/9/18 12:48:45