最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

具有《CSS禅意花园》情节的读书笔记

CSS rockyxia 3954浏览

写在前面

对于前端来说,CSS Zen Garden这个网站相信大家都是不陌生的,当年我刚接触网页制作(对,那时还不叫前端)的时候,CSS Zen Garden经常会出现在我的视野中,有些年头了,现在前端工程师不知道还会不会看到这个网站。翻译成中文就是“CSS禅意花园”,同一套html结构,仅通过不同的css来改变网站的样子。

2007年出版的一本名叫《CSS禅意花园》的书,主要讲解 http://csszengarden.com/ 这个网站的各种CSS样式方案,共有两百多套样式,源码见: https://github.com/mezzoblue/csszengarden.com

一起来了解下这本书

由于这本书出版于2007年,所以,部分知识点已经有些过时了。但对了解web技术的发展、用户体验、设计创意等还是很有帮助的。

微盘下载PDF:http://vdisk.weibo.com/s/Ay9xx-k0JL-o
京东购买:http://item.jd.com/11042710.html

下面是我摘录的一些个人感觉不错的知识点。

带有语义的标记

html语义:
选择何种html标签取决于标签本身的语义,而不是其默认显示出的样式。

编写合法的、带有良好结构并拥有语义的html。

创建良好的标记

[*]选择doctype。
[*]指定语言和字符集。
[*]指定标题(便于SEO)。
[*]选用恰当的元素。
[*]避免过度使用div和span。例如,若是h3更能表示内容的含义,那么就不应该使用div,span也不应该替代label的作用。
[*]尽可能少地使用标签。这样做的好处是让文件更小,让浏览器解析文档更快。
[*]适当地使用class和ID。

图像替换

出于灵活性方面考虑,将图片地址直接写入到html中,就不可能只通过替换样式文件让页面来个“大变脸”了。

图像替换还要考虑屏幕阅读器和SEO。

图像替换技术:

  • [*]{ padding: 25px 0 0; overflow: hidden; height: 0px !important; }
    优点:屏幕阅读器可正常访问;没有多余的
    缺点:并没有解决浏览器禁用图像后空白页面的可访问性问题;实现需要hack。
  • [*]{ text-indent: -5000px; height: 25px; }
    优点:屏幕阅读器可正常访问;没有多余的;简洁优雅的CSS。
    缺点:并没有解决浏览器禁用图像后空白页面的可访问性问题;有时在IE5中无法使用。
  • [*]将文本和span一起放在父元素中,然后使用这个空白的span覆盖住文本,并将背景图像应用到该span之上。
    优点:屏幕阅读器可正常访问;解决浏览器禁用图像后空白页面的可访问性问题。
    缺点:无法使用透明图像;CSS代码较为冗长。

用户界面设计基本法则:

[*]了解将浏览页面的用户。
[*]在页面和站点中给用户足够的导向。
[*]使用被人们熟知的象征符号。
[*]保证与功能相关的特性在页面中足够显眼。
[*]保证设计元素的一致性。
[*]了解页面中的关键元素。
[*]清楚地表达页面的内容。

布局相关的可用性问题:

[*]重要信息应放在显眼的位置。
[*]永远在title元素中给出页面的简单介绍。
[*]尽可能地保证页面中的导航链接有着一致的表现。
[*]对于中型或大型站点来说,强烈建议提供搜索功能。
[*]用缩进和偏移将栏中内容分开。

清除浮动:

[*]clear属性及clear的含义可以被理解为让某一元素不再跟随在另一元素的后面。

减少图像使用的方法:

  • [*]尽可能地使用文本样式代替图像。
  • [*]只保留图像中为实现预期效果所必需的部分。
  • [*]使用细条图像填充背景。
  • [*]尽可能地重复使用图像。
  • [*]合理地选用图像或颜色。若CSS中的color或background-color属性也能实现设计效果,则应该毫不犹豫地使用这些属性,而不是背景图像。

文本样式:

  • [*]font-variant
  • [*]text-transform:字符大小写控制。
  • [*]text-decoration

间距样式:

  • [*]line-height:行距
  • [*]letter-spacing:字符间距
  • [*]word-spacing:单词间距
  • [*]text-align:文字对齐

万事皆有度

平衡才是关键

如果某个值为0,就不需要再额外给出单位。

background-position属性定义了背景图片在父元素中的相对位置,它可以接受两个百分比、长度或关键子值,分别用来表示两个坐标值中的一个。

如果只设定了一个值,那么它将表示水平位置,而垂直位置将取默认的50%或者居中。

正值:x, y 表示向右平移x,向下平移y。

负值:-x, -y 表示向左平移x,向上平移y。

CSS书写的一些准则

[*]若是不确信的话,那么就去验证。
[*]创建并测试CSS时,首先在最高级、最先进的浏览器中进行,然后再考虑其他浏览器。
[*]若用浮动实现布局,请确保正确地清除了浮动。
[*]为元素应用内边距或边框来避免外边距重叠。
[*]避免同时为元素指定明确的内边距/边框值与宽度/高度值。
[*]避免IE6的“无样式内容瞬间”现象。
[*]不要依靠min-width或min-height属性
[*]尝试减少百分比值。
[*]浏览器计算中的舍入误差有时会让50% + 50%等于100.1%,导致布局被破坏。
[*]这时请尝试略为减少百分比的值,例如将50%改为49%或者49.9%。
[*]IE中没有完整显示出内容?
[*]www.positioniseverything.net/explorer/peekaboo.html
[*]确保要实现的效果确实存在
[*]牢记“LoVe/HAte(爱/恨)”链接规则。
[*]在为链接元素指定伪类时,牢记以下的顺序:link、visited、hover和active。
[*]任何其他的声明顺序都可能会导致问题。
[*]为非零值标明单位
[*]唯一的例外是line-height属性,无需标明单位。
[*]零就零,没有必要分辨是px还是em。
[*]测试不同的字体大小
[*]高级浏览器都允许用户调整字体大小。
[*]在html和css中统一大小写。
[*]测试时使用嵌入样式,发布时再改为外部输入。
[*]用明显的边框辅助调试布局。
[*]指定图片路径时不要使用单引号。

理解问题

理解问题才是修复问题的关键。

比如,如果事先就了解Windows平台上IE,自动为某些浮动元素添加3个像素的额外外边距,那么就不需要猜测并逐一尝试其他方法了。

转载请注明:Rockyxia Web技术博客 » 具有《CSS禅意花园》情节的读书笔记
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)