/***************************************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. Python创建文件报错OSError：[Errno 22] Invalid argument处理

    问题: windows平台下使用python open函数w模式打开文件报错“OSError: [Errno 22] Invalid argument: '../news/“消费升维”成零售业新风口? ...

  2. 【leetcode算法-中等】2. 两数相加

    [题目描述] 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表 ...

  3. Tomcat部署WEB应用方式

    罗列在Tomcat部署web应用的几种方法,供以后翻阅,本博文以helloapp应用为例 Tomcat目录介绍 简单目录介绍如下 bin目录:包含tomcat启动/关闭等脚本,支持linux.wind ...

  4. Detect cycle in a directed graph

    Question: Detect cycle in a directed graph Answer: Depth First Traversal can be used to detect cycle ...

  5. [MA] 有关 Likelihood

    当提到 Linear Regression 或是 Logistic regression 等关键词时,都会涉及一个概念,叫做 Likelihood Function 以及 Maximum Likeli ...

  6. asp.net core-9.依赖注入的使用

    http://www.jessetalk.cn/2017/11/06/di-in-aspnetcore/

  7. Geometers Anonymous Club CodeForces - 1195F (闵可夫斯基和)

    大意: 给定$n$个凸多边形, $q$个询问, 求$[l,r]$内闵可夫斯基区间和的顶点数. 要用到一个结论, 闵可夫斯基和凸包上的点等于向量种类数. #include <iostream> ...

  8. php底层变量存储

    变量存储 php的变量使用一个结构体 zval来保存的,在Zend/zend.h中我们可以看到zval的定义 struct _zval_struct { /* Variable information ...

  9. 我对DES AES RSA的认识

    1.DES(Data Encryption Standard)算法:数据加密标准.是替换和置换细致而复杂的结合体,替换和置换一个接着一个,共循环16次.算法首先将明文分块,每块64位.密钥也是64位, ...

  10. Angularjs 中 ng-repeat 循环绑定事件

    用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id} ...