css属性css properties.docx
《css属性css properties.docx》由会员分享,可在线阅读,更多相关《css属性css properties.docx(10页珍藏版)》请在冰豆网上搜索。
css属性cssproperties
css属性(cssproperties)
CSSpropertiesDaquan
Fontproperties:
(font)
Sizefont-size:
X-LARGE;(large)XX-Small;(minimal)generalChinesecannotbeused,aslongasthevaluecanbe,units:
PX,PD
Stylefont-style:
oblique;(partialitalic)Italic;(italic)normal;(normal)
Lineheightline-height:
normal;(normal)units:
PX,PD,EM
Thethicknessoffont-weight:
(BOLD)bold;lighter;normal;(Figure)(normal)
Variantfont-variant:
small-caps;(smallcapitalization)normal;(normal)
Casetext-transform:
capitalize;(initialuppercase)uppercase;(uppercase)lowercase;(lowercase)none;(no)
Modifytext-decoration:
underline;(underline)overline;(lineup)line-through;(deleteline)blink;(blinking)
Commonlyusedfonts:
(font-family)
"Courier,New",Courier,monospace,Times,New,Roman,Times,serif,Arial,Helvetica,sans-serif,Verdana
Fontprojectioneffect:
filter:
dropshadow(color=#FFFFFF,offx=1,offy=1,positive=1);
Backgroundproperties:
(background)
Colorbackground-color:
#FFFFFF;
Picturebackground-image:
URL();
Repeatbackground-repeat:
no-repeat;
Scrollbackground-attachment:
fixed;(fixed)scroll;(scroll)
Positionbackground-position:
left(horizontal)top(vertical);
Shorthandmethod,background:
#000,URL(...)repeat,fixed,left,top;
Blockproperties:
(Block)
Wordspacingletter-spacing:
normal;numericvalue
Yes,Liutext-align:
justify;(alignattheend)left;(leftaligned)right;(rightaligned)center;(centered)
Indentthetext-indent:
valuepx;
Verticallyalignedvertical-align:
baseline;(baseline)sub;(subscript)super;(subscript)top;text-top;middle;bottom;text-bottom;
Wordspacingword-spacing:
normal;numericalvalue
Spacewhite-space:
pre;(reserved)nowrap;(nolinefeed)
Display:
block(block);inline;list-item;(embedded)(list)run-in(additional);compact(compact);marker;table;inline-table(marker);table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;(tabletitle)
Boxproperties:
(Box)
Width:
;height:
;float:
;clear:
both;padding:
;margin:
;order:
right,left,left
Borderproperties:
(Border)
Border-style:
dotted;(dotline)dashed;(dottedline)solid;double;(doubleline)groove;(slotline)ridge;(ridged)inset;(SAG)outset;
Border-width:
;borderwidth
Border-color:
#;
Shorthandmethodborder:
width,style,color;
Listproperties:
(List-style)
Typelist-style-type:
disc;(DOT)circle;(circle)square;(FangKuai)decimal;(number)lower-roman;(Ronaldinhonumber)upper-roman;lower-alpha;upper-alpha;
Locationlist-style-position:
outside;(external)inside;
Imagelist-style-image:
URL(...);
Locationattributes:
(Position)
Position:
absolute;relative;static;
Visibility:
inherit;visible;hidden;
Overflow:
visible;hidden;scroll;auto;
Clip:
Rect(12px,auto,12px,auto)(cut)
CSSpropertycodeGuinness
OneCSStextproperty:
Color:
#999999;/**/textcolor
Font-family:
Arial,sans-serif;/**/textfont
Font-size:
9pt;/**/textsize
Font-style:
itelic;/**/italictext
Font-variant:
small-caps;/**/smallfont
LETTER-SPACING:
1pt;/**/distancebetweenwords
Line-height:
200%;/**/settherow
Font-weight:
bold;/**/boldtext
Vertical-align:
sub;/**/word.
Vertical-align:
super;/**/word.
Text-decoration:
line-through;/**/strikethrough
Text-decoration:
overline;/*and*/topline
Text-decoration:
underline;/**/underline
Text-decoration:
none;/**/deletelinkunderline
Text-transform:
capitalize;/**/firstcharacteruppercase
文本转换:
大写;/**/英文大写
文本转换:
小写;/**/英文小写
文本对齐:
右;/**/文字右对齐
文本对齐:
左;/**/文字左对齐
文本对齐:
中心;文字居中对齐/**/
文本对齐:
对齐;/**/文字分散对齐
垂直对齐属性
垂直对齐:
顶;/**/垂直向上对齐
垂直对齐:
底部;/**/垂直向下对齐
垂直对齐:
中部;/**/垂直居中对齐
垂直对齐:
文字/**/文字垂直向上对齐顶;
垂直对齐:
文字/**/文字垂直向下对齐底;
布局:
垂直流/**/文字竖着排列表意
二、CSS边框空白
填料:
10px;/**/上边框留空白
填充右:
10px;/**/右边框留空白
座垫:
10px;/**/下边框留空白
填充左:
10px;/*左边框留空白
三、CSS符号属性:
目录样式类型:
无;/**/不编号
目录样式类型:
十进制;/**/阿拉伯数字
目录样式类型:
低/**/小写罗马数字罗马;
目录样式类型:
大写罗马数字;/**/大写罗马数字
目录样式类型:
低α;/**/小写英文字母
目录样式类型:
上α;/**/大写英文字母
目录样式类型:
盘;/**/实心圆形符号
目录样式类型:
圆;/**/空心圆形符号
目录样式类型:
广场;/**/实心方形符号
列表样式图像:
URL(/点。
GIF);/**/图片式符号
目录样式位置:
外凸排;/**/
列表样式的位置:
在缩进;/**/
四、CSS背景样式:
背景颜色:
#f5e2ec;/**/背景颜色
背景:
透明;/**/透视背景
背景图像:
URL(/图像/BG.gif);/**/背景图片
背景附件:
固定;/**/浮水印固定背景
背景重复:
重复;/**/重复排列-网页默认
背景重复:
不重复;/**/不重复排列
背景重复:
repeat-x;/**/轴重复排列在X
背景:
纵向重复;重复在Y轴重复排列*//*
指定背景位置
背景位置:
90%90%;/*背景图片X与Y轴的位置*/
背景位置:
顶;/**/向上对齐
背景位置:
按钮;/**/向下对齐
背景位置:
左;/**/向左对齐
背景位置:
右;/**/向右对齐
背景:
中心位置;/**/居中对齐
五、CSS连接属性:
所有超链接/**/
一:
链接/**/超链接文字格式
答:
浏览过的链接文字格式参观/**/
一:
主动/**/按下链接的格式
答:
鼠标转到链接悬停/**/
鼠标光标样式:
链接手指鼠标手
十字体十字光标:
箭头朝下光标:
s-resize
十字箭头:
移动光标
箭头朝右:
移动光标
加一问号光标:
帮助
箭头朝左光标:
w-resize
箭头朝上光标:
n-resize
箭头朝右上光标:
NE调整
箭头朝左上光标:
NW调整
文字我型光标:
文本
箭头斜右下光标:
SE调整
箭头斜左下光标:
软件大小
漏斗光标:
等待
光标图案(IE6)P{cursor:
url(“光标文件名.cur”),文本;}
六、CSS框线一览表:
边境上:
1pxsolid#6699cc;/**/上框线
底部边框:
1pxsolid#6699cc;/**/下框线
左边界:
1pxsolid#6699cc;/**/左框线
边境:
1pxsolid#6699cc;/**/右框线
以上是建议书写方式,但也可以使用常规的方式如下:
边境上的颜色:
#369/**/颜色设置上框线顶
边框顶部宽度:
1px/**/宽度设置上框线顶
边境上的风格:
固体/*设置上框线顶样式*/
其他框线样式
实线框固/**/
虚线框点缀/**/
双线框双/**/
groove立体内凸框/**/
ridge立体浮雕框/**/
inset凹框/**/
outset凸框/**/
七、css表单运用:
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、css边界样式:
margintop:
10px;/**/上边界
margin-right:
10px;/**/右边界值
margin-bottom:
10px;/**/下边界值
margin-left:
10px;/**/左边界值
css属性:
字体样式(fontstyle)
序号中文说明标记语法
1字体样式{font:
fontstylefontvariantfontweightfont-sizefont-family}
2字体类型{font-family:
'字体1","字体2","字体3",...}
3字体大小{fontsize:
数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|xsmall|xx-small}
4字体风格{fontstyle:
inherit|italic|normal|oblique}
5字体粗细{font-weight:
100-900|bold|bolder|lighter|normal;}
6字体颜色{color:
数值;}
7阴影颜色{textshadow:
16位色值}
8字体行高{lineheight:
数值|inherit|normal;}
9字间距{letter-spacing:
数值|inherit|normal}
10单词间距{wordspacing:
数值|inherit|normal}
11字体变形{fontvariant:
inherit|normal|small-cps}
12英文转换{texttransform:
inherit|none|capitalize|uppercase|lowercase}
13字体变形{font-sizeadjust:
inherit|none}
14字体{fontstretch:
condensed|expanded|extracondensed|extraexpanded|inherit|narrower|normal|semicondensed|semiexpanded|ultracondensed|ultraexpanded|wider}
文本样式(textstyle)
序号中文说明标记语法
1行间距{lineheight:
数值|inherit|normal;}
2文本修饰{textdecoration:
inherit|none|underline|overline|linethrough|wink}
3段首空格{textindent:
数值|inherit}
4水平对齐{text-align:
left|right|center|justify}
5垂直对齐{vertical-align:
inherit|top|bottom|texttop|text-bottom|baseline|middle|pdo|super}
6书写方式{writingmode:
lr-tb|tbrl}
背景样式
序号中文说明标记语法
1背景颜色{backgroundcolor:
数值}
2背景图片{backgroundimage:
url(url)|none}
3背景重复{backgroundrepeat:
inherit|no|repeatrepeatrepeatrepeat||-x-y}
4背景固定{backgroundattachment:
fixed|scroll}
5背景定位{backgroundposition:
数值||topbottomleftrightcenter|||}
6背影样式{background:
背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(boxstyle)
序号中文说明标记语法
1边界留白{margin:
margintopmarginmarginbottommargin-right--left}
2补白{padding:
paddingtoppadding-rightpadding-bottom-leftpadding}
3边框宽度{theborderwidth,bordertopborderwidth-right-widthborderbottomwidthborderleftwidth}
宽度值:
thin|medium|thick|数值
4边框颜色{bordercolor:
数值数值数值数值}数值:
分别代表top、right、bottom、left颜色值
5边框风格{borderstyle:
none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6边框{border:
theborderwidthborderstylecolor}
上边框{bordertop:
bordertopwidthborderstylecolor}
右边框{borderrightborder:
-right-widthborderstylecolor}
下边框{borderbottom:
borderbottomwidthborderstylecolor}
左边框{borderleft:
theborderleftwidthborderstylecolor}
7宽度{width:
长度|百分比|auto}
8高度{height:
数值|auto}
9漂浮{浮动:
左|右|没有}
10清除{清楚:
没有|左右||两}
分类列表
序号中文说明标记语法
1控制显示{显示:
无|块|内联|列表项}
2控制空白{白空间:
正常|预|nowarp}
3符号列表{列表样式类型:
盘|圈|平方|小数|下罗马|大写罗马数字|低α|上α|没有}
4图形列表{列表样式图像:
URL}
5位置列表{列表样式的位置:
在|外}
6目录列表{列表样式:
目录样式类型|目录样式位置|URL}
7鼠标形状{光标:
手|十字|文本|等|移动|帮助|e-resize|NW调整|w-resize|s-resize|SE调整|SW调整}