百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

css样式引入优先级?_css引入样式的几种方法

yuyutoo 2025-02-20 18:33 1 浏览 0 评论

css中的优先级讲的有

1.选择器的优先级。

2.样式引入的优先级。

今天要研究的是样式引入的优先级。网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何。

四种样式的优先级别是:行内样式最高、

?优先级? 内嵌样式>链接样式>导入样式?

在这四种的优先中,行内样式最高(内嵌样式),大家都是认可的。但剩下的3中就会是我们想的那样吗?

测试代码如下。很简单,先测试内联样式 。一段文本,给设置个color:red;红色。





无标题文档



    

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?

浏览器显示如下。没什么问题。

在接着来看看,用link的方式引入一个外部样式。

引入方式如下。


外部样式看下列代码:

浏览器显示如下:为什么什么显示的不是蓝色?

显示还是红色,难道就是 内联样式>连接样式?接下来调换了调用的下位置。代码如下。


浏览器显示如下。

这样浏览器显示的却是蓝色,这时候我们就能看出个大概了。

优先就是个顺序解析问题,谁的引入样式在前面,后面的样式就会被覆盖前面的样式。也就是说,哪个样式离标签越近,哪个样式的优先就越高。

然后接下要解决的就是@import的问题了。

解释是这样:

@import既可以为页面引入外部样式表,也可以在一个样式表中引入另一个样式表。

例如:

1.@import url("style.css");一个样式表中引入另一个样式表。

2.

也就是用style,或者是使用外部样式文件再去引入多个样式文件。

第一种中,直接在style标签内容中使用。@import。

另开一个css样式文件,代码如下:

html代码如下:





无标题文档







    

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?

浏览器显示没有问题:

接着使用在使用link标签去测试优先级。

先放在前面。引入代码如下:


浏览器显示看到的是还是上面讲到,谁越靠近p标签,就会采用谁的样式。有个词叫上面来着。近水楼台先得月。。。

在看看放在后面会如何。


浏览器显示如下。

没有什么问题。还是一样,近水楼台先得月。。

四种样式的优先级别是:

行内样式最高、

内嵌样式 与 链接样式(哪个更靠近标签,哪个样式的优先级就越高)

导入样式?

@import的优先级问题就请等下篇。

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: