这两天在学习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. 【Android开发】创建你的第一个Android项目

    原文:http://android.eoe.cn/topic/summary 本文中你将了解到: 1. 使用Eclipse创建项目 2. 使用命令行创建项目 你还应该阅读: 1. 安装SDK(官网页面 ...

  2. linux经常使用命令-帮助命令-授之以渔

    原创Blog,转载请注明出处 http://blog.csdn.net/hello_hwc 我的虚拟机系统是CentOS.版本号较老,谅解 一.为什么要学习帮助命令?   授人以鱼不如授人以渔.学会了 ...

  3. Atitit 转移特效attilax总结

    Atitit 转移特效attilax总结 总结一般从按钮,转移到大点的方框上回比较好看点.. <!--jq ui--> <style type="text/css" ...

  4. 一个C#操作Excel类，功能比较全

    using System; using System.Data; using System.Configuration; using System.Web; using Microsoft.Offic ...

  5. 菜鸟学Java（五）——JSP内置对象之request

    书接上回,上次跟大家概括的说了说JSP的九种常用内置对象.接下来就该聊聊它们各自的特点了,今天先说说request吧. 下面是request的一些常用方法: isUserInRole(String r ...

  6. jqgrid传入的json数据，赋值了但是没有在表格上显示

    1.  datatype: "local",属性加入这个 2. dataValue就是json对象 for (var i = 0; i <= dataValue.length ...

  7. 每日英语：Why Rate Your Marriage? A Numerical Score Can Help Couples Talk About Problems

    When marriage therapist Sharon Gilchrest O'Neill met with new clients recently, she asked them why t ...

  8. 每日英语：Got a Case of the Mondays? Blame the Sunday Blues

    Welcome to Monday morning at the office. Did you have trouble sleeping last night? Was your stomach ...

  9. SQL Server 商业智能

    原帖:http://bbs.51cto.com/thread-1089708-1.html 商业智能概述一.数据仓库与分析服务(SSAS)二.集成服务(SSIS)三.报表服务(SSRS)以下是SQL ...

  10. 如何生动形象、切中要点地讲解 OSI 七层模型和两主机传输过程

    作者:繁星亮与鲍包包链接:https://www.zhihu.com/question/24002080/answer/31817536来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...