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

css四种导入方式

news 文章来源：https://blog.csdn.net/qq_50652600/article/details/134058830 2025/4/21 3:08:23

1 行内样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 style="color: blue">我是标题</h1>
</body>
</html>

浏览器翻译如下：

2 页内样式 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>h1{color: green;}</style>
<body>
<h1>我是标题</h1>
</body>
</html>

浏览器翻译如下：

3 外部样式

3.1 链接导入

html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<h1>我是标题</h1>
</body>
</html>

css样式：

/*外部样式*/
h1{color: yellow;
}

目录结构：

 浏览器翻译如下：

注意： 当三种样式同时存在时：优先级为【行内样式>页内样式>外部样式】，测试如下：

如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>h1{color: blue;}
</style>
<link rel="stylesheet" href="css/style.css">
<body>
<h1 style="color: green">我是标题</h1>
</body>
</html>

 浏览器翻译如下：

 发现当三者同时存在时，行内样式的优先级是最高的。

3.2 @导入式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>@import url("css/style.css");</style>
<body>
<h1>第四种导入方式</h1>
</body>
</html>

目录结构和上述一致

浏览器翻译如下

相关文章：

css四种导入方式

1 行内样式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <h1 style"color: blue">我是标题</h1> </body> </htm…...

编程日记 2023/10/29 1:45:26

Linux学习第24天：Linux 阻塞和非阻塞 IO 实验（一）： 挂起

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 在正式开始今天的笔记之前谈一下工作中遇见的一个问题。 本篇笔记主要学习Linux 阻塞和非阻塞 IO 实验&#xff0c;主要包括阻塞和非阻塞简介、等待队列、轮询、…...

编程日记 2023/10/29 1:44:24

037-第三代软件开发-系统音量设置

第三代软件开发-系统音量设置 文章目录 第三代软件开发-系统音量设置项目介绍系统音量设置QML 实现C 实现 总结一下 关键字&#xff1a; Qt、 Qml、 volume、 声音、 GPT 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Obj…...

编程日记 2023/10/29 1:43:23

Python 自动化详解（pyautogui）

文章目录 1 概述1.1 第三方库&#xff1a;pyautogui1.2 坐标说明 2 操作对象2.1 鼠标2.1.1 定位2.1.2 移动2.1.3 拖动2.1.4 滚动2.1.5 点击 2.2 键盘2.2.1 输入2.2.2 按键2.2.3 快捷键 2.3 屏幕2.3.1 截图2.3.2 分辨率 2.4 信息提示2.4.1 提示框2.4.2 选择框2.4.3 密码输入2.4.…...

编程日记 2023/10/29 1:42:21

【Linux】第四站：Linux基本指令（三）

文章目录 一、时间相关的指令1.指令简介2.使用 二、cal指令三、find指令 -name1.介绍2.使用 四、grep指令1.介绍2.使用 五、zip/unzip指令1.介绍2.zip的安装3.使用 六、tar指令&#xff1a;打包解包&#xff0c;不打开它、直接看内容1.介绍2.使用 七、bc指令八、uname -r指令1.…...

编程日记 2023/10/29 1:40:18

SpringBoot内置工具类之断言Assert的使用与部分解析

先例举一个service的demo中用来验证参数对象的封装方法&#xff0c;使用了Assert工具类后是不是比普通的 if(xxx) { throw new RuntimeException(msg) } 看上去要简洁多了&#xff1f; 断言Assert工具类简介 断言是一个判断逻辑&#xff0c;用来检查不该发生的情况&#xff…...

编程日记 2023/10/29 1:39:17

如何检测租用的香港服务器是不是CN2线路呢？

CN2&#xff0c;是中国电信新一代融合承载网络&#xff0c;是为电信自身关键业务和具有QoS保证的SLA业务服务的&#xff0c;可以提供高性能的网络指 标&#xff0c;平均单向时延、最大单向时延、单向丢包率等均属于顶尖水平。简单地说&#xff0c;CN2和普通网络&#xff0c;就像…...

编程日记 2023/10/29 1:38:15

Spring Boot进阶(94)：从入门到精通：Spring Boot和Prometheus监控系统的完美结合

&#x1f4e3;前言 随着云原生技术的发展&#xff0c;监控和度量也成为了不可或缺的一部分。Prometheus 是一款最近比较流行的开源时间序列数据库&#xff0c;同时也是一种监控方案。它具有极其灵活的查询语言、自身的数据采集和存储机制以及易于集成的特点。而 Spring Boot 是…...

编程日记 2023/10/29 1:37:13

Redis（02）| 数据结构-SDS

一、键值对数据库是怎么实现的&#xff1f; 在开始讲数据结构之前&#xff0c;先给介绍下 Redis 是怎样实现键值对&#xff08;key-value&#xff09;数据库的。 Redis 的键值对中的 key 就是字符串对象&#xff0c;而 value 可以是字符串对象&#xff0c;也可以是集合数据类型…...

编程日记 2023/10/29 1:36:12

HackTheBox-Starting Point--Tier 0---Preignition

文章目录 一 题目二 实验过程 一 题目 Tags Web、Custom Applications、Apache、Reconnaissance、Web Site Structure Discovery、Default Credentials译文&#xff1a;Web、定制应用程序、Apache、侦察、网站结构发现、默认凭证Connect To attack the target machine, you …...

编程日记 2023/10/29 1:35:11

售货机相关的电路

一、货道选通矩阵电路&#xff0c;类似扫描电路&#xff0c;驱动哪个电机&#xff0c;就打开相应的行线与列线输出 二、MDB纸币器&#xff0c;虽然现在国内都是手机支付&#xff0c;但如果机器还是外销国外还是有用 三、硬币器电路&#xff0c;投币与退币&#xff0c;脉冲信号…...

编程日记 2023/10/29 1:34:10

软考高项（十四）项目沟通管理 ★重点集萃★

&#x1f451; 个人主页 &#x1f451; &#xff1a;&#x1f61c;&#x1f61c;&#x1f61c;Fish_Vast&#x1f61c;&#x1f61c;&#x1f61c; &#x1f41d; 个人格言 &#x1f41d; &#xff1a;&#x1f9d0;&#x1f9d0;&#x1f9d0;说到做到&#xff0c;言出必行&am…...

编程日记 2023/10/29 1:33:09

Linux多线程服务端编程：使用muduo C++网络库 学习笔记 第五章 高效的多线程日志

“日志&#xff08;logging&#xff09;”有两个意思&#xff1a; 1.诊断日志&#xff08;diagnostic log&#xff09;。即log4j、logback、slf4j、glog、g2log、log4cxx、log4cpp、log4cplus、Pantheios、ezlogger等常用日志库提供的日志功能。 2.交易日志&#xff08;trasac…...

编程日记 2023/10/29 1:32:08

利用Pholcus框架提取小红书数据的案例分析

前言 在当今互联网时代&#xff0c;数据的获取和分析变得越来越重要。爬虫技术作为一种数据采集的方法&#xff0c;被广泛涉及各个领域。在本文中&#xff0c;我们将介绍如何使用Python Spark语言和Pholcus框架来实现一本小红书数据爬虫的案例分析。 开发简述 Go语言作为一种…...

编程日记 2023/10/29 1:30:03

超详细Hadoop安装教程（单机版、伪分布式）

超详细Hadoop安装教程&#xff08;单机版、伪分布式&#xff09; 1.Hadoop分布式系统基础架构介绍1.1.Hadoop核心 2.Hadoop安装教程2.1.环境准备2.2.配置用户ssh 免密登录2.3.JAVA环境的安装和配置2.4.Hadoop安装2.5.单机版Hadoop配置2.6.伪分布式Hadoop配置2.7Hadoop初始化 1.…...

编程日记 2023/10/29 1:29:02

持续集成部署-k8s-服务发现-Ingress

持续集成部署-k8s-服务发现-Ingress 1. Ingress 是什么2. Ingress 控制器3. 安装 Ingress-Nginx3.1 添加 Helm 仓库3.2 更新 Helm 仓库3.3 下载 Ingress-Nginx 安装包3.4 配置 Ingress-Nginx 配置文件参数3.5 安装 Ingress-Nginx1. Ingress 是什么 Ingress是 Kubernetes 中的一…...

编程日记 2023/10/29 1:28:00

从零开始搭建Prometheus+grafana服务器组件监控系统

服务器及相关组件监控 本文档主要记录了常用企业级服务器及各种组件的监控手段和监控部署方案&#xff0c;使企业可以实时感知服务器组件的健康状态&#xff0c;并在服务器或组件出现异常时及时做出反应。 本方案采用的Prometheusgrafana的方式实现对服务器及各种组件的监控&am…...

编程日记 2023/10/29 1:25:55

智能水厂运行与调控3D模拟仿真在线展示提高整个系统的协同效应

水厂在生活中的重要性不可忽视。它们提供清洁、安全的水源&#xff0c;满足人们饮用、洗浴、烹饪等基本需求&#xff0c;保障公共卫生&#xff0c;预防疾病传播;同时&#xff0c;水厂也促进经济发展&#xff0c;为工业生产和农业灌溉提供保障&#xff0c;吸引和支持企业的投资和…...

编程日记 2023/10/29 1:23:51

ts声明文件

1 背景 对于为第三方模块/库写声明文件之前&#xff0c;我们需要知道第三方模块/库&#xff0c;是否需要声明文件&#xff0c;或者是否已有声明文件。 若第三方模块/库&#xff0c;是ts编写且无声明文件&#xff0c; 可以使用--declaration配置选项来生成&#xff1b;可以在命…...

编程日记 2023/10/29 1:21:48

JPA联合主键使用

在实际工作中&#xff0c;我们会经常遇到联合主键的情况&#xff0c;所以我用简单例子列举JPA两种实现联合主键的方式。 1、如何通过IdClass 实现联合主键 第一步:新建一个UserInfoID类&#xff0c;里面是联合主键 Data Builder NoArgsConstructor AllArgsConstructor publi…...

编程日记 2023/10/29 1:20:47

【计算机毕设经典案例】基于微信小程序的图书管理系统

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 &#x1f449;IT源码社-SpringBoot优质案例推荐&#x1f448; &#x1f449;IT源码社-小程序优质案例…...

编程日记 2023/10/29 1:19:44

如何制作rpm离线安装包

如何制作rpm离线安装包 在内网环境中使用rpm安装zabbix-agent-6.4.6时&#xff0c;发现rpm无法下载依赖 1.准备一个可以连接外网的纯净centos7环境 防止本地已有的依赖不会被重复下载 docker pull centos:7docker stop mycentos7 docker rm mycentos72.启动centos7并挂载一…...

编程日记 2023/10/29 1:17:42

golang中快速用melody搭建轻量的websocket服务

在Go中&#xff0c;可以使用gin和melody库来搭建一个轻量级的WebSocket服务。gin是一个流行的Web框架&#xff0c;而melody是一个用于处理WebSocket的库。以下是一个简单的示例代码&#xff0c;演示了如何使用gin和melody搭建WebSocket服务&#xff1a; package mainimport (&…...

编程日记 2023/10/29 1:16:41

​Profinet转EtherNET/IP从站连接欧姆龙plc与西门子200smart通讯的配置方法​

本案例是200smart plc与欧姆龙plc进行通讯的方法&#xff0c;远创智控YC-PNM-EIP网关可以读写全系列西门子 PLC 数据。一般不需要 PLC 里做特殊的设置。只需要把 PLC 的变量地址配置到网关中&#xff0c;网关就可以读取指定地址的数据或者写数据到指定的地址。 PLC 通过网线连接…...

编程日记 2023/10/29 1:15:38

elementUI el-table实现鼠标悬浮某一行，在鼠标右侧展示提示信息

背景 el-table组件中&#xff0c;可以通过勾选某条数据来创建单据&#xff0c;但是有些数据没有权限使用&#xff0c;就需要禁用掉勾选的功能&#xff0c;然后当鼠标悬浮在这一行的时候&#xff0c;展示类似于toolTip的提示框。 除了当鼠标悬浮在某一行&#xff0c;展示类似于…...

编程日记 2023/10/29 1:14:35

Java 使用 poi 和 aspose 实现 word 模板数据写入并转换 pdf 增加水印

本项目所有源码和依赖资源都在文章顶部链接&#xff0c;有需要可以下载使用 1. 需求描述 从指定位置读取一个 word 模板获取业务数据并写入该 word 模板&#xff0c;生成新的 word 文档将新生成的 word 文档转换为 pdf 格式对 pdf 文档添加水印 2. 效果预览 word 模板 带水印的…...

编程日记 2023/10/29 1:13:33

Spring Boot进阶(93)：体验式教程：手把手教你整合Spring Boot和Zipkin

&#x1f4e3;前言 分布式系统开发中&#xff0c;服务治理是一个比较重要的问题。为了更好地实现服务治理&#xff0c;需要解决服务跟踪问题&#xff0c;即如何对分布式系统中的服务进行监控和追踪。本文将介绍如何使用Zipkin进行服务跟踪&#xff0c;并结合Spring Boot进行整合…...

编程日记 2023/10/29 1:12:32

Lvs +keepalivede : 高可用集群

keepalived为Ivs应运而生的高可用服务。Ivs的调度器无法做高可用&#xff0c;于是keepalived这个软件。 实现的是调度器的高可用。 但是: keepalived不是专为Ivs集群服务的&#xff0c;也可以做其他代理服务器的高可用。 lvs的高可用集群&#xff1a;主调度器和备调度器&…...

编程日记 2023/10/29 1:11:31

得物 Redis 设计与实践yu

一、前言 自建 Redis 系统是得物 DBA 团队自研高性能分布式 KV 缓存系统&#xff0c;目前管理的 ECS 内存总容量超过数十TB&#xff0c;数百多个 Redis 缓存集群实例&#xff0c;数万多个 Redis 数据节点&#xff0c;其中内存规格超过 1T 的大容量集群多个。 自建 Redis 系统采…...

编程日记 2023/10/29 1:10:29

优咔科技创新连接方案助力高质量5G车联服务

上海优咔网络科技有限公司 CEO 闫楠 【摘要】本文就智能网联汽车对高质量5G车联服务的需求背景和行业趋势进行了分析&#xff0c;主要介绍采用5G双SIM卡的创新连接方案&#xff0c;重点讲述双SIM卡联网的端到端体系架构和技术方案&#xff0c;并就优咔科技全方位支撑行业领先车…...

编程日记 2023/10/29 1:09:27