这两天在学习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. 使用vs的查找功能，简单大概的统计vs中的代码行数

    VS强大的查找功能,可以使用正则表达式来进行查找,这里统计代码行数的原理就是: 在所有指定文件中进行搜索,统计匹配的文本行数. 但是匹配的行需要满足:非注释.非空等特殊非代码行. 使用Ctrl+Shi ...

  2. [Windows Azure] What is a Storage Account?

    What is a Storage Account? A storage account gives your applications access to Windows Azure Blob, T ...

  3. MVC的项目部署成应用程序或虚拟目录路径的问题

    1.js和css的引用出错 a.~/可以取得应用程序目录 b. ./定位到路径,./代表到本目录,../代表父级目录 2.打开页面view a. ./定位到路径 3.img src   a. ./定位 ...

  4. delphi中Webbrowser疑难问题集锦<转>

    1.获得网页中变量值      htm中<script> var currID=123</script>      程序中可以这么调用 id := Form1.WebBrows ...

  5. FTP主动模式和被动模式的区别【转】

    转自:http://www.cnblogs.com/xiaohh/p/4789813.html 基础知识: FTP只通过TCP连接,没有用于FTP的UDP组件.FTP不同于其他服务的是它使用了两个端口 ...

  6. pyspark 编写 UDF函数

    pyspark 编写 UDF函数 前言 以前用的是Scala,最近有个东西要用Python,就查了一下如何编写pyspark的UDF. pyspark udf 也是先定义一个函数,例如: def ge ...

  7. crontab入门

    参数 crontab是一个处理定时任务的命令,在终端输入man crontab可以得到使用方法提示,主要参数如下: crontab -u # 指定运行的账户,默认为当前账户 crontab -l # ...

  8. eclipse jetty 请求的操作无法在使用用户映射区域打开的文件上执行

    使用jetty  debug代码启动  在eclipse中进行运行调试,碰到无法编辑保存webapp下的文件 提示: 请求的操作无法在使用用户映射区域打开的文件上执行 解决方法: 从 jetty 7 ...

  9. Java调用Python脚本工具类

    [本文出自天外归云的博客园] 在网上查了很多方法都不成功,在google上搜到一篇文章,做了一些小修改,能够处理中文输出.提取一个运行python脚本的Java工具类如下: package com.a ...

  10. 【转】亲测plsql Developer配置免安装oralce客户端步骤

    原文地址:http://blog.csdn.net/bushy0401/article/details/11869461 再次用到Oracle了,机器上面也没有oracle客户端,还得去网上下载,直接 ...