DIV+CSS布局中如何组织样式表以便于简化和维护

2016-02-19 17:21 1 1 收藏

想不想get新技能酷炫一下，今天图老师小编就跟大家分享个简单的DIV+CSS布局中如何组织样式表以便于简化和维护教程，一起来看看吧！超容易上手~

【 tulaoshi.com - Web开发】

　　对于简单的Web站点，可以只使用一个CSS文件。对于大型的复杂站点，对样式表进行分割以便简化维护是一种好做法。如何分割样式表是需要仔细考虑的。我一般用一个CSS文件处理基本布局，用另一个文件处理版式和设计修饰。这样的话，在布局确定之后，就很少需要修改布局样式表。这可以防止布局样式表被意外地改动或破坏。

　　还可以进一步细分，比如用单独的CSS文件处理颜色。这样的话，如果希望提供新的颜色方案，就只需要创建一个新的颜色样式表。如果站点上有许多表单，那么可以用单独的CSS文件处理所有表单样式。可以只在需要时链接这个文件，从而减少最初的下载开销。如果站点上的一些页面与站点的其余部分很不一样，那么可以考虑让它们使用它们自己的CSS文件。例如，如果主页的布局与站点的其余部分很不一样，那么可以为主页创建单独的CSS文件。

　　请记住，每个CSS文件都意味着要对服务器进行一次额外的调用。这会影响性能，所以一些开发人员喜欢使用一个大型CSS文件而不是多个小文件。最终的选择实际上取决于实际情况，而且在某种程度上这是一个个人喜好问题。我倾向于尽可能保持灵活性和维护的简单性。

来源:http://www.tulaoshi.com/n/20160219/1615024.html

看过《DIV+CSS布局中如何组织样式表以便于简化和维护》的人还看了以下文章更多>>

DIV＋CSS网页布局入门

标签： Web开发

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadd...

关于CSS样式表

标签： Web开发

一.在学习css之前你应该掌握哪些基础知识 1.什么是网页，什么是超文本语言（html）。 2.会使用Dreamweaver等常用的网页编辑器。 Dreamweaver是现今最好的网站编辑工具之一，而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加...

Class组合实现Div+CSS布局

标签： Web开发

现在编写xhtml，我们强烈不推荐此种方法，应该是id，class综合应用。此文章只是讲述一种思维，并非建站过程中的方法！用标准件的方式来组装网页DIV布局。我把class分为2种：布局class；风格class。布局class是骨架，风格class是衣服。举个例子：比如布局中的左栏。首先它的属性有：是左栏，宽度，背景颜色，字体颜色等。...

Div+CSS布局入门教程

标签： Html CSS布局 Div+CSS XHTML

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS...

谈谈CSS样式表中的类和伪类

标签： Html CSS布局 Div+CSS XHTML

在CSS2.1中的选择符语法见下图，由语法形成了各种选择符。在CSS2.1中的选择符语法见下图，由语法形成了各种选择符。欢迎PR值大于3的网站与本站交换链接类:在HTML中当表现class属性的时候，人们可以用点(.)号来作为~=号的一个替代选择，所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属...

查看更多精彩>>