【CSS笔记之八】CSS标签语义化、怪异模式和CSS的组织方式
2012-05-14 19:15
387 查看
CSS语义化标签需要注意的问题
1.虽然CSS布局中不推荐使用table。但是table布局在二维数据展示方面是最好的选择。table除了table、tr、td标签外,表格标题要用caption,表头用thead包围,主体部分tbody包围,尾部用tfoot包围,表头和一般单元格要区分开,表头用th,一般单元格用td。
2.尽可能减少使用div、span等无语义标签。
3.在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;
4.避免使用纯样式标签,如b、font、u等,改用css设置。语义上强调文本使用strong和em。
CSS怪异模式和文档类型定义DTD
在标准模式中,浏览器根据规范表现页面;而怪异模式通常模拟老式浏览器(比如Microsoft IE4 和Netscape Navigator4)的行为以防止老站点无法工作.这两种模式的差异较大,比较典型的就是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding/border/width三者的宽度相加决定的;而在怪异模式中,widht本身就包括了padding和border的宽度.此外,标准模式下块级元素的经典的居中方法--设定width,然后margin-right:auto,margin-left:auto; 在怪异模式下也无法正常工作.
同样的代码,为了确保向后兼容,浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页.在怪异模式和标准模式下的表现很可能相差甚远.因为发明怪异模式的目的就是为了兼容老式浏览器下的代码,它的很多解析方式是不符合标准的.所以,一般情况下,我们应该避免触发怪异模式,应选用标准模式.
怪异模式是如何被触发的呢?与DTD有关.DTD全称Document Type Definition,即文档类型定义.DTD是一种保证HTML文档格式正确的有效方法,可以通过比较HTML文档和DTD文件来看文档是否符合规范,以及元素和标签使用是否正确.一个DTD文档包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可作用的实体或符号规则.
在网页中最常用的DTD类型包括4种:
(1)用于HTML4.01的严格型:strict
(2)用于HTML4.01的过渡型:Transitional
(3)用于XHTML1.0的严格型
(4)用于XHTML1.0的过渡型
按照W3C的标准,我们需要在HTML的最开始声明文件的DTD类型.如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6/7/8)就会触发怪异模式.为了避免怪异模式给我们带来不必要的麻烦,我们要养成书写DTD声明的好习惯。
CSS的组织方式
应用CSS的能力,一看CSS的API掌握情况,控制页面元素样式,只有对错之分,易掌握。二是CSS框架,对CSS进行组织,只有好坏优劣之分。如base.css+common.css+page.css层叠的框架。
base层,位于最底层,提供CSS reset功能和粒度最小的通用类——原子类。供所有页面引用。力求精简、通用,保证高度可移植性。不同网站可以用同一个base文件,base层相对稳定,很少需要维护。
common层,位于中间,强调模块化,便于网站内部重用。common层是网站级的,不同的网站有不同的common层,同一网站只有一个common层。根据网站规模,该层可用一个css文件也可分散为多个。
page层,位于最高层,提供页面级别的样式。网站中高度重用的模块,视为组件,放在common层;非高度重用的模块,可放在page层。每个页面都可能有自己的page层CSS。中小规模网站可将所有page层代码放在一个page.css文件,添加注释,分块书写,易管理、加载快、便于维护。能用base层和common层CSS解决的,尽量不要用page层。page层力求精简。
1.虽然CSS布局中不推荐使用table。但是table布局在二维数据展示方面是最好的选择。table除了table、tr、td标签外,表格标题要用caption,表头用thead包围,主体部分tbody包围,尾部用tfoot包围,表头和一般单元格要区分开,表头用th,一般单元格用td。
2.尽可能减少使用div、span等无语义标签。
3.在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;
4.避免使用纯样式标签,如b、font、u等,改用css设置。语义上强调文本使用strong和em。
CSS怪异模式和文档类型定义DTD
在标准模式中,浏览器根据规范表现页面;而怪异模式通常模拟老式浏览器(比如Microsoft IE4 和Netscape Navigator4)的行为以防止老站点无法工作.这两种模式的差异较大,比较典型的就是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding/border/width三者的宽度相加决定的;而在怪异模式中,widht本身就包括了padding和border的宽度.此外,标准模式下块级元素的经典的居中方法--设定width,然后margin-right:auto,margin-left:auto; 在怪异模式下也无法正常工作.
同样的代码,为了确保向后兼容,浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页.在怪异模式和标准模式下的表现很可能相差甚远.因为发明怪异模式的目的就是为了兼容老式浏览器下的代码,它的很多解析方式是不符合标准的.所以,一般情况下,我们应该避免触发怪异模式,应选用标准模式.
怪异模式是如何被触发的呢?与DTD有关.DTD全称Document Type Definition,即文档类型定义.DTD是一种保证HTML文档格式正确的有效方法,可以通过比较HTML文档和DTD文件来看文档是否符合规范,以及元素和标签使用是否正确.一个DTD文档包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可作用的实体或符号规则.
在网页中最常用的DTD类型包括4种:
(1)用于HTML4.01的严格型:strict
(2)用于HTML4.01的过渡型:Transitional
(3)用于XHTML1.0的严格型
(4)用于XHTML1.0的过渡型
按照W3C的标准,我们需要在HTML的最开始声明文件的DTD类型.如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6/7/8)就会触发怪异模式.为了避免怪异模式给我们带来不必要的麻烦,我们要养成书写DTD声明的好习惯。
CSS的组织方式
应用CSS的能力,一看CSS的API掌握情况,控制页面元素样式,只有对错之分,易掌握。二是CSS框架,对CSS进行组织,只有好坏优劣之分。如base.css+common.css+page.css层叠的框架。
base层,位于最底层,提供CSS reset功能和粒度最小的通用类——原子类。供所有页面引用。力求精简、通用,保证高度可移植性。不同网站可以用同一个base文件,base层相对稳定,很少需要维护。
common层,位于中间,强调模块化,便于网站内部重用。common层是网站级的,不同的网站有不同的common层,同一网站只有一个common层。根据网站规模,该层可用一个css文件也可分散为多个。
page层,位于最高层,提供页面级别的样式。网站中高度重用的模块,视为组件,放在common层;非高度重用的模块,可放在page层。每个页面都可能有自己的page层CSS。中小规模网站可将所有page层代码放在一个page.css文件,添加注释,分块书写,易管理、加载快、便于维护。能用base层和common层CSS解决的,尽量不要用page层。page层力求精简。
相关文章推荐
- HTML&CSS基础学习笔记1.21-语义化标签
- 高质量CSS之一 DTD、怪异模式、如何组织CSS
- HTML&CSS基础学习笔记1.20-语义化标签
- CSS标签学习笔记(一)
- 【javascript】标准模式与怪异模式下CSS以及JS的区别
- Html5 补充笔记 单行标签结束,css display input title
- HTML&CSS基础学习笔记1.26-input标签重置表单
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- XHTML+CSS 文字加粗的方式[学习笔记]
- 【css】doctype声明、浏览器的标准、怪异等模式
- C++模板代码的组织方式 ――包含模式(Inclusion Model)
- CSS学习笔记—CSS的引入方式
- HTML+CSS基础课程学习笔记-第二章 HTML标签
- html+css学习笔记 2[标签]
- CSS有4种定义方式--类+ ID+ 标签+ 伪类
- HTML&CSS基础学习笔记1.19-DIV标签2
- CSS笔记之引用方式
- 从0开始学react netive:1.HTML块级元素_行内元素_CSS盒子模式_标签选择器
- 【css】怪异模式下的盒模型
- 问题:浏览器CSS/JS以怪异模式渲染