|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。- g% @* \4 ]3 p
0 z$ S( Y: h( X6 U# |2 X- |" }6 }1.基本语法规范* n) F0 S/ A3 m. A3 I8 m* W ^( Q
分析一个典型CSS的语句：3 @4 F* O5 x: R) Z
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& k* X G2 g8 b9 T其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
( C& O- f# q* b/ G1 g' w样式声明写在一对大括号"{}"中；
2 Z# X& P9 z) `+ i( i5 ]# cCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 4 P: b: s+ ` r& w7 g& ^
"#FF0000"和"#FFFFFF"是属性的值(value)。
) h/ b& x! W# x1 z: @5 v @; M) l) T1 q! C- u6 F5 w Q
2.颜色值* |8 ]" \; M+ H( w3 v7 U
- Z1 m4 s" x! O$ F& U" Y; X. m颜色值可以用RGB值写，例如：
* m1 p' c# V5 V Z( T: w
$ m0 G2 c1 @$ _+ m& c4 Z% O' U9 Z7 S, G) ^# s) L
，也可以用十六进制写，就象上面例子3 R# r) Y* \$ O8 j
: I1 _; Q+ n& S5 n+ {" a
1 r ~) e9 q3 c) u! u如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
$ G- r3 t ~: }( G4 d
0 P0 O3 d' l( H5 x8 W% J4 u* |$ H9 Q3.定义字体
/ R4 i$ C/ X2 c9 }8 j x$ K8 rweb标准推荐如下字体定义方法% e! X* J8 H5 ~9 B
! _0 V& A# a" e
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: U/ d" k! Y: f! ~3 h' i* R" Z. F/ _字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 5 c) F) U" d5 b
Lucida Grande字体适合Mac OS X； . d3 Q) W( t( p: K6 b
Verdana字体适合所有的Windows系统； ( F: l6 d6 T/ ^" @- a+ b8 F1 u% t
Lucida适合UNIX用户
~" R; P7 P# A; i, a( ^& w"宋体"适合中文简体用户; + E2 e: q5 t8 S1 S
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;$ \& z/ }1 |4 n# z- t
: n; a; ~% q8 ~3 \" G: Z3 g8 ~( d! Q
4.群选择器4 @- [- M# S# |( A7 V
* D Z; h+ o4 f4 _# c
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：, p/ ?5 O4 ~* R3 o$ |$ V* L
5 x2 J, P& r: o' a' w7 w6 L! Y
p, td, li { font-size : 12px ; }
' S' D/ G3 x# B- ~就是给li下面的子元素strong定义一个斜体不加粗的样式* S3 o9 }. }, f4 l; `' X/ D3 K
0 {- p7 ]: W1 f4 T8 }5 z6.id选择器
, F+ \4 k1 l7 U, f
' H0 M9 B x5 G2 e用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 Y* ~+ r7 @! m4 z! c
1 K1 c# ?, D- L% C2 _
5 `0 ^0 u& Q6 [. G- R4 c0 i然后在样式表里这样定义：
+ f8 o, | o2 X6 y! N( {, ^, H& O7 x( M
2 u/ _9 |/ l6 ?8 e6 |7 g8 D#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 p' H: s- j; K- _; M5 r
3 y/ v2 a" T( e( ]4 ]. yid选择器也同样支持派生，例如：
# t1 m7 H+ A( c( Q0 e" F8 w4 k#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& b4 j+ w& w9 n5 B' l) g5 I7 d
6 j. `4 H5 w8 [7 E: m: `6.类别选择器- O2 K, E" K7 }6 z* P* j7 v
; w- `* u" i: g( b/ D0 n* t在CSS里用一个点开头表示类别选择器定义，例如：3 S- }9 x7 B7 o3 d* W! i0 G
.14px {color : #f60 ;font-size:14px ;}
1 [& A2 \# O; r( h9 v! p. A在页面中，用class="类别名"的方法调用：
G, ?$ u- q O4 X2 O! e& f<span class="14px">14px大小的字体</span>
& u1 @1 S5 }, e: W
这个方法比较简单灵活，可以随时根据页面需要新建和删除。1 `4 z1 L2 [( m* V z' b2 K, Y
9 B1 e6 V6 R8 O i: o# T3 w& k; |
7.定义链接的样式8 a& w5 _ A p: M) t$ [8 X
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
. o5 r1 H4 H* `( z3 H1 wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}0 x" F M/ L' m! x/ I j
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 a, U) k) H+ S) S4 \$ w' ia:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
" k8 _ a9 J) A5 i ja:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
i* k3 v) Z# Z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
