/***************************************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. 轮播图CSS

    css3中的animation:动画名 持续时间 动画的速度曲线 动画开始之前的延迟 动画播放的次数 是否应该轮流反向播放动画 动画播放次数:n(定义应该播放多少次动画) : infinite(无限循 ...

  2. 腾讯云+阿里云 搭建hadoop + hbase

    目录 服务器配置 hadoop hbase JAVA测试 历时两天,踩了无数坑最后搭建成功... 准备 两台服务器都安装jdk1.8(最好装在相同路径). hadoop 下载 hbase 下载 这里使 ...

  3. DRF图片路径问题的解决方法,网上爬取的图片放到ImageFiled自动带上域名

    由于博客园不支持markdown,推荐下面的url访问 原创url: https://blog.csdn.net/weixin_42495873/article/details/89440437 - ...

  4. GPIO 输出—使用固件库点亮 LED

    编程要点 1. 使能 GPIO 端口时钟:  2. 初始化 GPIO 目标引脚为推挽输出模式:  3. 编写简单测试程序,控制 GPIO 引脚输出高.低电平. LED的电路图 过程: 1.拷贝一个库函 ...

  5. MongoDB操作-备份和恢复

    Mongodb数据库操作-备份 恢复 导出 导入 mongodb数据备份和恢复主要分为二种:一种是针对库的mongodump和mongorestore,一种是针对库中表的mongoexport和mon ...

  6. BFS练习

    1. 给定$d,k$, 求最小的被$d$整除, 且各数位仅有$k$和$0$组成的数. $(1\le k\le 9,1\le n\le 1e6)$ 从高位到低位$BFS$, BFS求出字典序最小的方案. ...

  7. Intellij IDEA 快捷键大全【转】

    IntelliJ Idea 常用快捷键列表 Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文 ...

  8. Docker启动Elasticsearch报错java.nio.file.AccessDeniedException

    报错信息 Caused by: java.nio.file.AccessDeniedException: /usr/share/elasticsearch/data/nodes 问题分析 表面上是说容 ...

  9. Java 之 可变参数

    可变参数 在JDK1.5之后,如果我们定义一个方法需要接受多个参数,并且多个参数类型一致,我们可以对其简化成如下格式: 修饰符 返回值类型 方法名(参数类型... 形参名){ } 其实这个书写完全等价 ...

  10. 配置Hadoop,hive,spark,hbase ————待整理

    五一一天在家搭建好了集群,要上班了来不及整理,待下周周末有时间好好整理整理一个完整的搭建hadoop生态圈的集群的系列 若出现license information(license not accep ...