当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，建议所有的定义名称都采用小写。class和id的值在HTML和XHTML中也是区分大小写的。
1.样式属性主要分为以下几类：字体，背景，文本，位置，布局，边缘，列表，其它。
2.字体
族类(generic family)：一个族类是一组具有统一外观的字体族。sans-serif代表一组没有“脚”的字体，笔画两端有衬线；serif族：笔画两端有衬线；monospace族：所有字符的宽度一样。
font-family：字体名称，多个字体名称之间使逗号分隔，优先使用前面的字体。建议在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。如：h1 {font-family: arial, verdana, sans-serif;}
font-size：字体大小。注意奇数字尺寸的字在横向时可能有变形。
绝对大小值有：xx-small，x-small，small，medium，large，x-large，xx-large。大部分浏览器的默认文字大小为16px。small为13px
相对大小值 ：larger，smaller。
绝对单位：mm，cm，in，pt，pc。
相对单位：em 相对于字体的大小，ex 相对于小写字母x的大小，% 相对于父元素的字体值，px 相对于设备的像素点。一般认为1em=2ex。
font-style：字体样式，normal（正常）、italic（斜体）或oblique（倾斜）。
text-decoration：在文本中添加上划线，中划线，下划线。underline overline line-through。可以同时设置多个值 ，用空格隔开。
超链接的默认的text-decoration的值就是underline。不设置时使用none。
font-weight：浓淡程度。其值可以是normal（正常）、bold（加粗）、bolder、lighter。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。
font-variant：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体
最后可以使用一个font属性包括所有的字体设置值 ：例如 P{font:italic bold 12pt }，但不知在解析时怎么排列顺序的。
缩写字体至少要定义font-family和font-size，字体颜色值不可能缩写到font中。
4.文本
word-spacing：单词间距，可继承
letter-spacing：文本的水平汉字或字母间距，可继承
vertical-align：垂直对齐方式，相对于父元素，只适用于行内元素，无继承性。
baseline，sub，super，top，middle，bottom，text-top，text-bottom，inherit，或相对于元素行高的百分比。 默认为baseline。
float可能会影响vertical-align的表现
当元素内容只有图片时，如果出现图片所在行高失效的问题，检查此时要修改文档类型为严格的strict，非过渡的transitional.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
表格是比较特殊的元素，浏览器会对它的垂直对齐进行特殊处理。
text-align：内部水平对齐方式，只适用于块级元素，可继承。CSS属性text-align与HTML属性align的功能相同。
该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中)，
justify（两端对齐），报刊杂志经常采用justify。
两边文字对齐 style="text-align:justify; text-justify:inter-ideograph";
text-indent：首行缩进值，段落前面空两个字的距离不要使用空格，应该使用首行缩进text-indent。
text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如p {text-indent: 2em;}，p {text-indent: 30px;}
有两种情况会用到负值缩进，悬挂缩进和隐藏文字。
悬挂缩进如：p{padding-left:3.5em; text-indent:-3.5em;}
隐藏文字：在网页内一些特殊字体效果往往用图片来实现，比如h3使用了特殊字体，如果在其中放入img则违反了“表现与结构分离”原则，因为原本这里是
加入文字内容的，由于表现才改用了图片，所以这个图片是“表现”，解决方法是保h3中使用文字，同时h3{background:(url); text-indent:-9999em;}，
使文字挤出屏幕。
white-space：对文本中空白的处理。
normal：将多个空格替换为一个空格，自动回行。
pre：不压缩空格
nowrap：不压缩空格，不换行，直到br。效果还会受到overflow属性值的影响。 如：加上width:11em; overflow:hidden; 可以实现隐藏超出的文字效果；
pre-wrap：空格，制表符，换行不会被压缩，但会自动回行。
pre-line：空格，制表符被压缩，保留换行，会自动回行。
line-height：文字行高，文本行的基线间的距离，并不是元素的高度，可继承。指定数字或px值或百分比。
默认值为normal，一般为1到1.2。例如：140%指行高是字体高度的140%，1指的是字体高度乘以1。
当内容中有图片时，如果图片高度大于行高，图片会撑高行框，但不会影响行高值。
一些单行文字垂直居中：一般只需要设定行高值与高度值相等。
行内框：inline box，行内元素会生成一个行内框，默认行内框等于内容区域，行高会影响行内框的高度。
行框：line box，高度等于本行内所有元素行高最大的值。
word-wrap;
word-break;
text-decoration：为文本增添不同的装饰效果，无继承性。none 默认值，也有的元素不是，如a，underline 下划线、line-through 贯穿线、overline 上划线、blink 闪烁。
常用于对链接文字设置装饰效果。
text-transform：控制文本的大小写。每个单词的首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase），none不作转换，默认为none。
text-shadow: 文本阴影由下列顺序的参数构成: x-offset, y-offset, blur, color. 将 x-offset 设置为负数即将阴影移动到左侧. 将 y-offset 设置为负数即将阴影移动到上方.
不要忘记你可以使用 RGBA 来控制阴影的颜色.同时还可以为 text-shadow 指定一个阴影列表 (以逗号分隔).
下列例子使用了两个 text-shadow 定义来控制页面输出效果 (1px 上阴影和 1px 的下阴影). text-shadow:01px0 #fff, 0 -1px0#000;
由于多数浏览器不支持此属性，在css2.1删除了。
direction:
unicode-bidi:
6.布局：
page-break-before：
page-break-after：
7.边界和填充
8.列表
list-style-type：square 列表项标记类型
list-style-position：inside，outside。
list-style-image：url()
list-style：square insice url()
table的table-layout属性
9.其它
cursor：
filter：
10.filter，css 滤镜
一些有边界区域的元素才能使用filter。
可实现的效果有，文字翻转等。
例如：style="filter:alpha(opacity=80) blur(add=5,direction=135) flipv"
filter参数
alpha(opacity=?,finishopacity=?,style=?,startx=?,starty=?,finishx=?,finishy=?) 不透明度，
blendtrans(duration=?) 设置淡入淡出效果
blur(add=?,direction=?,strength=?)模糊效果
chroma(color=?) ，过滤掉某种颜色
DropShadow(color=?,offx=?,offy=?,positive=?) 阴影效果
FlipH,FlipV,将元素水平，垂直方向反转。
Gray,去掉图片色彩，黑白
Invert，反转图像颜色
Light 设置光源效果
Xray 显示图片的轮廓，x光线效果
glow(color=?,,strength=?) 元素边缘发光的效果
mask(color=?)在元素表面覆盖一层遮罩
revealtrans(duration=?,transition=?)建立元素初始显示的转换效果
shadow(color=?,direction=?)一种阴影效果
wave(add=?,freq=?,lightstrength=?,phase=?,strength=?) 波纹效果
symbian theme
扩展sdk中,ExtendedSkinsAPI.ZIP和PersonalizationandSkinsSettingsAPI.ZIP提供了处理主题的api.
用程序改变当前主题 需要能力WriteDeviceData.
http://wiki.forum.nokia.com/index.php/%E6%89%A9%E5%B1%95%E7%9A%AE%E8%82%A4API
提供了详细的示例代码.
12.float
(1)高度不自适应问题：
当一个容器内元素都被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了，高度将不会随着内部元素高度的增加而增加，所以可能造成内容元素的显示超出了容器。
此时需要设置父区块的高度，或用overflow来解决！方法是在父元素加上 overflow:auto; zoom:1;，其中overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。
当设置了多个元素float:left后，效果是依次向左靠。
float:left;(左浮动)使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。
补充：css hack
针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。这里的overflow:auto; zoom:1;就是所谓的css hack，这种形式是应用我们常用的代码来解决不兼容问题，也会用到添加一些特殊符号的形式，它本身没有意义，只是针对不同浏览器是否对它识别来实现的。
ie6的bug：双倍边距bug；3px bug；
下拉列表（菜单）是大家最头疼的一个元素，因其对许多样式不生效，故而在页面中显示很丑陋，而且在IE6下下拉列表总在最上层，造成许多弹出层不能把其遮挡，一些设计师想出了许多办法来改变这种情况。IE6下对下拉列表的背景和宽度样式生效，其它绝大部分不生效，IE8下增加了对边框和高度的支持，但这样似乎离我们要求还很远。基中IE6下被遮挡可以把浮动层用iframe，因下拉列表不会跑到iframe上边。有更高美化需求的可以用div模拟来代替下拉列表，但这种方法实现起来麻烦。
13.控制换行
{word-break:keep-all;white-space:nowrap;} /* 禁止换行 */
{word-break:break-all;}/* 强制换行 */
14. 不要使用全局Reset：
*{ margin:0; padding:0; }
不仅缓慢和低效，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。
/** 清除内外边距 **/
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 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
15.关键字不能放在引号中
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
