CSS Master读书笔记:CSS 基础

原创 2011年01月07日 15:57:00

 

在样式表中使用特殊性

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

form {width: 30em;}

form#search {width: 15em;}

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

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

 

在主体标签上添加类或ID

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

#content {float: left;}

#nav {float: right;}

/*homepage.html*/

<body class="homepage">…</body>

.homepage #content {float: right;}

.homepage #nav {float: left;}

 

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

 

对文档应用样式

从文档外部导入样式表

<link href="/css/basic.css" rel="stylesheet" type="text/css" />

<style type="text/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_gzipmod_deflate。依赖于现代浏览器对Gzip压缩文件即时解压的支持。这些Apache模块探测浏览器是否能够处理这种文件,如果可以,就发送压缩的版本,可以减少对带宽的占用。

 

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

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

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

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

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

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

 

组织样式表

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

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

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

移动支付的坑。微信支付-设置超时-添加time_exprie参数后-无法启动,阿里支付超时设置it_b_pay无效,

在genProductArgs方法里添加 packageParams.add(new BasicNameValuePair("time_expire", time_expire));后微信支付无法启...

MUI-几种页面打开方式

几种打开页面的方式 1.初始化时创建子页面 2.直接打开新页面 3.预加载页面 1.初始化时创建子页面 1 2 3 4 5...
  • kepoon
  • kepoon
  • 2016年03月18日 22:39
  • 19054

CSS MASTER读书笔记:背景图像和图像替换

 背景渐变body {background:#ccc url(gradient.gif) repeat-x;} 在站点的每个标题上添加一个符号h1 {padding-left: 30px;backgr...

CSS Master, Sitepoint 2015读书笔记(印象比较深的几点:CSS优先级3元组表示法,多列及flex,Transforms)

CSS Master [attr~=val] 空格分隔的属性|= hyphenated,前缀子串:^= *= $=伪元素:::before ::after ::selecti...
  • cteng
  • cteng
  • 2015年11月08日 21:00
  • 570

Head+First+HTML与CSS、XHTML读书笔记

  • 2017年08月07日 15:41
  • 23.34MB
  • 下载

【响应式Web设计】读书笔记 - CSS(四) - 11

【简介】CSS3 过渡、CSS3 变形

HTML5和CSS3权威指南-读书笔记(H5部分)

接到了银联的面试通知,在慌忙准备面试的过程中感觉到,H5和CSS3是前端面试的重点考察对象,这段时间一直在恶补前端基础知识,css.html方面的书也看了好几本,这本书看完有段时间了,今天来总结一下,...

《精通CSS》读书笔记2

《精通CSS》

JS DOM 编程艺术(第2版)读书笔记 第9章 CSS-DOM

页面有三层信息构成: 结构层(structural layer) 表示层(presentation layer) 行为层(behavior layer) 设置和获取样式 所有CSS中 间带减...

《响应式Web设计——HTML5和CSS3实战》读书笔记

作者介绍:英国前端工程师,Ben Frain,the author of two web development books: ‘Responsive web design with HTML5 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS Master读书笔记:CSS 基础
举报原因:
原因补充:

(最多只允许输入30个字)