c s s样式大全(整理版）
字体属性：(f ont)
大小{font-size: x-large;}(特大) xx-sm all;(极小) 一般中文用不到，只要
用数值就可以，单位：PX、PD
样式{font-styl e: oblique;}(偏斜体) it alic;(斜体)normal;(正常)
行高 {lin e-height:normal;}(正常) 单位：PX、P D、EM
粗细{font-weigh t: bold;}(粗体) lighte r;(细体) nor mal;(正常)
变体 {font-v ariant: sm all-caps;}(小型大写字母) n ormal;(正常)
大小写 {tex t-transfor m: capital ize;}(首字母大写) upperca se;(大写) lo wercase;(小写) none;(无)
修饰 {tex t-decorati on: underl ine;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-f amily)"Cou rier New", Courier,monospace, "Times
New Roman", Times, s erif, Aria l, Helveti ca, sans-s erif, Ve rd a n a
背景属性：(backgrou nd)
彩 {b ackground-color: #FF FFFF;}
图片 {backgrou nd-image:url();}
重复 {backgro und-repeat: no-repea t;}
滚动 {b ackground-attachment: fixed;}(固定) scroll;(滚动)
位置{backgroun d-position: left;}(水平) top(垂直);
简写方法 {b ac kgr oun d:#000 ur l(..) rep eatfi xed le ft top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/
区块属性：(Block) /*这个属性第一次认识，要多多研究*/
字间距 {lette r-spacing: normal;}数值 /*这个属性似乎有用，多实践下*/
对齐 {text-align: ju stify;}(两端对齐) left;(左对齐) right;(右对齐) cen ter;(居中) 缩进 {text-i ndent: 数值p x;}
垂直对齐{vertical-align: bas eline;}(基线) sub;(下标)super;(下标) top; tex t-top; mid dle; botto m; text-bo ttom;
词间距word-spaci ng: normal; 数值
空格w hite-space: pre;(保留) nowrap;(不换行)
显示{display:b lock;}(块)inline;(内嵌) list-ite m;(列表项) ru n-in;(追加部分) compact;(紧凑) marke r;(标记) tab le; inline-table
tab le-raw-gro up; table-header-gro up; table-footer-gro up; table-raw; table-column-gr oup; table-column; t able-cell;table-cap tion;(表格标题) /*displa y 属性的了解很模糊*/
方框属性： (Box) width:; h eight:; fl oat:; clea r:both; ma rgin:; pad ding:;
顺序：上右下左边框属性： (Border) border-s tyle: dott ed;(点线) da shed;(虚线)solid; dou ble;(双线) g roove;(槽线)ridge;(脊状) inset;(凹陷) outset;border-wi dth:; 边框宽度 border-co lor:#; 简写方法border：w idth style color; /*简写*/
列表属性：(List-sty le) 类型lis t-style-ty pe: disc;(圆点) circle;(圆圈) squa re;(方块) d ecimal;(数字) lower-ro man;(小罗码数字) upper-ro man; lower-alpha; up per-alpha;
位置list-style-posi tion: outs ide;(外) in side;
图像l ist-style-image: url(..);
定位属性： (Posit ion) Posi tion: abso lute; rela tive; stat ic; visibi lity: inhe rit; visib le; hidden; overflow: visible;hidden; s croll; aut o; clip: r ect(12px,a uto,12px,a uto) (裁切)
css属性代码大全
一 CSS文字属性：
color : #999999;/*文字颜*/
font-fami ly : 宋体,sa ns-serif;/*文字字体*/
font-size : 9pt; /*文字大小*/
css表格样式f ont-style:itelic; /*文字斜体*/
font-varia nt:small-c aps; /*小字体*/
lette r-spacing: 1pt; /*字间距离*/
li ne-height: 200%; /*设置行高*/
f ont-weight:bold; /*文字粗体*/
ve rtical-ali gn:sub; /*下标字*/
ve rtical-ali gn:super;/*上标字*/
text-deco ration:lin e-through; /*加删除线*/
text-dec oration: o verline; /*加顶线*/
t ext-decora tion:under line; /*加下划线*/
tex t-decorati on:none; /*删除链接下划线*/
text-tr ansform :capitalize; /*首字大写*/
text-tr ansform :uppercase; /*英文大写*/
text-tra nsform : l owercase;/*英文小写*/
text-alig n:right; /*文字右对齐*/
text-alig n:left; /*文字左对齐*/
text-alig n:center;/*文字居中对齐*/
text-al ign:justif y; /*文字分散对齐*/
vert ical-align属性
verti cal-align:top; /*垂直向上对齐*/
ve rtical-ali gn:bottom; /*垂直向下对齐*/
vertic al-align:m iddle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、CSS边框空白
padd ing-top:10px; /*上边框留空白*/
pad ding-right:10px; /*右边框留空白*/
padding-bo ttom:10px; /*下边框留空白*/
paddin g-left:10p x; /*左边框留空白
三、CSS符号属性：
list-style-typ e:none; /*不编号*/
l ist-style-type:decim al; /*阿拉伯数字*/
lis t-style-ty pe:lower-r oman; /*小写罗马数字*/
l ist-style-type:upper-roman; /*大写罗马数字*/
list-styl e-type:low er-alpha;/*小写英文字母*/
list-st yle-type:u pper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circ le; /*空心圆形符号*/
lis t-style-ty pe:square; /*实心方形符号*/
list-style-imag e:url(/dot.gif); /*图片式符号*/
l ist-style-position:outside; /*凸排*/
li st-style-p osition:in side; /*缩进*/
四、CSS背景样式：
ba ckground-c olor:#F5E2EC; /*背景颜*/
backg round:tran sparent; /*透视背景*/
backgroun d-image :url(/image/bg.gif);/*背景图片*/ backgroun d-attachme nt : fixed; /*浮水印固定背景*/
back ground-rep eat : repe at; /*重复排列-网页默认*/ background-repeat :no-repeat; /*不重复排列*/
backgro und-repeat : repeat-x; /*在x轴重复排列*/
bac kground-re peat : rep eat-y; /*在y轴重复排列*/
指定背景位置
background-position: 90% 90%; /*背景图片x与y轴的位置*/ b ackground-position : top; /*向上对齐*/
bac kground-po sition : b uttom; /*向下对齐*/
ba ckground-p osition :left; /*向左对齐*/
bac kground-po sition : r ight; /*向右对齐*/
bac kground-po sition : c enter; /*居中对齐*/
五、CSS连接属性：
a /*所有超链接*/
a:lin k /*超链接文字格式*/
a:vi sited /*浏览过的链接文字格式*/
a:activ e /*按下链接的格式*/
a:ho ver /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: h and
十字体cursor:cro sshair
箭头朝下 cursor:s-resize
十字箭头 cur sor:move
箭头朝右 curs or:move
加一问号 curso r:help
箭头朝左 curso r:w-resize
箭头朝上 cu rsor:n-res ize
箭头朝右上 cursor:n e-resize
箭头朝左上 cur sor:nw-res ize
文字I型 cursor:te xt
箭头斜右下 cursor:s e-resize
箭头斜左下 cur sor:sw-res ize
漏斗c ursor:wait
光标图案(I E6) p {c ursor:url("光标文件名.cur"),text;}
六、CSS框线一览表：
bord er-top : 1px solid #6699cc; /*上框线*/
bo rder-botto m : 1px so lid #6699c c; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
bord er-right : 1px solid #6699cc;/*右框线*/
以上是建议书写方式，但也可以使用常规的方式如下:
bor der-top-co lor : #369 /*设置上框线to p颜*/
bo rder-top-w idth :1px/*设置上框线top宽度*/
bor der-top-st yle : soli d/*设置上框线to p样式*/
其他框线样式
sol id /*实线框*/
dotted/*虚线框*/
double /*双线框*/
gr oove /*立体内凸框*/
rid ge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CS S表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单选项1选项2
八、CSS边界样式：
margin-top:10px; /*上边界*/
ma rgin-right:10px; /*右边界值*/
ma rgin-botto m:10px; /*下边界值*/
m argin-left:10px; /*左边界值*/
CSS 属性：字体样式(Font St yle)
序号中文说明标记语法
1 字体样式{font:font-style fon t-variantfont-weigh t font-siz e font-fam ily}
2 字体类型 {fon t-family:"字体1","字体2","字体3",...}
3 字体大小 {font-s ize：数值|inh erit| medi um| large| larger| x-large| xx-large| sm all| small er| x-smal l| xx-smal l}
4 字体风格 {font-style:inhe rit|italic|normal|ob lique}
5字体粗细{font-weig ht:100-900|bold|bold er|lighter|normal;}
6 字体颜 {color:数值;}
7 阴影颜 { text-shadow:16位值}
8 字体行高 {l ine-height：数值|inheri t|normal;}
9 字间距 {lett er-spacing：数值|inheri t|normal}
10 单词间距 {word-sp acing：数值|i nherit|nor mal}
11字体变形 {fo nt-variant:inherit|n ormal|smal l-cps }
12 英文转换{text-trans form:inher it|none|ca pitalize|u ppercase|l owercase}
13 字体变形 {font-si ze-adjust:inherit|no ne}
14字体
{font-str etch:conde nsed|expan ded|extra-condensed|extra-expa nded|
inhe rit|narrow er|normal|
semi-co ndensed|se mi-expande d|ultra-co ndensed|ul tra-expand ed|wider}
文本样式(Tex t Style)
序号中文说明标记语法
1 行间距 {lin e-height:数值|inherit|normal;}
2 文本修饰 {t ext-decora tion:inher it|none|un derline|ov erline|lin e-through|blink} 3段首空格 {t ext-indent：数值|inheri t}
4 水平对齐 {text-align:left|right|cen ter|justif y}
5 垂直对齐
{vertica l-align:in herit|top|bottom|tex t-top|text-bottom|ba seline|mid dle|sub|su p er}
6 书写方式 {wri ting-mode:lr-tb|tb-r l}
背景样式
序号中文说明标记语法
1 背景颜 {back ground-col or：数值}
2背景图片 {b ackground-image: url(URL)|none}
3 背景重复 {backgro und-repeat:inherit|n o-repeat|r epeat|repe at-x|repea t-y}
4 背景固定 {bac kground-at tachment:f ixed|scrol l}
5 背景定位 {backg round-posi tion：数值|to p|bottom|l eft|right|center}
6 背影样式{background：背景颜|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Styl e)
序号中文说明标记语法
1 边界留白{margin:mar gin-top ma rgin-right margin-bo ttom margi n-left}
2 补白{padding:pa dding-toppadding-ri ght paddin g-bottom p adding-lef t}
3 边框宽度
{bord er-width:b order-top-width bord er-right-w idth borde r-bottom-w idth borde r-left-wid th} 宽度值： thin|med ium|thick|数值
4 边框颜 {borde r-color：数值数值数值数值}数值：分别代表t op、right、b ottom、left颜值
5 边框风格
{borde r-style:no ne|hidden|inherit|da shed|solid|double|in set|outset|ridge|gro ove
}
6 边框 {borde r:border-w idth borde r-style co lor}
上边框
{border-t op:border-top-widthborder-sty le color}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论