1. Css学习笔记

2. 关于字体
• 15px/20px; 大小 行高
• font-style:normal|italic |oblique
• font-weight:normal|bold|bolder|lighter|
100~900
• font-variant 字体变体 normal samll-caps

3. • letter-spacing:normal|-12px;
• word-spcing:normal|-12px;
• text-decoration:underline|oveline|line-
through|none||| blink(netscape);
• text-align:center|justify
• text-indent:10px; 段落缩进 2em
• line-height:normal|数字长度百分比
• text-
transform:uppercase|lowercase|capitalize|none

4. 列表 & map
• 定义列表dl>dt
• 无序列表ul>li
• 目录列表dir>li
• 菜单列表menu>li
• 有序列表ol>li
• ol type属性值：1 a A i I
• 嵌套列表 dl>dt>dd
• 跟路径 /|绝对路径|相对路径 ../
• map 图像映射
• <img src="" alt="" usermap="#MAP"/>
• <map name="MAP"></map>
• <area shape="rect|circle|poly" coords="" href="" alt="" />

5. table
• th 表头标记 <caption>表格标题</caption>
• table>tr*2>td*3
• 划分表结构
• thead>tbodt>tfoot
• <table frame="外边框：
above|border|below|hsides|lhs|rhs|void|vsides"
• rules="内边框：all|groups|none|cols|rows"></table>
• td行 垂直对齐 valign=top|middle|bottom|baseling
• 跨行 <td rowlspan="2">
• 跨列<td colspan="2">
• table.cellspacing 单元格间距
• table.cellpadding 单元格边距

6. form
• form:post
• input:t text
• input:h hidden
• input:p password
• input:r radio
• input:c checkbox
• input:i image
• tarea textarea
• select>option*2

7. background
• background-color:transparent
• background-image:url|none
• background-attachment:scroll|fixed X不推荐
使用
• background-repeat:repeat|repeat-x|repeat-
y|no-repeat
• background-position:top left (成对)

8. • position:static 默认静态定位 relative|absolute
• float:left|right|both|none
• 层空间 层裁切 层大小 层溢出 z-index:atuo;
• overflow:visible|hidden|scroll|auto
• visibility:visible|hidden|inherit
• cursor:auto|URL|crosshair+ default|help|e-
resize|move|ne-resize|nw-resize|n-
resize|pointer|se-resize|sw-resize|s-
resize|text|w-resize| wait

9. 摘录css常见注意事项
• 5. float元素的父元素不能指定clear属性
• MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布
局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
• 6. float元素务必指定width属性
• 很多浏览器在显示未指定width的float元素时会有bug。所以不管float
元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
• 7. float元素不能指定margin和padding等属性
• IE在显示指定了margin和padding的float元素时有bug。因此不要对float
元素指定margin和padding属性（可以在float元素内部嵌套一个div来设
置margin和padding）。也可以使用hack方法为IE指定特别的值。
• 8. float元素的宽度之和要小于100%
• 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常
显示。因此请保证宽度之和小于99%。

10. Chapter 12. Lists and Generated
Content
list-style inside | outside | inherit
Values:
[ <list-style-type> || <list-style-image> || <list-style-position> ] | inherit
Initial value:
Refer to individual properties
Applies to:
Elements whose display value is list-item
disc | circle | square | decimal | decimal-leading-zero | upper-alpha |
Inherited: lower-alpha | upper-roman | lower-roman | lower-greek
Yes | hebrew | armenian | georgian | cjk-ideographic | hiragana
| katakana | hiragana-iroha | none | inherit
Computed value:
See individual properties

11. Table 12-1. Keywords of the list-style-
type property in CSS2.1
Keyword Effect
Uses a disc (usually a filled circle) for list-item
disc
markers
circle Uses a circle (usually open) for markers
square Uses a square (filled or open) for markers
decimal 1, 2, 3, 4, 5, . . .
decimal-leading-zero 01, 02, 03, 04, 05, . . .
upper-alpha
A, B, C, D, E, . . .
upper-latin
lower-alpha
a, b, c, d, e, . . .
lower-latin
upper-roman I, II, III, IV, V, . . .
lower-roman i, ii, iii, iv, v, . . .
lower-greek Lowercase classical Greek symbols
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering
none Uses no marker

12. • ul {margin-left: 0; padding-left: 1em;} OR
• ul {margin-left: 1em; padding-left: 0;}

13. 还是ul ol
• ul.list-style-type:square>li*3
• ol.list-style-type:circle>li*3
• disc circle square decimal lower-roman
upper-roman lower-alpha upper-alpha none
• list-style-iamge:url|none
• 缩进 list-style-position:outside|inside