css四种导入方式

news2024/12/23 23:55:49

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>

目录结构和上述一致

浏览器翻译如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1138705.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

简单电子琴设计verilog蜂鸣器8音阶,视频/代码

名称&#xff1a;简单电子琴设计verilog 软件&#xff1a;QuartusII 语言&#xff1a;Verilog 代码功能&#xff1a; 简易电子琴电路 1、输入为8个按键&#xff0c;每个按键对应一个音阶 2、输出为speaker蜂鸣器&#xff0c;当其中一直按键按下时&#xff0c;输出特定频率…

k8s 部署nginx前端

1.构建docker镜像&#xff0c;k8s拉取镜像运行 ​​​​​​​docker自己安装 [rootmaster1 ~]# docker pull nginx:1.24.0 [rootmaster1 ~]# mkdir k8s-nginx [rootmaster1 ~]# cd k8s-nginx [rootmaster1 k8s-nginx]# vim nginx.conf server_tokens off;server {listen …

第四章 文件管理 七、文件共享

目录 一、基于索引结点的共享方式&#xff08;硬链接) 1、知识回顾&#xff1a; 2、例子&#xff1a; 二、基于符号链的共享方式&#xff08;软链接) 1、例子 三、总结 一、基于索引结点的共享方式&#xff08;硬链接) 1、知识回顾&#xff1a; 索引结点&#xff0c;是一…

前端《中国象棋》游戏

源码下载地址 支持&#xff1a;远程部署/安装/调试、讲解、二次开发/修改/定制 查看视频 本程序是一个基于Html/css/javascrip的网页端象棋APP&#xff0c;其中引入JQuery来简便开发。 在程序中&#xff0c;使用一个Map二维数组来表示棋盘&#xff0c;通过给棋子设置不同的横坐…

【Gradle-11】动态修改VersionName和VersionCode

前言 有个读者问了一个比较有意思又很常见的问题&#xff0c;怎么修改VersionName和VersionCode&#xff1f; 这位读者提问的方式也挺好&#xff0c;报错信息和尝试过的方式都提到了。 关于报错以及解决方案&#xff0c;正如上图我评论回复所说。 静态修改直接在build.gradl…

canvas 状态管理

本文简介 带尬猴&#xff0c;我是德育处主任 canvas 绘图时会根据当前状态来绘制。很多的 canvas 库都利用到这一特性。比如 p5.js 利用了 canvas 状态特性衍生出 push 和 pop 函数实现状态隔离&#xff08;既然提到了&#xff0c;下一篇就讲这个&#xff09;。 有兴趣了解 p…

Fabric.js 样式不更新怎么办?

本文简介 带尬猴&#xff0c;我嗨德育处主任 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式&#xff0c;但刷新画布却没更新元素样式&#xff1f; 如果你也遇到同样的问题的话&#xff0c;可以尝试使用本文的方法。 是否需要重新绘制 我先举个例…

Linux - firewall-cmd 命令添加端口规则不生效排查

文章目录 linux 防火墙 firewall-cmd 命令详解问题排查 linux 防火墙 firewall-cmd 命令详解 基本语法 firewall-cmd --zonezone-name --add-serviceservice-name --permanent命令参数 --zone&#xff1a;指定要添加服务的区域名称。 --add-service&#xff1a;指定要添加的…

开源利器:it-tools 项目介绍

作为一名开发人员&#xff0c;我们在日常工作和学习中常常需要使用一系列小工具&#xff0c;如JSON格式化、JSON转表格、当前时间戳、XML格式化、SQL格式化、密码生成以及UUID生成等。通常情况下&#xff0c;我们会在网上搜索各种在线工具来满足这些需求。然而&#xff0c;这些…

vue3实现图片裁剪上传功能

1、安装引入vue-cropper&#xff08;可参考&#xff1a;https://www.npmjs.com/package/vue-cropper&#xff09; npm install vue-croppernextimport vue-cropper/dist/index.cssimport { VueCropper } from "vue-cropper"; 2、组件完整代码 <template><…

SpringMVC Day 03 : 处理静态资源

前言 欢迎来到第三天的 SpringMVC 学习系列&#xff01;在前两天的教程中&#xff0c;我们已经学习了如何搭建 SpringMVC 环境、创建控制器和处理请求等基础知识。今天&#xff0c;我们将继续探索 SpringMVC 的功能&#xff0c;并学习如何处理静态资源。 在现代 Web 应用程序…

CloudQuery + StarRocks:打造高效、安全的数据库管控新模式

随着技术的迅速发展&#xff0c;各种多元化的数据库产品应运而生&#xff0c;它们不仅类型众多&#xff0c;而且形式各异&#xff0c;国产化数据库千余套&#xff0c;开源数据库百余套 OceanBase 、PolarDB 、StarRocks…还有一些像 Oracle、MySQL 这些传统数据库。这些数据库产…

php+JavaScript实现callback跨域请求jsonp数据

摘要 JSONP 是 JSON with Padding 的缩写&#xff0c;是一种解决跨域数据获取的方案。由于浏览器的同源策略限制&#xff0c;不同域名之间的前端JS代码不能相互访问到对方的数据&#xff0c;JSONP通过script标签的特性&#xff0c;实现在不同域名的网页间传递数据。 其原理是…

vue3项目运行报错import zhCn from “element-plus/lib/locale/lang/zh-cn“

解决办法 import zhCn from "element-plus/lib/locale/lang/zh-cn";修改为 import zhCn from "element-plus/dist/locale/zh-cn.mjs";

MySQL 8.2 – 透明的读写分离(译)

在MySQL 8.2的版本中&#xff0c;MySQL Router能自动分辨对数据库读写/操作并把这些操作路由到正确的实例上&#xff0c;这是要革众多SQL中间件的命&#xff01;大家说这个算不算遥遥领先呢&#xff1f; 关于号主&#xff0c;姚远&#xff1a; Oracle ACE&#xff08;Oracle和…

使用wireshark的字符串过滤功能

1、打开wireshark&#xff0c;捕获一段时间的数据包 2、选中一个数据包的最下面的内容部分&#xff0c;然后右键鼠标&#xff0c;选择"as Printable Text"。 复制出的文字如下&#xff1a; 截图部分字符串(可包含换行、空格等)&#xff0c;然后复制 3、点击菜单栏…

计算机网络-应用层(2)

一、DHCP 当需要跨越多个网段提供DHCP 服务时必须使用DHCP 中继代理&#xff0c; 就是在DHCP 客户和服务器之间转发DHCP 消息的主机或路由器。 DHCP 服务端使用UDP 的67号端口来监听和接收客户请求消息&#xff0c; 保留UDP 的68号端口用于接收来自DHCP 服务器的消息回复。 在…

图的应用3.0-----拓扑排序

目录 前言 AOE网 1.相关概念 2.AOE网特征 拓扑排序 1.基本概念 2.方法步骤 3.拓扑排序的应用 拓扑排序代码实现 1.邻接矩阵的代码 2.邻接表代码 前言 今天我们学习图的应用----拓扑排序&#xff0c;说到排序&#xff0c;你们是不是会想到冒泡排序&#xff0c;插入排序…

网络安全将会是IT行业中比较容易就业的方面

当前&#xff0c;网络空间安全面临的形势复杂多变&#xff0c;对抗趋势越发凸显。以窃取敏感数据、破坏关键信息技术设施为目标的有组织网络攻击愈演愈烈&#xff0c;零日漏洞、供应链攻击、数据泄露等重大安全事件层出不穷。 回望2022年&#xff0c;国内&#xff0c;以西北工业…

OpenTiny Vue 3.11.0 发布:增加富文本、ColorPicker等4个新组件,迎来了贡献者大爆发!

你好&#xff0c;我是 Kagol。 非常高兴跟大家宣布&#xff0c;2023年10月24日&#xff0c;OpenTiny Vue 发布了 v3.11.0 &#x1f389;。 OpenTiny 每次大版本发布&#xff0c;都会给大家带来一些实用的新特性&#xff0c;8.14 我们发布了 v3.10.0 版本&#xff0c;增加了4个…