【web前端】CSS语法
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 单独文件
-
这种方式适用于多个页面需要设置为统一的样式。(可以代码复用)
-
保存时文件扩展名为.css
-
也是在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></…...
JS+CSS3点击粒子烟花动画js特效
JSCSS3点击粒子烟花动画js特效 JSCSS3点击粒子烟花动画js特效...
docker镜像复制与常见命令
一、前言 最近通过阿里的镜像仓库远程拉取镜像,发现以前的版本不见了,拉取了最新的镜像,有发现版本不配问题。那么想使用老版本的镜像那就要从别的环境获取。于是就需要进行离线镜像复制,打包,上传,重新导入…...
如何在linux环境上部署单机ES(以8.12.2版本为例)
ES安装(以8.12.2版本为例) 首先创建好对应的文件夹然后在对应的文件夹下执行依次这些命令 1.wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.12.2-linux-x86_64.tar.gz 2.wget https://artifacts.elastic.co/downloads/…...
如何利用人工智能技术实现企业营销效率提升10倍(下)
01. AI在私域运营中可扮演重要角色 私域用户体验历程中的不满,对企业来说,无疑是一记沉重的打击。这些不满不仅会让用户感到失望和沮丧,更会在无形中侵蚀企业的各个环节,给业务带来不可估量的损失。 在私域环境中,每…...
【PHP + 代码审计】数组函数
🍬 博主介绍👨🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收…...
Keepalive与idle监测及性能优化
Keepalive 与 idle监测 Keepalive(保活): Keepalive 是一种机制,通常用于TCP/IP网络。它的目的是确保连接双方都知道对方仍然存在并且连接是活动的。这是通过定期发送控制消息(称为keepalive消息)实现的。如果在预定时…...
DS-红黑树(RBTree)
一.红黑树 1.1 红黑树的起源 当对对AVL树做一些结构修改的操作时候,性能较为低下,比如:插入时要维护其绝对平衡,旋转的次数比较多,更差的是在删除时,有可能一直要让旋转持续到根的位置。 因此1972年Rudolf…...
ubuntu 如何使用阿里云盘
你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…...
sqlite3 交叉编译
#1.下载源码并解压 源码路径如下,下载autoconf版本 SQLite Download Page 解压 tar -zxvf sqlite-autoconf-3450200.tar.gz cd sqlite-autoconf-3450200 mkdir build # 2. 配置源代码 # 假设你已经安装了交叉编译工具链,如gcc-arm-linux-gnueabih…...
【AI生成文章】flutter ChangeNotifierProvider 实用场景举例
内容由Ai 大模型生成,不能完全保障真实 ChangeNotifierProvider 是 Flutter 中一个非常实用的工具,用于在应用程序中管理和传递状态。以下是一些实用的场景举例: 1. 用户信息管理 在应用程序中,用户信息(如用户名、…...
【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阶段…...
蓝桥杯-02-2023蓝桥杯c/c++省赛B组题目
参考 2023 年第十四届蓝桥杯 C/C B组省赛题解 2023蓝桥杯c/c省赛B组题目(最全版): A:日期统计 这题方法应该很多,没有和别人讨论想法。我的解法思路是:先 load 函数生成所有这一年的合法日期,然后枚举所有可以从数据…...
欧拉筛+并查集
集合 - 洛谷 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]…...
《桥接模式(极简c++)》
本文章属于专栏《设计模式(极简c版)》 继续上一篇《原型模式(极简c)》。本章简要说明桥接模式。本文分为模式说明、本质思想、实践建议、代码示例四个部分。 模式说明 方案: 将抽象部分与它的实现部分分离,…...
jconsole的使用
前提 已安装jdk 使用步骤 1、命令行输入jconsole...
JavaScript详细教程
文章目录 前言一、代码位置二、注释三、变量1.字符串类型2.数组3.对象(字典) 四、条件语句五、函数六、DOM模板 前言 JavaScript 是一种脚本编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息࿰…...
Hive自定义GenericUDF函数
Hive自定义GenericUDF函数 当创建自定义函数时,推荐使用 GenericUDF 类而不是 UDF 类,因为 GenericUDF 提供了更灵活的功能和更好的性能。以下是使用 GenericUDF 类创建自定义函数的步骤: 编写Java函数逻辑:编写继承自 GenericUDF…...
伊理威科技:抖音开网店新手刚做选啥品
在数字浪潮中,抖音不仅是展示才艺的舞台,更是创业者的新天地。新手若想在这片热土上开垦网店,选品便是首要课题。选择产品如同种下希望的种子,既要考量土壤肥沃度,也得预测风雨适宜期。 兴趣与专长是选品的罗盘。热爱所…...
【爬虫】专栏文章索引
为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 爬虫 目录: (一)web自动化和接口自动化 (二)实战-爬取Boss直聘信息数据...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
day36-多路IO复用
一、基本概念 (服务器多客户端模型) 定义:单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用:应用程序通常需要处理来自多条事件流中的事件,比如我现在用的电脑,需要同时处理键盘鼠标…...
