css样式表优先级

问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢?

答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权。

1.浏览器缺省设置;

2.外部样式表(使用<link>引用的)

3.内部样式表(位于<head>标签内部)

4.内联样式表(在HTML元素内部)

css选择器优先级

无论是对于外部样式表,内部样式表,或内联样式表css选择器的优先级都按照:

id选择器>class选择器>HTML元素选择器


position元素属性解析

知识储备

在HTML元素标签中,所有的元素按布局时的特点可以分为两类内联元素(inline)块元素(block)

内联元素(inline):在页面排版布局时,一个挨一个,不单独占有1行,内嵌的元素也必须是内联元素。常见内联元素有<a>、<input />、<label>、<img alt="" /> ,<span>等等,内联元素只需要必要的宽度,不强制换行,即前后不带有换行符。
块元素(block)独自占有一行,相当于前后都带有换行符,内嵌的元素可以是内联或者块级元素,常见的块级元素有</span></label></a>
<h1>~<h6>、<div>、<hr />、<p>等等,块元素是一个元素,占用了全部宽度,在前后都是换行符。

position属性

  • static:默认值;默认布局(流式布局)
  • fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置
  • absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身
  • relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

css样式表和选择器的优先级以及position元素属性值的区别的更多相关文章

  1. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

  2. CSS:CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  3. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  4. CSS样式----css样式表和选择器(图文详解)

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  6. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  7. css样式表分类、选择器分类、css基础样式

    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...

  8. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  9. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

随机推荐

  1. Android开发(二十五)——Android上传文件至七牛

    设置头像: Drawable drawable = new BitmapDrawable(dBitmap); //Drawable drawable = Drawable.createFromPath ...

  2. EXCELL中怎么将两列数据对比,找出相同的和不同的数据?

    假设你要从B列中找出A列里没有的数据,那你就在C1单元格里输入“=IF(ISNA(VLOOKUP(B1,A:A,1,0)),"F","T")”显示T就表示有,F ...

  3. 1.C#中几个简单的内置Attribute

    阅读目录 一:Obsolete 二:Conditional 一:Obsolete      这个内置属性是说这个方法废弃了不可用,它有两个参数,第一个参数message是说废弃的原因,第二个参数err ...

  4. MAC 磁盘清理工具 ncdu

    下载命令:brew install ncdu 使用命令:ncdu . 它会将当前目录下的所有文件.文件夹大小安倒叙排列,方便清除

  5. 如何配置ssh免密码登录

    [TOC] 如果你在管理一堆unix机器,每次登录都要输入密码是挺烦的事情,一方面为了安全我们一般不会将所有机器的密码都设置成一样,另一方面就算一样每次都输入一遍也很麻烦. 这种情况下我们一般是用ss ...

  6. Mac下MySQL卸载方法 转载

    mac下mysql的DMG格式安装内有安装文件,却没有卸载文件……很郁闷的事. 网上搜了一下,发现给的方法原来得手动去删. 很多文章记述要删的文件不完整,后来在stackoverflow这里发现了一个 ...

  7. C# 文件操作方法

    方法一: FileStream textFile = File.Open(@"F:\程序\新手测试\linqApplication1\linqApplication1\IO.txt" ...

  8. 实战:ajax带参数请求slim API

    restful api 支持get,post,put,delete等方法,那么jquery客户端怎么去实现呢?涉及到跨域又怎么办? 很多时候需要传递一个token(api_key) 去识别用户身份,获 ...

  9. CDN 和 DNS

    原文地址:http://www.cnblogs.com/xitang/p/3575255.html 相信有很多的朋友会被这几个名词绕的有些头大,很多朋友觉得智能DNS跟双线加速.CDN加速是类似的技术 ...

  10. Clough-Tocher

    Clough-Tocher The Clough-Tocher interpolation technique is often referred to in the literature as a ...