/***************************************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. NLog文章系列—系列文章目录以及简要介绍

    参考文章:http://www.cnblogs.com/dflying/archive/2006/12/04/581750.aspx

  2. [CF369E]Valera and Queries_离线_树状数组

    Valera and Queries 题目链接:codeforces.com/problemset/problem/369/E 数据范围:略. 题解: 这种题,就单独考虑一次询问即可. 我们发现,包括 ...

  3. 《Mysql - 索引（唯一索引和普通索引的选择）Change Buffer 》

    一:概述 - 如果业务代码已经保证了不会写入重复的身份证号. - 从性能的角度考虑,你会为这个身份证号,选择唯一索引还是普通索引呢?选择的依据是什么呢? - 这就要从他们的执行过程看起. 二:唯一索引 ...

  4. 利用Python进行数据分析_Pandas_层次化索引

    申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. 层次化索引主要解决低纬度形式处理高纬度数据的问题 import pandas ...

  5. 串口(USART)通信-串口通讯协议简介

    物理层:规定通讯系统中具有机械.电子功能部分的特性,确保原始数据在物理媒体的传输.其实就是硬件部分. 协议层:协议层主要规定通讯逻辑,统一收发双方的数据打包.解包标准.其实就是软件部分. 简单来说物理 ...

  6. qt聊天室bug-- error: no matching function for call to 'Ui::Widget::setupUi(Widget*)' ui->setupUi(this); ^

  7. asp.net core-13.Cookie-based认证实现

    1.打开visual studio code创建一个MVC项目

  8. ORA-07445: exception encountered: core dump [opiaba()+639] [SIGSEGV] [ADDR:0x0] [PC:0x1858C3F] [SI_KERNEL(general_protection)] []

    开发反馈应用无法连接数据库,发现数据库实例崩溃,且数据库为11.2.0.4 单实例. 数据库告警日志发现,数据库崩溃之前出现ORA- ORA-: exception encountered: core ...

  9. 部署java应用的几种方式

    J2EE应用 该应用根目录下有好多文件夹和以jsp结尾的文件 部署时,需要在tomcat的conf目录下的server.xml文件中添加上<Context path="/" ...

  10. hdu 4324

    思路待整理 #include<cstdio> #include<iostream> #include<vector> #include<queue> # ...