CSS Master读书笔记：CSS 基础

来源：互联网发布：国信弘盛怎么样知乎编辑：程序博客网时间：2024/06/01 09:11

在样式表中使用特殊性

在编写CSS时，特殊性可以对一般的元素应用一般样式，然后再更特殊的元素上覆盖他们。假设希望站点上大多数表单的宽度是30em，但是搜索表单的宽度只有15em：

form {width: 30em;}

form#search {width: 15em;}

但在大型站点上，例外情况会越来越多。每当创建更特殊的样式时，可能需要覆盖一些一般规则，可能需要一些额外的代码。而且，因为元素可以从许多地方获得样式，情况可能变得非常复杂。

为了避免过分混乱，应尽量保持一般性样式非常一般，特殊样式尽可能特殊，从而不需要覆盖特殊样式。

在主体标签上添加类或ID

一种有意思的使用特殊性的方法是在主体（body）标签上应用类或ID。这样做之后，就可以根据页面或在站点范围内覆盖样式。例如，如果希望主页具有与站点其余部分不同的布局，那么可以在主页的主题元素上添加一个类名，并且使用它覆盖样式：

#content {float: left;}

#nav {float: right;}

/*homepage.html*/

.homepage #content {float: right;}

.homepage #nav {float: left;}

管理CSS代码的方法，包括将文件分割为多个样式表、按逻辑对样式进行分组以及通过添加注释使代码更容易阅读。

对文档应用样式

从文档外部导入样式表

<!--

@import url("/css/advanced.css");

-->

</style>

多个样式表导入到一个样式表中，然后将这个样式表链接到HTML页面中

@import url(/css/layout.css);
@import url(/css/color.css);
这样可以降低html文档的复杂性。导入规则需要放置在样式表的最前边。
应避免两层以上的签到导入。

添加结构性注释。在开头添加一个注释块，它描述这个样式表的用途、创建日期或版本号、创建者以及如何与创建者联系。

/*---------------------------------------------------------------

Basic Style Sheet (for version 4 browsers)

version: 1.1

author: Alex Young

email: yangbin.ny@gmail.com

website: http://blog.csdn.net/javangin

-----------------------------------------------------------------*/

使其他开发人员能够了解这个文件的概况，了解它是否是最近编写的，如果有某些东西无法理解，他们还可以与原来的作者联系。

然后，将样式表分为几大块。常常首先编写一般规则，比如版式、标题和链接。接下来根据在文档流中出现的次序处理页面的主要部分。通常包括品牌部分、主要内容、次要内容、主导航、辅助导航和页脚部分。最后，处理在整个站点上无规律地出现的一般元素。常常包括框样式、表单样式和图形按钮。

/* Typography

-------------------------------------------------------------------------*/

采用大注释块从视觉上分隔每个部分，尽可能的将所有的东西自然地分成定义明确的块。代码的分隔越细致、越合理，就越容易理解，而且能更快的找到要寻找的规则。

还可以添加在所有站点上都使用的常用规则，形成某种原型CSS文件。

自我提示

Use the star selector hack to give IE a different font size

http://www.xxx.com/xxx

* html body {font-size: 75%;}

有时候可能需要用某种技巧解决某个问题。最好记录这个问题、你使用的解决办法和解释这个修复办法的URL。

另外使用关键字来区分重要的注释。如：使用TODO来表示某些东西需要在以后进行修改、修复或复查；用BUG表示代码或特定浏览器遇到的问题；用KLUDGE表示并不完善的权宜之计

最后要删除注释并优化样式表

最好的优化方法可能是启用服务器端压缩。如果使用Apache服务器，那么应该安装mod_gzip或mod_deflate。依赖于现代浏览器对Gzip压缩文件即时解压的支持。这些Apache模块探测浏览器是否能够处理这种文件，如果可以，就发送压缩的版本，可以减少对带宽的占用。

在开发团队中建立样式指南是一种非常好的做法。

样式指南是一个文档、网页或小型站点，它们解释代码和站点的视觉设计师如何组合在一起的。

应该首先概括站点结构、文件结构和命名约定。

应该详细描述编码标准，设计人员、开发人员和内容编辑人员需要遵守这些标准，从而保持站点的质量。这包括使用的XHTML/CSS版本、选择的可访问性级别、浏览器支持细节和一般的编码最佳实践。

样式指南应该详细描述布局和样式元素，比如各个元素的尺寸、隔离带的尺寸、使用的调色板和相关的十六进制值。

还应该给出特殊CSS样式的说明和示例。例如，如果使用一个类来表示反馈，那么应该说明这个类可以应用于哪些元素以及这些元素的外观是什么样的。

组织样式表

用一个CSS文件处理基本布局，用另一个文件处理版式和设计修饰。

还可以进一步细分，如用单独的CSS文件处理颜色。

每个CSS文件都意味着要对服务器进行一次额外的调用。

一般应尽可能保持灵活性和维护的简单性。