CSS 样式属性大全
CSS(Cascading Style Sheets)简介
CSS(Cascading Style Sheets)简介
y^uO8U2ZkM0当初一帮技术人员想出HTML,主要侧重于定义内容,比如<p >表示一个段落,<h1>表示标题,而并没有过多设计HTML的排版和界面效果。PHPChina 开源社区门户k.jl#sp'{.w9D&m
文件后缀不要用.txt,改成.css。PHPChina 开源社区门户VD ~N i!^h;|
随着Internet的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直 到CSS出现。PHPChina 开源社区门户;P9B*eo%O@
CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。PHPChina 开源社区门户6x sw7T/~$P'Q.|
CSS的英文是Cascading Style Sheets,中文可以翻译成串联式样式表。
VA(L$H5ZL"c `-l1FN0
要用 到Style这个Tag ,写法如下 :显示示例!PHPChina 开源社区门户ZT)k"Y`;A2x
CSS按其位置可以分成三种 :
1]pE dZ*O0
内嵌样式(Inline Style)
S@iv._"A0内部样式表(Internal Style Sheet)
_Wde%p&~!F$C0外部样式表(External Style Sheet)
u(U-U{0^7}0内嵌样式(Inline Style)PHPChina 开源社区门户-e|Ap#_;Q{
)可以合在一起,形成一种样式。显示示例 浏览器缺省(browser。
2k FX[a"z`1zNC0
Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。
[wj*e"Ep-P0
<P style="font-size:20pt; color:red ">这个Style定义<p></p>里面的文字是20pt字体,字体颜色 是红色。</p>PHPChina 开源社区门户BSVC)E Pk
Sheets,中文可以翻译成串联式样式表。它解决了网页界面排版的难题!
QC L7ebE0
内部样式表(Internal Style Sheet)PHPChina 开源社区门户 ~n@:FFF K
内部样式表 是写在HTML的<head></head >里面的。内部样式表只对所在的网页有效 。
TQC6Pb0
<HTML>PHPChina 开源社区门户{iGQ(Yh*dM
<HEAD >PHPChina 开源社区门户n nx)@B!U
<STYLE type ="text/css">PHPChina 开源社区门户'Gv3G!DC;m
H1 .mylayout {border-width:1; b order :solid; text-align:center; color:red}PHPChina 开源社区门户Rg;F$l0kZy;f/{
</STYLE>
0j:lt/}/}&Sly0
</HEAD>
5S;lW5HB{c0
<BODY>PHPChina 开源社区门户DDo+z(i e
<H1 class="mylayout"> 这个标题使用了Style。</H1>
o/EQ/xqom1rsC0
<H1>这个标题没有使用Style。</H1>
;WcL[I%xN-O0
</BODY>PHPChina 开源社区门户y6c#Cg*Hq
</HTML>PHPChina 开源社区门户$r,NO*y/~j|
显示示例 内部样式表只对所在的网页有效。显示示例。
[|^ JRP0
<head></head>里面的。内部样式表只对所在的网页有效。PHPChina 开源社区门户6xb.jS9b/g7h
内部样式表(Internal Sytle Sheet )要用 到Style这个Tag,写法如下:
1{+Uj^fM2VNr0
<STYLE type="text/css">PHPChina 开源社区门户 T)rBY,K tD
......PHPChina 开源社区门户!R9{.l KC,lR
</STYLE>
)Vm'cnO`Y0
外部样式表(External Style Sheet)PHPChina 开源社区门户?4I2qJD3b
首先应学会写HTML。如果你对HTML还一无所知,请参见HTML教程。PHPChina 开源社区门户xB0^*S8q2N
如果很多网页需要用 到同样的样式(Styles),用什么方法呢?PHPChina 开源社区门户s{d5e3u%U
将样式 (Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
kD*r_%j6h%N9v-{ }.I0
比如可以用文本编辑器(NotePad)建立一个叫home的文件,文件后缀不要用.txt,改成.css 。文件内容如下:PHPChina 开源社区门户)RFn.d{9R-U
H1.mylayout {border-width: 1; border: solid; text-align : center;color:red}PHPChina 开源社区门户 l*U�LJ5AMl4n|^ H G
然后你建立一个网页,代码如下:
t [.t/M vPLIu0
<HTML>PHPChina 开源社区门户-b0d3I7kQfT
<HEAD>PHPChina 开源社区门户[ p-g9}"n}C(i'h
<link href="../ asdocs/css_tutorials/home.css " rel="stylesheet" type="text/css">PHPChina 开源社区门户s/h|5` UF1m
</HEAD>
$Tt u2q~ ]0
<BODY>PHPChina 开源社区门户8GEL;eh
<H1 class="mylayout"> 这个标题使用了Style。</H1>PHPChina 开源社区门户@jX3F6Vg P
<H1>这个标题没有使用Style。</H1>
W#~/o/Jb5U,}eL9G0
</BODY>PHPChina 开源社区门户)v�_)U0w c
</HTML>
_%gegKY0
使用外部(Extenal)样式表,相对于内嵌 (Inline)和内部式(Internal)的,有以下优点 :
INx"kM:s!J+_g @0
样式代码可以复用。一个外部CSS文件,可以被很多网页共用。PHPChina 开源社区门户 ?9~-MXF^1]3s
便于修改。如果要修改样式,只需要修改CSS文件,而不需要修改每个网页。
1i:T$c`E Q4r&@(Qip;^hb0
是Cascading,意为串联。它 是指 不同来源的样式(Styles。
!W np ~ /l0
提高网页显示的速度。如果样式写在网页里 ,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区 (其它网页早已经引用过它),网页显示的速度就比较快。PHPChina 开源社区门户^v1e-o4X`6ExGX
串联(Cascading)PHPChina 开源社区门户9xf[Pn pU6DBY
CSS第一个字母,是Cascading,意为串联。它是指 不同来源的样式(Styles )可以合在一起,形成一种样式。
z2zG0ye/?0
显示示例 如果你对HTML还一无所知,请参见HTML教程。显示示例!
-{se}$S5[4Z0
Cascading的顺序是:PHPChina 开源社区门户7}[-f#wZ-c
浏览器缺省(browser default )(优先级最低)
I&`VyhGm0外部样式表(Extenal Style Sheet)PHPChina 开源社区门户V'ta|e_6Y
内部样式表(Internal Style Sheet)PHPChina 开源社区门户 A9mN]c+t
内嵌样式表(Inline Style)(优先级最高 )PHPChina 开源社区门户VKf2a6a:?/`,OM+_
样 式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt,那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。
kE-l?f/d A"j3Ho0PHPChina 开源社区门户XrgV_}!["E
CSS边框属性
边框风格属性(border-style)
分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例。
)st to)B%Uu@:c/p0
这个属性用来设定上下左右边框的风格,它的值如下 :PHPChina 开源社区门户(f#qAV#tz
- none (没有边框,无论边框宽度设为多大 )
- dotted (点线式边框)
- dashed (破折线式边框)
- solid (直线式边框)
- double (双线式边框)
- groove (槽线式边框)
- ridge(脊线式边框)
- inset (内嵌效果的边框 )
- outset (突起效果的边框)
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度,它的值如下:PHPChina 开源社区门户v4ir!j-oh
- medium (是缺省值)
- thin (比medium细)
- thick (比medium粗)
- 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下:PHPChina 开源社区门户+H.[j!QM0u
o!b^Sn�f)?1j Q0.d5 {border-col or:gray ;border-style:solid;}
!{ `i#pY&qek0
边框属性(border)
color。例句如下 :thick和长度单位定制的CSS边框宽度属性示例。
7t m+fK^0
这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和b order-color。例句如下:
t ]k;w [!G0
.d1 {b order:5px solid gray;}PHPChina 开源社区门户4h+MQJ{f]
单边边框属性
上下左右四个边框不但可以统一设定,也可以分开设定。PHPChina 开源社区门户)X+TQ*z#]4j)R ok
设定上边框属性,你可以使用border-top, border-top-width , border-top-style, border-top -color。
ki7BZH,ceg0
设定下边框属性,你可以使用b order-bottom , border-bottom -width, border-bottom-style, border-bottom-color。PHPChina 开源社区门户m2R#/X L6d
设定左边框属性,你可以使用b order-left, border-left-width, border-left-style, border-left-color。
.j;_3B lT_0
设定上边框属性,你可以使用border-right, border-right-width, border -right-style, border-right-color。
,~2/;m-S/.E*^0
实例操作:PHPChina 开源社区门户 bo�tJ|+x-|
<html>
d7{�@u$F6@6A'OT)kN0<head>PHPChina 开源社区门户)e,}-zBN)R7B
<title>边框风格属性 border-style </title>PHPChina 开源社区门户 B F!]{f0L4M k
<style type="text/css">PHPChina 开源社区门户"]?#O~~
.d1 {border-style:none;}PHPChina 开源社区门户7Bc W�] R
.d2 {border-style:solid;}PHPChina 开源社区门户5|gM)GLf
.d3 {border-style:dotted;}PHPChina 开源社区门户LZ:XltIcX
.d4 {border-style:dashed;}
4n3[ Bw Qdvo0.d5 {border-style:double;}
IW o(B(c:jAP0.d6 {border-style:groove;}
aT#SB%{ H$C3V0.d7 {border-style:ridge;}
o&g7Q7s-C#AP0.d8 {border-style:inset;}
P{BmT/*qc0.d9 {border-style:outset;}PHPChina 开源社区门户Quq(H;T xA'l1r/f%P1X
</style>PHPChina 开源社区门户0}!DOPoN3^q
</head>PHPChina 开源社区门户Y2g*u;f'mq$e ???
<body>
;D&C-Mp*Q0<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>PHPChina 开源社区门户 k6z` t-C.srH
<br>
e7U&?,Hd |0<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>PHPChina 开源社区门户%L.ymV5T
<br>
L1C%K*r2L0<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
Z*@p.];L0YD8n0<br>
c$Gi kkR$[H0<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>PHPChina 开源社区门户(wDIF?O%x(g
<br>PHPChina 开源社区门户J OB�B@8Xe
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>PHPChina 开源社区门户[gNd Ju9/,^*W1M
<br>
(A*M }+C1b}o/i$l0<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
^&E-OH%Av)ck/0<br>
E i#c"G%p;n? v0<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>PHPChina 开源社区门户Jy'PHa8e+LE_+d$z
<br>PHPChina 开源社区门户F!Y hC z&o
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>PHPChina 开源社区门户6]}5V#Km2}gQ R2U_
<br>
)|'m/@#Y /~j�V0<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>PHPChina 开源社区门户*])b!E/W
<br>
(Jb2p-XC0<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>PHPChina 开源社区门户-/$m5[CTj�I6}
<br>PHPChina 开源社区门户j6qozy|
</body>PHPChina 开源社区门户+{RuW7Po"F4rXV
</html>
vS8pBZ,?,GG0
CSS边距属性
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
.kp2Y7B�[0
左边距属性(margin-left)
这个属性用来设定左边距的宽度。示例如下:PHPChina 开源社区门户n&m&U#lv S]z'}
.d1{margin-left:1cm}PHPChina 开源社区门户;i/ dq$N1F)] w9@u
右边距属性 (margin -right)
这个属性用来设定右边距的宽度。示例如下:PHPChina 开源社区门户k~+OQ7pTg8y
.d1 {margin-right:1cm}PHPChina 开源社区门户VtXUsAs3qK"q,g6J
演示示例请参照左边距属性示例,只要将里面的margin-left改成margin-right即可。PHPChina 开源社区门户Gw'qVs*lS5X
上边距属性(margin-top)
这个属性用来设定上边距的宽度。示例如下:PHPChina 开源社区门户U} ^]@O'K'[Q
U:ukt`'r0.d1 {margin-top:1cm}PHPChina 开源社区门户(ZR0L;V+bR/ww
演示示例请参照左边距属性示例,只要将里面的margin-left改成margin-top即可。
M�M+];[M0
下边距属性(margin-bottom)
你可以为上下左右边距设置相同的宽度。
XK8O:?e,Z UC0
这个属性用来设定下边距的宽度 。示例如下:PHPChina 开源社区门户K"Lx r.UGLH ~TN
.d1{margin-bottom:1cm}PHPChina 开源社区门户n WN0|/3C
演示示例请参照左边距属性示例,只要将里面的margin-left改成margin-bottom即可。PHPChina 开源社区门户%y#?'?g.c%T0a
边距属性(margin)
left改成margin-bottom即可
5W:o7B FVw0
这个属性是设定边距宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右边距属性。
d3p$cHr)ES F0
你可以为上下左右边距设置相同的宽度。示例入下:PHPChina 开源社区门户6H%`;Z tj'a'j%~$_]
/~O1kRRR�ZR0.d1 {margin:1cm}
wIX:^J sC'D0
你也可以分别设置边距,顺序 是上,右,下,左。示例如下:
k.R$yP1hD2Y0
.d1 {margin:1cm 2cm 3cm 4cm}
}8n#X7CJ1R x.g0
上面的代码表示,上边距为1cm,右边距为2cm ,下边距为3cm,左边距为4cm。
7JCr[b0
CSS间隙属性
间隙属性(padding)是用来设置元素内容到元素边界的距离。
Nf.^qd5N�p-lVW0
左间隙属性(padding-left)
你可以为上下左右间隙设置相同的宽度。PHPChina 开源社区门户1{Sy[*rc*/,c
这个属性用来设定左间隙的宽度。示例如下 :PHPChina 开源社区门户/n3Eyp4Jm
6aiY5hj]HQ]0.d1{padding-left:1cm}
4f-Yu8QwCQ0
右间隙属性(padding-right)
这个属性用来设定上间隙的宽度。
iQQ'j,TJ,g0
这个属性用来设定右间隙的宽度。示例如下:
c1jB&T6c5d"l_0
|4]8x0TfY$k0.d1 {padding-right:1cm}PHPChina 开源社区门户;]Hu wr8J�w@ n
演示示例请参照左间隙属性示例,只要将里面的padding-left改成padding-right即可。PHPChina 开源社区门户i&l5cx8Bg$nDV
上间隙属性 (padding-top)
这个属性用来设定上间隙的宽度。示例如下:PHPChina 开源社区门户9SQ F ] z
Z-y#zU,z(Jl^0.d1 {padding-top :1cm}PHPChina 开源社区门户g2DC)l1VpNCL
上下左右间隙宽度相同?
0/e$F5IX2t3IlwR0
演示示例请参照左间隙属性示例,只要将里面的padding-left改成padding-top即可。
]nVN{'j'u_Q0
下间隙属性(margin-bottom)
这个属性用来设定下间隙的宽度。示例如下 :
7z&@ D?jvB}B0
;` `"w+vpL(nH0.d1{padding-bottom :1cm}PHPChina 开源社区门户7q?'euD ]�Z/S.}
演示示例请参照左间隙属性示例,只要将里面的padding-left改成padding-bottom即可。PHPChina 开源社区门户_||n2/{+Y EF
间隙属性(padding)
这个属性是设定间隙宽度的一个快捷的综合写法,用这个属性可以同时设定上下左右间隙属性。
0K|n4z5j:/D?K0n+M0
你可以为上下左右间隙设置相同的宽度。示例入下:
IOEv#GxDz0
.d1 {padding:1cm}
o&~p7d nsh0
-left改成padding.PHPChina 开源社区门户se-~r-{
你也可以分别设置间隙,顺序是上,右,下,左。示例如下 :PHPChina 开源社区门户 {:G7|-^2X6r+y*A
.d1 {padding:1cm 2cm 3cm 4cm}
*}-SN Kd,RV9ks7{0
上面的代码表示,上间隙为1cm,右间隙为2cm,下间隙为3cm,左间隙为4cm。PHPChina 开源社区门户 ~m.[,f1t cRx
CSS列表样式属性
列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值 :PHPChina 开源社区门户`;_5K_.A'L
- disc (缺省值,黑圆点)
- circle (空心圆点)
- square (小黑方块)
- decimal (数字排序 )
- lower-roman (小写罗马字排序 )
- upper -roman (大写罗马字排序)
- lower -alpha (小写字母排序)
- upper-alpha (大写字母排序)
- none (无列表项标记)
(list-style-type),列表样式位置属性!
1z@UP9M0
列表样式位置属性 (list-style-position)
U3a/mm Y%N0
列表样式位置属性(list-style-position)有两个值:PHPChina 开源社区门户a'b4s8dl
- outside (以列表项内容为准对齐)
- inside (以列表项标记为准对齐)
list-item marker)的类型。有以下值.
E*y|o5R&p'P0
列表样式图片属性(list -style-image )
列表项标记可以用图片来表示,用列表样式图片属性(list-style-image)来设定图片。示例代码如下:PHPChina 开源社区门户y$l G7a~ mG"f5R
ul {list -style -image: url(../images/css_tut orials/dot02.gif)}PHPChina 开源社区门户8c*IZ-R,biQ%h
none作为列表项标记的列表示例 这个属性是设定列表样式的一个快捷的综合写法。
#e!z:Q(I.W!f.M0
列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type),列表样式位置属性(list-style -position)和列表样式图片属性(list-style-image)。示例代码如下:PHPChina 开源社区门户G9`/HLvLN1v.}N6S u
[~g/m}jW%TL0ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}PHPChina 开源社区门户 W;R3{9U!n8m
PHPChina 开源社区门户] k:c} _Ni,W~ z
CSS语法
"uce}m+nLh0
基本语法PHPChina 开源社区门户 hz9|8G J'T*O
演示示例 你也可以将相同的属性和属性值赋予多个Selector!
f0g%n Z4a6P0
一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性
V/q$[ZmN0
(Property),属性值(Value)。PHPChina 开源社区门户+K?po`Wq
selector {property: value}PHPChina 开源社区门户+P&]%eem
>)的字体颜色都变成红色。其中right和center就是两个class。
I-Ci)O h+G3h!e0
举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。PHPChina 开源社区门户`x-]9r%/%Sp
p {color:blue}
4E*OMl&iB-i0
HTML中所有的Tag都可以作为selector。PHPChina 开源社区门户3v$e~"C kRc'o#R
注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一PHPChina 开源社区门户XK+s9@pc!s6E:`'RW:k
个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。
5?!Wu l*q0
p {text-align:center;color:red}
*F FM/o4X ~:p`0
为了提高Style代码的可读性,你也可以分行写:
7B.Rj_~ T8w.Oaa0
p
SwpwHm(R/]l0
{PHPChina 开源社区门户4O.cc6v7hT
text-align: center;PHPChina 开源社区门户,pb B YS
color: black;
2}vh2Uc0
font-family: arial
4Zg/o�K$[%V`F,^0
}
?+I8]/E:m'[1g7Jp0
组合(Grouping)PHPChina 开源社区门户c2t{([} N
你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。PHPChina 开源社区门户,JZ:`1M vz*y2f){
h1,h2,h3,h4,h5,h6PHPChina 开源社区门户V(?6bs)]
{PHPChina 开源社区门户 D QJ @2a0`$`vb"`1M
color: red
_KEP.K(y*y0
}
~/]!A�?3U+MN,~exZk0
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。PHPChina 开源社区门户-D N Ha-Z4u#j
Class Selector
wj LT3?1|0Selector就没有Tag的局限性,可以用于不同的Tag。
rEy2k;Hq2}oZ0
利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落<p>有两种样式,PHPChina 开源社区门户w?VuZ0Q
一种是居中对齐,一种是居右对齐。你就可以写如下样式:
+V#dP%a#~0J0|? SmE L0
p.right {text-align:right}
c L1CAd;b0
p.center {text-align:center}
y/@-MStM#C_6d1W]b0
其中right和center就是两个class。然后你就可以引用这两个class,示例代码如下:
#zHK0t } F im0|0
<p class="center">这一段居中显示。</p>
#@2XH5YH0
<p class="right">这一段是居右显示。</p>
Wwm'] }FJ0
PHPChina 开源社区门户V e G!O�b]b'_$RzQ?
下面的代码p就是selector,color就是属性!PHPChina 开源社区门户s ^D�X~v4c U
你也可以不用HTML Tag,直接用.加上Class名称作为一个Selector。示例代码如下:
2JSX�hZ(do0ix0
.center {text-align: center}
V9/{Z?&`4}$q8ed0
这种通用的Class Selector就没有Tag的局限性,可以用于不同的Tag。比如:PHPChina 开源社区门户1g:~+D A(}z,_)`
<h1 class = "center">这个标题居中显示。</h1>
`o-bPz2? i:Z b/(i0
<p class = "center">这个段落居中显示。</p>PHPChina 开源社区门户z$VG[q9TM
PHPChina 开源社区门户6u3p4G zNi`W+`,g:k9T
Contextual SelectorPHPChina 开源社区门户)N lK"KO1wd'k({
你可以为嵌入其它Tag的Tag定义样式,示例代码如下:PHPChina 开源社区门户d7Uk.}f9z/B.B7~
p em{color: red}PHPChina 开源社区门户d/{+a ?7B4nt
Em这个Tag嵌套在P里面。p em就叫做Contextual Selector,定义嵌套于P里的Em的样式。这个例子表示,PHPChina 开源社区门户k(v|8lsV?S
在P里面的用Em这个Tag标记的字体颜色是红色。
$g-r/ n(C6N i d0
PHPChina 开源社区门户;Z9VG^ w5qe.KO
CSS注释
[q6i1vog0HTML中所有的Tag都可以作为selector!PHPChina 开源社区门户#c ?{H9Y2q
为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,PHPChina 开源社区门户/P S y^$Z1D
以*/结束。PHPChina 开源社区门户j.bvi?q
/* 段落样式 */PHPChina 开源社区门户0k B [7n:X"V2_#s kP
pPHPChina 开源社区门户}-S9I]uB)yQUvd
{
An-/$nb3y#^0
text-align: center;PHPChina 开源社区门户 o1wH2ngk9ZA
/* 居中显示 */PHPChina 开源社区门户+_cPr Yd�~Q
color: black;PHPChina 开源社区门户q,ntmu^+F
font-family: arialPHPChina 开源社区门户%/)c!|AQS~0cK
}PHPChina 开源社区门户9F5r0Lxl(}8R9][t
PHPChina 开源社区门户(vj4rE6H"Q-cSz
CSS字体属性PHPChina 开源社区门户Lh+_!` Zi:|/T
PHPChina 开源社区门户J~6}oLn{Z3OKBg
字体名称属性(font-family)
~L Vl*em%jkE0这个属性设定字体名称,如Arial, Tahoma, Courier等。例句如下:
W.y2a*D&luh0
.s1 {font-family:Arial}PHPChina 开源社区门户6i5_:}1g?6K TnA
PHPChina 开源社区门户[#E%e9tk rn$i fTj
字体大小属性(font-size)PHPChina 开源社区门户Y"EP3yM2eoC
这个属性可以设置字体的大小。字体大小的设置可以有多种方式,最常用的就是pt和px(pixel)。例句如PHPChina 开源社区门户9H}_ pd:TdG f
下:PHPChina 开源社区门户 j/vjtuJHn
.s2 {font-size:16pt}PHPChina 开源社区门户fab~;rHx*a
7i6kg8s_@CZ_0字体风格属性(font-style)
LI+P5O} R7]IP*j0这个属性常用值是normal和bold.PHPChina 开源社区门户1Gi Sx/H9w
这个属性有三个值可选:normal, italic, oblique。normal是缺省值,italic, oblique都是斜体显示。PHPChina 开源社区门户p FT]*z I7J)r://Rm
例句如下:
LcK(a1YZq1k0
.s1 {font-sytle:italic}
3[1ZD,R6r0
PHPChina 开源社区门户+J1VB J.{'l4Ge:Nb%B*N
字体浓淡属性(font-weight)
#T6fm,tv|S7`O,]0这个属性常用值是normal和bold,normal是缺省值。例句如下:
w.Q-TmF3G5C/w0
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>PHPChina 开源社区门户1E$Q$`(@:_ Es|0R
$vl8~4j:t MJ0字体变量属性(font-variant)
1v"o+E*Q7|ra/R(lx0这个属性有两个值,normal和small-caps,normal是缺省值。small-caps表示小的大写字体。例句如下:
@b H)T(G.Y^0
.s1 {font-variant:small-caps}PHPChina 开源社区门户+x!Y yU6A-b.nyo"Ar@|
PHPChina 开源社区门户"Mx'z:E4gD F
字体属性(font)PHPChina 开源社区门户aSZ2y%_]T(n
normal, italic!
[)E)j{;q/'M1o0
这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style),字体变
L9` e k3e {/AFH&U0
量属性(font-variant),字体浓淡属性(font-weight),字体大小属性(font-size)等属性。例句如下:PHPChina 开源社区门户D^:/q+Kr
.s1 {font:italic normal bold 11pt arial}
p,UD-NOJ0
参见CSS常用文本属性。caps。PHPChina 开源社区门户Z%N`*L:W&u+p(l
{/R??!k0字体颜色(color)
D~ Jo:S:V0字体颜色用CSS中的color属性来表示。PHPChina 开源社区门户%iRHU@N/o)h-m`6`
PHPChina 开源社区门户_[Bk.uT0b L
CSS常用文本属性
#UE/e]r:Y!V.o/0
PHPChina 开源社区门户 ]G e]8|"^*? ^.^U4R_
文本对齐属性(text-align)PHPChina 开源社区门户,L[ p9BlT-r
这个属性用来设定文本的对齐方式。有以下值:PHPChina 开源社区门户*m aW/U5J/{'/3W
left (居左,缺省值)
't$[eS6v@0right (居右)
v P ~@*Lk0bKe0center (居中)
)J7V4r w)E1~H0justify (两端对齐)
K�C+BBe-D5_0示例代码如下:PHPChina 开源社区门户JXG gnPB;nH6O
.p2 {text-align:right}PHPChina 开源社区门户YU?6?c
TC'L/npQ!f0
文本修饰属性(text-decoration)PHPChina 开源社区门户T D0oq-X {"`
这个属性设定文本首行缩进。PHPChina 开源社区门户/[7Lsw /
这个属性主要设定文本划线的属性。有以下值:
^*z#|L�e4n e.z9Z0
none (无,缺省值)
wO,W!Bd0underline (下划线)PHPChina 开源社区门户E;i)e [2ZR
overline (上划线)PHPChina 开源社区门户s r$]Z1T ~y
line-through (当中划线)PHPChina 开源社区门户;`,O%cp0U#F
示例代码如下:PHPChina 开源社区门户~,?0ZAo5F�Q3g
.p2 {text-decoration: underline}PHPChina 开源社区门户3{"]QagDS^
Wi-F(h}c;Mj4r9P0
文本缩进属性(text-indent)
Z{5U'F ^&Y:IPZ0这个属性设定文本首行缩进。其值有以下设定方法:
;/HHf5Jcu k6TX0
length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
'lC'QU[/H-Gr0percentage (百分比,相当于父对象宽度的百分比)
fkgx-[v0示例代码如下:PHPChina 开源社区门户%q7p?;n,{tQ
.p1 {text-indent: 8mm}
zhrHIe0
PHPChina 开源社区门户(y5N1s)d/FEy2K1t
行高属性(line-height)
`W"Ew ?j&y+M0这个属性用来设定字符之间的距离。
dT![:{)N%cH:~$UN0
这个属性设定每行之间的距离。其值有以下设定方法:
E2a tkNG5f0
normal (缺省值)PHPChina 开源社区门户G#V9i"F{G
length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))PHPChina 开源社区门户{@4}!fvB%u
percentage (百分比,相当于父对象高度的百分比)
(@_z0q_0示例代码如下:PHPChina 开源社区门户*QL_*r+B0_)H;r U%G
.p1 {line-height:1cm}PHPChina 开源社区门户u+ofB+|D8e
PHPChina 开源社区门户 wk IY1Z
字间距属性(letter-spacing)
gdu)bk0这个属性用来设定字符之间的距离。PHPChina 开源社区门户[:^k8D%c$v$A
normal (缺省值)PHPChina 开源社区门户4VbN"C&D TRM
length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))PHPChina 开源社区门户Pwa9gdrT;i
示例代码如下:PHPChina 开源社区门户@Et)m [6xP
.p1 {letter-spacing: 3mm}
q$rX$qr#A0
PHPChina 开源社区门户T-@n?8s0Q,^;r
颜色属性(color)PHPChina 开源社区门户$zV;Nh Pe9`a
演示示例 示例代码如下。PHPChina 开源社区门户$~0l2z4@NGF
用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color
2be z7bh�E;_5n0
Reference)。示例代码如下:PHPChina 开源社区门户~Rz~*Bl_w m%L
.p1{color:gray}
w*jo#iC(M(LlB0
PHPChina 开源社区门户3["}B;`+@-C)E
CSS背景属性PHPChina 开源社区门户/eHSI n Fs%l
_9?*H7b2_qyCz0背景颜色属性(background-color)
3U_P/y9|'yi9`0这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。PHPChina 开源社区门户&| w'E [ U6}
body {background-color:#99FF00;}
V`%If(JXi�TF0
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。PHPChina 开源社区门户E%P2Kh4HN&b"K!|
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
8rY oP a|z?v0
@`1/1}$H `A7`0背景图片属性(background-image)PHPChina 开源社区门户k{T"^O5H?�x j
这个属性为HTML元素设定背景图片,相当于HTML中background属性。PHPChina 开源社区门户$hl%J3Ocxk/
<body style="background-image:url(../images/css_tutorials/background.jpg)">PHPChina 开源社区门户F%F{7w0g!B-JlL F1O-Y
上面的代码为Body这个HTML元素设定了一个背景图片。
^:^/z[CpF0
PHPChina 开源社区门户!QhC&rj:`s*M'P.X
背景重复属性(background-repeat)PHPChina 开源社区门户Pb1qj+{*Wafb'l:W
这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image
JZ2O7O#M/aA3r Ck0
属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。PHPChina 开源社区门户.Si o SK1h:f7N8_
repeat-x 背景图片横向重复
7rnZ$Dy {S0repeat-y 背景图片竖向重复PHPChina 开源社区门户'A!I"b:Py?3D
no-repeat 背景图片不重复PHPChina 开源社区门户(o^![x3gSd[P.L!o/?
body {background-image:url(../images/css_tutorials/background.jpg); background-
0ow:{mt k0
repeat:repeat-y}PHPChina 开源社区门户k,l)` kC} k
上面的代码表示图片竖向重复。PHPChina 开源社区门户 c:@y'f4_)|
/S^s6A5^0背景附着属性(background-attachment)
]}3T'p#Pe:y0这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有PHPChina 开源社区门户Mg5^6^/^ L/O#LE
两个值,一个是scroll,一个是fixed。缺省值是scroll。
W"me^(ZK0
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-PHPChina 开源社区门户{)k%laKe*m5g
repeat; background-attachment:fixed}PHPChina 开源社区门户 y4x_qD3em,W}9B}
上面的代码表示图片固定不动,不随内容滚动而动。PHPChina 开源社区门户ED0b cJ#e kj
QM5i3aP0背景位置属性(background-position)
9h)JSXQj5ZI0演示示例 缺省值是scroll?
pYqn4o(h^/@0
这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。PHPChina 开源社区门户5x%B-E-eM9q
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-PHPChina 开源社区门户8k.k6lb&d/m3S
repeat; background-position:20px 60px}PHPChina 开源社区门户 E S*y/y5A
上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。
I'noa%Q!K0
8f�J8Qs6sg'dia0背景属性(background)
k6ALAYL]0这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image,
7_,j-XP`NB:kFb0
background-repeat, backgroundattachment, background-position。
$Qz+~Uh H+P0
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40pxPHPChina 开源社区门户%U%t:W-e[
100px}PHPChina 开源社区门户i*P&j5X.Y~;o"k'?
上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背
}M],g1t0W%Fwz0景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。
CSS 样式属性大全相关推荐
- 常用css样式属性大全(中文注释)
一 CSS文字属性:color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- CSS style属性大全
CSS style属性大全 I 元素 | i 对象 IMG 元素 | img 对象 DHTML 对象 IFRAME 元素 | iframe 对象 --------------------------- ...
- JavaScript文档DOM对象处理HTML→document属性方法、write、getElementBy**、getsetAttribute、节点操作方法、innerHTML、操作CSS样式属性
document文档对象 document.write getElementById()ID获取元素 getElementsByName()名字获取元素 getElementsByTagName()标 ...
- css样式属性值无效问题
我出现的问题是单位写错导致css样式属性值无效,如图所示,倾斜度单位是deg而不是dep,原因:对此单位不熟悉: 经过看其他人文章发现还有可能出现以下问题: 1.css写属性值,一个标签的中括号后面加 ...
- 前端JavaScript DOM BOM 自学复盘 D1(DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数)
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
- textarea滚动条CSS样式属性设置
<textarea>滚动条属性CSS样式设置,包括textarea溢出横竖滚动条设置.隐藏滚动条.滚动条颜色.水平滚动条.垂直滚动条设置等. textarea滚动条CSS样式 textar ...
- html和css的属性大全
一.HTML属性 1.字体属性(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般只要用数值就可以,单位:PX.PD 2.样式 {font-st ...
- jQuery CSS 样式属性
css(name) 访问第一个匹配元素的样式属性. 返回值 : String 参数 : name (String) : 要访问的属性名称 示例 : 取得第一个段落的color样式属性的值. jQuer ...
- CSS样式属性单词之Left
通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...
最新文章
- Jupyter Notebook实现直接调用R
- 更快更强,谷歌提出SWideRNet:全景分割新标杆来啦!
- 推荐阅读20101115
- tp3.2.3保持搜索条件的分页
- Find Minimum in Rotated Sorted Array II
- Python判断文件、文件夹是否存在,不存在则创建
- 万兆以太网测试仪应该具备的测试功能
- 英语语法学习2--句子的成分
- .NET Web实时消息后台服务器推送技术-GoEasy
- 在thinkphp中引入自定义的敏感词库
- Android获取系统字体的大小,修改android系统字体大小
- 3D游戏案例:滚动天空(超低配版)
- js监听中文拼音输入开始输入和输入完成的事件,用input事件用拼音输入法的大坑,由这两个事件来解决
- Python学习笔记(十五):python 中的面向对象
- 五层木桶理论/五层木桶理论
- C语言之大端模式与小端模式
- WWDG 窗口看门狗 知识详解
- 品牌策划的驱动内核,营销美学战略和视觉营销策略
- [UE4]如何下载并编译UE4源码
- 2016-08-14-京东笔试和面试(Java方向)