CSS Specificity: Things You Should Know(转)

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.

CSS Specificity isn’t simple. However, there are methods to explain it in a simple and intuitive way. And that’s what this article is all about. You’ll understand the concept if you love Star WarsReally.

Let’s take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources. Continue reading »CSS Specificity: Things You Should Know(转)

超链接css样式优先级

超链接的样式,例如 hover,visited,active样式 定义会出现没有实际效果的情况,实际上为了保证能看到不同状态下的连接样式,正确的样式顺序应该是:

” link – visited – hover – active “或” LVHA “(缩写)。

分析原因:

每个选择符selector都有一个“specificity” 权重,如果两个selectors应用于同一个元素,具有较高specificity的选择符将胜出,具有优先权。例如:

P.hithere {color: green;} /* specificity = 1,1 */

P {color: red;} /* specificity = 1 */

任何设置了类class=hithere的段落内容显示为绿色而不是红色。两个selectors都设置了颜色,但是具有更高specificity的选择符将胜出。

伪类如何影响specificity呢?它们具有完全相同的加权值,下列样式具有相同的specificity加权值: Continue reading »超链接css样式优先级

也谈高手

下班回家,跟同事聊起来,何谓“高手”的话题,突然一句“你觉得自己是php高手吗?”,我随口答道,高手戴引号帽子的高手。呵呵O(∩_∩)O~!所以忽然想谈谈“高手”。

既有定义,高手必然存在,不是什么遥不可及的人。我们有幸还是可以达到滴。回到编程,PHP高手上来,或者C++、C、Java等等编程语言来,高手跟我们的区别还是蛮大滴。平常我们一直挂在口头,每每开会总会捎带着,信誓旦旦 “可读性、可维护性、接口良好性、可移植性、通用性、高效性”其实都是些,说起来容易做起来难的事。每每耳提面命,估计是让我们自我督促一下,“听到没,达到那些苛刻的要求才能接近高手”。

确实如此,同样的一个模块儿,高手编程时考虑的事情,思路跟入门级别的人会有所不同。而且往往达到高手一级的人,大都已形成自己独特的编程思维,或者类似于传统瓦匠、瓷匠的技艺手法。遇到什么的情况,如何处理,才能满足那些苛刻的要求,高手都有一套自己的策略。 Continue reading »也谈高手

css之float略解

css布局中常用的float样式,给我们带来非常丰富的布局,同时也给不熟悉它的人带来了许多浏览器兼容的麻烦。我这里根据自己的一些经验做些总结,希望对遇到问题的人有所帮助。

1.浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。普通的块级元素处在浮动元素下层,但它内部的文字(以及行内元素)会环绕浮动元素。

所以使用时某个父节点如div中两个float:left的子元素,如果这个div没有定义一个限定高度,那么子float元素不对自动撑开父div,除非在换行出强制加了“clear:both”的 div来结束float流,重新将页面布局倒入下一行.由于要加入一个空div,<div style=”clear:both”></div> 觉得语义不好,可以有一个折中的解决方案.

.clearfix:after {     content: “.”;     display: block;     height: 0;     clear: both;     visibility: hidden; }/*css 伪类*/ * html .clearfix {height: 1%;}/*IE hack*/

这样在调用float的父节点div可以添加clearfix类来自动完成clear避免了添加无意义的空div.

2. 浮动出现时,还有一种方法,可以不必非得添加过多的clear DIV来达到float 的布局效果.可以定义父节点Div的高度,来调节一下,以及相应的float元素的宽度.

以下是一个例子.

#layout_header{ height:50px; background-color:#3C6; } #layout_body{ background-color:#09F; } #layout_footer{ background-color:#F8F05A; height:20px; } .body-left{ float:left; } .clr{ clear:both; } #body_header{ background-color:#CF0; border:solid 2px . . . → Read More: css之float略解

Git-基础篇

Git是什么
Git在Wikipedia上的定义:它是一个免费的、分布式的版本控制工具,或是一个强调了速度快的源代码管理工具。Git最初被Linus Torvalds开发出来用于管理Linux内核的开发。每一个Git的工作目录都是一个完全独立的代码库,并拥有完整的历史记录和版本追踪能力,不依赖于网络和中心服务器。

Git的出现减轻了许多开发者和开源项目对于管理分支代码的压力,由于对分支的良好控制,更鼓励开发者对自己感兴趣的项目做出贡献。其实许多开源项目包括Linux kernel, Samba, X.org Server, Ruby on Rails,都已经过渡到使用Git作为自己的版本控制工具。对于我们这些喜欢写代码的开发者嘛,有两点最大的好处,我们可以在任何地点(在上班的地铁上)提交自己的代码和查看代码版本;我们可以开许许多多个分支来实践我们的想法,而合并这些分支的开销几乎可以忽略不计。 Continue reading »Git-基础篇