头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner 
 
注释的写法
 
/* Footer */
内容区
/* End Footer */
 
id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
 
 
id的命名
 
页面结构
 
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
 
导航
 
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
 
 功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
 
class的命名
 
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
 
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
 
(3)对齐样式,使用对齐目标的英文名称,如
 
.left { float:left; }
.bottom { float:bottom; }
 
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
 
注意事项
 
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css/style.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

语法：

STYLE="filter:filtername(fparameter1, fparameter2…)"
（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）
 

滤镜说明：

　　alpha：设置透明层次
　　blur：创建高速度移动效果，即模糊效果
　　chroma：制作专用颜色透明
　　DropShadow：创建对象的固定影子
　　FlipH：创建水平镜像图片
　　FlipV：创建垂直镜像图片
　　glow：加光辉在附近对象的边外
　　gray：把图片灰度化
　　invert：反色
　　light：创建光源在对象上
　　mask：创建透明掩膜在对象上
　　shadow：创建偏移固定影子
　　wave：波纹效果
　　Xray：使对象变得像被x光照射一样

1、滤镜：Alpha
　　语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
　　说明：
　　Opacity：起始值，取值为0～100, 0为透明，100为原图。
　　FinishOpacity：目标值。
　　Style：1或2或3
　　StartX：任意值
　　StartY：任意值
　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜：blur
　　语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
　　说明：
　　Add：一般为1，或0。
　　Direction：角度，0～315度，步长为45度。
　　Strength：效果增长的数值，一般5即可。
　　例子：filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜：Chroma
　　语法：STYLE="filter:Chroma(Color = color)"
　　说明：color：#rrggbb格式，任意。
　　例子：filter:Chroma(Color="#FFFFFF")
4、滤镜：DropShadow
　　语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
　　说明：Color:#rrggbb格式，任意。
　　Offx：X轴偏离值。
　　Offy：Y轴偏离值。
　　Positive：1或0。
　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜：FlipH
　　语法：STYLE="filter:FlipH"
　　例子：filter:FlipH
6、滤镜：FlipV
　　语法：STYLE="filter:FlipV"
　　例子：filter:FlipV
7、滤镜：glow
　　语法：STYLE="filter:Glow(Color=color, Strength=strength)"
　　说明：
　　Color：发光颜色。
　　Strength：强度(0－100)
　　例子：filter:Glow(Color="#6699CC",Strength="5")
8、滤镜：gray
　　语法：STYLE="filter:Gray"
　　例子：filter:Gray
9、滤镜：invert
　　语法：STYLE="filter:Invert"
　　例子：filter:Invert
10、滤镜：mask
　　语法：STYLE="filter:Mask(Color=color)"
　　例子：filter:Mask (Color="#FFFFE0")
11、滤镜：shadow
　　语法：filter:Shadow(Color=color, Direction=direction)
　　说明：
　　Color：#rrggbb格式。
　　Direction：角度，0－315度，步长为45度。
　　例子：filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜：wave
　　语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
　　说明：
　　Add：一般为1，或0。
　　Freq：变形值。
　　LightStrength：变形百分比。
　　Phase：角度变形百分比。
　　Strength：变形强度。
　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜：Xray
　　语法：STYLE="filter:Xray"
　　例子：filter:Xray

技巧目录：

　　1、CSS字体属性简写规则
　　2、FireFox移除超链接的虚线
　　3、让固定宽度的页面居中
　　4、隐藏水平滚动条
　　5、针对浏览器的选择器
　　6、同时使用两个类
　　7、CSS border的缺省值
　　8、CSS用于文档打印
　　9、图片替换技巧
　　10、CSS box模型的另一种调整技巧
　　11、块元素居中对齐
　　12、用CSS来处理垂直对齐
　　13、CSS在容器内定位
　　14、直通到屏幕底部的背景色

　　1、CSS字体属性简写规则

　　一般用CSS设定字体属性是这样做的：

　　font-weight:bold;
　　font-style:italic;
　　font-varient:small-caps;
　　font-size:1em;
　　line-height:1.5em;
　　font-family:verdana,sans-serif;

　　但也可以把它们全部写到一行上去：

　　font: bold italic small-caps 1em/1.5em verdana,sans-serif;

　　注意：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

　　2、FireFox移除超链接的虚线

　　FireFox下，当你点击一个超链接时会在外围出现一个虚线轮廓。这很容易解决， 只需要在标签样式中加入 outline:none。

　　a{
　　outline: none;
　　}

　　3、让固定宽度的页面居中

　　为了让页面在浏览器居中显示， 需要相对定位外层div，然后把margin设置为auto。

　　#wrapper {

　　margin: auto;

　　position: relative;

　　}

　　4、隐藏水平滚动条

　　为了避免出现水平滚动条，在body里加入 overflow-x:hidden 。

　　body { overflow-x: hidden; }

　　当你决定使用一个比浏览器窗口大的图片或者flash时，这个技巧将非常有用。

   　5、针对浏览器的选择器 

　　这些选择器在你需要针对某款浏览器进行css设计时将非常有用。

　　IE6及其更低版本

　　* html {}

　　IE7及其更低版本

　　*:first-child+html {} * html {}

　　仅针对IE7 

　　*:first-child+html {}

　　IE7和当代浏览器 

　　html>body{}

　　仅当代浏览器(IE7不适用)

　　html>/**/body{}

　　Opera9及其更低版本

　　html:first-child {}

　　Safari 

　　html[xmlns*=""] body:last-child {} 

　　要使用这些选择器，请将它们放在样式之前。 例如：

　　#content-box {

　　width: 300px;

　　height: 150px;

　　}

　　* html

　　#content-box {

　　width: 250px;

　　} /* overrides the above style and changes the width to 250px in IE 6 and below */

　　6、同时使用两个类

　　一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
　　<p class="text side">…</p>

　　同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

　　补充：对于一个ID，不能这样写<p id="text side">…</p>也不能这样写本页技巧目录：

　　7、CSS border的缺省值

　　通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000

　　这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

　　如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

　　8、CSS用于文档打印

　　许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

　　也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

　　<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

　　第1行就是显示，第2行是打印，注意其中的media属性。

　　但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。

　　9、图片替换技巧

　　一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

　　比如你想整个卖东西的图标，你就用了这个图片：
　　<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
　　这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
　　<h1>Buy widgets</h1>
　　但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
　　h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

　　注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

　　10、CSS box模型的另一种调整技巧

　　这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

　　#box { width: 100px; border: 5px; padding: 20px }

　　这样调用它：
　　<div id="box">…</div>
　　这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

　　但用CSS也可以达到同样的目的，让它们显示效果一致。

　　#box { width: 150px } #box div { border: 5px; padding: 20px }

　　这样调用：
　　<div id="box"><div>…</div></div>
　　这样，不管什么浏览器，宽度都是150点了。

　　11、块元素居中对齐

　　如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

　　#content { width: 700px; margin: 0 auto }

　　你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

　　body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

　　这会把网页内容都居中，所以在Content中又加入了 text-align: left 。

　　12、用CSS来处理垂直对齐

　　垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

　　CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

　　13、CSS在容器内定位

　　CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

　　#container { position: relative }

　　这样容器内所有的元素都会相对定位，可以这样用：
　　<div id="container"><div id="navigation">…</div></div>
　　如果想定位到距左30点，距上5点，可以这样：

　　#navigation { position: absolute; left: 30px; top: 5px }

　　当然，你还可以这样：
　　margin: 5px  0  0  30px
　　注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

　　14、直通到屏幕底部的背景色

　　在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

　　#navigation { background: blue; width: 150px }

　　较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

　　不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

　　body { background: url(blue-image.gif) 0 0 repeat-y }

　　此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

1.       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.       <html xmlns="http://www.w3.org/1999/xhtml">

3.       <head>

4.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

5.       <title>www.webjx.com</title>

6.       <style type="text/css">

7.       <!–

8.       * {font-size:13px;font-family:Arial;}

9.       #nav li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;}

10.    #nav li a {text-decoration:none; color:#666;} [中国站长站]

11.    #nav li a:hover {color:#000;}

12.    .aa {border-top:4px solid #7BC110; background:#be6;}

13.    .bb {border-top:4px solid #ff9900; background:#fc3;}

14.    .cc {border-top:4px solid #ff66ff; background:#fcf;}

15.    –>

16.    </style>

17.    </head>

18.    <body>

19.    <ul id="nav">

20.    <li class="aa"><a href="/">CSS Templates Free Download </a></li>

21.    <li class="bb"><a href="/">CSS WebSites Showcase </a></li>

22.    <li class="cc"><a href="/">CSS Web Design Article </a></li>

23.    </ul>

24.    </body>

25.    </html>