当前位置: 代码迷 >> HTML/CSS >> Pro CSS Techniques 读书笔记(1)
  详细解决方案

Pro CSS Techniques 读书笔记(1)

热度:554   发布时间:2012-10-25 10:58:57.0
Pro CSS Techniques 读书笔记(一)
http://www.ctba.cn/blog/entry/2213

争取每天都抽时间整理记录下读书心得,不敢说贡献,只是希望能为需要的朋友提供些帮助。恩,就从今天开始吧。笔记涉及内容包括 CSS 工作原理的细节,设计技巧,优先级和级联,样式设计与布局,hack 和滤器(以及如何尽可能不使用它们),有效的代码维护和优化等。

Let's begin

什么是语义化标签(X)HTML

W3C 的定义是在万维网(WWW)上用于发布超文本的通用语。说的直白点就是:(X)HTML 是用来给你的文档内容提供情景和意义的,它是告诉我们这段内容是什么(或它的意义),而不是它看起来像什么。

为啥要编写语义化标签?


好的语义化标记能让站点更容易接入。不是所有的访客都能“看见”你的 CSS 和 JS 文件,但他们都能得到你的 (X)HTML 文件。对于屏幕阅读器、PDA、手机和其他设备,它们通常没有网络浏览器一样的显示支持,而使用语义标记,这些设备就可以用一种有意义的方式显示网页了。

另外就是搜索引擎爬虫,他同样是依靠标记来决定情景和不同关键字的权重。因此,如果你用 <font size="7"> 来设置标题而不是 <h1>,搜索引擎恐怕会比较难检索到它。

永远不要把结构标签用于外观设计!

避免使用外观标签:<font>, <b>, <i>, <u>,这些标签的作用是创建一个视觉效果,而在现代网络开发中这是 css 的任务,正确的方法是由指定了外观的 em 和 strong 去定义内容的意义。

避免 div 和 class 的堆积

1. 不要将单个元素包含进 <div> 中,这是对标记的一种浪费;

简单的例子:

<div id="nav">
   <ul>
      <li>扯谈新闻</li>
      <li>扯谈小组</li>
      <li>扯谈博客</li>
   </ul>
</div>


下面这种方式不是更好?使用更少的代码创建更多的结构

<ul id="nav">
   <li>扯谈新闻</li>
   <li>扯谈小组</li>
   <li>扯谈博客</li>
</ul>


2. 人们总是过度使用 class 定义风格而放弃更适合的标签

简单的例子:

<p class="address">
   北京市海淀区五道口华清嘉园
</p>


但其实你可以使用 address 标签

<address>
   北京市海淀区五道口华清嘉园
</address>


除此之外,这些标签你也应该熟悉:dl, dt, dd, blockquote, q, thead, tfoot, fieldset, cite, samp, kbd, abbr, acronym

总之,当你使用 div, span, class 特性时,应确保在 (X)HTML 中没有比他们更合适的元素了。


现代 web 文档的三层结构


HTML - Structure Layer
CSS - Presentation Layer
JavaScript - Behavior Layer

HTML 结构层,它包括文档的内容,以及表示文本各部分(如标题、段落、列表等)的语义信息;

CSS 外观层,它决定了你的文档以何种方式显示,包括布局、排版、颜色、装饰、图片、声音族等的详细信息;

JavaScripty 动作层,这一层主要是根据用户的动作,使用脚本(为了控制 DOM,一般是 JS)来更新、添加或删除文档中的某些项。

简单的例子:

扯谈博客 发表新日志的页面,标题、正文、类别及其后边的输入、选择框的显示是 HTML 中的文字内容,div, input, select 等标签完成的,而字体、字号、编辑区域的边框、背景颜色等是 CSS 完成的,当你直接点击“发布日志”后提示“日志内容为空”这个事件,是由 JavaScript 完成的。

第一篇先写这么多,可能会觉得有点小儿科,不要紧,后面的内容会更实际和丰富些,了解下基础和原理总没坏处:)
1 楼 Azi 2008-12-25  
好,阿志支持
2 楼 flyfan 2008-12-26  
不错,学习一下
3 楼 winfield 2008-12-26  
前端初学者发来贺电,感谢LZ。
4 楼 天机老人 2008-12-28  
支持一下!