这两天在学习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. [LintCode] N-Queens

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...

  2. 使用Spring4时， 运行时出现找不到MappingJacksonHttpMessageConverter的情况

    启动项目报错: [org.springframework.web.context.ContextLoader]Context initialization failed org.springframe ...

  3. Chrome多线程下载

    https://github.com/jae-jae/camtd https://aria2.github.io/ 切换到解压目录D:\Tools\aria2-1.34.0-win-64bit中,打开 ...

  4. rsync 实现文件同步 (重要数据通过rsyncr把数据同步到不同的两台服务器上,这样可以防止服务器的硬盘故障导致数据丢失) 客户端同步时如果要排某个目录

    rsync是unix系统下的数据镜像 备份工具,一般linux系统都 自带: # rpm -qa|grep rsync rsync-3.0.9-17.el7.x86_64 服务器端:10.100.0. ...

  5. lua -- table.nums

    table.nums 计算表格包含的字段数量. 格式: count = table.nums(表格对象) Lua 的“#”操作可以取得表格的长度,但仅限从 开始连续数字为索引的表格.table.num ...

  6. IBM研究院找到度量安全性方法：容器与虚拟机，谁更安全？

    https://zhuanlan.zhihu.com/p/40446759 虚拟机比容器更安全吗?你可能会有自己的答案,但IBM研究院发现容器的安全性与虚拟机一样,甚至更加安全. 一般来说,从接口宽度 ...

  7. Git 忽略.idea/workspace.xml文件

    在使用idea进行提交代码时,执行提交时一直出现modified:   .idea/workspace.xml 非常让人烦恼. 问题原因: 原因在于Git的忽略,Git在同步代码时,设置本地忽略文件的 ...

  8. ZooKeeper学习之文件系统的布局和格式

    本文来谈谈快照文件,事务日志文件在文件系统中是如何存放的. 写事务日志是事务处理的关键步骤,所以高度建议在一个独立的磁盘上存储.快照不需要在独立的磁盘存储,因为它们是由一个后台线程以懒汉式的(lazi ...

  9. 安装Python2.7出现configure: error: no acceptable C compiler found in $PATH错误

    安装Python2.7出现configure: error: no acceptable C compiler found in $PATH错误 安装步骤: 安装依赖 yum groupinstall ...

  10. 移动web开发（一）——移动web开发必备知识

    参考: 移动终端开发必备知识.http://isux.tencent.com/mobile-development-essential-knowledge.html