一、CSS文件及
款式命名
1、CSS文件命名
标准
全局
款式：global.css；
框架布局：layout.css；
字体
款式：font.css；
链接
款式：link.css；
打印
款式：print.css；
2、CSS
款式命名
标准
本人
提议：用字母、_号工、-号、数字构成，必须以字母开头，不能为纯数字 。为了开发后
款式名治理容易，大家请用有
意思的单词或缩写组合来命名，让
共事一看就清楚这
款式大约是哪一块的，这样就
节俭了搜索
款式的
工夫，例如：
头部
款式用header，头部左边，
可以用header_left或header_l,还有假如是列
构造的
可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不逐个举例了，大家按以上
法则去命名就好 。
下面列出一些常用的命名单词容易大家
使用：(以后大家工作过程中
渐渐把自己积存的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的状况了 。)
容 器：container/box
头 部：header
主 导 航：mainNav
子 导 航：subNav
顶 导 航：topNav
网站
标记：logo
大 广 告：banner
页面中部：mainBody
底 部：footer
菜 单：menu
菜单内容：menuContent
子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索
要害字：keyword
搜索
规模：range
标签文字：tagTitle
标签内容：tagContent
目前标签：tagCurrent/currentTag
标 题：title
内 容：content
列 表：list
目前位置：currentPath
侧 边 栏：sidebar
图 标：icon
注 释：note
登 录：login
注 册：register
列 定 义：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
二、id和class的
使用及区别
我们晓得在
款式表定义一个
款式的时候，
可以定义id也
可以定义class，例如：
ID
步骤：#test{color:#333333}，在页面中调用<div>内容<div>
CLASS
步骤：.test{color:#333333}，在页面中调用<div class="test">内容<div>
id一个页面只
可以
使用一次，class
可以
频繁
引用 。
我在页面中用了多个
雷同id在IE中显示也
畸形，id和class好象没什么区别，用多个
雷同id有什么影响吗？
页面存在多个
雷同的ID影响便是不能通过W3的校验 。
在页面显示上，目前的阅读器还都同意你犯这个
舛误，用多个
雷同ID“普通状况下”也能
畸形显示 。然而当你需求用JavaScript通过id来操纵这个div，那就会浮现
舛误 。
id是一个标签，用于
划分不同的
构造和内容，就象你的名字，假如一个屋子有2个人同名，就会浮现
混同；
class是一个
款式，
可以套在任何
构造和内容上，就象一件衣服；
概念上说便是不一样的：
id是先找到
构造/内容，再给它定义
款式；class是先定义好一种
款式，再套给多个
构造/内容 。
也便是说
提议大家在写XHML+CSS时假如是维一的
构造定位的就用id，不然就用class吧(这样让出非
构造定位的div块的id让程序员自己定义
使用)
web
标准
盼望大家用严格的习惯来写代码 。
三.
使用css缩写
使用缩写
可以协助削减你CSS文件的大小，更加容易阅读 。常用的css缩写的重要
规定：
色彩
16进制的
色彩值，假如每两位的值
雷同，
可以缩写一半，例如：
#000000
可以缩写为#000;#336699
可以缩写为#369;
盒尺寸
通常有下面四种书写
步骤:
property:value1;
示意全部边都是一个值value1；
property:value1 value2;
示意top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3;
示意top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值
顺次
示意top,right,bottom,left
容易的记忆
步骤是顺时针，上右下左 。具体
利用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你
可以省略其中一个或多个属性值，假如省略，该属性值将用阅读器默许值，默许值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
留神，假如你缩写字体定义，至少要定义font-size和font-family两个值 。
列表(lists)
取缔默许的圆点和序号
可以这样写list-style:none;
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
四、明确定义单位，除非值为0
淡忘定义尺寸的单位是CSS新手
广泛的
舛误 。在HTML中你
可以只写width=100，然而在CSS中，你必须给一个精确的单位，
比方：width:100px width:100em 。惟独两个例外状况
可以不定义单位：行高和0值 。除此以外，
其余值都必须紧跟单位，
留神，不要在数值和单位中间加空格 。
五、
划分大小写
当在XHTML中
使用CSS，CSS里定义的元素名称是
划分大小写的 。为了幸免这种
舛误，我
提议全部的定义名称都采纳小写 。
class和id的值在HTML和XHTML中也是
划分大小写的，假如你
定然要大小写混合写，请
细心确认你在CSS的定义和XHTML里的标签是
统一的 。
六、
取缔class和id前的元素限定
当你写给一个元素定义class或者id，你
可以省略前面的元素限定，由于ID在一个页面里是唯一的，class
可以在页面中
频繁
使用 。你限定某个元素毫无
意思 。例如：
div#id1{}
可以写成#id1{}
这样
可以
节俭一些字节 。
七、默许值
通常padding和margin的默许值为0，background-color的默许值是transparent 。然而在不同的阅读器默许值可能不同 。假如怕有
摩擦，
可以在
款式表一开始就先定义全部元素的margin和padding值都为0，象这样：
* {
padding:0;
margin:0
}
或者是针对某元向来定义：
ul,li,div,span {
padding:0;
margin:0
}
八、CSS的优先级
行内
款式(inline style) > ID
取舍符 >
款式(class),伪类(pseudo-class)和属性(attribute)
取舍符 > 类别(type)，伪对象(pseudo-element)
解释:
*内联
款式(inline style)：元素的style属性，
比方 <div style="color:red;"></div> ,其中的color:red;便是行内
款式
*ID
取舍符：元素的id属性，
比方 <div></div>
可以用ID
取舍符#content
*伪类(pseudo-class)：最常见的是锚(a)伪类，
比方a:link,a:visited.
*属性
取舍符(attribute selectors)：
比方div[class=demo],含有class为demo的div元素
*类别
取舍器(type selector)：HTML标签
取舍，
比方div .demo,div元素下含有class为demo的元素
*伪对象
取舍器(pseudo-element selector)：
比方div:first-letter,div元素下的第一个单词 。
九、不需求
反复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象
色彩、字体等，已经在父元素中定义过的，在子元素中
可以直接继承，不需求
反复定义，除非是为了更变目前元素
款式不
使用父元素的属性值，然而要
留神，阅读器可能用一些默许值
遮蔽你的定义 。
十.多重CSS
款式定义，属性追加
反复最终优先
准则
一个标签
可以同时定义多个class，也
可以是同一个class中
反复定义属性 。例如：
我们先定义两个
款式
.one{width:200px;background:url(1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}
在页面代码中，我们
可以这样调用:
<div class="one" two></div>
这样最终的显示
动机是这个div
款式是什么呢？？
反复的是以哪一个为准呢？？
<div class="one" two></div>
利用到的
款式如下：
width:200px;
border:10px solid #000;
background:url(2.jpg) no-repeat left top;
由于，当
利用两个或多个
款式时，阅读器所
利用的
款式依据是属性追加
反复最终优先
准则
便是说两个或多个或
反复的
款式名定义，阅读器所
利用的
款式是按先后顺序的，假如定义了
反复的属性值，以最终定义的为准，假如
利用了两个或多个
款式名，里面不
反复定义的属性值就追外加去，
反复的属性值就以最终一个为准 。这里要
留神的是，
款式的先后不是依据页面上
利用的名字顺序，而是
款式表里的
款式顺序 。
十一、
使用子
取舍器(descendant selectors)
使用子
取舍器是影响他们效率的缘由之一 。子
取舍器
可以协助你节约大量的class定义 。我们来看下面这段代码：
<div>
<ul>
<li class="subnavitem"> <a href=http://duote.com/# class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="http://duote.com/#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="http://duote.com/#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你
可以用下面的
步骤
代替上面的代码
<ul id=”subnav”>
<li> <a href="http://duote.com/#>" Item 1</a> </li>
<li class="sel"> <a href="http:/duote.com/#>" Item 1</a> </li>
<li> <a href="http://duote.com/#>" Item 1</a> </li>
</ul>
款式定义是：
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子
取舍器
可以使你的代码和CSS更加简洁、更加容易阅读 。
假如一个容器里有多个同样的元素，并且这些元素
款式都不一样，请幸免用这个
模式，建以采纳不同的class如：
<ul class=”one”><li></li></ul>
<ul class=”tow”><li></li></ul>
十二、不需求给背景图片路径加引号
为了
节俭字节，我
提议不要给背景图片路径加引号，由于引号不是必须的 。例如：
background-image:url(“images
margin:0 auto;
}
然而IE5/Win不能正确显示这个定义，我们采纳一个十分有用的技巧来解决：用text-align属性 。就象这样：
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一个body的text-align:center;
规定定义IE5/Win中body的全部元素居中(
其余阅读器只不过将文字居中) ，第二个text-align:left;是将#warp中的文字居左 。
十三、导入(Import)和
潜藏CSS
由于老版本阅读器不
支撑CSS，一个通常的做法是
使用@import技巧来把CSS
潜藏起来 。例如：
@import url(main.css);
然而，这个
步骤对IE4不起作用，这让我很是头疼了一阵子 。后来我用这样的写法：
@import main.css;
这样就
可以在IE4中也
潜藏CSS了，呵呵，还
节俭了5个字节呢 。想了解@import语法的
详尽
注明，
可以看这里《centricle’s css filter chart》
十四、CSS hack
有些时候，你需求对IE阅读器的bug定义一些特殊的
规定，这里有太多的CSS技巧(hacks)，我只
使用其中的两种
步骤，
无论微软在马上公布的IE7 beta版里是不是更好的
支撑CSS，这两种
步骤都是最安全的 。
1.
诠释的
步骤
(a)在IE中
潜藏一个CSS定义，你
可以
使用子
取舍器(child selector):
html>body p {
}
(b)下面这个写法惟独IE阅读器
可以
了解(对
其余阅读器都
潜藏)
* html p {
}
(c)还有些时候，你
盼望IE/Win有效而IE/Mac
潜藏，你
可以
使用反斜线技巧：
* html p {
declarations
}
(d)下面这个写法惟独IE7阅读器
可以
了解(对
其余阅读器都
潜藏)
*+ html p {
}
2.条件
诠释(conditional comments)的
步骤
另外一种
步骤，我认为比CSS Hacks更加经得起考验便是采纳微软的私有属性条件
诠释(conditional comments) 。用这个
步骤你
可以给IE
径自定义一些
款式，而不影响主
款式表的定义 。就象这样：
<!--[if IE]>
<link rel=stylesheet/css href="http://www.duote.com/style/ie.css" />
<![endif]-->
还有更多的CSS hack大家
可以通过网上找找，然而有众多hack都是不
相符w3c
标准的，本人依据以上的hack写了一个能
划分IE6、IE7、FF的
款式，并且
可以
相符w3c
标准,代码如下：
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
这样写后在IE6下宽是100px，IE7下是95px，火狐下是90px 。
十五、调试技巧：层有多大？
当调试CSS
产生
舛误，你就要象排版工人，逐行
综合CSS代码 。我通常在出问题的层上定义一个背景
色彩，这样就能很显而易见看到层占领多大空间 。有些人
提议用border，普通状况也是
可以的，但问题是，有时候border 会添加元素的尺寸，border-top和boeder-bottom会
毁坏纵向margin的值，所以
使用background更加安全些 。
另外一个
时常出问题的属性是outline 。outline看起来象boeder，但不会影响元素的尺寸或者位置 。惟独少数阅读器
支撑outline属性，我所晓得的惟独Safari、OmniWeb、和Opera 。
十六、CSS代码书写
款式
在写CSS代码的时候，关于缩进、断行、空格，每个人有每个人的书写习惯 。在
通过不停
实际后，我决定采纳下面这样的书写
款式：
.classname {
width:100px;
}
当
使用联合定义时，我通常将每个
取舍器
径自写一行，这样容易在CSS文件中找到它们 。在最终一个
取舍器和大括号{中间加一个空格，每个定义也
径自写一行，分号直接在属性值后，不要加空格 。
我习惯在每个属性值后面都加分号，
固然
规定上同意最终一个属性值后面
可以不写分号，然而假如你要加新
款式时容易
淡忘补上分号而产生
舛误，所以还是都加
比较好 。
最终，关闭的大括号}
径自写一行 。空格和换行有助与阅读 。
