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

【web前端】CSS语法

news 2026/4/9 13:35:25

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

全新版Java面试八股文.pdf出炉, 简直把所有 Java 知识面试题写出来了

作为一个 Java 程序员&#xff0c;你平时总是陷在业务开发里&#xff0c;每天噼里啪啦忙敲着代码&#xff0c;上到系统开发&#xff0c;下到 Bug 修改&#xff0c;你感觉自己无所不能。然而偶尔的一次聚会&#xff0c;你听说和自己一起出道的同学早已经年薪 50 万&#xff0c;而…...

编程新知 2026/4/9 12:51:09

李慕婉-仙逆-造相Z-Turbo应用实战：轻松生成仙逆角色同人图

李慕婉-仙逆-造相Z-Turbo应用实战&#xff1a;轻松生成仙逆角色同人图 1. 快速了解造相Z-Turbo模型 1.1 模型简介 李慕婉-仙逆-造相Z-Turbo是一款基于Z-Image-Turbo模型的LoRA版本&#xff0c;专门用于生成《仙逆》动漫中李慕婉角色的高质量同人图。这个预训练模型已经针对李…...

编程新知 2026/4/9 11:56:09

零基础入门Speech Seaco Paraformer：一键部署中文语音识别Web界面

零基础入门Speech Seaco Paraformer&#xff1a;一键部署中文语音识别Web界面 1. 语音识别技术简介 语音识别技术&#xff08;Automatic Speech Recognition, ASR&#xff09;正在改变我们与设备交互的方式。想象一下&#xff0c;你只需要对着电脑说话&#xff0c;它就能自动…...

编程新知 2026/4/9 11:19:10

极坐标曲线绘制的艺术：从基础图形到复杂路径

1. 极坐标曲线绘制入门指南 第一次接触极坐标曲线时&#xff0c;我被它独特的数学美感深深吸引。与常见的直角坐标系不同&#xff0c;极坐标用距离和角度来描述点的位置&#xff0c;这种表达方式让某些图形的绘制变得异常简单。记得刚开始学习时&#xff0c;我花了整整一个周末…...

编程新知 2026/4/9 9:50:37

PowerPaint-V1 Gradio在文化遗产保护中的应用：古画修复与数字化

PowerPaint-V1 Gradio在文化遗产保护中的应用&#xff1a;古画修复与数字化 1. 引言 一幅珍贵的古代山水画&#xff0c;因为年代久远出现了多处破损和褪色&#xff1b;一张历史照片&#xff0c;因为保存不当而出现了霉斑和裂纹。这些文化遗产的损坏&#xff0c;往往意味着一段…...

编程新知 2026/4/9 8:40:10

Claude Mythos Preview发布文章解读

1. 引入 anthropic于4月7日发布了Mythos Preview模型相关的说明文章&#xff08;参考1&#xff09;&#xff0c;并提出了目前不开放它的政策&#xff0c;还说了它在网安领域的能力很强。 那么&#xff0c;它的这些思路&#xff0c;是出于什么考虑呢&#xff1f; 2. 首次提到的内…...

编程新知 2026/4/9 8:05:46

JSP 动作标签：动态包含、请求转发与登录跳转实战

在 JSP 开发中&#xff0c;除了我们熟悉的page、include指令&#xff0c;JSP 动作标签&#xff08;Action Tag&#xff09;是实现页面复用、请求转发、参数传递的核心利器。 一、JSP 动作标签核心概览 JSP 动作标签是 JSP 提供的内置标签&#xff0c;以jsp:为前缀&#xff0c…...

编程新知 2026/4/9 8:05:46

软中断与硬中断核心区别解析

特性维度硬中断 (Hard Interrupt)软中断 (Soft Interrupt / SoftIRQ)触发源由硬件设备或CPU内部异常&#xff08;如除零、缺页&#xff09;产生&#xff0c;通过中断控制器&#xff08;如APIC&#xff09;向CPU发送电信号 。由运行中的程序&#xff08;通常是内核代码&#xff…...

编程新知 2026/4/9 7:59:37

bge-large-zh-v1.5实测效果：长文本语义匹配精准度展示

bge-large-zh-v1.5实测效果&#xff1a;长文本语义匹配精准度展示 1. 引言 1.1 语义匹配的重要性 在信息爆炸的时代&#xff0c;如何从海量文本中找到语义相关的内容成为关键挑战。无论是构建智能客服系统、开发精准搜索引擎&#xff0c;还是实现文档自动分类&#xff0c;都…...

编程新知 2026/4/9 7:50:18

Qwen3-ASR-1.7B应用案例：在线面试平台→实时语音转文字+回答时长分析

Qwen3-ASR-1.7B应用案例&#xff1a;在线面试平台→实时语音转文字回答时长分析 想象一下&#xff0c;你是一家快速发展的科技公司HR&#xff0c;每天要面试几十位候选人。面试官一边提问&#xff0c;一边手忙脚乱地记录&#xff0c;生怕漏掉关键信息。面试结束后&#xff0c;…...

编程新知 2026/4/9 6:39:47