CSS样式的三种引入方式及优先级

news2024/11/29 14:51:43

说明:网页开发有三种技术,分别是html、css和js,分别对应页面的结构、表现和动作。css样式引入,是指把对页面的渲染作用到html上,有以下三种方式:行内式、内嵌式和外联式。

第一种:行内式(不推荐)

在标签内设置样式,多个属性设置用分号(;)间隔

<!-- 用行内式设置字体颜色为蓝色 -->
<h1 style="color: blue;">行内式</h1>

在这里插入图片描述

第二种:内嵌式(推荐)

在body标签外设置style标签,在style标签内写html元素的属性。建议style标签,写在head标签内。

<head>
……
<style>
    /* 用内嵌式设置字体颜色为蓝色*/
    h1 {
        color: red;
    }
</style>

<!-- 建议style标签写在head标签内 -->
</head>
<body>
    <h1>内嵌式</h1>
</body>

在这里插入图片描述

第三种:外联式(专业)

把样式代码抽出来,生成一个.css为后缀的文件,html需要用的话,引用就行,且可以外联多个css文件。需要注意的是,路径可以用绝对路径;但要用相对路径的话,路径是html文件视角的,“./”表示html文件的平级目录;“…/”表示上级目录,“…/…/”表示上上级目录,以此类推。

<head>
……
    <!-- vscode 敲"link:css"会有代码提示 -->
    <link rel="stylesheet" href="../essay/css.css">

</head>
<body>
    <h1>外联式</h1>
</body>

在这里插入图片描述
在这里插入图片描述

优先级

html元素使用样式的原则是:就近原则,即哪一种样式距离自己近,就优先使用哪一个。
在这里插入图片描述
在这里插入图片描述
去掉行内样式,查看另外两种样式的使用
在这里插入图片描述在这里插入图片描述

总结

第一种行内式,样式只能对单个元素,且如果样式代码写了很多,标签会变得很长,代码不易阅读,不推荐使用;

第二种内嵌式,把样式和页面接口分开,提高了代码的阅读性。但是,如果页面结构较复杂,css样式非常多,维护和开发会比较吃力。比如想看某个元素的样式,需要频繁的上下查看。页面结构不是很复杂,样式代码不是很多的情况下推荐使用。

第三种外联式,支持外联多个css样式文件,是专业的引入方式,像浏览器搜到的一些网站,如CSDN官网,就是使用该方式。
在这里插入图片描述

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

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

相关文章

噶了呀,现在的00后这么卷的吗?

现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪20K&#xff0c;都快接近我了。 后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天&#xff0c;原来这位小老弟家里…

KDZD自动脱扣型绝缘靴(手套)耐压试验装置支架

一、概述 KDZD自动脱扣型绝缘靴&#xff08;手套&#xff09;耐压试验装置支架是根据《DLT 976-2017 带电作业工具、装置和设备预防性试验规程》、《DLT 1476-2015电力安全工器具预防性试验规程》、《GBT 17622-2008带电作业用绝缘手套》、《CB21148 2020足部防护 安全鞋》等相…

VBA学习-循环语句

目录 一、基础知识学习 二、单元格格式 三、循环语句与判断语句 一、基础知识学习 1、对单元格赋值 Sub 赋值()对单元格进行赋值Range("A1").Value 100End Sub 2、多区域赋值 Sub 多个区域赋值() 多区域赋值Range("B1:C2").Value 200 End Sub 3、不…

2023年10月自考本科如何报名,报考流程是怎样的?

自考本科报名条件&#xff1a; 自考本科没有条件与要求&#xff0c;国家规定&#xff1a;凡中华人民共和国公民&#xff0c;不受性别、年龄、民族、种族和已受教育程度的限制&#xff0c;均可参加自学考试。但是&#xff0c;需要注意的是&#xff0c;办理本科毕业证书者&#x…

2023年,真的别裸辞....

作为IT行业的大热岗位——软件测试&#xff0c;只要你付出了&#xff0c;就会有回报。说它作为IT热门岗位之一是完全不虚的。可能很多人回说软件测试是吃青春饭的&#xff0c;但放眼望去&#xff0c;哪个工作不是这样的呢&#xff1f;会有哪家公司愿意养一些闲人呢&#xff1f;…

【TellMeCode】使用VSCODE + ChatGPT辅助分析推测源码

【TellMeCode】使用VSCODE ChatGPT辅助分析推测源码 0x00 功能简介 根据代码上下文相关信息&#xff0c;如工作区文件夹名称&#xff0c;代码所在路径等一系列信息&#xff0c;提供给大模型更多元和尽可能多的信息&#xff0c;利用其自身优势去检索相关的文档和博客&#xf…

WSL 双系统端口映射,网络穿透最新教程

目录 1 进入wsl 1.1 进入root模式 1.2 随便安装个东西 2 打开win的PowerShell 2.1 查看虚拟机的ip地址 2.2 端口映射转发 2.3 验证是否成功 2.4 删除映射端口命令 1 进入wsl 这里使用的是ubuntuLiunx操作系统 打开wsl&#xff0c;搜索即可。 1.1 进入root模式 命令 …

SSM 如何使用 Redis 实现缓存?

SSM 如何使用 Redis 实现缓存&#xff1f; Redis 是一个高性能的非关系型数据库&#xff0c;它支持多种数据结构和多种操作&#xff0c;可以用于缓存、队列、计数器等场景。在 SSM&#xff08;Spring Spring MVC MyBatis&#xff09;开发中&#xff0c;Redis 可以用来实现数…

同一个Service类中非事务方法 调用 事务方法,事务失效 解决方法

同一个Service类中非事务方法 调用 事务方法&#xff0c;事务失效 解决方法 在平时开发中&#xff0c;同一个Service类中非事务方法调用事务方法&#xff0c;事务会失效&#xff0c;这里简单解释一下原因&#xff1a; spring采用动态代理机制来实现事务控制&#xff0c;而动态…

开发小程序流程

小程序的诞生&#xff0c;是继微信公众号之后的又一款火爆的 APP&#xff0c;并且小程序的市场需求也是非常大的。在小程序出现后&#xff0c;很多商家都想开发自己的小程序&#xff0c;但是因为不知道怎么开发&#xff0c;所以对此感到迷茫。下面就由爱尚网络科技来为大家介绍…

成功上岸奇安信!这份零基础入门网络安全的学习路线你一定要看,学长带你网络安全从入门到就业!

作为一个实用型技术博主&#xff0c;​由于我之前写了不少网络安全技术相关的文章&#xff0c;不少读者朋友知道我是从事网络安全相关的工作&#xff0c;于是经常有人在后台问我&#xff1a; 现在转行学网络安全是一个正确的选择吗&#xff1f;我刚入门网络安全&#xff0c;该…

如何在华为OD机试中获得满分?Java实现【取出尽量少的球】一文详解!

✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: Java华为OD机试真题(2022&2023) 文章目录 1. 题目描述2. 输入描述3. 输出描述4. Java算法源码5. 测试6.解题思路1. 题目描述 某部门开展 Family Day …

震惊!吊打面试官,必备的 SpringCloud 微服务面试题(VIP典藏版)

目录 福利&#xff1a;文末有分享SpringBoot教程及源码哦《【imooc-java2021】体系课-Java工程师 》 Spring Cloud微服务面试题 1、Spring Cloud Netflix和Spring Cloud Alibaba包括哪些组件 2、Nacos是CP还是AP? 3、Nacos作为注册中心应该选择是CP还是AP&#xff1f; 4、…

ImageBind与Stable diffusion使用记录

参考代码 ImageBind&#xff1a;GitHub - facebookresearch/ImageBind: ImageBind One Embedding Space to Bind Them All ImageBind stable-diffusion-2-1-unclip&#xff1a;GitHub - Zeqiang-Lai/Anything2Image: Generate image from anything with ImageBind and Stabl…

条码控件Aspose Barcode,满足您条码需求的终极解决方案

Aspose.BarCode for .NET 是一个功能强大的API&#xff0c;可以从任意角度生成和识别多种图像类型的一维和二维条形码。开发人员可以轻松添加条形码生成和识别功能&#xff0c;以及在.NET应用程序中将生成的条形码导出为高质量的图像格式。 Aspose API 支持流行文件格式处理&a…

一文了解国内外电子后视镜(CMS)现行法规标准

摘要&#xff1a; 本文小编分享一篇整合了国内外对CMS的安装及功能性做出要求的相关标准与法规。感兴趣的朋友可以专门去搜索学习。 前言&#xff1a;随着GB15084-2022的即将正式实施&#xff0c;以摄像头屏幕组合取代传统光学后视镜的新一代电子后视镜CMS相关车型将被允许上路…

如何卸载Visio秘钥

文章目录 如何卸载Visio秘钥解决的问题我的环境版本查找OSPP.VBS文件使用命令行查看信息卸载Visio秘钥卸载其他版本秘钥查看word激活卸载Office秘钥总结 如何卸载Visio秘钥 解决的问题 本文教你如何卸载Visio或Office秘钥&#xff0c;如果安装了多个Visio无效秘钥&#xff0c…

【SpringBoot教程】开发提效工具Lombok引入 Mybatis-plus-generator代码自动生成工具

⛪ 专栏地址 系列教程更新中 &#x1f680; 文章介绍: 在开发过程中免不了与数据库的交互&#xff0c;其中模板类的编写如果手动编写会耗费大量时间&#xff0c;这里可引入MybatisPlus的Mybatis-plus-generator进行代码模板映射生成提高开发效率 &#x1f680; 源码获取: 项目中…

STM32 Cubemx Freertos 工程, 用GDB进行debug时候, 跳进HardFault_Handler的问题

现象: 正常运行没问题, 但是一旦用gdb来debug, 开场很快就进hardfault 分析: 进了hardfault时候观察调用栈 竟然是从定时器中断过来的 也就是定时器中断执行这条时候 再往前推, 是初始化systick时候 也就是说, 前一行把中断打开, 这一行打开定时器时钟, 马上进了一次中断…

淘宝图片搜索接口API封装

本篇博文介绍了对淘宝图片搜索API的二次封装&#xff0c;将URL参数封装成Python函数&#xff0c;直接传入参数即可获取搜索结果&#xff0c;例如淘宝商品标题、价格、销量和URL等。提供了详细的代码示例和接口调用Demo。 taobao.item_search_img-按图搜索淘宝商品&#xff08;拍…