这两天在学习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. javascript 获取函数形参个数

    分享下javascript获取函数形参个数的方法. /** * 获取函数的形参个数 * @param {Function} func [要获取的函数] * @return {*} [形参的数组或und ...

  2. ios开发-引导页实现

    源码:http://files.cnblogs.com/ios8/%5Bcode4app.com%5DIntroductionTutorialView_10843.zip 可以看看demo,很简单,我 ...

  3. CCShatteredTiles3D

    CCSprite* pImgBg = CCSprite::create("1.png"); pImgBg->setPosition(ccp(CCDirector::share ...

  4. 【Spring】Spring Session的简单搭建与源码阅读

    搭建一个简单的Spring Session例子 引入依赖包 <dependencies> <dependency> <groupId>org.springframe ...

  5. asp.net正则匹配嵌套Html标签

    废话不多说,直接代码 1.要匹配的html代码 <div class="conItem" id="footer"> <a id="g ...

  6. Python3判断shell下进程是否存在&&启动&&邮件通知

    判断进程是否存在 def isRunning(process_name): try: process = len(os.popen('ps aux | grep "' + process_n ...

  7. 查看SQL实际内存占用

    如果打开了AWE,在任务管理器中就看不到实际的内存使用了.可以用SQL语句来查内存占用,或是“性能监视器(Performance Monitor)中的SQLServer: Memory Manager ...

  8. Oracle sql%rowcount 返回影响行数；sql server @@RowCount返回影响行数

    sql server中,返回影响行数是:If @@RowCount<1 Oracle中,返回影响行数是:If sql%rowcount<1 例: sqlserver: create pro ...

  9. python unicode to str and str to unicode

    @staticmethod def unicode2str(p_unicode): v = p_unicode.encode('unicode-escape').decode('string_esca ...

  10. Android——FilenameFilter总结（转）

    一.FilenameFilter介绍   java.io.FilenameFilter是文件名过滤器,用来过滤不符合规格的文件名,并返回合格的文件: 一般地: (1)String[] fs = f.l ...