存档
原文出处：http://stylizedweb.com/2008/03/12/most-used-css-tricks/ 版权声明：本文版权归原作者所有 译介仅供国内读者参考 本文概要：最常用的CSS Trick，诸如圆角、首字下沉等等。 之前有篇译介“8个一句话CSS小诀窍”介绍了8个非常使用的一句话CSS小技巧，这周再给大家带来一篇类似的文章，介绍了一些最常用的CSS Trick，或者叫做CSS小把戏。当然我相信每个设计师都会有一些个人的偏好，我个人对文中的一些小把戏就不太感冒。 1. 不使用图片的圆角效果 <div id=”container”> <b class=”rtop”> <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b> </b> <!–content goes here –> <b class=”rbottom”> <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b> </b> </div> .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} [...]
原文链接：http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets 版权声明：本文版权归原作者所有 译介仅供国内读者参考 如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。 本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c 1. 不要在HTML文件中使用CSS样式定义 相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。 想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。 千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。 注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。 友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。 2. “语义学Semantics”不是猜字谜游戏 我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义： .l13k { color: #369; } 我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义： .left-blue { color: #369; } 这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。 这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个： .product-description { color: #369; } 这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。
最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。 首先看一下预览界面： 样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html 下面开始讲述一下完成上述页面的步骤。 1. 构建HTML 构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是尊重标签本身的语义。所以在这里，先分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。 回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下： <div class=”navg”> <div id=”attendance” class=”mainNavg”><ul> <li id=”attendanceNavg”><a href=”#” mce_href=”#”>考勤管理</a></li> <li id=”teachNavg”><a href=”#” mce_href=”#”>教学管理</a></li> <li id=”communicationNavg”><a href=”#” mce_href=”#”>家校互通</a></li> <li id=”systemNavg”><a href=”#” mce_href=”#”>系统管理</a></li> </ul> </div> <div id=”dailyAttendance” class=”secondaryNavg”><ul> <li id=”dailyAttendanceNavg”><a href=”#” mce_href=”#”>当天考勤</a></li> <li id=”leaveApproveNavg”><a href=”#” mce_href=”#”>请假审批</a></li> <li id=”attendanceStatisticsNavg”><a href=”#” mce_href=”#”>考勤统计</a></li> <li id=”attendanceCollectNavg”><a href=”#” mce_href=”#”>考勤汇总</a></li> </ul> </div> </div>
最棒的解决方案往往是最简单的那个，提供8个一句话CSS小诀窍 原文出处：http://cssglobe.com/post/1392/8-premium-one-line-css-tips 版权声明：本文版权归原作者所有 译文仅供国内读者参考 1. 使用line-height（行高）垂直居中 line-height:24px; 对于拥有确定高度的元素，使用line-height可以将其内部元素垂直居中。PS. 原来的做法 valign 是一个不正确的做法。 2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏 #main{ overflow:hidden; } 对于拥有确定宽度的浮动（float）元素，如果内部有一个超宽元素（比如一个很宽的图片），那你精心设计的布局可能就无法正常显示，最简单有效的防止手段就是 overflow:hidden; 虽然会隐藏掉一部分元素，但最大限度保证了整体布局的正确。 3. 防止链接换行 a{ white-space:nowrap; } 很多时候，链接会非常长，如果换行变成2行乃至多行，可能对用户造成误导，建议使用这个方法防止该情况。（我本人到觉得要根据具体情况分析）
The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers. Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 [...]
