给大家带来CSS模块化的了解

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
在TwinsenLiang的博客上看到一篇名为语义化单单的限制在html么？的文章，文中次要是说起了CSS的定名划定规矩，细心浏览后，我以为这个实在就是模块化头脑。（作者也提了这一点）。
我没有看过CSS模块化的相干书本，以是我上面说的纷歧定准确，可是在事情中，我会用我了解的模块化体例进步事情效力，我了解的模块化，次要分为两类。
1、将罕见的款式剥离出来，构成独自的款式，我叫他基本款式表或模块款式表，这个款式表次要一些罕见的基础布局和情势，如CSSReset、Blank、Font等等。
比方上面这个款式表，我以为就是一个复杂的基本款式表。（只是复杂，不保举用）
CSS

1. *{margin:0;padding:0;border:none;outline:none;}.cb{clear:both;}.blank10{height:10px;font-size:1px;overflow:hidden;clear:both;}

复制代码

2、在页面中依照布局模块化誊写款式表，制止款式之间的搅扰，而且便利扫瞄。
比方上面的这个布局
XHTML

1. <!--右边--><div><h2>...</h2><h2>...</h2></div><!--右侧--><div><h2>...</h2><h2>...</h2></div>

复制代码

有一部分同砚大概会如许写
CSS

1. .wrap_content_box{float:left;}.wrap_content_boxh2{...}

复制代码

XHTML

1. <!--右边--><divclass="wrap_content_box"><h2>...</h2><h2>...</h2></div><!--右侧--><divclass="wrap_content_box"><h2>...</h2><h2>...</h2></div>

复制代码

方才看上往的时分效果很不错，统统都很完善，代码少，效果也完成了，但假如有一天，我们必要将一切h2的款式变的各不不异时，情形似乎不悲观了。
CSS

1. .wrap_content_box{float:left;}h2.XX{...}h2.YY{...}h2.ZZ{...}h2.XYZ{...}

复制代码

XHTML

1. <!--右边--><divclass="wrap_content_box"><h2class="XX">...</h2><h2class="YY">...</h2></div><!--右侧--><divclass="wrap_content_box"><h2class="ZZ">...</h2><h2calss="XYZ">...</h2></div>

复制代码

心甘情愿的，我们增添了良多带有分歧标志的款式。但是1年后呢有人问起你这些款式所把持的工具是甚么？
我能够一定你会说，“我很隐晦”。
大概当你本人又写了一个“h2.XX”（定名反复的情形常常呈现），偶然掩盖了这个1年前的款式，而你又不晓得，又刚巧被你的老板发明了…….天主只能说，阿门，哥们，点被不克不及怨天主。
可假如在一入手下手我们用这类办法写呢？
CSS

1. .wrap_content_box{float:left;}#wrap_con_00h2,#wrap_con_01h2{...}

复制代码

XHTML

1. <!--右边--><divid="wrap_con_00"class="wrap_content_box"><h2>...</h2><h2>...</h2></div><!--右侧--><divid="wrap_con_01"class="wrap_content_box"><h2>...</h2><h2>...</h2></div>

复制代码

粗看是多了一些，可是当我们再次碰见给h2增添分歧款式的时分，我们能够…
CSS

1. .wrap_content_box{float:left;}#wrap_con_00h2,{...}#wrap_con_00h2.first{...}#wrap_con_01h2,{...}#wrap_con_01h2.first{...}

复制代码

XHTML

1. <!--右边--><divid="wrap_con_00"class="wrap_content_box"><h2class="first">...</h2><h2>...</h2></div><!--右侧--><divid="wrap_con_01"class="wrap_content_box"><h2class="first">...</h2><h2>...</h2></div>

复制代码

看，如许是否是很多多少了，这类格局在1年后，有人问起的时分，我肯以一定你会说“我不隐晦”。
天主也不会找你贫苦了。

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

可以使用 CSS 检查工具进行设计。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。