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

01_前端css编写的三种方式

news 2026/5/13 16:02:49

前言

  • CSS的引入方式共有三种：行内样式、内部样式表、外部样式表

一、内联式引入

  • 用法： 在元素上直接通过style属性进行设置css样式设置
  • 示例：
<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
  • 实际在写页面时不提倡使用，在测试的时候可以使用。
  • 例如：
<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>CSS样式引入方式一：内联式</title>
</head>
<body><!--使用行内样式引入CSS--><h1 style="color:red;font-size: 50px;">pytohon9999</h1><p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

二、内部样式表引入

  • 用法： 在style标签中书写CSS代码。style标签写在head标签中
  • 例如：
<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>CSS样式引入方式二：内部样式表</title><!-- 使用内部样式表引入CSS--><style type="text/css">div {background: rosybrown;color: red;width: 20px;height: 60px;}</style></head>
<body><div>pytohon9999</div>
</body></html>

三、外联式引入

  • 用法：

  • CSS代码保存在扩展名为.css的样式表中

  • HTML文件引用扩展名为.css的样式表

  • 有两种方式：链接式、导入式

  • 例如：

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>CSS样式引入方式三：外联式引入</title><!-- 链接式：推荐使用 --><link rel="stylesheet" href="./css文件的样式.css"><!-- 导入式 --><style type="text/css">@import url("./css文件.css");</style></head>
<body><div>pytohon9999</div>
</body></html>

四、CSS 中的优先级

  • 1. 样式的优先级
  • 行内样式 > 内部样式 > 外部样式(后两者是就近原则)
  • 1.1 行内样式 和 **内部样式 **比较优先级：
<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>行内样式和内部样式表的优先级</title><!--内部部样式表--><style type="text/css">div {background: green;}</style>
</head>
<body><!--行内样式--><div style="background: red;font-size: 50px;color: aliceblue;">pytohon9999</div>
</html>
  • 浏览器运行效果：

image.png

  • 结论：行内样式优先级高于内部样式表
  • 1.2 **内部样式表 和 外部样式 **比较优先级：
<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>内部样式表 和 外部样式的优先级</title><!-- 外联式之：链接式 --><link rel="stylesheet" href="./css文件.css"><!--内部部样式表--><style type="text/css">div {background: green;}</style></head>
<body><!--行内样式--><div>pytohon9999</div>
</html>
  • 浏览器运行效果：

image.png

  • 结论：行内样式优先级高于内部样式表

相关文章：

01_前端css编写的三种方式

前言 CSS的引入方式共有三种&#xff1a;行内样式、内部样式表、外部样式表 一、内联式引入 用法&#xff1a; 在元素上直接通过style属性进行设置css样式设置 示例&#xff1a; <h1 style"color:red;">style属性的应用</h1> <p style"font-si…...

编程日记 2023/9/10 6:31:06

07-垃圾收集算法详解

上一篇&#xff1a;06-JVM对象内存回收机制深度剖析 1.分代收集理论 当前虚拟机的垃圾收集都采用分代收集算法&#xff0c;这种算法没有什么新的思想&#xff0c;只是根据对象存活周期的不同将内存分为几块。一般将java堆分为新生代和老年代&#xff0c;这样我们就可以根据各…...

编程日记 2023/9/10 6:30:06

Redis高并发分布式锁实战

高并发场景秒杀抢购超卖bug实战重现 秒杀抢购场景下实战JVM级别锁与分布式锁 大厂分布式锁Resisson框架实战 Lua脚本语言快速入门与使用注意事项 Redisson分布式锁源码剖析 Redis主从架构锁失效问题解析 从CAP角度剖析Redis与Zookeeper分布式锁区别 Redlock分布式锁原理与…...

编程日记 2023/9/10 6:29:04

MybatisPlus分页插件使用

一. 效果展示 二. 代码编写 2.1 pom <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version> </dependency>2.2 添加配置类 Configuration MapperScan(…...

编程日记 2023/9/10 6:28:03

Linux指令二【进程，权限，文件】

进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程&#xff0c;是操作系统进行 资源分配和调度的一个独立单位&#xff0c;是应用程序运行的载体。 一、进程基本指令 1.ps&#xff1a;当前的用户进程 ps 只显示隶属于自己的进程状态ps -aux 显示所有进程…...

编程日记 2023/9/10 6:27:02

uni-app运行到微信开发者工具-没有打印的情况

前言 到我们进场使用微信开发者工具时&#xff0c;就会发现它经常会有bug&#xff0c;特别是在软件更新&#xff0c;组件库更新之后 最近在更新微信开发者工具之后发现所有打印都不显示了&#xff0c;虽然是小问题-但对于强迫症很烦 以为是代码配置问题-结果是更新之后打印开…...

编程日记 2023/9/10 6:26:01

由前端接口入门学习后端的controller层

由前端接口入门学习后端的controller层 一、简单介绍一下controller层&#xff1a;二、前端调用后端接口时&#xff0c;一般会传递参数给后端&#xff0c;后端的控制层是如何接收的呢&#xff1f;三、更深入地介绍一下关于请求体参数DTO作为入参Map作为入参 本文是以一个前端工…...

编程日记 2023/9/10 6:24:59

HJ71 字符串通配符

Powered by:NEFU AB-IN Link 文章目录 HJ71 字符串通配符题意思路代码 HJ71 字符串通配符 题意 问题描述&#xff1a;在计算机中&#xff0c;通配符一种特殊语法&#xff0c;广泛应用于文件搜索、数据库、正则表达式等领域。现要求各位实现字符串通配符的算法。 要求&#xff…...

编程日记 2023/9/10 6:23:58

ffmpeg 开发笔记

参考&#xff1a; FFmpeg音视频处理 - 知乎 通过python实时生成音视频数据并通过ffmpeg推送和混流 - 知乎 直播常用 FFmpeg & ffplay 命令 - 知乎 音视频 FFMPEG 滤镜使用 - 知乎 官网&#xff1a; ffmpeg Documentation...

编程日记 2023/9/10 6:22:57

一种基于注意机制的快速、鲁棒的混合气体识别和浓度检测算法，配备了具有双损失函数的递归神经网络

A fast and robust mixture gases identification and concentration detection algorithm based on attention mechanism equipped recurrent neural network with double loss function 摘要 提出一个由注意力机制组成的电子鼻系统。首先采用端到端的编码器译码器&#xff…...

编程日记 2023/9/10 6:21:55

[运维|系统] go程序设置开机启动踩坑笔记

参考文献 记systemctl启动go程序 在Ubuntu上作为systemctl服务运行时Go找不到文件 go语言程序设置开机启动&#xff0c;配置不生效 需要在服务配置文件中加入工作目录配置&#xff0c;示例 WorkingDirectory/path/to/go/program/directory...

编程日记 2023/9/10 6:20:54

CRC原理介绍及STM32 CRC外设的使用

1. CRC简介 循环冗余校验&#xff08;英语&#xff1a;Cyclic redundancy check&#xff0c;简称CRC&#xff09;&#xff0c;由 W. Wesley Peterson 于 1961 年首次提出的一种纠错码理论。 CRC是一种数据纠错方法&#xff0c;主要应用于数据通信或者数据存储的场合&#xff…...

编程日记 2023/9/10 6:19:54

Python 操作 Word

上次给大家介绍了 Python 如何操作 Excel &#xff0c;是不是感觉还挺有趣的&#xff0c;今天为大家再介绍下&#xff0c;用 Python 如何操作 Word &#xff0c;这个可能跟数据处理关系不大&#xff0c;用的也不多&#xff0c;不过可以先了解下都能实现什么功能&#xff0c;以备…...

编程日记 2023/9/10 6:18:53

Linux--进程创建(fork)-退出--孤儿进程

进程创建&#xff1a; ①使用fork函数创建一个进程&#xff0c;创建的新进程被称为子进程。 #include <unistd.h>//头文件 pid_t fork(void); fork函数调用成功&#xff0c;返回两次&#xff1a; 返回值为0&#xff0c; 代表当前进程为子进程&#xff1b; 返回值为非负数…...

编程日记 2023/9/10 6:17:50

LeetCode 热题 HOT 100：链表专题

LeetCode 热题 HOT 100&#xff1a;https://leetcode.cn/problem-list/2cktkvj/ 文章目录 2. 两数相加19. 删除链表的倒数第 N 个结点21. 合并两个有序链表23. 合并 K 个升序链表141. 环形链表142. 环形链表 II148. 排序链表160. 相交链表206. 反转链表234. 回文链表 2. 两数相…...

编程日记 2023/9/10 6:16:49

Redis发布订阅

在现代的软件开发中&#xff0c;数据存储和管理是至关重要的一环。Redis&#xff0c;作为一个开源的、内存中的数据结构存储系统&#xff0c;以其出色的性能和灵活的数据结构&#xff0c;赢得了开发者们的广泛喜爱。它不仅可以用作数据库&#xff0c;还可以用作缓存和消息代理。…...

编程日记 2023/9/10 6:15:47

在Windows操作系统上安装PostgreSQL数据库

在Windows操作系统上安装PostgreSQL数据库 一、在Windows操作系统上安装PostgreSQL数据库 一、在Windows操作系统上安装PostgreSQL数据库 点击 PostgreSQL可跳转至PostGreSQL的官方下载地址。 &#xff08;1&#xff09; &#xff08;2&#xff09;选择安装的目录&#xff…...

编程日记 2023/9/10 6:14:46

【云原生】Kubeadmin部署Kubernetes集群

目录 ​编辑 一、环境准备 1.2调整内核参数 二、所有节点部署docker 三、所有节点安装kubeadm&#xff0c;kubelet和kubectl 3.1定义kubernetes源 3.2开机自启kubelet 四、部署K8S集群 4.1查看初始化需要的镜像 4.2在 master 节点上传 v1.20.11.zip 压缩包至 /opt 目录…...

编程日记 2023/9/10 6:13:44

Java中wait和notify详解

线程的调度是无序的&#xff0c;随机的&#xff0c;但是也是有一定的需求场景&#xff0c;希望能够有序执行&#xff0c;join算是一种控制顺序的方式&#xff08;功能有限&#xff09;——》一个线程执行完&#xff0c;才能执行另一个线程&#xff01; 本文主要讲解的&#xf…...

编程日记 2023/9/10 6:12:44

算法竞赛个人注意事项

浅浅记录一下自己在算法竞赛中的注意事项。 数据类 注意看数大小&#xff0c;数学库中的函数尽量加上 * 1.0&#xff0c;转成double&#xff0c;防止整型溢出。&#xff0c;int型相乘如果可能溢出&#xff0c;乘 * 1LL。 数据范围大于1e6&#xff0c;注意用快读。 浮点数输…...

编程日记 2023/9/10 6:11:43

Docker 学习笔记：镜像分发、容器运行与资源限制

Docker 学习笔记&#xff1a;镜像分发、容器运行与资源限制本笔记续接上一部分&#xff0c;涵盖镜像命名与分发、容器的核心操作、底层技术&#xff08;cgroup/namespace&#xff09;以及 CPU/内存资源限制。所有案例代码均经验证&#xff0c;直接可用。8. 镜像命名与分发最佳实…...

编程新知 2026/5/13 14:57:53

凌扬微优势代理 LY3206S / LY3206L 多模式电机驱动芯片 SOP8 技术解析

在剃须刀、理发剪、毛球修剪器等便携式马达产品中&#xff0c;需要一款集成锂电池充电管理、电机驱动、多种档位模式&#xff08;1/2/3档&#xff09;以及使能控制的芯片&#xff0c;以简化电路设计并满足不同产品需求。LY3206是一款集成了锂电池充电管理模块、电机驱动模块、续…...

编程新知 2026/5/13 14:53:39

【Claude API集成实战指南】：20年专家亲授FastAPI高效对接Claude的7大避坑法则

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude API集成的核心原理与FastAPI技术选型 Claude API 采用基于 HTTP/2 的流式 REST 接口设计&#xff0c;核心通信模式为双向流&#xff08;/v1/messages 端点&#xff09;&#xff0c;支持 event:…...

编程新知 2026/5/13 14:32:58

保姆级教程：在Windows 10上搞定QGroundControl 4.2源码编译与打包（附VS+QT配置）

Windows 10下QGroundControl 4.2开发环境全栈搭建指南 第一次接触无人机地面站开发时&#xff0c;我被QGroundControl强大的功能所吸引&#xff0c;但配置开发环境的过程却让我踩了不少坑。从VS安装版本选择到QT组件配置&#xff0c;再到最后的打包发布&#xff0c;每个环节都可…...

编程新知 2026/5/13 13:44:43

使用Taotoken后API调用延迟稳定在可接受范围且账单清晰可见

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用Taotoken后API调用延迟稳定在可接受范围且账单清晰可见 1. 引言 对于需要集成大模型能力的开发者而言&#xff0c;除了模型效…...

编程新知 2026/5/13 13:09:20

毫米波雷达选型指南：HLK-LD1125H-24G vs 传统红外/超声波，在智能办公场景下怎么选？

毫米波雷达选型指南&#xff1a;HLK-LD1125H-24G vs 传统红外/超声波&#xff0c;在智能办公场景下怎么选&#xff1f; 在智能办公场景中&#xff0c;人员检测技术的选择直接影响着空间管理效率与用户体验。传统红外&#xff08;PIR&#xff09;和超声波传感器曾长期主导市场&…...

编程新知 2026/5/13 12:43:08

收藏！小白程序员轻松入门大模型，高薪就业秘籍大公开！

收藏&#xff01;小白程序员轻松入门大模型&#xff0c;高薪就业秘籍大公开&#xff01; 本文为想入行AI应用开发的程序员提供了一条“先进门、再补短板”的转型路径。核心内容包括夯实Python基础、掌握AI应用核心概念&#xff08;如RAG、Prompt工程、Agent智能体&#xff09;、…...

编程新知 2026/5/13 9:21:54

为Claude Code配置Taotoken解决账号被封与Token不足的烦恼

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为Claude Code配置Taotoken解决账号被封与Token不足的烦恼 对于依赖Claude Code进行编程辅助的开发者来说&#xff0c;直接使用官方…...

编程新知 2026/5/13 8:53:25

专业右键菜单管理：用ContextMenuManager一键重塑Windows操作效率

专业右键菜单管理&#xff1a;用ContextMenuManager一键重塑Windows操作效率 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 在Windows生态中&#xff0c;右键菜…...

编程新知 2026/5/13 8:19:26

机器学习在芯片电容提取中的应用与挑战

1. 电容提取的技术挑战与机器学习机遇在芯片设计流程中&#xff0c;电容提取是决定最终产品性能的关键环节。当设计进入物理实现阶段&#xff0c;工程师需要精确计算互连结构中导体间的寄生电容&#xff0c;这些数据直接影响时序收敛和功耗分析。传统基于数值求解器的方法&…...

编程新知 2026/5/13 7:45:31