css样式.docx
《css样式.docx》由会员分享,可在线阅读,更多相关《css样式.docx(8页珍藏版)》请在冰豆网上搜索。
css样式
字体属性:
(font)
大小{font-size:
x-large;}(特大)xx-small;(极小)一般中文用不到,只要用数值就可以,单位:
PX、PD
样式{font-style:
oblique;}(偏斜体)italic;(斜体)normal;(正常)
行高{line-height:
normal;}(正常)单位:
PX、PD、EM
粗细{font-weight:
bold;}(粗体)lighter;(细体)normal;(正常)
变体{font-variant:
small-caps;}(小型大写字母)normal;(正常)
大小写{text-transform:
capitalize;}(首字母大写)uppercase;(大写)lowercase;(小写)none;(无)
修饰{text-decoration:
underline;}(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)
常用字体:
(font-family)
"CourierNew",Courier,monospace,"TimesNewRoman",Times,serif,Arial,Helvetica,sans-serif,Verdana
背景属性:
(background)
色彩{background-color:
#FFFFFF;}
图片{background-image:
url();}
重复{background-repeat:
no-repeat;}
滚动{background-attachment:
fixed;}(固定)scroll;(滚动)
位置{background-position:
left;}(水平)top(垂直);
简写方法{background:
#000url(..)repeatfixedlefttop;}
区块属性:
(Block)
字间距{letter-spacing:
normal;}数值
对齐{text-align:
justify;}(两端对齐)left;(左对齐)right;(右对齐)center;(居中)
缩进{text-indent:
数值px;}
垂直对齐{vertical-align:
baseline;}(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;
词间距word-spacing:
normal;数值
空格white-space:
pre;(保留)nowrap;(不换行)
来源:
(-CSS样式大全_灵烈魔心_新浪博客
显示{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;(表格标题)
方框属性:
(Box)
width:
;height:
;float:
;clear:
both;margin:
;padding:
;顺序:
上右下左
边框属性:
(Border)
border-style:
dotted;(点线)dashed;(虚线)solid;double;(双线)groove;(槽线)ridge;(脊状)inset;(凹陷)outset;
border-width:
;边框宽度
border-color:
#;
简写方法border:
widthstylecolor;
列表属性:
(List-style)
类型list-style-type:
disc;(圆点)circle;(圆圈)square;(方块)decimal;(数字)lower-roman;(小罗码数字)upper-roman;lower-alpha;upper-alpha;
位置list-style-position:
outside;(外)inside;
图像list-style-image:
url(..);
定位属性:
(Position)
Position:
absolute;relative;static;
visibility:
inherit;visible;hidden;
overflow:
visible;hidden;scroll;auto;
clip:
rect(12px,auto,12px,auto)(裁切)
css属性代码大全
一CSS文字属性:
color:
#999999;
font-family:
宋体,sans-serif;
font-size:
9pt;
font-style:
itelic;
font-variant:
small-caps;
letter-spacing:
1pt;
line-height:
200%;
font-weight:
bold;
vertical-align:
sub;
vertical-align:
super;
text-decoration:
line-through;
text-decoration:
overline;
text-decoration:
underline;
text-decoration:
none;
text-transform:
capitalize;
text-transform:
uppercase;
text-transform:
lowercase;
text-align:
right;
text-align:
left;
text-align:
center;
text-align:
justify;
vertical-align属性
vertical-align:
top;
vertical-align:
bottom;
vertical-align:
middle;
vertical-align:
text-top;
vertical-align:
text-bottom;
二、CSS边框空白
padding-top:
10px;
padding-right:
10px;
padding-bottom:
10px;
padding-left:
10px;
list-style-type:
decimal;
list-style-type:
lower-roman;
list-style-type:
upper-roman;
list-style-type:
lower-alpha;
list-style-type:
upper-alpha;
list-style-type:
disc;
list-style-type:
circle;
list-style-type:
square;
list-style-image:
url(/dot.gif);
list-style-position:
outside;
list-style-position:
inside;
四、CSS背景样式:
background-color:
#F5E2EC;
background:
transparent;
background-image:
url(/image/bg.gif);
background-attachment:
fixed;
background-repeat:
repeat;
background-repeat:
no-repeat;
background-repeat:
repeat-x;
background-repeat:
repeat-y;
指定背景位置
background-position:
90%90%;
background-position:
top;
background-position:
buttom;
background-position:
left;
background-position:
right;
background-position:
center;
五、CSS连接属性:
a
a:
link
a:
visited
a:
active
a:
hover
鼠标光标样式:
链接手指CURSOR:
hand
十字体cursor:
crosshair
箭头朝下cursor:
s-resize
十字箭头cursor:
move
箭头朝右cursor:
move
加一问号cursor:
help
箭头朝左cursor:
w-resize
箭头朝上cursor:
n-resize
箭头朝右上cursor:
ne-resize
箭头朝左上cursor:
nw-resize
文字I型cursor:
text
箭头斜右下cursor:
se-resize
箭头斜左下cursor:
sw-resize
漏斗cursor:
wait
光标图案(IE6)p{cursor:
url("光标文件名.cur"),text;}
六、CSS框线一览表:
border-top:
1pxsolid#6699cc;
border-bottom:
1pxsolid#6699cc;
border-left:
1pxsolid#6699cc;
border-right:
1pxsolid#6699cc;
以上是建议书写方式,但也可以使用常规的方式如下:
border-top-color:
#369
border-top-width:
1px
border-top-style:
solid
其他框线样式
solid
dotted
double
groove
ridge
inset
outset
七、CSS表单运用:
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、CSS边界样式:
margin-top:
10px;
margin-right:
10px;
margin-bottom:
10px;
margin-left:
10px;
CSS属性:
字体样式(FontStyle)
序号中文说明标记语法
1字体样式{font:
font-stylefont-variantfont-weightfont-sizefont-family}
2字体类型{font-family:
"字体1","字体2","字体3",...}
3字体大小{font-size:
数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small}
4字体风格{font-style:
inherit|italic|normal|oblique}
5字体粗细{font-weight:
100-900|bold|bolder|lighter|normal;}
6字体颜色{color:
数值;}
7阴影颜色{text-shadow:
16位色值}
8字体行高{line-height:
数值|inherit|normal;}
9字间距{letter-spacing:
数值|inherit|normal}
10单词间距{word-spacing:
数值|inherit|normal}
11字体变形{font-variant:
inherit|normal|small-cps}
12英文转换{text-transform:
inherit|none|capitalize|uppercase|lowercase}
13字体变形{font-size-adjust:
inherit|none}
14字体{font-stretch:
condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(TextStyle)
序号中文说明标记语法
1行间距{line-height:
数值|inherit|normal;}
2文本修饰{text-decoration:
inherit|none|underline|overline|line-through|blink}
3段首空格{text-indent:
数值|inherit}
4水平对齐{text-align:
left|right|center|justify}
5垂直对齐{vertical-align:
inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6书写方式{writing-mode:
lr-tb|tb-rl}
背景样式
序号中文说明标记语法
1背景颜色{background-color:
数值}
2背景图片{background-image:
url(URL)|none}
3背景重复{background-repeat:
inherit|no-repeat|repeat|repeat-x|repeat-y}
4背景固定{background-attachment:
fixed|scroll}
5背景定位{background-position:
数值|top|bottom|left|right|center}
6背影样式{background:
背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(BoxStyle)
序号中文说明标记语法
1边界留白{margin:
margin-topmargin-rightmargin-bottommargin-left}
2补 白{padding:
padding-toppadding-rightpadding-bottompadding-left}
3边框宽度{border-width:
border-top-widthborder-right-widthborder-bottom-widthborder-left-width}
宽度值:
thin|medium|thick|数值
4边框颜色{border-color:
数值数值数值数值} 数值:
分别代表top、right、bottom、left颜色值
5边框风格{border-style:
none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6边 框{border:
border-widthborder-stylecolor}
上边框{border-top:
border-top-widthborder-stylecolor}
右边框{border-right:
border-right-widthborder-stylecolor}
下边框{border-bottom:
border-bottom-widthborder-stylecolor}
左边框{border-left:
border-left-widthborder-stylecolor}
7宽 度{width:
长度|百分比|auto}
8高 度{height:
数值|auto}
9漂 浮{float:
left|right|none}
10清 除{clear:
none|left|right|both}
分类列表
序号中文说明标记语法
1控制显示{display:
none|block|inline|list-item}
2控制空白{white-space:
normal|pre|nowarp}
3符号列表{list-style-type:
disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4图形列表{list-style-image:
URL}
5位置列表{list-style-position:
inside|outside}
6目录列表{list-style:
目录样式类型|目录样式位置|url}
7鼠标形状{cursor:
hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}