HTML与CSS常用代码

  1. =======HTML常用代码=======
  2. ------图象和文字的对齐------
  3. <img src="URL" align="#"> #=top上, middle中, bottom下。
  4. ------图象在页面中的对齐/布局-------
  5. <img src=URL align="#">#=left左,right右。这里表示文字在图片下面。<img src=URL align=left vspace=10 hspace=20>vspace与hspace表示距离。
  6. ------表格 ,跨多列的表元----------
  7. <td colspan=#> #=列的数目 跨多行的表元 :<th rowspan=#> #=行的数目。
  8. -------表格的标题---------------
  9. <caption align=#>内容 </caption> #=left左, center中, right右。
  10. <aption valign=#>内容</caption> #=top, bottom,表示标题在表格下面。
  11. --------背景音乐-------------
  12. <bgsound src="168.mid" loop="5"> #=WAV 文件的 URL。#=填数字,如果填-1,表示一直播放。
  13. ---------会移动的文字------------
  14. 方向:direction=# #=left左, right右。<marquee direction=left>右向左移</marquee>,<marquee direction=right>左向右移</marquee>。
  15. 方式: bihavior=# #=scroll, slide, alternate。<marquee behavior=scroll>一圈一圈绕着走</marquee>,<marquee behavior=slide>只走一次就歇了</marquee>,<marquee behavior=alternate>我来回走耶</marquee>。
  16. 带颜色背景,鼠标经过文字停住:<marquee bgcolor=aaaaee>啦啦啦,我会移动耶!</marquee>
  17. 空白:hspace=# vspace=# #=数字。示范:<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=center>啦啦啦,我会移动耶!</marquee>大家好!
  18. ==========CSS常用代码===========
  19. 字体颜色 : color : #00903A;
  20. 背景颜色 : background-color : #7CFFE7;
  21. --------------------------------------------------------------------------------
  22. 边框宽度 : border-width : 5px;
  23. 上边宽度 : border-top-width : 5px;
  24. 左边宽度 : border-left-width : 5px;
  25. 右边宽度 : border-right-width : 5px;
  26. 底边宽度 : border-bottom-width : 5px;
  27. --------------------------------------------------------------------------------
  28. 边框颜色 : border-color : #000FF4;
  29. 上边颜色 : border-top-color : #10FF01;
  30. 左边颜色 : border-left-color : #FF3B04;
  31. 右边颜色 : border-right-color : #FF3CF3;
  32. 底边颜色 : border-bottom-color : #00D0C3;
  33. --------------------------------------------------------------------------------
  34. 边框样式 : border-style : double; 可替换 dashed; dotted; none;
  35. 上边样式 : border-top-style : solid;
  36. 左边样式 : border-left-style : inset;
  37. 右边样式 : border-right-style : ridge;
  38. 底边样式 : border-bottom-style : solid;
  39. --------------------------------------------------------------------------------
  40. 整体宽度 : width : 5px;
  41. 整体高度 : height : 5px;
  42. 溢出选项 : overflow : visible; 可替换 hidden; scroll; auto;
  43. --------------------------------------------------------------------------------
  44. 内侧边距 : padding : 5px;
  45. 上内边距 : padding-top : 5px;
  46. 左内边距 : padding-left : 5px;
  47. 右内边距 : padding-right : 5px;
  48. 底内边距 : padding-bottom : 5px;
  49. --------------------------------------------------------------------------------
  50. 外侧边距 : margin : 5px;
  51. 上外边距 : margin-top : 5px;
  52. 左外边距 : margin-left : 5px;
  53. 右外边距 : margin-right : 5px;
  54. 底外边距 : margin-bottom : 5px;
  55. --------------------------------------------------------------------------------
  56. 文字字体 : font-family : fantasy;
  57. 文字大小 : font-size : 12pt;
  58. 文字粗细 : font-weight : bold;
  59. font-weight的值有normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  60. 文字样式 : font-style : italic;
  61. 文字变量 : line-height : 110%;
  62. --------------------------------------------------------------------------------
  63. 清除属性 : clear : left; 可替换 right; both; none;
  64. 浮动属性 : float : left; 可替换 right; none;
  65. 水平排列 : text-align : left; 可替换 right; center; justify;
  66. 文本修饰 : text-decoration : underline; 可替换 overline; underline overline; line-through; blink;
  67. 文本缩进 : text-indent : 5em;
  68. 文字间距 : letter-spacing : 5px;
  69. 字母间距 : word-spacing : 5px;
  70. 文本转换 : text-transform : capitalize; 可替换 lowercase; uppercase;
  71. 垂直排列 : vertical-align : baseline; 可替换 top; middle; bottom; text-top; text-bottom; super; sub; 3em; 30%;
  72. --------------------------------------------------------------------------------
  73. 背景图片 : background-image : url(tianyi.gif);
  74. 背景拉伸 : background-repeat : repeat; 可替换 repeat-x; repeat-y; no-repeat;
  75. 背景定位 : background-position : left; 可替换 right; top; left top; right bottom; 30% 50%;
  76. 附加属性 : background-attachment : fixed; 可替换 scroll;
  77. --------------------------------------------------------------------------------
  78. 显示属性 : display : none; 可替换 block; inline; run-in; compact; list-item; marker;
  79. 是否可见 : visibility : visible; 可替换 hidden;
  80. 资源定位 : position : static; 可替换 relative; absolute; fixed;
  81. 距离顶部 : top : 5px;
  82. 距离左边 : left : 5px;
  83. 距离右边 : right : 5px;
  84. 距离底边 : bottom : 5px;
  85. 优先等级 : z-index : 5;
  86. 鼠标指针 : cursor : crosshair; 可替换 default; pointer; move; text; wait; help; n-resize; s-resize; w-resize; e-resize; ne-resize; nw-resize; se-resize; sw-resize;