css教程:CSS文件应该保持整洁和统一

   一位网友遇到了一个头疼的问题。需要对经过若干次修改以后的网站进行重整,需要剔除冗余的代码,在CSS样式重整方面,比较头疼,不仅需要对现有的样式进行合并与精简,还需要为网站增加换肤功能。

  不难看出,这是一个令人感觉很烦躁的工作,面对一行一行代码头皮发麻。如果我们养成良好的习惯,或许可以让工作更容易一些。就此问题与经验,以下的文字或许有很大的参考价值:

  使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性。我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰。

  你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些“快速修补”的方法。一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成。想象一下,这将是一个怎样的境况。

  其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的“快速修补”之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里。所以现在你面对的只有2个选择:A、在一个星期之内找出一个方法去清理规整这些样式;B、找一份新的工作吧。

  千万不要将你的工作变得愈来愈困难。使用链接和导入样式表是你的不二之选。规范的创建并保持样式表的整洁,你会活得更容易一些。

  提示:小心使用链接或导入的方法会在标记上添加冗余的样式。每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护。因此可以理解为什么大型站点会为不同的区块部分而去分离样式表。小心不要玩过火了,过犹不及。

  这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加。这些都会潜在的影响性能。因此,Internet Explorer将链接的样式表数限制在了32个。

  请特别注意,在实际工作中,注意保持CSS文件整洁与样式统一。

时间: 2024-10-03 02:56:38

css教程:CSS文件应该保持整洁和统一的相关文章

css教程:css+div图文混排

css教程:css图文混排今天我们看看比较高级的css+div进行图文混排吧,我们先来看看下面图的效果图片. 效果还不错吧,我们看看css代码. <dl  class="week1" id="no1">      <dt><a><img src="images/unknow.gif" height="100" width="133"></a><

CSS教程:CSS命名参考

  在XHTML中定义ID.CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿.所以,CSS命名仅作参考. (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper (2)导航类 导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:lefts

css教程:CSS Padding 教程

该属性的CSS定义填充的空间要素之间的边界和元素含量. 来看几个例子吧.  代码如下 复制代码 <html> <head> <style type="text/css"> td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} </style> </head> <body> <table border="1"> <tr

CSS教程:CSS的Background Images背景图片

  背景图片Background Images有许多属性可以操作. 幸运的是,可以使用background处理所有:   上面合并了下面属性:   可以为大部分html元素设置背景图片,不只是整个页面(body),可以用来制作简单但效果显著的美化,比如圆角等等不同的边角形状. 使用背影图片非常简单,而且可以使用在页面的任何地方.许多人喜欢使用色彩鲜艳的图片作为背景的页面,带给用户判读前台文字困难加大.这是一个极端的例子,但事实上,大部分对用户友好.可读性强的文本是白色背景上显示黑色,或是黑色背景

经典实用CSS教程详细讲解

css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

高手进阶性教程 CSS的常规使用技巧

css|技巧|教程 本篇总结了一些CSS常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西. 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧

强烈推荐:非常不错的样式表CSS教程(1)

css|教程|样式表 本文是一篇关于CSS的应用概述,并提供了一些示例来演示CSS是如何工作的,以便于你更加有效的学习CSS. 本文并不是参考或者兼容性指南一类的文章(尽管其中有一些非常好的参考和兼容性注解的链接).如果你已经习惯了使用CSS,并想学到更多样式表的知识,我们保证你会在本文中能够找到一些非常有用的信息:). ●CSS不能做什么? 层叠样式表通常被理解为实现"内容"和"风格"分开的手段.其实这种说法并不完全正确,因为根据你对"风格"和

[css]简明教程 CSS样式表概述

css|教程|样式表     CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,尤其是在设计者面对有数百个网页的站点时,大大减少了重复劳动的工作量. W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript

ThinkPHP模版中导入CSS和JS文件的方法_php实例

本文实例讲述了ThinkPHP模版中导入CSS和JS文件的方法.分享给大家供大家参考.具体方法如下: 常用方法 1. css使用link 2. js使用src 用tp自己的导入标签import 导入Public文件夹下面的Js目录中的test.js文件,import标签可以省略type属性,默认就是js的文件 复制代码 代码如下: <import type='js' file='Js.test'> <import type='css' file='Css.test'> 不在Publ