首页 | 下载中心 | 图片中心 | 
您现在的位置: 海华网 >> 编程日志 >> 综合编程 >> 正文 用户登录 新用户注册
STYLE CSS 详解大全           
STYLE CSS 详解大全
作者:佚名  文章来源:本站原创  点击数:  更新时间:2015-9-13
    
  1. 字体属性:(font)  
  2. 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD  
  3. 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)  
  4. 行高 {line-height: normal;}(正常) 单位:PX、PD、EM  
  5. 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)  
  6. 变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)  
  7. 大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)  
  8. 修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)  
  9.   
  10. 常用字体: (font-family)  
  11. "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana  
  12.   
  13. 背景属性: (background)  
  14. 色彩 {background-color: #FFFFFF;}  
  15. 图片 {background-image: url();}  
  16. 重复 {background-repeat: no-repeat;}  
  17. 滚动 {background-attachment: fixed;}(固定) scroll;(滚动)  
  18. 位置 {background-position: left;}(水平) top(垂直);  
  19. 简写方法 {background:#000 url(..) repeat fixed left top;}  
  20.   
  21. 区块属性: (Block)  
  22. 字间距 {letter-spacing: normal;} 数值  
  23. 对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)  
  24. 缩进 {text-indent: 数值px;}  
  25. 垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;  
  26. 词间距word-spacing: normal; 数值  
  27. 空格white-space: pre;(保留) nowrap;(不换行)  
  28.   
  29. 显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)  
  30.   
  31. 方框属性: (Box)  
  32. width:; height:; float:; clear:both; margin:; padding:;     顺序:上右下左  
  33. 边框属性: (Border)  
  34. border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;  
  35. border-width:; 边框宽度  
  36. border-color:#;  
  37.   
  38. 简写方法border:width style color;  
  39.   
  40. 列表属性: (List-style)  
  41. 类型list-style-type:    disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;  
  42. 位置list-style-position: outside;(外) inside;  
  43. 图像list-style-image: url(..);  
  44. 定位属性: (Position)  
  45. Position: absolute; relative; static;  
  46. visibility: inherit; visible; hidden;  
  47. overflow: visible; hidden; scroll; auto;  
  48. clip: rect(12px,auto,12px,auto) (裁切)  
  49.   
  50. css属性代码大全  
  51. 一 CSS文字属性:  
  52. color : #999999;  
  53. font-family : 宋体,sans-serif;  
  54. font-size : 9pt;  
  55. font-style:itelic;  
  56. font-variant:small-caps;  
  57. letter-spacing : 1pt;  
  58. line-height : 200%;  
  59. font-weight:bold;  
  60. vertical-align:sub;  
  61. vertical-align:super;  
  62. text-decoration:line-through;  
  63. text-decoration: overline;  
  64. text-decoration:underline;  
  65. text-decoration:none;  
  66. text-transform : capitalize;  
  67. text-transform : uppercase;  
  68. text-transform : lowercase;  
  69. text-align:right;  
  70. text-align:left;  
  71. text-align:center;  
  72. text-align:justify;  
  73. vertical-align属性  
  74. vertical-align:top;  
  75. vertical-align:bottom;  
  76. vertical-align:middle;  
  77. vertical-align:text-top;  
  78. vertical-align:text-bottom;  
  79. 二、CSS边框空白  
  80. padding-top:10px;  
  81. padding-right:10px;  
  82. padding-bottom:10px;  
  83. padding-left:10px;  
  84. list-style-type:decimal;  
  85. list-style-type:lower-roman;  
  86. list-style-type:upper-roman;  
  87. list-style-type:lower-alpha;  
  88. list-style-type:upper-alpha;  
  89. list-style-type:disc;  
  90. list-style-type:circle;  
  91. list-style-type:square;  
  92. list-style-image:url(/dot.gif);  
  93. list-style-position: outside;  
  94. list-style-position:inside;  
  95. 四、CSS背景样式:  
  96. background-color:#F5E2EC;  
  97. background:transparent;  
  98. background-image : url(/image/bg.gif);  
  99. background-attachment : fixed;  
  100. background-repeat : repeat;  
  101. background-repeat : no-repeat;  
  102. background-repeat : repeat-x;  
  103. background-repeat : repeat-y;  
  104. 指定背景位置  
  105. background-position : 90% 90%;  
  106. background-position : top;  
  107. background-position : buttom;  
  108. background-position : left;  
  109. background-position : right;  
  110. background-position : center;  
  111. 五、CSS连接属性:  
  112. a  
  113. a:link  
  114. a:visited  
  115. a:active  
  116. a:hover  
  117. 鼠标光标样式:  
  118. 链接手指 CURSOR: hand  
  119. 十字体 cursor:crosshair  
  120. 箭头朝下 cursor:s-resize  
  121. 十字箭头 cursor:move  
  122. 箭头朝右 cursor:move  
  123. 加一问号 cursor:help  
  124. 箭头朝左 cursor:w-resize  
  125. 箭头朝上 cursor:n-resize  
  126. 箭头朝右上 cursor:ne-resize  
  127. 箭头朝左上 cursor:nw-resize  
  128. 文字I型 cursor:text  
  129. 箭头斜右下 cursor:se-resize  
  130. 箭头斜左下 cursor:sw-resize  
  131. 漏斗 cursor:wait  
  132. 光标图案(IE6)   p {cursor:url("光标文件名.cur"),text;}  
  133. 六、CSS框线一览表:  
  134. border-top : 1px solid #6699cc;  
  135. border-bottom : 1px solid #6699cc;  
  136. border-left : 1px solid #6699cc;  
  137. border-right : 1px solid #6699cc;  
  138. 以上是建议书写方式,但也可以使用常规的方式 如下:  
  139. border-top-color : #369  
  140. border-top-width :1px  
  141. border-top-style : solid  
  142. 其他框线样式  
  143. solid  
  144. dotted  
  145. double  
  146. groove  
  147. ridge  
  148. inset  
  149. outset  
  150. 七、CSS表单运用:  
  151. 文字方块  
  152. 按钮  
  153. 复选框  
  154. 选择钮  
  155. 多行文字方块  
  156. 下拉式菜单 选项1选项2  
  157. 八、CSS边界样式:  
  158. margin-top:10px;  
  159. margin-right:10px;  
  160. margin-bottom:10px;  
  161. margin-left:10px;  
  162.   
  163. CSS 属性: 字体样式(Font Style)  
  164. 序号 中文说明 标记语法  
  165. 1 字体样式 {font:font-style font-variant font-weight font-size font-family}  
  166. 2 字体类型 {font-family:"字体1","字体2","字体3",...}  
  167. 3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}  
  168. 4 字体风格 {font-style:inherit|italic|normal|oblique}  
  169. 5 字体粗细   {font-weight:100-900|bold|bolder|lighter|normal;}  
  170. 6 字体颜色   {color:数值;}  
  171. 7 阴影颜色 {text-shadow:16位色值}  
  172. 8 字体行高   {line-height:数值|inherit|normal;}  
  173. 9 字 间 距   {letter-spacing:数值|inherit|normal}  
  174. 10 单词间距 {word-spacing:数值|inherit|normal}  
  175. 11 字体变形 {font-variant:inherit|normal|small-cps }  
  176. 12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}  
  177. 13 字体变形 {font-size-adjust:inherit|none}  
  178. 14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}  
  179. 文本样式(Text Style)  
  180. 序号 中文说明 标记语法  
  181. 1 行 间 距 {line-height:数值|inherit|normal;}  
  182. 2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}  
  183. 3 段首空格   {text-indent:数值|inherit}  
  184. 4 水平对齐 {text-align:left|right|center|justify}  
  185. 5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}  
  186. 6 书写方式 {writing-mode:lr-tb|tb-rl}  
  187. 背景样式  
  188. 序号 中文说明 标记语法  
  189. 1 背景颜色 {background-color:数值}  
  190. 2 背景图片 {background-image: url(URL)|none}  
  191. 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}  
  192. 4 背景固定 {background-attachment:fixed|scroll}  
  193. 5 背景定位 {background-position:数值|top|bottom|left|right|center}  
  194. 6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}  
  195. 框架样式(Box Style)  
  196. 序号 中文说明 标记语法  
  197. 1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}  
  198. 2 补  白 {padding:padding-top padding-right padding-bottom padding-left}  
  199. 3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}    
  200. 宽度值: thin|medium|thick|数值  
  201. 4 边框颜色 {border-color:数值 数值数值数值}  数值:分别代表top、right、bottom、left颜色值  
  202. 5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}  
  203. 6 边  框 {border:border-width border-style color}  
  204.    上 边 框 {border-top:border-top-width border-style color}  
  205.    右 边 框 {border-right:border-right-width border-style color}  
  206.    下 边 框 {border-bottom:border-bottom-width border-style color}  
  207.    左 边 框 {border-left:border-left-width border-style color}  
  208. 7 宽  度 {width:长度|百分比| auto}  
  209. 8 高  度 {height:数值|auto}  
  210. 9 漂  浮 {float:left|right|none}  
  211. 10 清  除 {clear:none|left|right|both}  
  212. 分类列表  
  213. 序号 中文说明 标记语法  
  214. 1 控制显示 {display:none|block|inline|list-item}  
  215. 2 控制空白 {white-space:normal|pre|nowarp}  
  216. 3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}  
  217. 4 图形列表 {list-style-image:URL}  
  218. 5 位置列表 {list-style-position:inside|outside}  
  219. 6 目录列表 {list-style:目录样式类型|目录样式位置|url}  
  220. 7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize} 
文章录入:付晓波    责任编辑:付晓波 
  • 上一篇文章: HTML表格内溢出文字自动隐藏

  • 下一篇文章: 没有了
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    专 题 栏 目
    最 新 热 门
    最 新 推 荐
    相 关 文 章
    没有相关文章
        网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)