常用的CSS

股王

1. css 一些常用属性介绍
   
2. 
   
3. Border：边框，包括边框的宽度、类型、颜色等。
   
4. 
   
5. 例：border:1px solid #000; 边框宽度为1px、实线、黑色
   
6. 
   
7. border:2px dashed #000; 边框宽度为2px、虚线、黑色
   
8. 
   
9. border:3px dotted #000; 边框宽度为3px、点线、黑色
   
10. 
    
11. 附：border-left 为左边框样式，border-right 为右边框样式，border-top 为上边框样式，border-bottom 为下边框样式，border-collapse 为边框是否重复，属性包括 collapse（不重复）、separate（独立）。
    
12. 
    
13. Background：背景，包括背景颜色、图片等等。
    
14. 
    
15. 例：background:#000 url(images/bg.gif) left top no-repeat; 背景为黑色，背景图片为 bg.gif，背景图片位置在左上方，背景不重复。
    
16. 
    
17. 附：background-image 为背景图片，background-color 为背景颜色，background-position 为背景图片位置，background-repeat 为背景图片是否平铺。
    
18. 
    
19. Color：字体颜色。
    
20. 
    
21. 例：color:#000000; 字体颜色为黑色
    
22. 
    
23. color:black; 字体颜色为黑色
    
24. 
    
25. color:rgb(0,0,0); 字体颜色为黑色
    
26. 
    
27. Margin：外边距。
    
28. 
    
29. 例：margin:10px; 外边距都为10px
    
30. 
    
31. margin:10px 20px 30px; 上外边距为10px，左右外边距都为20px，下外边距为30px
    
32. 
    
33. margin:10px 20px; 起伏外边距为10px，左右外边距为20px
    
34. 
    
35. margin:10px 20px 30px 40px; 上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px
    
36. 
    
37. 附：margin-left 为左外边距，margin-right 为右外边距，margin-top 为上外边距，margin-bottom 为下外边距。
    
38. 
    
39. Padding：内边距。具体用法与 margin 相同，只不过是内边距而已。
    
40. 
    
41. Font-size：字体大小。
    
42. 
    
43. 例：font-size:12px; 字体大小为12px
    
44. 
    
45. Font-weight：字体粗细。
    
46. 
    
47. 例：font-weight:bold; 加粗
    
48. 
    
49. font-weight:normal; 正常
    
50. 
    
51. font-weigt:lighter; 细体
    
52. 
    
53. font-weight:700; 粗细数值为700（从100-900，400为正常字体，700为bold）
    
54. 
    
55. Font-style：字体样式。
    
56. 
    
57. 例：font-style:normal; 正常字体
    
58. 
    
59. font-style: italic; 斜体
    
60. 
    
61. text-decoration：是否带划线。
    
62. 
    
63. 例：text-decoration:underline; 下划线
    
64. 
    
65. text-decoration:line-through; 中划线
    
66. 
    
67. text-decoration:overline; 上划线
    
68. 
    
69. text-decoration:none; 没有划线
    
70. 
    
71. text-indent：文字是否缩进。
    
72. 
    
73. 例：text-indent:2em; 缩进两个字
    
74. 
    
75. text-indent:0; 不缩进
    
76. 
    
77. Line-height：行高。
    
78. 
    
79. 例：line-height:normal; 默认行高
    
80. 
    
81. line-height:150%; 行高为150%
    
82. 
    
83. line-height:20px; 行高为20px
    
84. 
    
85. Text-align：文字对齐方式。
    
86. 
    
87. 例：text-align:left; 文字左对齐
    
88. 
    
89. text-align:right; 文字右对齐
    
90. 
    
91. text-align:center; 文字居中
    
92. 
    
93. Float：浮动。
    
94. 
    
95. 例：float:left; 浮动到左侧
    
96. 
    
97. float:right; 浮动到右侧
    
98. 
    
99. float:none; 不浮动
    
100. 
     
101. display:block; 块状显示。
     
102. 
     
103. display:none; 不显示。
     
104. 
     
105. Width：宽度。
     
106. 
     
107. Height：高度。
     

复制代码

1. font-family:verdana;字体
   
2. font-size:12px; 字体大小
   
3. background:#33ffdd; 背景颜色，颜色值是#cccccc;可以简写为#ccc;或者是#ddccee;这样简写为#dce;当从左到右的rrggbb值其中rr,gg,bb值三组都一样时就能简写
   
4. background:#33ffdd url(aa.gif) repeat-x left top; 背景图，其中repeat-x为水平重复 left top 为水平向左，垂直向上
   
5. border:1px solid #fff; 边框1px 实线 颜色值
   
6. 
   
7. float:left; 浮动向左，浮动的意思就是因为DIV只有一行，没有列，假如要想有一行二列，就是为这二个DIV设置浮动，才可以有列出来。以下是一行三列示例：
   
8. <div>
   
9. <div style=" width:200px; height:30px; background:#f00; margin:5px; float:left;" ></div>
   
10. <div style=" width:200px; height:30px; background:#f00; margin:5px; float:left;" ></div>
    
11. <div style=" width:200px; height:30px; background:#f00; margin:5px; float:left;" ></div>
    
12. </div>
    
13. 由这个小例子就可以知道，假如想象表格一个，就一个套一个，跟表格一样，关键能让DIV有列出来就好办了。
    
14. 
    
15. height:20px; 高度20px;
    
16. text-align:left; 文本对齐方式向左,还有居中，还有向右
    
17. font-weight:bold; 字体加粗
    
18. width:20px; 这是宽度
    
19. line-height:24px; 这是行高
    
20. 
    
21. overflow:auto; 滚动条自动，意思就是当内容越过设定的高度或者宽度时就会出现滚动条，这个适合任何地方，包括单元格，文本域，DIV， margin:3px 3px 3px 3px; 这个有多种写法四个都写的话，意思就是对象的外边距都为3px的意思，四个都写的时候顺序是 上、右、下、左 当四个都一样时可以简写为maring:3px; margin:3px 6px; 当只有二个时意思就是起伏外边距为3px，左右外边距为6px;
    
22. padding:3px 3px 3px 3px; padding是内边距其他意思跟margin一样
    
23. color:对象颜色，适合用文本，表单，任何对象，img不适用.
    
24. 
    
25. img { border:0px;}意思是图像边框为0px，因为在有些情况下默认设置时有时候图像会有1px的边框,所以这个在默认设置是要设置的。
    
26. body { font-family:verdana; font-size:12px; background:#59606A url(images/main_01.gif) repeat-x; margin:0px; padding:0px;}
    
27. form,input,select,submit,textarea { font-family:arial; font-size:12px; padding:0px; margin:0px;}* html form { height:1%;}
    
28. img { border:0px;}
    
29. 上面这段是默认设置，根据情况有所不同，默认设置意思就是当有网页内容时上面所设置的参数比如字体， 颜色，背景，背景颜色等等，还有外边距，内边距的设置，这些不是必要的，但是假如设置一些默认设置可以精简代码。
    
30. 
    
31. .t11-en-03 { font-size:12px!important; font-size:11px; }
    
32. !important这个意思是(更重要)，当写上这个时，这个!important前面的参数设置在除IE外才有效果，后面的是在IE内核的浏览器的效果，适合于任何参数如：
    
33. .cor2 { color:#fff;!important; color:#f00; } 意思就是当在除IE外的浏览器上颜色是白色，在IE上的颜色是红色
    
34. 
    
35. 以下是链接的设置：
    
36. a:link,a:visited { text-decoration:none;} 这个是简写，就是链接跟点击后的状态为一样时可以这样子写
    
37. a:hover { text-decoration:underline;} 这个是鼠标移上去的效果 text-decoration:underline; 这个是下划线的设置，这里是有下划线假如underline改为none;是没有下划线的意思在这里是给整体的网页设置链接样式
    
38. 
    
39. 以下这个是给一个特定的对象设置
    
40. .aa65 a:link,.aa65 a:visited { text-decoration:none;}
    
41. .aa65 a:hover { text-decoration:underline;}
    
42. 上面这里有.aa65意思就是说当一个对象绑定的.aa65的class时，里面的链接就会象上面设置的效果

复制代码

股王

FONT-FAMILY: "Tahoma","宋体"