为什么要使用CSS设计网站？

很多网页设计师都有共同的问题：表格用得好好的，为什么要改用CSS编写？尤其是从平面设计转成网页设计的人来说，原本Photoshop绘图，ImageReady排版输出然后由Dreamweaver调整HTML，css的语法可说是许多人的梦靥。

CSS是Cascading Style Sheets的缩写，中文可以简单称为样式表，由W3C所制定的。CSS的进化由第一级：用于HTML网页中，可取代传统字型标签和其他样式标记(ex：背景颜色、文字颜色大小、边界...等等)，一直到W3C 批淮了 CSS 第二级，除了在第一级的规范里增加了更多功能之外，同时也出现了定位的属性。而这些属性也取代了被犯滥使用的table标签。

以上的叙述还是无法充分的解释css的优点，以一般人的想法来说，用表格所显示的效果与css几乎相同，而css又因不同的浏览器支持度而有所差异，可以用表格轻松达到的效果何乐而不为？以下列出几个css的优点，再由您来判定哪一种方式是真正最适合用于网页设计的的编法，也许您会对css有所改观。

• 比较两种不同写法的HTML原始码，表格的源码数量势必比css多出许多。
• 更新、改版更容易。表格设计是死的，css设计是活的，设计好的表格版型因原始码的复杂，很难再改变。再者，您可一次更新网站的相同内容，而不需要每个页面分别修改。ex：假设，想要把原本标题靠右的文字内容改为置中，只需修改css即可。
• CSS能让我们更轻易的修改整个网站的设计风格。大多数的网站不会希望网站样貌是同一个样子，使用久了总会看腻，这时若采用表格设计网页，势必要因为新的版面风格而重新制作表格栏位，反之，css所设计的版面，只需要修改CSS文字样式即可。
• CSS的编写照顾到弱势族群。盲人专用的浏览器(语音或点字浏览器)，可将不必要的显示效果拿掉，而将最重要的内容优先显示，借此能让盲人立即掌握到最重要的资讯，这样是这几年最流行的无障碍网页设计。
• 网站设计除了整体外观漂亮之外，还须考量到seo，使自己的网站能在各大搜索引擎容易被找到。CSS的设计有助于SEO让搜索机器人更加轻易辨识网页内容。

综合以上CSS的优点，您是否也对CSS用来设计版面有了新的看法?当然刚开始使用CSS设计排版对许多网页设计师是一项艰巨的挑战，同样一个版面，也许用表格编排只需花上半天的时间，用CSS排版却要用掉三天的工作天，但，一旦掌握其中的道理与规则，相信您也会对CSS爱不释手。

CSS会成为网页设计的主流

早期的网页设计都是利用HTML在研究文件内，加入基本的格式和结构，来达成简单的内部连结功能。但当网际网路更加普及后，人们开始用HTML语言来作视觉呈现的用途。除了单纯的替文件加上标题元件之外，人们还需要加上各式各样不同的字体或加粗文字，让文件充满更丰富的视觉变化，此时，表格已不再只是呈现资料，反而被当成是很重要的网页设计版面编排工具；引言方块功能也被网页设计师拿来当作是增加空间的方法，再也不是原本当作引言的用途，如此网页的原始码会很快的充斥著各种如外星文的符号和表格标签，变得难以理解，也使得网页的容量大增。

就在这时，串接样式表(CSS，Cascading Style Sheets)出现了，有了CSS，我们可以从外部来控制页面的外观，同时将文件内容和呈现方式的设定给分隔开来，网页设计的编排可以不需动用到表格功能，改用CSS来控制，这么一来标记内容的工作就可以简化许多，且对于开发人员而言，意思明确的网页比图像式更容易处理；使用有意义的标签亦可让程式或其他设备辨识出来，例如，像搜索引擎就可以辨别出页面中以h1标记所框写起来的标题，从而加重他的重要性；而那些依赖页面阅读辅助的使用者，也可以利用标题作为浏览页面时的辅助，加强网站的实用性。

时代在进步，网页设计的技术也持续在跟进，一间好的网页设计公司除了提供一系列完善的服务之外，客户交付的专案，应以最有效率的方式，良好的沟通，设计出最符合搜索营销，最能够表现客户公司以及产品的网页设计作品。

网页设计从Table向css过渡

最近这几年正好是网页设计由table走向css的一个过渡时期，其实很多设计包括我自已一开始都会觉得css是非常麻烦的，有的时候为了解决某个浏览器的一个小bug，往往花上半天到一天的时间，而虽然书上总是说的很容易，但在实作的时候也总是会碰到很多问题，所以很多设计都会直接跟我说”用table就好啦!”或是”table万岁!”

可是因为在许多css的书籍及网站都宣扬许多使用css的好处，所以虽然一开始花了很多时间在研究，后来真的也渐渐发现了使用css及table的差异，和它的好处：

• 源码整个干净了许多，没有那些多馀了tr，td，源码瞬间瘦身成功
• 由于源码变得整齐，而且标签也具有意义，所以在修改的时候变得更容易，更好管理，不需要盲目的寻找不具意义的标签，一个一个作修改，节省了许多时间
• 网站档案变小后，当然load网页的速度也加快了许多
• 有意义的标签如title、h1、h2，使得搜寻引击更容易去判断此网站的内容及关键字为何，进而 提升网站的排名

当然使用css还有许多优点是我所没有提到的，但是我觉得基于上面四项好处，我们就应该尽量的由table转向css，致力研究更多css的用法，让我们的客户拥有更通用、更优化的一个网站。

CSS基本命名规则

最近使用CSS作网页设计排版时，发现CSS的命名也是重要的一环，因为虽然说CSS是方便管理的，但如果遇到了要修改同事们撰写的CSS程式码，通常还是得要仔细的研究一番，才能够了解其架构，进而去作修改，所以参考了一些文章，让一些基本的CSS命名有个标淮，如果同事们有需要去修改自已所写的CSS或他们需要作参考时，也比较有个依据，不需要花太多的时间在理解命名上，而下面就是常用的CSS命名规则：

• 顶部:header
• 内容:content/container
• 尾部:footer
• 导航:nav/navigation
• 侧栏:sidebar
• 栏目:column
• 页面控制整体佈局宽度:wrapper
• 主要区域(通常为页面主要内容部份):primary
• 次要区域(通常为次选单):secondary

相信在撰写CSS的同时，如果团队们对于命名都有基本的默契，那么使用CSS来作排版，对于修改及维护都能更有效率！