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文件都意味着要对服务器进行一次额外的调用。

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

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

css样式读书笔记

地址: http://www.w3school.com.cn/css/index.asp css样式 背景 背景色 背景图像 背景重复 背景定位 背景关联 小结 文本 缩进文本 水平对齐 字间隔 字...
  • lwei3600103
  • lwei3600103
  • 2017年01月12日 15:07
  • 362

CSS读书笔记1

CSS 的语法规则是: selector {property:value;} selector 的解析规则是:从右到左,而声明部分是从左到右.eg:div#xxx;...
  • xiongzhengxiang
  • xiongzhengxiang
  • 2011年09月15日 09:45
  • 261

css基础代码库整理

重置-reset.css由于考虑到重置样式会存在潜在的问题,例如我们在全局将strong变成了一个普通标记,在用户可编辑内容区域的strong就不会反应出效果来,用户就会产生很大的疑惑,为什么在编辑器...
  • ImagineCode
  • ImagineCode
  • 2016年06月19日 17:55
  • 586

CSS中的三种基础选择器,

Html中有三种方法可以使用CSS,而在css中,有三种基础的选择器 1、元素选择器     也叫标签选择器,即在CSS中利用标签名称来定义其外观 2、类选择器,是用点.符号开头,后面跟上一个自定义的...
  • liusure09
  • liusure09
  • 2016年01月13日 16:00
  • 1384

css基本题目

CSS是什么的缩写?(  B  ) A. Colorful Style Sheets B. Cascading Style Sheets C. Creative Style Sheets D. Com...
  • weiyastory
  • weiyastory
  • 2016年08月26日 16:02
  • 1106

Css样式表 (常用基础)

1、CSS(Cascading Stylesheets,层叠样式表  级联样式单)  是一组格式设置规则,用于控制网页内容的外观。通过使用CSS样式设置页面的格式,可以把页面的内容与表现形式分离开。...
  • HeartIsland
  • HeartIsland
  • 2015年08月01日 00:09
  • 808

CSS最详细的基础教程

层叠样式表CSS 绝对原创 CSS简介:Cascading Style Sheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言。 CSS的作用: 是定义网页外...
  • wulove52
  • wulove52
  • 2016年08月30日 20:54
  • 2109

CSS Master读书笔记:框模型

    IE5.X和IE6在怪异模式中使用自己的非标准框模型。这些浏览器的width属性是内容、填充和边框的宽度总和。目前最好的解决方案是回避这个问题,也就是,不给元素添加具有指定宽度的填充,而是尝试...
  • javangin
  • javangin
  • 2011年01月07日 15:59
  • 628

Head First HTML与CSS 读书笔记(一)

  • u013028110
  • u013028110
  • 2014年11月27日 14:05
  • 368

css基础精解和实例分析

css就是cascading style sheets层叠样式表  一、基本语法  1、选择符  selector {proper: value}  选择符 {属性:值}  如:body {color...
  • kanshangren
  • kanshangren
  • 2004年08月19日 09:02
  • 1239
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS Master读书笔记:CSS 基础
举报原因:
原因补充:

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