精通CSS--高级WEB标准解决方案(第一章)-------读书笔记

精通CSS--高级WEB标准解决方案(第一章)

Andy Budd ,Cameron Moll ,Simon Collison 著

第一章 基础知识
1.1 设计代码的结构
WYSIWYG(所见即所得)工具会添加更多复杂标记.
有意义的页面:容易处理,搜索;可以被程序及设备理解
有意义的标记:为文档添加结构,方便设置元素样式,避免代码膨胀.

有意义元素: #H1,H2
#UL,OL,DL
#caption ,thead ,tbody,tfoot

1.ID和类名
XML可以创建自己的元素,但是复杂,目前不太现实
(X)HTML,不能创建自己的元素,解决方案:ID+类名

eg:<ul id="mainNav"> //定制的导航元素
<li>....</li>
<li>....</li>
</ul>
注意:1,命名要保持有意义且与表现方式无关(只解释是什么,不涉及如何表现它);
2,最好区分大小写;
3,不可滥用,滥用会添加无意义代码(做法:区分 大的条目,用层叠识别内部元素)

1.1.2 文档类型
DTD(文档定义类型),定义XML与(X)HTML中允许有什么,不允许有什么.
DOCTYPE声明描述使用哪个DTD

1,有效性检验:W3C检验器
2,浏览器模式:标准,怪异,几乎标准
3,DOCTYPE切换

1.2 为样式找到目标--选择器
1.2.1 常用:类型:P ,A ,H1
后代:LI A
ID :#NAV
CLASS:.DATE
伪类:a:Link a:visited
a:hover a:active 记忆:LOVE:HATE
tr:hover input:focus
1.2.2 通用 *{padding:0;}
1.2.3 高级 1.子:#NAV >LI (直接后代)
相邻: H1 + P
2.属性选择器:abbr[title]:hover {cursor:help}
1.2.4 层叠
层叠:处理多个规则应用于同一元素的冲突,分配特殊性
层叠次序: 用户!IMPORTANT 作者!IMPORTANT 作者样式 用户服务样式 浏览器样式
1.2.5 继承
继承:减少选择器数量,复杂性

1.3 规划,组织,维护样式表
1.3.1 应用样式
<link herf="/css/basic.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
@import url("/css/advanced.css")
-->
</style>
1.3.2 注释
/* */ C网格注释
1.结构性注释
/*-------------------------------
verson:1.1
author:
email:
website:

2.自我提示
TODO;BUG ;TRICKY;