常用CSS样式属性|CSS样式表
2015-08-12 13:43
639 查看
[align=center]【长度单位】[/align]
[align=center][/align]
[align=center]【颜色表示】[/align]
[align=center][/align]
[align=center]【背景可用值】[/align]
[align=center][/align]
[align=center]【属性可用值】[/align]
[align=center][/align]
[align=center]【文字设定可用值】[/align]
[align=center][/align]
[align=center]【表格设定】[/align]
[align=center][/align]
[align=center]【鼠标设定】[/align]
[align=center][/align]
[align=center]【滚动条设定】[/align]
分类: CSS
[align=left]CSS可使用长度单位[/align] | ||
[align=left]单位[/align] | [align=left]单位说明[/align] | [align=left]范例[/align] |
[align=left]pt[/align] | [align=left]Point,就像是Word里面的Point一样大小[/align] | [align=left]font-size:10pt[/align] |
[align=left]px[/align] | [align=left]Pixels,依您屏幕分辨率而决定大小[/align] | [align=left]font-size:10px[/align] |
[align=left]pc[/align] | [align=left]Pica,6个Pica是一英吋[/align] | [align=left]font-size:10pc[/align] |
[align=left]mm[/align] | [align=left]公厘,用过尺...这个设定值完全不会因为其它设定而改变[/align] | [align=left]font-size:10mm[/align] |
[align=left]cm[/align] | [align=left]公分,不会因为使用者设定而改变[/align] | [align=left]font-size:10cm[/align] |
[align=left]%[/align] | [align=left]百分比,大部分是指所在位置宽度或者长度百分比[/align] | [align=left]font-size:10%[/align] |
[align=center]【颜色表示】[/align]
[align=left]CSS可用颜色表示方式[/align] | ||
[align=left]表示方式[/align] | [align=left]表示方式说明[/align] | [align=left]范例[/align] |
[align=left]#rrggbb[/align] | [align=left]可以用Windows色彩选择工具找到[/align] | [align=left]color:#feefc7[/align] |
[align=left]rgb(#,#,#)[/align] | [align=left]用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找[/align] | [align=left]color:rgb(135,255,124)[/align] |
[align=left]rgb(%,%,%)[/align] | [align=left]用百分比来代表红色蓝色以及绿色的强度来混合颜色[/align] | [align=left]color:rgb(70%,35%,41%)[/align] |
[align=left]颜色名称[/align] | [align=left]用颜色的名称来指定颜色[/align] | [align=left]color:brown[/align] |
[align=center]【背景可用值】[/align]
[align=left]CSS可用背景值[/align] | |||
[align=left]名称[/align] | [align=left]说明[/align] | [align=left]可能值[/align] | [align=left]范例[/align] |
[align=left]background[/align] | [align=left]背景[/align] | [align=left]下面的背景设定值皆适用[/align] | [align=left]background:fixed[/align] |
[align=left]background-attachment[/align] | [align=left]背景图性是否固定[/align] | [align=left]fixed, scroll[/align] | [align=left]background-attachment:fixed[/align] |
[align=left]background-color[/align] | [align=left]背景颜色[/align] | [align=left]颜色 transparent(透空)[/align] | [align=left]backgroun-color:yellow[/align] |
[align=left]background-image[/align] | [align=left]背景图片[/align] | [align=left]none(无背景图) url(****)(图片位置)[/align] | [align=left]background-image:url(test.jpg)[/align] |
[align=left]background-position[/align] | [align=left]背景图位置[/align] | [align=left]水平 垂直[/align] | [align=left]background-position:135 159[/align] |
[align=left]background-repeat[/align] | [align=left]背景是否重复[/align] | [align=left]repeat(重复) repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复)[/align] | [align=left]background-repeat:repeat[/align] |
[align=center]【属性可用值】[/align]
[align=left]CSS可用属性值[/align] | |||
[align=left]名称[/align] | [align=left]说明[/align] | [align=left]可能值[/align] | [align=left]范例[/align] |
[align=left]visibility[/align] | [align=left]显示或是隐藏[/align] | [align=left]inherit(父组件决定) hidden(隐藏) visible(显示) [/align] | [align=left]visibility:hidden[/align] |
[align=left]width[/align] | [align=left]宽度[/align] | [align=left]auto(自动决定) 数字[/align] | [align=left]width:135[/align] |
[align=left]height[/align] | [align=left]高度[/align] | [align=left]auto(自动决定) 数字[/align] | [align=left]height:100[/align] |
[align=left]z-index[/align] | [align=left]Z轴高度(立体,是否在另一个组件之上)[/align] | [align=left]auto(自动决定) 数字[/align] | [align=left]z-index:135[/align] |
[align=left]position[/align] | [align=left]定位方式[/align] | [align=left]absolute (绝对寻址-依窗口坐标,原点为父窗口左上角) relative (相对定位-以一般网页排列[right.center.left]后再根据坐标定位,原点为定位后的位置) static (静态定位-以一般网页排列)[/align] | [align=left]position:absolute[/align] |
[align=left]top(对象的position属性须为absolute或relative)[/align] | [align=left]对象的Y坐标(原点根据postion属性有所不同)[/align] | [align=left]数字[/align] | [align=left] [/align] |
[align=left]left(对象的position属性须为absolute或relative)[/align] | [align=left]对象的X坐标(原点根据postion属性有所不同)[/align] | [align=left]数字[/align] | [align=left] [/align] |
[align=center]【文字设定可用值】[/align]
[align=left]CSS可用文字设定值[/align] | |||
[align=left]名称[/align] | [align=left]说明[/align] | [align=left]可能值[/align] | [align=left]范例[/align] |
[align=left]font[/align] | [align=left]文字设定[/align] | [align=left]以下所有皆可使用 [/align] | [align=left]font:arial[/align] |
[align=left]font-family[/align] | [align=left]字体[/align] | [align=left]字体名称[/align] | [align=left]font-family:arial[/align] |
[align=left]font-size[/align] | [align=left]字体大小[/align] | [align=left]百分比或是数字(单位)[/align] | [align=left]font-size:12px[/align] |
[align=left]font-style[/align] | [align=left]字型样式[/align] | [align=left]normal(普通) italic(斜体) oblique(斜体)[/align] | [align=left]font-style:italic[/align] |
[align=left]font-variant[/align] | [align=left]字型特别样式[/align] | [align=left]normal(普通) small-caps(大小英文字母)[/align] | [align=left]font-variant:small-caps[/align] |
[align=left]font-weight[/align] | [align=left]字型粗细[/align] | [align=left]normal(普通) bold(粗体) bolder(超粗体) lighter(细体) 数字(400=normal 700=bold )[/align] | [align=left]font-weight:bolder[/align] |
[align=left]letter-spacing[/align] | [align=left]字符相距[/align] | [align=left]normal(普通) 数字(预设为0)[/align] | [align=left]letter-spacing:5[/align] |
[align=left]text-align[/align] | [align=left]字符对齐[/align] | [align=left]left(左边) right(右边) center(中间) justify(左右平分)[/align] | [align=left]text-align:justify[/align] |
[align=left]text-decoration[/align] | [align=left]字符样式[/align] | [align=left]none(普通) underline(加底线) no-underline(不加底线) blink(闪烁) no-blink(不闪烁) line-through(加删除线) no-line-through(不加删除线) overline(加顶线) no-overline(不加顶线)[/align] | [align=left]text-decoration:underline[/align] |
[align=center]【表格设定】[/align]
[align=left]CSS可用表格设定值 框线位置:(上-top.下-bottom.左-left.右-right)[/align] | |||
[align=left]名称[/align] | [align=left]说明[/align] | [align=left]可能值[/align] | [align=left]范例[/align] |
[align=left]border[/align] | [align=left]表格边框设定[/align] | [align=left]以下所有皆可使用 [/align] | [align=left]border:green[/align] |
[align=left]border-color[/align] [align=left]border-(框线位置)-color[/align] | [align=left]边框颜色[/align] | [align=left]任何颜色表示方法[/align] | [align=left]border-color:blue[/align] |
[align=left]border-style[/align] [align=left]border-(框线位置)-style[/align] | [align=left]边框样式[/align] | [align=left]none(无边框) dotted(点线) dashed(虚线) solid(实线) double(双线) groove(立体凹线) ridge(立体凸线) inset(立体嵌入线) outset(立体隆起线)[/align] | [align=left]border-style:dotted[/align] |
[align=left]border-width[/align] [align=left]border-(框线位置)-width[/align] | [align=left]边框宽度[/align] | [align=left]数字[/align] | [align=left]border-width:5[/align] |
[align=left]padding[/align] | [align=left]边框补白[/align] | [align=left]数字[/align] | [align=left]padding:5[/align] |
[align=center]【鼠标设定】[/align]
[align=left]CSS可用鼠标光标设定值[/align] | |||
[align=left]名称[/align] | [align=left]说明[/align] | [align=left]可能值[/align] | [align=left]范例[/align] |
[align=left]cursor[/align] | [align=left]光标图标[/align] | [align=left]auto(自动决定) default(默认值) crosshair(十字) hand(手形) move(移动时的光标) help(有问号的游标) text(文字编辑的光标) wait(忙碌中的游标) w-resize(向左箭头) e-resize(向右箭头) n-resize(向上箭头) ne-resize{向右上箭头) nw-resize(向左上箭头) s-resize(向下箭头) se-resize(向右下箭头) sw-resize(向左下箭头) [/align] | [align=left]cursor:hand[/align] |
[align=center]【滚动条设定】[/align]
[align=left]CSS可用滚动条列设定值[/align] | |||
[align=left]名称[/align] | [align=left]说明[/align] | [align=left]可能值[/align] | [align=left]范例[/align] |
[align=left]scrollbar-base-color[/align] | [align=left]滚动条列主色调[/align] | [align=left]颜色[/align] | [align=left]scrollbar-base-color:#aaaaaa[/align] |
[align=left]scrollbar-arrow-color[/align] | [align=left]按钮箭头的颜色[/align] | [align=left]颜色 [/align] | [align=left]scrollbar-arrow-color:#000000[/align] |
[align=left]scrollbar-face-color[/align] | [align=left]移动棒的颜色[/align] | [align=left]颜色[/align] | [align=left]scrollbar-face-color:#ffee99[/align] |
[align=left]scrollbar-highlight-color[/align] | [align=left]按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与track同时使用网状会消失)[/align] | [align=left]颜色[/align] | [align=left]scrollbar-highlight-color: #000000[/align] |
[align=left]scrollbar-3dlight-color[/align] | [align=left]按钮边框外层左边与上面的颜色[/align] | [align=left]颜色[/align] | [align=left]scrollbar-3dlight-color:#000000[/align] |
[align=left]scrollbar-darkshadow-color[/align] | [align=left]按钮边框外层右边与下面的颜色[/align] | [align=left]颜色[/align] | [align=left]scrollbar-darkshadow-color:#000000[/align] |
[align=left]scrollbar-shadow-color[/align] | [align=left]按钮边框内层右边与下面的颜色[/align] | [align=left]颜色[/align] | [align=left]scrollbar-track-color: #cccccc[/align] |
[align=left]scrollbar-track-color[/align] | [align=left]底部轨道颜色[/align] | [align=left]颜色[/align] | [align=left]scrollbar-track-color: #cccccc[/align] |
相关文章推荐
- CSS3给页面打标签
- css中position的理解
- 具有动态效果的响应式设计
- 使用CSS来设置SVG中Use元素的样式
- windows下安装sass/scss
- CSS使用经验总结
- ispriter自动构建css-sprite
- CSS性能优化
- IE6、7、8中css给span加float:right右浮动后内容换行下移
- 织梦导航 currentstyle 点击li添加class类 样式
- 如何利用CSS代码使图片和文字在同一行显示且对齐
- CSS 技术关键字
- CSS优先级详解
- 用CSS和SVG制作饼图
- [css3]圆盘旋转动画
- css各属性顺序
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
- css盒模型和块级、行内元素深入理解display:in
- 几个CSS的黑科技
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等),NB么?