css代码通常资料全套汇编

1、css属性代码大全一 CSS文字属性：color : #999999; /*文字颜色 */font-family :宋体,sans-serif; /* 文字字体 */font-size : 9pt; /* 文字大小 */font-style:itelic; /*文字斜体 */letter-s pacing : 1pt; /* lin e-height : 200%; /* fon t-weight:bold; /*fon t-varia nt:small-ca ps; /*小字体*/字间距离*/设置行高*/文字粗体*/下标字*/上标字*/加删除线*/vertical-alig n:sub; /

2、*vertical-alig n:super; /* text-decoratio n:li ne-through; /*加下划线*/text-decoratio n: overl ine; /*力卩顶线 */ text-decoratio n:un derli ne; /*text-decoration:none; /* 删除链接下划线 */首字大写*/英文大写*/英文小写*/text-tra nsform : cap italize; /* text-tra nsform : upp ercase; /* text-tra nsform : lowercase; /*text-align:

3、right; /*文字右对齐 */文字居中对齐*/文字分散对齐*/垂直向上对齐*/垂直向下对齐*/垂直居中对齐*/文字垂直向上对齐*/文字垂直向下对齐*/vertical-alig n:to p; /*text-align:left; /* 文字左对齐 */ text-alig n:cen ter; /* text-alig n:justify; /* vertical-alig n 属性vertical-alig n:bottom; /*vertical-alig n:middle; /* vertical-alig n:text-to p; /*vertical-alig n:text-b

4、ottom; /*二、CSS边框空白padding-top:10px; /*上边框留空白 */padding-right:10px; /*右边框留空白 */padding-bottom:10px; /*下边框留空白 */paddi ng-left:10 px; /*左边框留空白三、CSS符号属性：list-style-t ype:none; /*不编号 */list-style-type:decimal; /*阿拉伯数字 */小写罗马数字*/大写罗马数字*/小写英文字母*/list-style-t yp e:lower-roma n; /* list-style-t yp e:u pp er-

5、roma n; /* list-style-t yp e:lower-al pha; /*大写英文字母*/list-style-ty pe:upp er-al pha; /*list-style-type:disc; /* 实心圆形符号 */ list-style-type:circle; /*空心圆形符号 */list-style-type:square; /*实心方形符号 */图片式符号*/凸排*/缩进*/list-style-image:url(/dot.gif); /* list-style-p ositi on: outside; /* list-style-p ositi on:i

6、 nside; /*四、CSS背景样式：background-color:#F5E2EC; /*背景颜色 */background:transparent; /*透视背景 */background-image : url(/image/bg.gif); /*背景图片 */background-attachment : fixed; /*浮水印固定背景 */backgrou nd-re peat : rep eat; /*重复排列-网页默认 */不重复排列*/在x轴重复排列*/在y轴重复排列*/背景图片x与y轴的位置*/backgro un d-re peat : no-rep eat; /*

7、backgro un d-re peat : rep eat-x; /* backgro un d-re peat : rep eat-y; /* 指定背景位置backgrou nd-p osition : 90% 90%; /*backgro und-po siti on : top; /* backgro und-po siti on : buttom; /* backgro und-po siti on : left; /* backgro und-po siti on : right; /*向上对齐*/向下对齐*/ 向左对齐*/居中对齐*/向右对齐*/backgro und-po si

8、ti on : cen ter; /*五、CSS连接属性：a /*所有超链接*/ a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/ a:hover /*鼠标转到链鼠标光标样式: 链接手指CURSOR: hand十字体 cursor:crosshaircursor:s-resize箭头朝下十字箭头cursor:move箭头朝右cursor:move加一问号箭头朝左cursor:he Ip cursor:w-resize箭头朝上箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resizecur

9、sor: n-resize文字 I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案(IE6) P cursor:url("光标文件名.cur"),text;六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/border-left : 1px solid #6699cc; /*左框线*/右框线*/border-right : 1px solid

10、 #6699cc; /*以上是建议书写方式，但也可以使用常规的方式如下: 设置上框线toP颜色*/ 设置上框线top宽度*/ 设置上框线top样式*/border-to p-color : #369 /*border-to p-width :1px /*border-t op-style : solid/*其他框线样式solid /*实线框*/ dotted /* 虚线框 */double /* 双线框 */ groove /*立体内凸框*/ ridge /*立体浮雕框*/ in set /* 凹框 */ outset /* 凸框 */ 七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块

11、下拉式菜单 选项1选项2八、CSS边界样式：margi n-t op :10 px; /*上边界*/margin-right:10px; /*右边界值 */margi n-bottom:10 px; /*下边界值 */margin-left:10px; /*左边界值 */CSS属性： 字体样式(Font Style)1字体样式序号中文说明标记语法fon t:fo nt-style fon t-varia nt fon t-weight fon t-sizefon t-family2字体类型font-family:"字体 1","字体2","字体

12、3",.font-size: 数值 |inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small4字体风格5字体粗细3字体大小体） |normal6字体颜色阴影颜色字体行高字间距fon t-style:i nherit|italic| nor mal|obliquefont-weight:100-900|bold（粗体）|bolder （特粗）|lighter （细（正常）；color:数值;text-shadow:16 位色值li ne-height:数值 |in heri

13、t| no rmal;letter-s pacing:数值 |in herit| no rmal10 单词间距word-spacing: 数值|inherit|normal11 字体变形 font-variant:inheritnormal|small-cps 12英文转换 text-tra nsform:i nherit| non e|ca pitalize|u pp ercase|lowercase13 字体变形 font-size-adjust:inherit|none14字体 fon t-stretch:c onden sed|ex pan ded|extra-c onden sed|

14、extra-ex pan ded|i nh erit |n arrower| no rmal| semi-c onden sed|semi-ex pan ded|ultra-c onden sed|ultra-ex pan ded|wider 文本样式(Text Style)序号中文说明标记语法1 行间距line-height:数值 |inherit|normal;2文本修饰 text-decorati on:i nherit| non e| un derli ne|overli ne|li ne-through|bli nk3 段首空格text- in de nt:数值 |in herit4

15、 水平对齐text-align:left|right|centerjustify5垂直对齐 vertical-alig n:i nhent|t op |bottom|text-t op |text-bottom|baseli ne|middle|s ub|s uper6书写方式writing-mode:lr-tb|tb-rl背景样式序号中文说明标记语法1 背景颜色background-color:数值2 背景图片background-image: url(URL)|none3背景重复 backgro un d-re peat: in herit| no-re peat|re peat|re p

16、eat-x|re peat-y4 背景固定background-attachment:fixed|scroll5 背景定位background-position:数值 |top|bottom|left|right|center6背影样式background:背景颜色|背景图象|背景重复|背景附件|背景位置框架样式(Box Style)序号中文说明标记语法1 边界留白 margin:margin-top margin-right margin-bottommargin-left2 补 白 p addi ng:p addi ng-t op p add in g-right p add in g-b

17、ottomp addi ng-left3 边框宽度border-width:border-top-width border-right-widthborder-bottom-width border-left-width宽度值：thin| medium|thick| 数值4边框颜色border-color:数值数值数值数值数值：分别代表top、right、bottom、left 颜色值border-style:non e|hidde n|i nhent|dashed|solid|double|i nset|outset|ndgegroove6边5边框风格框 border:border-widt

18、h border-style color边7宽8高9漂框框框框border-t op:border-t op-width border-style color border-right:border-right-width border-style color border-bottom:border-bottom-width border-style color border-left:border-left-width border-style color度width:长度|百分比| auto度height:数值 |auto浮float:left|right|none10清分类列表序号中文

19、说明标记语法1 控制显示display:none|block|iniine|list-item2 控制空白white-s pace: normal pre| no warp3符号列表除clear:none|left|right|bothlist-style-ty pe:disc|circle|square|decimal|lower-roma n|u pp er-roma n|low er-alp ha| upper-alpha|none4 图形列表list-style-image:URL5 位置列表list-style-position:inside|outside6目录列表list-sty

20、le:目录样式类型|目录样式位置|url7鼠标形状cursor:ha nd|crosshair|text|wait|move|hel p|e-resize| nw-resize|w-resize|s-resize|se-resize|sw-resize css属性大全 背景属性共有六项:背景颜色（background-color），设置背景颜色。背景图像（background-image），设置网页背景图像。重复（background-repeat ），控制背景图像的平铺方式，有不重复（no-rep eat八重复（rep eat，沿水平、垂直方向平铺）、横向重复（rep eat-X ， 图像沿

21、水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等4种选 择。附加（background-attachment ），用于控制背景图像是否会随页面的滚 动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll， 背景图像随文字内容一起滚动）两种选择。水平位置/垂直位置（background-position），确定背景图像的水平、垂直位置 。共 有左对齐（left ）、右对齐（right ）、顶部（top ）、底部（bottom ）、居中（center） 和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控 制）等6种选择。类型属性共有

22、九项:字体（font-family ），设定时，需考虑浏览器中有无该字体。大小（font-size ），注意度量单位。粗细（font-weight ），除了normal （正常）、bold （粗体）、bolder （特 粗）'lighter （细体）外，还有9种以像素为度量为单位的设置方式。样式（font-style ），也就是字型。行高（line-height ），就是行距。注意，行距只能以是字体大小值为变形（font-variant ），可以将正常文字一半尺寸后大写显示，但IE目前不支持这项属性。大小写（text-tra nsform ），这项属性能轻而易举地控制字母大小写，有首

23、字大写（capitalize、大写（uppercase ）、小写（lowercase ）和无（none， 使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种。修饰（text-decoration ），用于控制链接文本的显示形态，有下划线（underline ）、无下划线（overline ）、删除线（line-through ）、闪烁（blink ） 和无（none ，使上述效果均不会发生）等5种修饰方式。但IE4不支持文字闪烁。区块属性共有六项:单词间距（word-spacing ）（normal ）和值（自定义间隔值） 英吋（in）、厘米（cm）、毫米，主要用于控制文字间相隔的距

24、离。有正常 两种选择方式。当选择值时，可用的单位有（mm ）、点数（pt ）、12pt 字（pc ）、字体高（em ）、字体x有高（ex）像素（px ）。字母间距（letter-spacing ），其作用与字符间距类似，也有正常（normal ） 和值（自定义间隔值）两种选择方式。垂直对齐（vertical-align ），控制文字或图像相对于其母体元素的垂直位 置。如将一个2 X3像素的GIF图像同其母体元素文字的顶部垂直对齐，则该GIF图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元 素的基准线对齐）、下标（sub，将元素以下标的形式显示），上标（super，

25、将 元素以上标的形式显示）、顶部（top，将元素顶部同最高的母体元素对齐）、 文本顶对齐（text-toP，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的 底部同最低的母体元素对齐）及值（自定义）等 9种选择。文本对齐（ 右对齐（right ）文字缩进（空白间距left ）、text-align ），设置块的水平对齐方式。共有左对齐（、居中（center ）和均分（justify ）等4种选择。 text-i ndent ），控制块的缩进程度。（white-s pace（white-s pace 行（nowrap

26、 ），在HTML中，空格是被省略的；在CSS中则使用属性）控制空格的输入。共有正常（normal ）、保留（pre ）和不换 等3种选择。边框的属性有3项:宽J（border-width ），控制边框的宽度，其中分为4个属性：border-top-width 顶边框的宽度、border-right-width右边框的宽度、border-bottom-width 底边框的宽度、border-left-width 左边框的宽度。颜色（border-color ），设置各边框的颜色。若要使边框的四边显示不同 的颜色，可在设置中分别列出。如，p: #ffOOOO #009900 #0000ff #55

27、cc00）,设定边框的样式，共有无（none ）、虚线（dotted ）、 点划线（dashed ）、实线（solid ）、双线（double ）、（ridge ）、凹陷（in set ）和凸起（outset ）等 9 种。浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺 时针）。样式（border-style点划线线（dotted ）、 槽状（grove ）、脊状盒子属性共有6项宽（width ），确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的 内容多少。高（height ），确定盒子本身的高度。浮动（float ），设置块元素的浮动效果。清除（clear），用于

28、清除设置的浮动效果。边距（margin ），控制围绕边框的边距大小。其中包含4个属性：margin-top 控制上边距的宽度、margi n-right 控制右边距的宽度、margi n-bottom 控制下 边距的宽度、margin-left控制左边距的宽度。边界（padding ），确定围绕块元素的空格填充数量，其中包含 4个属性P add in g-t op 控制上留白的宽度、padd in g-right 控制右留白的宽度、 paddi ng-bottom控制下留白宽度、padd in g-left 控制左留白的宽度。列表属性共有3项:类型（list-style-type ），确定列表

29、每一项前使用的符号，共有圆点（disc）、 圆圈（circle、方形（square、数字（decimal、小写罗马数字（lower-roman）、大写罗马数字（upper-roman ）、小写字母 （lower-alpha ）和大写字母 （upper alpha、等 8种。项目图像（list-style-image 、，其作用是将列表前面的符号换为图形。位置J （list-style-po sition 、，用于描述列表位置，有内（outside、和外（in side ） 两种选择。定位属性共有6项:类型（Position ），用于确定定位的类型，共有绝对（absolute ）、相对（rela

30、tive ） 和静态（static、等3种选择。Z轴（z-index、，用于控制网页中块元素的叠放顺序，可为元素设置重叠 效果。该属性的参数值使用纯整数，值为 0时，元素在最下层，适用于绝对定位 或相对定位的元素。显示（visibility、使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible ）和隐藏（hidden ）等3 种选择。溢出（oveflow ），在确定了元素的高度和宽度后，如果元素的面积不能 全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（visible，扩大面积以显示所有内容）、隐藏（hidden，隐

31、藏超出范围的内容）、 滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素 面积时，显示滚动条）等4种选择。定位，当为元素确定了绝对定位类型后， 该组属性决定元素在网页中的具体 位置。该组属性包含4个子属性，分别是左（属性名为 left，控制元素 左边的起始位置）、上（属性名为 top，控制元素上面的起始位置）、宽或高（与盒子类属性面板中宽或高的属性作用相同）。剪辑（clip ），当元素被指定为绝对定位类型后，该属性可以把元素区域切 成各种形状，但目前提供的只有方形一种。属性值为rect（top right bottom left） 即：rect（t op righ

32、t bottom left），属性值的单位为任何一种长度单位。扩展属性共有两部分:之前分页，其中两个属性的作用是为打印的页面设置分页符。（Page-break-before）; 之后（page-break-after ）。视觉效果，其中两个属性的作用是为网页中的元素施加特殊效果。光标（cusor），可以指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标在Windows操作系统中的各种形状。另外它还可以指定指针图标的 URL地址；滤镜（fiter ），可以为网页中元素施加各种奇妙的滤镜效果，共 包含有16种滤镜字体属性：（font）PX、PD大小font-size: x-larg

33、e;（特大）xx-small;（极小）一般中文用不到，只要用数值 就可以，单位：样式 font-style: oblique;（行高line-height: normal;（粗细 font-weight: bold;（偏斜体）italic;（斜体）normal;（正常） 正常）单位：PX、PD、EM粗体）lighter;（细体）normal;（正常）变体 font-variant: small-caps;（小型大写字母）normal;（ 正常）大小写 text-transform: capitalize;（首字母大写）uppercase;（ 大写）lowercase;（小写）none;（无）修

34、饰text-decoration: underline;（ 下划线）overline;（上划线）line-through;（删除线）blink;（闪烁）常用字体：（fon t-family）"Courier New", Courier, monosp ace, "Times New Roma n". Times, serif,背景属性:色彩 图片 重复 滚动 位置Arial, Helvetica, san s-serif, Verda na（backgro und）backgrou nd-color: #FFFFFF;backgro un d-image: url（）;backgro un d-re peat: no-rep eat;background-attachment: fixed;（固定）scroll;（滚动）background-position: left;（水平）top（垂直）;简写方法backgrou nd:#000 url（.） re peatfixed left top;/*简写这个在阅读代码中经常出现，要认真的研究*/区块属性：（Block）/*这个属性第一次认识，要多多研究*/字间距letter-s pad ng: normal; 数值/*这个属性似乎有用，多实践下*/ 对