同一标签内多个css规则在页面中如何显示?
这两天在学习css涉及到内联、外联、嵌入对页面的影响:
1、内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下:
<style type="text/css">
<!--
#user_nav{float:right;margin-right:20px;padding:4px; }
-->
</style>
内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
2、外联式-----将CSS代码作为文件单独存放,如以aaa.css文件包含所有样式。在HTML 中的外部级联采用 <link> 标记语句来引入。示例代码如下:
<link href="aaa.css" rel="stylesheet" type="text/css" />
3、嵌入式-----将CSS代码直接添加于所修饰的标记元素。示例代码如下:
<div style="float:right;margin-right:20px;padding:4px;">ITEYE</div>
下面是一些可能遇到的问题:
1、在内联式中,如果一个标签同时使用了多个CSS规则,而这些规则中对同一属性进行了不同的赋值,最终在页面中显示的是哪个规则的属性值?示例代码如下:
<head>
<style type="text/css">
.aaa{font-size:12px;}
.bbb{font-size:18px;backgroung-color:#FFF;}
</style>
</head>
<body>
<div class="aaa bbb">ityeye</div>
</body>
在页面中显示的是bbb这以规则中的属性的值。因为bbb是最后对该属性进行定义的CSS规则。
2、如果一个标签同时使用了多个CSS规则,而这些规则既有存在与内联式中的,也有存在于外联式中的,而且对同一属性进行了不同的赋值,最终在页面中显示的是哪个规则的属性值?示例代码如下:
<head>
<style type="text/css">
.aaa{font-size:12px;background-color:#036;}
.bbb{font-size:18px;backgroung-color:#FFF;}
</style>
</head>
<link herf="css/mmm.css" ref="stylesheet" type="text/css"/>
<body>
<div class="mmm aaa bbb">ityeye</div>
</body>
.mmm{font-size:18px;backgroung-color:#FFF;}/*写在mmm.css文件中*/
在页面中显示的是bbb这以规则中的属性的值。因为bbb写在HTML页面中优先级较高,而在HTML页面bbb是最后对该属性进行定义的CSS规则。
3、如果一个标签同时使用了多个CSS规则,而这些规则既有存在与内联式中的,也有存在于外联式中的,还有嵌入在标签中的,而且对同一属性进行了不同的赋值,最终在页面中显示的是哪个规则的属性值?示例代码如下:
<head>
<style type="text/css">
.aaa{font-size:12px;background-color:#036;}
.bbb{font-size:18px;backgroung-color:#FFF;}
</style>
</head>
<link herf="css/mmm.css" ref="stylesheet" type="text/css"/>
<body>
<div class="mmm aaa bbb" style="font-size:20px;backgrond-color:00FF00">ityeye</div>
</body>
.mmm{font-size:18px;backgroung-color:#FFF;}/*写在mmm.css文件中*/
在页面中显示的是嵌入到标签中的属性的值。因为嵌入到标签中的规则的优先级高于,内联式的和外联式的。
总结:在同一标签中使用多个CSS规则,在页面中显示的优先级为:嵌入式高于内联式,内联式高于外联式。如果同为内联式或外联式中的不同规则,则与该规则在CSS样式表中的位置有关,显示样式表中最后对该属性进行定义的CSS规则的属性值。用一句话表示为:就近原则,即离哪个CSS规则近显示哪个。
同一标签内多个css规则在页面中如何显示?的更多相关文章
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
- animate.css+wow.js页面滚动即时显示动画
1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...
- 手把手教小白如何用css+js实现页面中图片放大展示效果
1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
- 内联式css样式,直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
- CSS标签内多余内容隐藏
CSS: <style> .mazey{width:100px;} .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:n ...
- div style标签内嵌CSS样式
我们在DIV标签内.SPAN标签内.p标签等html标签内使用style属性直接设置div的样式. 一.在<div>标签内使用style设置css样式 - TOP 1.实例html ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- CSS规则整理
一. 善用css缩写规则 /*注意上.右.下.左的书写顺序*/1. 关于边距(4边):1px 2px 3px 4px (上.右.下.左)1px 2px 3px (省略的左等于右)1px 2px (省略 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
随机推荐
- 揭秘QQ 安全password框的原理
这篇文章也算是朝花夕拾.事实上非常早曾经就知道的原理,如今拿出来和大家交流分享一下. 故事总要有缘由.那么这个故事的缘由就是,当我曾经写了一个获取其他进程password框password的时候(前几 ...
- 【Unity】11.4 车轮碰撞体(Wheel Collider)
分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 车轮碰撞体 (Wheel Collider)专门用于创建汽车或其他移动交通工具. 车轮碰撞体是一种针对地面车辆的特殊碰撞 ...
- java.lang.CharSequence cannot be resolved
转自:http://jingyan.baidu.com/article/f25ef2546eace4482c1b82a9.html 方法/步骤 1 在MyEclipse中的配置方式为:右击项目-> ...
- Vue2.0 v-for 中 :key 的作用
- CodeForces 493B Vasya and Wrestling 【模拟】
B. Vasya and Wrestling time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- andrdoid内置视频文件
这种方法仅仅适合有内置存储的情况,至于和平分区的不在考虑之列 1 在vendor/sprd下新建一个目录built_in_video 里边放置要内置的视频文件及copy脚步 脚步例如以下:intern ...
- sql server2000导出表结构说明
SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.n ...
- windows下通过Chocolatey安装或升级node.js
以管理员身份运行windows PowerShell并安装Chocolatey 我的机器是windows10,可以在开始菜单->所有应用->W栏中找到Window PowerShell并运 ...
- jqgrid传入的json数据,赋值了但是没有在表格上显示
1. datatype: "local",属性加入这个 2. dataValue就是json对象 for (var i = 0; i <= dataValue.length ...
- python(45)内置函数:os.system() 和 os.popen()
os.system() 和 os.popen() 概述 os.popen() 方法用于从一个命令打开一个管道. 在Unix,Windows中有效 语法 popen()方法语法格式如下: os.pope ...