Css biji20120406

402 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
402
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css biji20120406

  1. 1. Css学习笔记
  2. 2. 关于字体• 15px/20px; 大小 行高• font-style:normal|italic |oblique• font-weight:normal|bold|bolder|lighter| 100~900• font-variant 字体变体 normal samll-caps
  3. 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. 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. 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. 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. 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. 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. 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. 10. Chapter 12. Lists and Generated Contentlist-style inside | outside | inheritValues:[ <list-style-type> || <list-style-image> || <list-style-position> ] | inheritInitial value:Refer to individual propertiesApplies 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-greekYes | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | none | inheritComputed value:See individual properties
  11. 11. Table 12-1. Keywords of the list-style- type property in CSS2.1Keyword Effect Uses a disc (usually a filled circle) for list-itemdisc markerscircle Uses a circle (usually open) for markerssquare Uses a square (filled or open) for markersdecimal 1, 2, 3, 4, 5, . . .decimal-leading-zero 01, 02, 03, 04, 05, . . .upper-alpha A, B, C, D, E, . . .upper-latinlower-alpha a, b, c, d, e, . . .lower-latinupper-roman I, II, III, IV, V, . . .lower-roman i, ii, iii, iv, v, . . .lower-greek Lowercase classical Greek symbolsarmenian Traditional Armenian numberinggeorgian Traditional Georgian numberingnone Uses no marker
  12. 12. • ul {margin-left: 0; padding-left: 1em;} OR• ul {margin-left: 1em; padding-left: 0;}
  13. 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

×