这两天在学习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规则在页面中如何显示？的更多相关文章

  1. 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟

    思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...

  2. animate.css+wow.js页面滚动即时显示动画

    1.地址引入 <link href="css/animate.min.css" rel="stylesheet" type="text/css& ...

  3. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  4. 内联式css样式，直接写在现有的HTML标签中

    CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

  5. CSS标签内多余内容隐藏

    CSS: <style> .mazey{width:100px;} .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:n ...

  6. div style标签内嵌CSS样式

    我们在DIV标签内.SPAN标签内.p标签等html标签内使用style属性直接设置div的样式. 一.在<div>标签内使用style设置css样式   -   TOP 1.实例html ...

  7. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  8. CSS规则整理

    一. 善用css缩写规则 /*注意上.右.下.左的书写顺序*/1. 关于边距(4边):1px 2px 3px 4px (上.右.下.左)1px 2px 3px (省略的左等于右)1px 2px (省略 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. HTML框架标签的使用-&lt;frameset&gt;

    <html> <head> <title> frameset框架的使用-使用frameset框架进行布局 </title> <!-- 标签名称:f ...

  2. R概率分布函数使用小结

    记要 今天在计算分类模型自行区间时,用到了R中正太分布的qnorm函数,这里做简单记要,作为备忘. R中自带了很多概率分布的函数,如正太分布,二次分布,卡放分布,t分布等,这些分布的函数都有一个共性, ...

  3. 【Unity】4.4 添加角色控制器

    分类:Unity.C#.VS2015 创建日期:2016-04-10 一.简介 设计完毕基本的场景后,一般都需要先运行看看效果如何,即先让场景"动起来",以方便观察不同的位置,而不 ...

  4. LeetCode——4Sum &amp; 总结

    LeetCode--4Sum & 总结 前言 有人对 Leetcode 上 2Sum,3Sum,4Sum,K Sum问题作了总结: http://blog.csdn.net/nanjunxia ...

  5. 【小白的CFD之旅】小结及预告

    这是小白系列的索引,后续会继续更新. 已更新的部分 01 引子02 江小白03 老蓝04 任务05 补充基础06 流体力学基础07 CFD常识08 CFD速成之道09 初识FLUENT10 敲门实例1 ...

  6. Python Pycharm连接Ubantu Python环境

    由于我习惯在window下开发,但是代码环境布局在Ubantu.使用Python,为了方便程序的调试,尝试在Windows下的Pycharm远程连接到Ubantu虚拟机下的Python环境. 1.准备 ...

  7. 【FastDFS】FastDFS在CentOS的搭建

    准备安装软件 [root@blog third_package]# cp fastdfs-nginx-module_v1.16.tar.gz FastDFS_v5.08.tar.gz libfastc ...

  8. 通俗易懂讲解happens-before原则

      在接下来的叙述里我首先会说明happens-before规则是干什么用的,然后用一个简单的小程序说明happens-before规则 一.happens-before规则 我们编写的程序都要经过优 ...

  9. 安装C/C++交叉编译环境

    转:http://blog.csdn.net/nokiaguy/article/details/8509739 X86架构的CPU采用的是复杂指令集(Complex Instruction Set C ...

  10. Django 批量保存图片文件 自定义上传方法

    1.前端通过formData的方式批量增加图片或文件 for (var i = 0; i < form_img_list.length; i++) { formData.append('imag ...