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

css四种导入方式

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…...

Linux学习第24天:Linux 阻塞和非阻塞 IO 实验(一): 挂起

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

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

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

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.…...

【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.…...

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

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

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

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

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

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

Redis(02)| 数据结构-SDS

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

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 …...

售货机相关的电路

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

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

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

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…...

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

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

超详细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.…...

持续集成部署-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 中的一…...

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

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

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

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

ts声明文件

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

JPA联合主键使用

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...