<![CDATA[AspDIY.Net - Css]]> http://www.aspdiy.net/ zh-cn PBlog2 v2.4 AspDIY.Net http://www.aspdiy.net/images/logos.gif http://www.aspdiy.net/ AspDIY.Net http://www.aspdiy.net/article/css/141.htm <![CDATA[学习CSS了解单位em和px的区别]]> 983493#qq.com(98tj) Tue,23 Mar 2010 11:59:24 +0800 http://www.aspdiy.net/default.asp?id=141
      关键点：

　　1. IE无法调整那些使用px作为单位的字体大小;

　　2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

　　3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

　　px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

　　em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

　　em有如下特点：

　　1. em的值并不是固定的;

　　2. em会继承父级元素的字体大小。

　　所以我们在写CSS的时候，需要注意两点：

　　1. body选择器中声明Font-size=62.5%;

　　2. 将你的原来的px数值除以10，然后换上em作为单位;

　　3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

　　也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

　　但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

]]> http://www.aspdiy.net/article/css/140.htm <![CDATA[CSS对IE6、IE7、IE8支持详细的易用的参考]]> 983493#qq.com(98tj) Tue,16 Mar 2010 10:44:18 +0800 http://www.aspdiy.net/default.asp?id=140

中文原文：CSS在Internet Explorer 6, 7 和8中的差别
译自：CSS Differences in Internet Explorer 6, 7 and 8

关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6，7和8共存。截至本文，Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区，这个数字要小很多，统计显示大概只有40%。

ie

这些统计中比较有趣的部分是，IE6、IE7、IE8之间的数值很接近，这防止了单个Microsoft的浏览器占居统治地位——与过去的情况相反。根据这些令人遗憾的统计结果，在为客户开发网站的时候开发人员对所有当前使用的IE浏览器做全面的测试是必要的，而且这样在个人项目上也可以拉拢更多的用户。

多谢那些JavaScript库(框架)，跨浏览器的Javascript的测试已经像当前形势所允许的那样接近完美了。但在CSS开发中还不是这样，特别是关系到IE目前存在的三个版本。

本文尝试为希望了解CSS对IE6、IE7、IE8的支持的不同的开发者提供一份详细的、易用的参考。本参考包含以下情况的概述和兼容情况：

  • 三个浏览器中的一个支持而另外两个不支持的条目
  • 三个浏览器中的两个支持而另外一个不支持的条目

本文不讨论：

  • 三个浏览器都不支持的条目
  • 私有属性

因此，本文的中心是三个浏览器中的不同，而不是必要的支持缺陷。该列表被分为以下五个部分：

选择器与继承

子选择器

示例
body > p {
	color: #fff;
}
描述

子选择器选择一个特定父级元素的所有直接子级元素，在上面的例子中，body是父元素，p是子元素。

支持情况
IE6
No
IE7
Yes
IE8
Yes
Bugs

IE7中，如果在父级标签和子级标签之间有一个HTML注释，子选择器将不会工作。

链类

示例
.class1.class2.class3 {
	background: #fff;
}
描述

链类用于送一个HTML元素有多个class声明的情况，就像这样：

<div class="class1 class2 class3">
<p>Content here.</p>
</div>
支持情况
IE6
No
IE7
Yes
IE8
Yes
Bugs

IE6好像支持这种情况，因为它能匹配链中的最后一个class到使用该class的元素上，然而，它并不能限制一个使用链中所有class的元素。

属性选择器

示例
a[href] {
	color: #0f0;
}
描述

该选择器允许一个元素被定位只要它有指定的属性。在上面的例子中，所有的带有href属性的a标签都会被限定，而没有href属性的a标签不会被限定。

支持情况
IE6
No
IE7
Yes
IE8
Yes

临近兄弟选择器

示例
h1+p {
	color: #f00;
}
描述

该选择器定位临近到指定元素的兄弟标签。上面的例子将会限定p标签，但是他必须是h1标签的兄弟而且要直接尾随在h1标签的后面。比如：

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

在上面的代码中，CSS样式将只对第一个p有效。因为它是h1的兄弟而且紧跟着h1。第二个p也是h1的一个兄弟，但是它没有紧跟着h1。

支持情况
IE6
No
IE7
Yes
IE8
Yes
Bugs

在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。

普通兄弟选择器

示例
h1~p {
	color: #f00;
}
描述

该选择器定位一个指定元素后面的所有兄弟元素。将此选择器应用到上面的那个例子，将会对两个p标签都有效。当然，如果有一个p元素出现在h1之前，那个p元素不会被匹配。

支持情况
IE6
No
IE7
Yes
IE8
Yes

伪类和伪元素

:hover后面的后代选择器

示例
a:hover span {
	color: #0f0;
}
描述

一个元素可以被:hover伪类后面的选择器定位，就像后代选择器一样。上面的例子，在鼠标悬停的时候，将会改变a元素内的span元素中的文字的颜色。

支持情况
IE6
No
IE7
Yes
IE8
Yes

链伪类

示例
a:first-child:hover {
	color: #0f0;
}
描述

伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个a标签，并将hover伪类P应用到它上。

支持情况
IE6
No
IE7
Yes
IE8
Yes

非锚点元素中的:hover

示例
div:hover {
	color: #f00;
}
描述

:hover伪类可以应用到任何元素的悬停状态，而不只是a标签。

支持情况
IE6
No
IE7
Yes
IE8
Yes

:first-child伪类

示例
div li:first-child {
	background: blue;
}
描述

改伪类定位每一个指定的元素的父级元素的第一个子元素。

支持情况
IE6
No
IE7
Yes
IE8
Yes
Bugs

IE7中，如果要定位的第一个子元素之前有HTML注释，first-child伪类将会无效。

:focus伪类

示例
a:focus {
	border: 1px solid red;
}
描述

该伪类定位有键盘焦点的所有元素。

支持情况
IE6
No
IE7
No
IE8
Yes

:before 和:after 伪类

示例
#box:before {
	content: "本段文字在盒子前面";
}
 
#box:after {
	content: "本段文字在盒子后面";
}
描述

这两个伪元素分别在指定元素的前面和后面添加生成的内容，结合content属性一起使用。

支持情况
IE6
No
IE7
No
IE8
Yes

属性支持

由position产生的实际大小

示例
#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}
描述

定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度)，虽然并没有设定使宽度和高度值。

支持情况
IE6
No
IE7
Yes
IE8
Yes

Min-Height 与 Min-Width

示例
#box {
	min-height: 500px;
	min-width: 300px;
}
描述

这两个属性分别指定元素的宽和高的最小值，允许一个盒子可以比指定的最小值更大，但是不能更小。它们两个可以一起使用，也可以分开来用。

支持情况
IE6
No
IE7
Yes
IE8
Yes

Max-Height 和Max-Width

示例
#box {
	max-height: 500px;
	max-width: 300px;
}
描述

这两个属性分别指定元素的高和宽的最大值，允许一个盒子比这个指定的最大值小，但是不能更大。它们也可以同时使用或者单独使用。

支持情况
IE6
No
IE7
Yes
IE8
Yes

透明边框颜色

示例
#box {
	border: solid 1px transparent;
}
描述

一个透明的边框色允许一个边框和边框色可见(或者不透明)时占用一样的空间。

支持情况
IE6
No
IE7
Yes
IE8
Yes

固定位置元素

示例
#box {
	position: fixed;
}
描述

position属性的这个值允许一个元素绝对的相对于窗口定位。

支持情况
IE6
No
IE7
Yes
IE8
Yes

固定位置的背景图

示例
#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}
描述

background-attachment属性的值为fixed允许一个背景图片绝对地相对于窗口定位。

支持情况
IE6
No
IE7
Yes
IE8
Yes
Bugs

就像position:fixed一样，IE6同样不支持background-positon的fixed值 。然而，在IE6中只有在这个值用于根元素的时候才有效。

属性值“inherit”

示例
#box {
	display: inherit;
}
描述

将值inherit 应用到一个属性那个允许一个元素从它的包含元素继承计算的值。

支持情况
IE6
No
IE7
No
IE8
Yes
Bugs

IE6 和IE7 不支持inherit 值除了direction 和visibility 属性。

表格单元的边框空白

示例
table td {
	border-spacing: 3px;
}
描述

该属性设置相邻的表格单元的边框之间的空白。

支持情况
IE6
No
IE7
No
IE8
Yes

在表格中渲染空单元格

示例
table {
	empty-cells: show;
}
描述

该属性，只应用于元素的display属性被设置为 table-cell的元素，允许空单元格渲染他们的边框和背景。否则，它们将不可见。

支持情况
IE6
No
IE7
No
IE8
Yes

表格标题的水平位置

示例
table {
	caption-side: bottom;
}
描述

这个属性允许将一个表格的标题放到表格的底部——默认是头部。

支持情况
IE6
No
IE7
No
IE8
Yes

修剪区域

示例
#box {
	clip:rect(20px, 300px, 200px, 100px)
}
描述

该属性指定一个盒子的一个区域可见，剩下的部分修剪掉，或者不可见。

支持情况
IE6
No
IE7
No
IE8
Yes
Bugs

有趣的是，该如果不使用隔开各个值的逗号，IE6和IE7也可以用这个属性。(比如，使用空格隔开剪切的值。)

打印页面中的orphanes和widows

示例
p {
	orphans: 4;
}
 
p {
	widows: 4;
}
描述

orphans属性设定在打印页面底部显示的最少行数。而widows 属性用来设定打印页面头部至少显示的段落的行数。

支持情况
IE6
No
IE7
No
IE8
Yes

盒子内的页面分割

示例
#box {
	page-break-inside: avoid;
}
描述

该属性设定分页是否发生在一个指定元素内。

支持情况
IE6
No
IE7
No
IE8
Yes

Outline 属性

示例
#box {
	outline: solid 1px red;
}
描述

outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性，因为它不会影响文档流，因而u更有助于调试布局问题。

支持情况
IE6
No
IE7
No
IE8
Yes

display属性的替代值

示例
#box {
	display: inline-block;
}
描述

display 属性通常设置为block, inline, 或none。替代值包括：

  • inline-block
  • inline-table
  • list-item
  • run-in
  • table
  • table-caption
  • table-cell
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group
支持情况
IE6
No
IE7
No
IE8
Yes

处理可折叠空白

示例
p {
	white-space: pre-line;
}
 
div {
	white-space: pre-wrap;
}
描述

white-space属性的pre-line值设定将多个空白元素折叠为一个空白，同时允许明确的设置断行。white-space 属性的pre-wrap 值不会将多个空白折叠为一个，不过也允许明确的设置断行。

支持情况
IE6
No
IE7
No
IE8
Yes

其它各种技术

@import的媒体类型

示例
@import url("styles.css") screen;
描述

就像上面的例子那样，引入的样式表文件的媒体类型声明在文件地址的后面。在该例子中，媒体类型是”screen”。

支持情况
IE6
No
IE7
No
IE8
Yes
Bugs

尽管IE6 和IE7 支持 @import，它们在媒体类型被指定的时候会无效，甚至会引起正@import规则无效。

计数递增

示例
h2 {
	counter-increment: headers;
}
h2:before {
	content: counter(headers) ". ";
}
描述

该CSS 技术允许你自动增加出现在指定元素前面的编号，结合before伪元素一起使用。

支持情况
IE6
No
IE7
No
IE8
Yes

生成内容的引用字符

示例
q {
	quotes: "'" "'";
}
 
q:before {
	content: open-quote;
}
 
q:after {
	content: close-quote;
}
描述

指定用于生成内容的引用呼号，用于q标签。

支持情况
IE6
No
IE7
No
IE8
Yes

重要bug和不兼容性问题

下面是在上文中没有提到的IE6和IE7的众多bug。当然这个列表不包括在这三个浏览器中都不支持的条目。

IE6 Bugs

  • 不支持用样式设置<abbr> 元素
  • 不支持以连字符和下划线开头的class和ID名
  • <select> 元素总是出现在堆叠最上面，而无视z-index值
  • 如果锚点的伪类没有使用正确的顺序(:link, :visited, :hover)，:hover 伪类将无效
  • 一个属性的!important 声明会被同一规则中同一属性的没有使用!important的第二个声明覆盖。
  • height 表现类似于min-height
  • width 表现类似于min-width
  • 左右margin双倍
  • 圆点边框(dotted)看起来像虚线边框(dashed)
  • text-decoration的 line-through 值在文字上看起来比别的浏览器要高一些
  • 有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加，而是保持为1
  • 列表元素不支持list-style-type的所有可用的值
  • 如果列表条目浮动，指定的list-style-image 将不会显示
  • 不完全支持 @font-face
  • 某些选择器会错误的匹配注释和文档声明
  • 如果一个ID 选择器结合一个类选择器不匹配，同样的ID选择器结合不同的类选择器也将被当作不匹配。

IE7 Bugs

  • 有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加，而是保持为1
  • 列表元素不支持list-style-type的所有可用的值
  • 如果列表条目浮动，指定的list-style-image 将不会显示
  • 不完全支持 @font-face
  • 某些选择器会错误的匹配注释和文档声明

一些在这里没有提到的IE bug只会在特定环境发生，而且没有指定到特定的CSS属性或值。查看下面的参考以了解更多问题：

更多资源

关于作者

Louis Lazaris 是一个居住在加拿大多伦多的自由职业者，网页开发者，在网站开发领域有9年的经验，在其博客Impressive Webs发布网页设计文章和教程。你可以follow Louis on Twitter 或者在这里联系到他。

]]> http://www.aspdiy.net/article/css/139.htm <![CDATA[用clearfix:after 消除 css浮动]]> 983493#qq.com(98tj) Tue,16 Mar 2010 10:20:17 +0800 http://www.aspdiy.net/default.asp?id=139 <div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>
运行这段代码，大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。这是因为内部的DIV因为float:left之后，就丧失了clear:both和display:block的样式，所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度，要怎么解决呢？

以前我都是用这样的法子 来解决：
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>
我们看到，在容器DIV内要显示出来的float:left的所有的DIV之后，我们添加了这样的一个DIV：<div style="clear:both"></div> 。这样，其实就在最后增加了clear的动作。

但是，我总感觉，这么多加一个DIV有点不妥。一是多了一个没有意义的DIV，二是在用dojo做Drag & Drop的时候，由于这个DIV是容器DIV的一个字节点，如果这个节点被移动，则会造成排版上的Bug：如果要显示的蓝框的DIV被移到这个DIV之后，则因为clear:both，它会被强制 换一行显示。所以，我一直在寻找更好的解决措施。

解决的措施：
首先设置这样的CSS：
CSS代码：


代码:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
然后，我们再修正原本的HTML代码，让外部的容器DIV来应用这个CSS：
HTML4STRICT代码：


<style>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html .clearfix {height: 1%;}

在Firefox里测试一下，哈哈，这样做的确很有效，显示正常，而且dojo的 Drag & Drop 也不会有问题了。原本，这个clearfix的CSS应用了after这个伪对象，它将在利用 clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为潜藏 。这样就达到 了撑开容器的目标啦。

但是，在文章中说，Windows IE并不支撑这样做。所以要让IE也完善显示，则必须 在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下：
CSS代码：

代码:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html .clearfix {height: 1%;}

因为转义字符"\"，Mac IE涉猎器会漠视 掉这段Hack，但Windows IE不会，它会利用 * html .clearfix {height: 1%;} 来达到 撑开DIV容器的目标（貌似Mac IE没有措施解决这个问题，不过幸好用户数量是在是太少了，Safari支撑就可以了:p）。
]]> http://www.aspdiy.net/article/css/132.htm <![CDATA[css初始化]]> 983493#qq.com(98tj) Fri,25 Dec 2009 14:55:46 +0800 http://www.aspdiy.net/default.asp?id=132 KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
     2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
     3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
*/

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */
sub { vertical-align: text-bottom; }

/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
]]> http://www.aspdiy.net/article/css/129.htm <![CDATA[IE6下关于display:none的溢出的解决方法]]> 983493#qq.com(98tj) Mon,14 Dec 2009 16:33:29 +0800 http://www.aspdiy.net/default.asp?id=129
今天遇到的是display：none。检查了好几遍才发现的，有点晕

我是做那种鼠标经过时让一个div显示。

<span onmouseover=”openVessel(’qita4′)” onmouseout=”closeVessel(’qita4′)”>其他要求</span>联系方式： 020-82329785</div>
  <div class=”qgli4″ id=”qita4″ onmouseover=”openVessel(’qita4′)” onmouseout=”closeVessel(’qita4′)” style=”display:none;”>
        <strong>其它要求：</strong><br />!!本人急购二手奥迪系列车一辆,最好是5年内的车,要求必须能过户的京牌车,手续齐全的,看好车后,价格面谈.当时付款,望想卖车的朋友,请与我联系:王        </div>

JS就不写了  大概就这样，然后中间就溢出来了，也就很些人说的“重影”。

解决的方法是在那个disply:none的div外再加一个div。

<div class=”qgli5″><div class=”qgli4″ id=”qita5″ onmouseover=”openVessel(’qita5′)” onmouseout=”closeVessel(’qita5′)” style=”display:none;”>
        <strong>其它要求：</strong><br />!!本人急购二手奥迪系列车一辆,最好是5年内的车,要求必须能过户的京牌车,手续齐全的,看好车后,价格面谈.当时付款,望想卖车的朋友,请与我联系:王        </div></div>
]]> http://www.aspdiy.net/article/css/125.htm <![CDATA[DIV+CSS命名规则]]> 983493#qq.com(98tj) Sat,05 Dec 2009 09:41:31 +0800 http://www.aspdiy.net/default.asp?id=125 登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight


1.CSS ID 的命名
外　套:　　wrap
主导航:　　mainNav
子导航:　　subnav
页　脚:　　footer
整个页面:　content
页　眉:　　header
页　脚:　　footer
商　标:　　label
标　题:　　title
主导航:　　mainNav(globalNav)
顶导航:　　topnav
边导航:　　sidebar
左导航:　　leftsideBar
右导航:　　rightsideBar
旗　志:　　logo
标　语:　　banner
菜单内容1: menu1Content
菜单容量:　menuContainer
子菜单:　　submenu
边导航图标:sidebarIcon
注释:　　　note
面包屑:　　breadCrumb(即页面所处位置导航提示)
容器:　　　container
内容:　　　content
搜索:　　　search
登陆:　　　login
功能区:　　shop(如购物车，收银台)
当前的　　　current


2.另外在编辑样式表时可用的注释可这样写:
内容区


3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

]]> http://www.aspdiy.net/article/css/107.htm <![CDATA[（中文排版CSS心得）----固定宽度汉字截断 —— 使用text-overflow! ]]> 983493#qq.com(98tj) Fri,10 Apr 2009 22:20:46 +0800 http://www.aspdiy.net/default.asp?id=107
font-style设定斜体，比如font-style: italic;
font-weight设定文字粗细，比如font-weight: bold;
font-size设定文字大小，比如font-size: 12px;（或者9pt，不同单位显示问题参考CSS手册）
line-height设定行距，比如line-height: 150%;
color设定文字颜色（注意不是font-color），比如color: red;
font-family设定字体，比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通用的写法）

2、如何控制段落排版 —— 使用margin，text-align

中文段落使用<p>标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：

p{
margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/
}


文字的对齐方式用text-align，比如：

p{
text-align: center;  /*居中对齐*/
}


对齐方式还有left、right和justify（两端对齐）
3、竖排文字 —— 使用writing-mode

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。
比如：

p{
writing-mode: tb-rl;
}


可以结合direction排版。
4、项目符号的问题 —— 使用list-style

在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或ol）的项目符号为方块，如：

li{
list-style: square;
}


另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。
5、首字下沉 —— 使用:first-letter

伪对象:first-letter配合font-size、float可以制作首字下沉效果。
比如：

p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}


6、首行缩进 —— 使用text-indent

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：

p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}


如果font-size是12px的话，那么text-indent: 2em则缩进24px。
7、关于汉字注音 —— 使用ruby标签和ruby-align属性

比如说<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>，可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的，具体可以自行查阅ruby-align项。
8、固定宽度汉字截断 —— 使用text-overflow

用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用CSS来控制则没有这个问题。比如对列表应用以下样式：


li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}



不过只能处理文字在一行上的截断，不能处理多行。

9、固定宽度汉字（词）折行 —— 使用word-break

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>
值得注意的是里面的空格不能以&nbsp;代替（最少要有一个软空格）。

转：http://www.cnblogs.com/panzhilei/archive/2007/02/03/638928.html
]]> http://www.aspdiy.net/article/css/83.htm <![CDATA[使脚本和CSS在IE8中兼容 ]]> 983493#qq.com(98tj) Sat,11 Oct 2008 13:31:12 +0800 http://www.aspdiy.net/default.asp?id=83
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />]]> http://www.aspdiy.net/article/css/55.htm <![CDATA[透明的DIV提示框(兼容IE与Firefox) ]]> 983493#qq.com(98tj) Sat,28 Jun 2008 17:50:05 +0800 http://www.aspdiy.net/default.asp?id=55
(1)按钮数量与其上面显示的文字不可改变.
(2)对话框样式单调不好看.
(3)对话框内只能显示文字.

因为以上原因很多网站都选择使用Javascript+CSS编写自己的DIV对话框,DIV对话框不但好看而且能完成大部分的业务需求,于是我也开始试着编写这样的对话框,以下是我个人编写的一个DIV对话框例子:

<html>

<head>
<style>
body{}{
    margin:0px;
}    
</style>
<title></title>
<script>

function DivAlert(messageDiv){
    this.messageDIV=messageDiv;
    //创建提示框底层
    this.bottomDIV = document.createElement("div");
    
    //获取body中间点
    var x=document.body.clientWidth/2,y=document.body.clientHeight/2;

    //配置样式
    this.bottomDIV.style.opacity="0.50";
    this.bottomDIV.style.filter="Alpha(opacity=50);";
    this.bottomDIV.style.backgroundColor="#CCCCCC";
    this.bottomDIV.style.height=document.body.scrollHeight+"px";
    this.bottomDIV.style.width="100%";
    this.bottomDIV.style.marginTop="0px";
    this.bottomDIV.style.marginLeft="0px";
    this.bottomDIV.style.position="absolute";
    this.bottomDIV.style.top="0px";
    this.bottomDIV.style.left="0px";
    this.bottomDIV.style.zIndex=100;

    //显示提示框
    this.show = function(){
        //显示提示框底层
          document.body.appendChild(this.bottomDIV);
        //显示messageDIV
        document.body.appendChild(this.messageDIV);
        //把messageDIV定位到body中间
        this.messageDIV.style.position="absolute";
        x=x-this.messageDIV.clientWidth/2;
        y=y-this.messageDIV.clientHeight/2;
        this.messageDIV.style.top=y+"px";
        this.messageDIV.style.left=x+"px";
        this.messageDIV.style.zIndex=101;
      }
      
    //移除提示框
      this.remove = function(){
          document.body.removeChild(this.bottomDIV);
        document.body.removeChild(this.messageDIV);
      }
}



//测试DivAlert对象
var dc;
function test(){
     //创建提示框内容部分
     var d = document.createElement("div");
     d.style.width="220px";
     d.style.height="150px";
     d.style.backgroundColor="#AA00CC";
     d.style.padding="10px";

     //向提示框内容部分画需要显示的信息
     d.innerHTML="Hello World<br/><input type=\"button\" style=\"color:#cc4044\" value=\"close this DivAlert\" onclick=\"test2()\"/>"
    
     //实例化提示框
     dc = new DivAlert(d);
     //显示提示框
     dc.show();
}

//提示框里的Button按钮点击事件
function test2(){
    //移除对话框
    dc.remove();
}
</script>
</head>

<body>
<a href="javascript:void(0)" onClick="test();">click</a>
</body>

</html>]]>