常⽤css 样式⼤全以及css 属性代码⼤全
常⽤css 样式⼤全
字体属性：(font)背景属性： (background)
区块属性： (Block) /这个属性第⼀次认识，要多多研究/盒⼦属性： (Box)
⼤⼩ {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 : "Microsoft YaHei"}(微软雅⿊),"MicrosoftJhengHei"(华⽂细⿊), "STHeiti", "MingLiu","Courier New", "Courier, monospace", "Times New Roman", "Times", "serif", "Arial", "Helvetica", "sans-serif"," Verdana"
1
2
3
4
5
6
7
8
css表格样式9
10
11
12
13
14
15
16
17
18⾊彩 {background-color : #FFFFFF ;}图⽚ {background-image : url();}重复 {background-repeat : no-repeat ;}滚动 {background-attachment : fixed ;}(固定) scroll ;(滚动)位置 {background-position : left ;}(⽔平) top (垂直)；简写⽅法 {background :#000 url(..) repeat fixed left top ;} /*简写·这个在阅读代码中经常出现，要认真的研究*/1
2
3
4
5
6
7
8
9
10
11
12字间距 {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 ;(不换⾏)显⽰ {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 ;(表格标题) /*display 属性的了解很模糊*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
边框属性： (Border)
列表属性： (List-style)
定位属性： (Position)
css 属性代码⼤全
⼀、 CSS⽂字属性：width :; height :; float :; clear :both ; margin :; padding :; 顺序：上右下左1border-style : dotted ; (点线) dashed ;(虚线) solid ; double ;(双线) groove ;(槽线) ridge ;(脊状) inset ;(凹陷) outset ;border-width :; 边框宽度border-color :#；简写⽅法:border ：width style color ; /*简写*/
1
2
34
5
6
7
8
9类型list-style-type : disc ;(圆点) circle ;(圆圈) square ;(⽅块) decimal ;(数字) lower-roman ;(⼩罗码
数字) upper-roman ; lower-alpha ; upper-alpha ；位置list-style-position : outside ;(外) inside ；图像list-style-image : url(..);
1
2
3
4
5
6
7Position : absolute ; relative ; static ;visibility : inherit ; visible ; hidden ;overflow : visible ; hidden ; scroll ; auto ;clip : rect (12px,auto,12px,auto ) (裁切)
1
2
3
4
5
6
7
⼆、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 ; /*⽂字垂直向下对齐*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
三、CSS符号属性：
四、CSS背景样式：
指定背景位置padding-top :10px ; /*上边框留空⽩*/padding-right :10px ; /*右边框留空⽩*/padding-bottom :10px ; /*下边框留空⽩*/padding-left :10px ; /*左边框留空⽩*/
1
2
3
4
5
6
7list-style-type :none ; /*不编号*/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 ; /*缩进*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23background-color :#F5E2EC ; /*背景颜⾊*/background :transparent ; /*透视背景*/background-image : url(/image/bg.gif); /*背景图⽚*/background-attachment : fixed ; /*浮⽔印固定背景*/background-repeat : repeat ; /*重复排列-⽹页默认*/background-repeat : no-repeat ; /*不重复排列*/
background-repeat : repeat-x ; /*在x 轴重复排列*/background-repeat : repeat-y ; /*在y 轴重复排列*/1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
五、CSS连接属性：
⿏标光标样式：六、CSS框线⼀览表：
background-position : 90% 90%; /*背景图⽚x 与y 轴的位置*/background-position : top ; /*向上对齐*/background-position : buttom ; /*向下对齐*/background-position : left ; /*向左对齐*/background-position : right ; /*向右对齐*/background-position : center ; /*居中对齐*/
1
2
3
4
5
6
7
8
9
10
11 a /*所有超链接*/a :link /*超链接⽂字格式*/a :visited /*浏览过的链接⽂字格式*/a :active /*按下链接的格式*/a :hover /*⿏标转到链接*/
1
2
3
4
5
6
7
8
9链接⼿指 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 ;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27border-top : 1px solid #6699cc ; /*上框线*/border-bottom : 1px solid #6699cc ; /*下框线*/border-left : 1px solid #6699cc ; /*左框线*/border-right : 1px solid #6699cc ; /*右框线*/1
2
3
4
5
6
7
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论