css样式 | 易学教程

从覆盖bootstrap样式谈css选择器优先级

阅读更多关于从覆盖bootstrap样式谈css选择器优先级

样式优先级首先简单说几个定义样式的方式: 元素内嵌： <li><a href="" style="color:#ffffff;">SHOW</a></li> 　　文档内嵌： <style type="text/css"> /* 内部样式 */ h3 { color: green; } </style> 　　外部样式： <link rel="stylesheet" href="css/style.css"> 上面这些都是题外话，接下来我来说说我遇到的问题，先看代码 <header class="navbar navbar-default navbar-fixd-top " id="benner"> <div class="container"> <a href="#" class="scrollable">FishShe</a> <button class="navbar-toggle collapsede"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <nav class="collapse navbar-collapse">

css中!important的作用

阅读更多关于 css中!important的作用

css中!important的作用　　{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. 　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。　　在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受

css中！important的用法

阅读更多关于 css中！important的用法

　{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. 　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。　　在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受，而导致它应用了第二次的border

转：css中!important的作用

阅读更多关于转：css中!important的作用

　转： http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：　　*对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; 　　!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. 　　(1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 　　在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。　　在(2)中，之所以把!important放在第一个border 设置

CSS 样式的优先级小结

阅读更多关于 CSS 样式的优先级小结

1. 同一元素引用了多个样式时，排在后面的样式属性的优先级高例如，下面的 div，同时引用了 [.default] 和 [.user] 中的样式，其中 [.user] 样式中的 width 属性会替换 [.default] 样式中的 width 属性。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .default{ width: 100px; /* 定义 width 属性 */ height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } .user{ width: 150px; /* 这里 width 的值替换了前面 width 的值 */ } </style> </head> <body> <div class="default user"></div> </body> </html> 2. 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器例如，下面的 div 即获取 id

CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式？？）

阅读更多关于 CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式？？）

举个例子，标签P，也许会在嵌入样式表、外部样式表中多次被设置相关属性的值(比如color: red;/color : blue)，那么浏览器到底是以哪个值来显示P的样式呢？？？这就是CSS的工作原理。（其中特指度比较重要） CSS有3种工作机制：1.继承 2.层叠 3.特指（其中层叠原则是基于继承和特指的） 1.继承：css中的祖先元素会向后代传递一样东西：CSS属性的值。body是所有元素的祖先，如果我们指定body{color:red;},那么文档中的所有元素都继承这一样式。这就是为什么，我们在记事本程序写了一行字以后，重命名为：xxx.html，在用不同浏览器打开时，会有不同的字体效果，因为每个浏览器都有自己的预定义样式表，其中包括body中的字体属性，而我们用浏览器打开我们的Html时，我们继承了这个属性。当然，不是所有的属性都能被继承，能被继承的属性大多数和文本有关，比如颜色、字体、字号等。而有些属性，被继承下来没有意义，或者被继承下来会影响页面的布局，比如涉及元素定位，margin,padding，border等属性。 2.层叠：也就是CSS中的C（cascading）,主要是按照样式来源和特指度来层叠。 a）样式来源：以下是浏览器层叠各个来源样式的顺序：浏览器默认样式表用户样式表（比如有视力障碍的用户，加了一个body{font-size:200%}）

Css样式覆盖顺序

阅读更多关于 Css样式覆盖顺序

1，css样式选择器的优先级为： “元素上的style” > “id选择器” > “class类及伪类选择器” > “元素类型及伪类选择器” 。参考： CSS2 cascade - 6.4.3 Calculating a selector's specificity 2，css样式选择器的优先级相同时，根据样式被加载的顺序渲染，后面定义的样式生效。和元素class出现的顺序无关，如class="class2 class1”，在class2、lass1的样式选择器优先级相同的情况下，并不是class1覆盖class2，而是依赖于class2,、class1所在样式文件被link进来的顺序。 3，要让某个样式的优先级变高，可以使用!important来指定。参考： CSS2 cascade - 6.4.2 !important rules 4，css属性的继承：参考： css样式表中的样式覆盖顺序查看Firebug中的Style标签中各css属性的覆盖，可以校验上述的结论！来源： https://www.cnblogs.com/fhtwins/p/3711451.html

python之路 jquery

阅读更多关于 python之路 jquery

简介： jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。参考文档： http://jquery.cuishifeng.cn/ 一、导入+简单应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> .r { background-color:red; /* 给标签设置背景颜色为红色*/ } </style> </head> <body> <div id="id_1"> 123 </div> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div>  <script type="text/javascript" src="jquery-1.8.2

CSS简介

阅读更多关于 CSS简介

CSS （层叠样式表）：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。 CSS具有以下优点：丰富的样式定义 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。易于使用和修改 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中

jQuery选择器

阅读更多关于 jQuery选择器

1.1 jQuery详细介绍 1.1.1 $问题 a) Js命名归法：下划线、字母、$、数字 b) 但是不能以数字作为开头 jQUery的两个变量：$ 和 jQuery jQuery占用了我们两个变量：$ 和 jQuery 1.1.2 js入口函数跟jQuery入口函数的区别： Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行 jQuery的入口函数是在 html所有标签都加载之后，就回去执行。 1.2 Js创建对象三种方式： var obj = {}; var obj1 = new Object(); var obj2 = Object.create(); 1跟2的区别：推荐使用第一个方式第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。 1.3 jQuery基本选择器 1.3.1 回顾CSS选择器 CSS 选择器回顾符号说明用法 #id Id选择器 #id{ color:red; } .class 类选择器 .class{ //} Element 标签选择器 P { //} * 通配符选择器配合其他选择器来使用 , 并集选择器 div,p{} 空格后代选择器 div span{} 选择div下面所有后代的span > 子代选择器 div > span{} + 紧邻选择器 div+p

订阅 css样式