|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
/ { I: G% r" [& j
' x! m0 \" e/ P0 l2 Z* N, [1.基本语法规范3 D- x0 z7 _" V; n0 @" @
分析一个典型CSS的语句:( [. F4 h4 A- S! t4 ?& i
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
, f7 v0 ?, r' Y1 i$ s$ _" h其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
3 a Y4 A) ?. x/ c" H/ t) _样式声明写在一对大括号"{}"中; / K* n Y6 U3 @& m: [
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
2 A4 C* X5 Q, ], x" M7 g1 e"#FF0000"和"#FFFFFF"是属性的值(value)。3 x( E) j ]$ M/ O m
; N3 j6 J+ Y6 o: ^: n# D w8 d9 L/ S
2.颜色值" g" v1 ?* t- H7 x
" g5 L, h" e4 J% w8 q; |& `7 s0 V/ |颜色值可以用RGB值写,例如:) x( g0 x1 f: J- [7 _
8 a, R% n j# v# A9 P
# I. U+ m& r4 |! V6 l,也可以用十六进制写,就象上面例子
, v0 F0 k7 {; ^% c; s0 V8 n* q
. ]. J& B* w. z3 ^! ]
+ x$ y/ C! d- C; G s6 M5 f如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
4 N( R- f: t/ `. Y
Z# n/ p6 d: L! {- d4 @% p ?3.定义字体" c; X: p. `! a4 J3 S" M' o+ L2 E
web标准推荐如下字体定义方法/ p* P/ b {- Z2 Z2 C3 b
# }' e* F5 ]2 q6 x4 t! ]
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 [) W' `4 c: x# Q( |字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 U' G+ t# `4 b1 r
Lucida Grande字体适合Mac OS X; 1 N( ]% t$ D. S# l# v6 }4 D, o6 n
Verdana字体适合所有的Windows系统; : N2 z$ V. t5 C' M# g& F$ i
Lucida适合UNIX用户 ( N$ j6 e7 f8 f4 F% b
"宋体"适合中文简体用户; - D5 J( @9 h* J. f5 v
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
/ {2 O3 `. j. y4 b: l+ Q c( D1 U: ~( u, b
4.群选择器2 a/ o9 J3 O. f. ]
' R/ E0 v$ x0 K5 K当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:$ G* |+ d; ^& _- m9 ^4 C% G
$ N d# V5 \. f( ^3 Z p, td, li { font-size : 12px ; } . `1 n" L9 s" N* C2 R9 J2 f
就是给li下面的子元素strong定义一个斜体不加粗的样式
, p& S O% n* l# P% b4 P# ~1 v7 V, ]0 i( [
6.id选择器- Y1 b& f( B% I' y) p
; a$ j% O! y: y; a0 q& q; {- R% I6 T
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层1 }) V0 b0 A% `
; m- H! m N2 C
T @: m6 F" Y' g; q# E然后在样式表里这样定义: q/ k- Q5 s0 `! i+ I, f
% y+ u G6 i+ I1 l# f( ^1 ^. J
5 j8 h6 i, `! J/ g#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
+ k- _ y5 l& A$ [4 K其中"menubar"是你自己定义的id名称。注意在前面加"#"号。7 A' V. ?! D8 L5 }
& J9 {' f& h5 g0 hid选择器也同样支持派生,例如:8 b& L/ M2 i$ \; G4 M, S* `( s J
#menubar p { text-align : right; margin-top : 10px; } 8 [. b0 q# N% K" L4 Y
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。) @1 ^ j- j9 C. h
4 ]0 m' U# x6 |- N- \ j6.类别选择器3 Y) T( W/ _0 [! c% l9 ]# u# {
/ i+ r' y1 B c9 ]# H
在CSS里用一个点开头表示类别选择器定义,例如:
" d* ]* g) K$ I6 K( t( r* |.14px {color : #f60 ;font-size:14px ;} 2 x/ {, g( |1 v0 L3 O6 G0 N
+ g. J0 V4 F/ P- q- W2 T, B2 l) C( _
在页面中,用class="类别名"的方法调用:
/ V, R( p2 u5 P<span class="14px">14px大小的字体</span> : o4 |- X* i. X5 T
9 K) F/ o% q6 J
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
! e& P9 f% Y$ \8 Q# F) m
2 k: Y& C! _4 a7.定义链接的样式) ]- S: B/ j6 C" k! s
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ d. x: z" x! u; p+ a6 A. u
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 h, ~6 s8 S( ^% @" V, y V, H( Y
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}0 _( j& t h$ f' R
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}. M5 u% O& }1 O5 |9 L& l! M
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 C5 Z3 g7 n( `
) t% Q' n# ~! v# y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|