Css | YSlove.net

你现在的位置 -> 云 -> css

会说话的代码

星期日, 三月 20th, 2011

在开发中，说实话，一般的公司可能都不会有写文档的时间，并且个人也不一定都有这习惯。但是对于你来说，代码就是你的一张脸，当别人读的时候，你总不希望别人说：“天阿！怎么这么丑！！！”如果正好你这时在旁边，那将会是一件多么悲催的事~~ 那么让我们简单的为这张脸美容一下，代表自己嘛，肯定不要太悲催了，哈哈。让代码自己说明白为什么这样，大家肯定想到了写注释。写注释也有好多种写法，比如说能直接生成javaDoc的注释风格等但是即使生成了，这文档又会有多少人去看呢？又有多少人能看懂呢？所以，还是让我们来简单点吧，只会占用你一点点时间，就让你的代码看起来更加的漂亮。 CSS 对于CSS，也许经常会使用到缩写，但是过一段时间，自己也许都已经已经不记得了~囧！写一些必要的注释，解释缩写的意义。对于其他人来看，这让他们更快的明白；对于自己过一段时间后再看，可以迅速的回想起当时的思路，易于修改。 jQuery ui theme的风格，这种命名方法，个人感觉是非常不错的方法，即易于记忆，同时也易于理解。命名空间，虽然CSS里面这个概念很弱，或者说因为权重的问题不存在命名空间这个概念。但是如果把页面上每一块都分割开的话，那么每一块应该是相对独立，在独立的范畴内应该使用同一父级的class做为命名空间。这不仅仅是权重的问题，也增强代码的可读性。多使用换行，对于不同的区块，应该使用换行让代码上的逻辑也更清晰。 javascript javascript有很多不同的注释写法，我这里绝对不是标准的，大家请仅仅做为参考。写注释的目的就是为了让代码自己可以解释自己，并且说明自己的用法等。在注释段里面放些简单的实例，让新人更容易理解已经公司现有的Base类库。遵循着某总风格。因为javascript的灵活性，使得使用这门语言的人可以用各种写法来达到目的，但是实事让，如果在团队里每个人的代码风格都相差很大，不但看起来不爽，读起来更不爽。所以我们一定要遵循某种结构。噢，对了，在组件的前面，或者段落前要写上自己的名字，这点很重要，因为其他人要修改的话，至少要知道这东西是谁做的，可以找谁商议。以上一些步骤其实都不复杂，但是你的代码会因此清晰点。输入的指令是要让编译器明白，如果它不明白，OK没商量直接给你抛Error~ 写注释，是为了给人看的，如果只是机器能看懂，那还不如不写了。

Tags: css, javascript, web development, 前端开发 Posted in 杂谈, 闲聊 | 2 Comments »

ie z-index bug

星期五, 十月 8th, 2010

在IE6与7上最经常遇到的就是z-index无效。一般来讲，ie对父级的要求比较高，如果父级有position属性，但是没有给z-index属性，那默认都是0，所以不论子集里面有多高的z-index属性，都是没用的。所以一般情况下，需要给包含z-index属性的父级一个z-index:1的属性，这样可以解决很多莫名其妙的问题。这样虽然简单的层级问题可以解决，但是如上图，同级之间的层级问题又出现，相同层级的同辈元素z-index属性下面的比上面的高。这种问题一般都出现在制作下拉菜单时比较常见。解决方法与上面一样，需要给当前较高的z-index属性。题外话：这种下拉菜单虽然比较好用，但是兼容性其实比较差，而且嵌套的层次比较多。对于复杂的DOM模型在不同的浏览器下差异还是挺大的。所以尽量简化用新的结构可能更适合。

Tags: css, ie6, z-index Posted in css, 实验室 | 2 Comments »

Adobe Air的CSS样式支持（1.5*）

星期一, 十二月 21st, 2009

最近在研究Air桌面程序，准备用Ajax桌面开发套路来试试。其他都没什么，很顺利，但是到CSS样式时却头疼的很。（当然要比适应IE6好很多很多）这个“头疼”其实不是什么大碍，只是一些常用的CSS属性得不到支持。比如：box-shadow text-shadow 但是一些非常特殊的属性还支持：如：-webkit-transform 这是一个Webkit还在研发的属性，竟然都支持。所以说Air很太狠了，说是支持HTML与CSS但是却没有一个总的列表，只是给了一个链接，说是支持一些Webkit的属性，但是有些不支持。这里的有些范围可就大了去了。所以说Air不够厚道。在Adobe的交流地方，一位兄弟说出了我的心声 I was wondering if support for the other css webkit extensions that aren’t listed here will be coming? It may be a small thing but I don’t understand why text-shadow couldn’t be supported. Any thoughts 除了上面的一些CSS 3的属性不支持外，几乎CSS 2还是都支持的由其是text-overflow的支持，让我们省了不少事。但是感觉支持的不是很好，当鼠标先中后，后面的字还是会出来，由其是带圆角的时候。而对于Webkit的很多私有属性其实都是不支持的，包括他自己列出来的一些，幸好虽然不支持CSS 3的border-radius但是支持-webkit-border-radius也算是一大幸事。现在Air 2 beta已经出炉，居说会完全支持CSS [...]

Tags: air, css Posted in css, 实验室 | 6 Comments »

CSS Tools

星期一, 十一月 23rd, 2009

两个比较实用的CSS在线工具。 CSS校验工具：可以检验CSS文档里面的CSS哪些是没有用到的。 http://services.immike.net/css-checker/ CSS格式化：可以把CSS按Class与SupClass排列，并且可以按字母顺序排列。 http://styleneat.com/index.php

Tags: css Posted in css, 实验室 | 1 Comment »

伪类与伪元素

星期四, 十月 8th, 2009

什么是伪类？伪类：伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。伪类有：:first-child:link:vistited:hover:active:focus:lang 什么是伪元素？伪元素：伪元素是创造关于文档语言能够指定的文档树之外的抽象。伪元素有：:first-line:first-letter:before:after 两者可以说都是一种CSS的规则，可以很方便的使用，但是其中却有一点让人很是疑惑，就是其CSS权重伪类的的权重是10，这点大家都没有什么异议。但是伪元素的权重是1这点可能会有些歧义 e.g. this is text for test,Yse just for test p#t{ color:blue; } p:first-line{ font-size:300%; color:yellow; } 按权重算，p#t应该是101，p:first-line应该是2 但是在浏览器一看，第一行却是黄色！这是为什么呢？原来伪元素是创造关于文档语言，这点需要详细的理解一个其含义其实就是相当于这样 e.g. <P:first-line>this is text for test,Yse just for test</P:first-line> 很是有意思的规则，并且关于CSS的版本不同，表现的形式也将不同。更多详解请看W3C Selector pseudo-elements

Tags: css, CSS权重 Posted in css, 实验室 | No Comments »

前端开发常见问题（非js）与解决方案

星期一, 九月 7th, 2009

在开发越来越深入，越来越复杂，人员也越来越多时，各种各样的团队问题便随之而来。以下列出一些我在开发中经常遇到的问题，并应用相应的方法来解决，大家有很好的建议不防提出来大家讨论。:) 问题设计： UI不够统一设计不规范，导致制作时出样式出现偏差 CSS： CSS过于混乱，多人联合编写时命名空间冲突问题各自为政，不能使相同的部分共用起来，造成沉余与维护困难乱用Selector优先级，导致无法更新样式。 HTML: 结构嵌套问题语意不明确解决方案设计：多利用草稿，制定初期架构草图（图1）制定统一版式与UI样式（图2）精确计算宽度值与其他数据（可以蓝图阶段进行），并严格遵循 CSS： CSS采用统一的命名规则如：header_wrapper, main_containter或header-wrapper, main-containter 注：后一种写法header-wrapper在.net的服务端控件中会报错，由于.net中无法识别id中含有‘-’ 通常我的作法为： id:headerWrapper class:header-wrapper 当然其实我还是建议采用‘-’的写法，如果不是为.net做开发的话。引用类库或自己编写相关类库，并制作相关文档，按文档编写。这样可以最大限度的避免命名冲突。另外一点就是在全局引用‘命名空间’的做法，因为CSS本身并没有这一概念所以需要做一些hack手段代码: <html> <body class="text-page"> … </body> </html> 利用CSS的权重进行的hack，也是一种比较通用的hack手法，这样就可以利用CSS的优先级来做不同的样式。所以CSS的优先级是个非常重要的工具！ HTML：对于页面的基础，莫过于HTML。整个架构的骨架！为避免大规模开发时造成不必要的混乱，一定要按W3C的一些标准来实施可参考：符合XHTML Strict 1.0 W3C组织标准的标签与结构进而就需要考虑应用一些规则如：Grid System 这里先打个招面，以后的文章里再详细说明一下Grid System。现在网站大家都是即时开发，很少有整理与规划HTML的习惯，鉴于这点，应该多向CSS Zen Garden学习，整理由最适合用自己的骨架。

Tags: css, UI, web development Posted in try it, 实验室 | 7 Comments »

CSS权重（优先级）

星期二, 七月 28th, 2009

对于CSS的权重一直以来可以说都是含糊不清的，这个并不是因为大家对其理解有误，而是W3C在CSS2.0的声明来看的确很含糊，但是在CSS2.1里W3C已经对CSS的权重有了明确的规定。 Media type and element match Importance and origin in ascending order of importance (confusingly): user agent style sheets user normal style sheets author normal style sheets author important style sheets user important style sheets Specificity Source order 这里其实一个比较重要的就是“Specificity ” 什么是Specificity？简单来讲就是一个权重的表达方式：如0,0,0,0。这种表达方法是一种纸牌游戏的表达方法。更详细的内容请查看这里所有的权重方法都将依靠他来计算（!important除外）。掌握其特有的特点，将是你对CSS权重理解的一个重要的基石。我们可以把他简化一下，如下表： 1 * { } 0 2 li { } 1 [...]

Tags: css, CSS权重, IE !important, Specificity Posted in css, 实验室 | 23 Comments »

CSS清除浮动详解

星期三, 七月 15th, 2009

什么是浮动(floats)？当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止。在IE5+中， div 和 span 对象假如没有指定宽度会被分配默认的宽度，而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 styleFloat 。浮动(floats)有何用？浮动可以说是为排版旦生的。如页面排版和图文排版，后者大家可能更清楚。MS Office最被人认同与最高使用的就是排版，其理论上与此相同，但是实现更为复杂。（图片来自w3c.org） e.g. style: IMG { float: left } BODY, P, IMG { margin: 2em } HTML: <img alt=”This image will illustrate floats” src=”img.gif” /> [...]

Tags: css, xhtml Posted in css, 实验室 | 9 Comments »