/***************************************css注意事项*******************************************/
浏览器优先级：设计者设计样式>浏览器用户自定义样式>浏览器自设定样式
html代码中：行内样式>内部样式>外部引用样式
/************************************************************************************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css练习</title>
<!-- 直接link加enter则会少type属性 -->
<link rel="stylesheet" type="text/css" href="css.css">
<!-- 在css和mycss中，都是设置背景色，但是引用顺序不同，会导致显示的效果不同 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<!-- 虽然颜色显示mycss中的色彩，覆盖css的背景色，但是在css中，设置header的字体大小则会显示，这是css的样式层叠效果 -->
<style type="text/css">
footer{
background: rgb(30, 179, 179);
}
</style>
</head>
<body>
<!-- 内联样式优先级最高，虽然在mycss中设置header的背景色为 rgb(64, 157, 185); -->
<header style="background:#c869d1">
头部样式背景
</header>
<!-- 正常显示mycss中的背景样式，但由于上面定义内部样式style，则显示style中的rgb(30, 179, 179); -->
<!-- 若外部引用link中的css放在<style>内部样式的下面，则还是显示mycss中的背景色 -->
<footer>
底部样式背景
</footer>
<!--****************************** 最后总结***************************** -->
<!-- 1、不论显示那种样式，在样式显示中，主要是显示离内容最近的样式，一层层覆盖(就近原则) -->
<!-- 2、！important优先级最高，设置在外部引用css样式中，还是内部style中，加上!important，优先级超过内联样式-->
<!-- *************************************************************************** -->
</body>
</html>
 
 
/*******************************************新建文件css.css*******************************************************/
<--@charset "UTF-8";定义css的字符类型，若写则一定要在结尾处加上“；”否则会导致语法错误 ，也可不写，选择默认-->
@charset "UTF-8";
header{
background: red;
font-size: 30px;
}
footer{
background: blue;
}
/**********************************************************************************************************************/
 
/*********************************************新建文件mycss.css***************************************************/
@charset "UTF-8";
header{
background: rgb(64, 157, 185);
}
footer{
background: rgb(162, 162, 233);
}
/***********************************************************************************************************************/

css引用优先级的更多相关文章

  1. 关于CSS的优先级,CSS优先级计算,多个class引用

    原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class > .class CSS优 ...

  2. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  3. CSS引用方式及样式层叠机制

    CSS引用方式有3种,三种分别为:外部引入.内部引入.行内样式,下面一 一进行介绍. 1.外部引入:CSS代码在一个独立的文件中,HTML通过Link标签引入到页面. 代码格式:<link re ...

  4. css引用与html语义化

    一.CSS引用1. 使用外部样式表:    CSS代码在一个独立的文件中,HTML通过link元素引入到页面 格式:link + tab键<link rel="stylesheet&q ...

  5. css样式优先级问题

    官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 那么,我们来举个 ...

  6. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  7. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  8. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  9. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

随机推荐

  1. csu 1958: 数字游戏

    1958: 数字游戏 Submit Page   Summary   Time Limit: 2 Sec     Memory Limit: 128 Mb     Submitted: 134     ...

  2. 使用Cython时遇到的cl.exe的问题

    最近使用cython时,遇到一个问题,报错如下: cl.exe /c /nologo /Ox /W3 /GL /DNDEBUG /MD "-Id:\program files\python3 ...

  3. 关于Python的导入覆盖解决办法

    这种问题一般来说还是不会引起的,可能会出现在datetime和time这样类型的模块中. 例如: import datetime from datetime import datetime 如果写在一 ...

  4. Vue CLI 3开发中屏蔽的EsLint错误 （.eslintrc.js 在vue3+中 修改这个）

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  5. 浅析ARM协处理器CP15寄存器有关指令：MCR\MRC

    ref:http://blog.csdn.net/gameit/article/details/13169405 背景: 在uboot中,start.s中涉及到了 CP15 的有关操作.查阅有关资料, ...

  6. 2019牛客多校一 H. XOR (线性基)

    大意: 给定序列, 求所有异或和为$0$的子序列大小之和. 先求出线性基, 假设大小为$r$. 对于一个数$x$, 假设它不在线性基内, 那么贡献为$2^{n-r-1}$ 因为它与其余不在线性基内数的 ...

  7. hdu 3342 拓扑模板题

    直接上代码吧 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...

  8. vs2019 扩展工具

    这里只是做个记录,没啥技术含量 本人代码上有些强迫症,所以我的本地代码一定不可以丢,之前用vs2013开始,就安装了localhistory这个插件,十分方便,觉得不用了,清了即可,也不占地方. 但是 ...

  9. （四）CXF之处理Map类型的数据

    一.需求描述 正常来讲webService可以处理Java 数据类型.JavaBean.List等,但是却不能处理Map数据类型.本章讲解如何使用适配器来使得web服务可以处理Map数据类型. 流程: ...

  10. 从jvm源码看synchronized

    从jvm源码看synchronized 索引 synchronized的使用 修饰实例方法 修饰静态方法 修饰代码块 总结 Synchronzied的底层原理 对象头和内置锁(ObjectMonito ...