学步园

1、如何设定文字字体、颜色、大小 —— 使用font

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;（这是通用的写法）

　　以上都可以写在一行font属性里（除了color属性需要单独写）：

font: italic bold 12px/150% "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（两端对齐）

　　PS.谈起margin，可以在写CSS的时候为所有的标签定义margin: 0; 避免时而出现由于默认的margin值导致页面排版问题，而自己又找不到原因（特别注意的是ul/ol/p/dt/dd等标签）。

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;
}

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

.test{
width:200px;
height:50px;
border:1px solid red;
padding:10px;
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>

table { table-layout: fixed;word-wrap:break-word;}

10、鼠标代码

a:hover {cursor:url(鼠标地址)}
BODY {cursor:url(鼠标地址)}

2007-6-3增加

· ul 标签在 Mozilla 中默认是有 padding 值的，而在 IE 中只有 margin 有值。 

· 同一个的 class 选择符可以在一个文档中重复出现，而 id 选择符却只能出现一次；对一个标签同时使用 class和 id 进行 CSS 定义，如果定义有重复，id 选择符做的定义有效。 

· 初学可能会碰到这样一个情况，同样一个标签的属性在 IE 设置成 A 显示是正常的，而在 Mozilla 里必须要设成 B 才能正常显示，或者两个倒过来。
临时解决方法：选择符 {属性名:B !important ; 属性名:A;} //IE7 下无效 

· 如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的 margin 属性吧，而不要去定义位于外面的标签的 padding 

· li 标签前面的图标推荐使用 background-image 而不是 list-style-image 

· IE 分不清继承关系和父子关系的差别，全部都是继承关系。 

· 在给你的标签疯狂加选择符的时候，别忘了在 CSS 里给选择符加上注释。 等你以后修改你的 CSS 的时候就知道为什么要这么做了。 

· 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。 

· 定义链接的四种状态要注意先后顺序： Link Visited Hover Active 

· 与内容无关的图片请使用 background 

· 定义颜色可以缩写 #8899FF = #89F 

· table 在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。 

· <script> 没有 language 这个属性，应该写成这样：<script type="text/javascript"> 

· 标题是标题，标题的文字是标题的文字。有时候标题不一定需要显示文字，所以：<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1> 

· 完美的单象素外框线表格（在IE5.0　IE6.0及 FF 中均可通过测试，其它未测试）table {border-collapse:collapse;} td {border:#000 solid 1px;} 

· margin 取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用 left:XXpx 这个属性。 把这个层放到一个要相对定位的标签旁，然后使用 margin 的负值是个好方法。 

· 绝对定位时使用 margin 值定位可以达到相对于本身所在位置的定，这与 top，left 等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。 

几个常用到的 CSS 样式

· 1.中文字两端对齐：text-align:justify; text-justify:inter-ideograph;

· 2.固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上） 

· 3.固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）

· 4.<acronym style="cursor: help" title="输入要提示的文字">文字</acronym> 用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

· 5.图片设为半透明：.halfalpha { background-color: #000000; filter: Alpha(Opacity=50)} 在 IE6 及 IE5 测试通过，FF未通过。

· 6.FLASH透明： 选中 swf，打开原代码窗口，在 </object> 前输入 <param name="wmode" value="transparent"> 我们在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜，代码如下：

.pictures img { filter: alpha(opacity=45); }
.pictures a:hover img { filter: alpha(opacity=90); } 

· 如果文字过长,则将过长的部分变成省略号显示：IE5、FF 无效，但可以隐藏，IE6 有效
<div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> 

· title 换行用的符号或在 IE 中可能由于注释带来的文字重复问题时可以把注释改为：<!--[if !IE]>
Put your commentary in here...
<![endif]--> 

· 如何用 CSS 调用外部字体语法：@font-face { font-family : name; src: url ( url ); sRules }取值： 
name :　 字体名称。任何可能的 font-family 属性的值
url ( url ) :　 使用绝对或相对 url 地址指定OpenType字体文件
sRules :　 样式表定义