|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 T0 x9 s# Z, e1 E9 |$ T$ L) w2 C
( q! `2 i5 q$ m4 f v- @1.基本语法规范
+ U" ^9 c8 J" J分析一个典型CSS的语句:% a/ x& i6 q: W2 ^( z/ H2 }, C
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 3 t( E! P* J5 ^% v% w
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
1 F) ~/ v' N( N/ K( P1 {样式声明写在一对大括号"{}"中;
& V7 Z2 j, W% T7 uCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
, j# m2 y) w% \3 d z! l: e0 V"#FF0000"和"#FFFFFF"是属性的值(value)。
9 ?9 y2 s0 h2 {5 T* O4 s& b! J" ?4 V( I
2.颜色值( \. p% x. F- \/ q
$ R8 }0 |# y: f( r8 {, r
颜色值可以用RGB值写,例如:+ A) K' `* n/ c2 U4 d# U, M
# e* l) [* e5 d8 r- b g! L. [8 H: G
9 J- y6 h: G9 f% G/ o; [1 x
,也可以用十六进制写,就象上面例子
( g* a+ d4 k3 r" g' U0 ~8 L0 N. K
; G h3 R* l; I5 v如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
7 P% N9 i4 h' u9 Z4 r! M) ^. L! t/ S) |; w# m( q( e
3.定义字体
L0 N. o/ c# ]- Tweb标准推荐如下字体定义方法& u G; d9 n( @. E" w, c
. b Q5 z4 A! Z: `4 nbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) R0 I, Q: D3 T' H7 J字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
6 v6 L! l3 m4 j8 O- eLucida Grande字体适合Mac OS X; ' \- c. x1 P# O* A* [% J
Verdana字体适合所有的Windows系统; 0 L& ^; X, [: e6 O h
Lucida适合UNIX用户 6 o6 J) ]: X y* C/ _
"宋体"适合中文简体用户; ( r, v; n6 T8 R% y5 V
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
' v9 u5 U7 q$ Q7 [8 _. e- m' ?5 C# X5 e! E% T0 S" B1 z
4.群选择器
; U( _3 _6 [$ u0 @: _8 Y1 d3 J, q( C6 M* T2 }, G
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
' h s1 E2 A) p7 j0 `! D5 ]% J6 ]6 i9 P! D# I6 e
p, td, li { font-size : 12px ; } 7 s7 n$ u: u9 M6 J& h- x- }
就是给li下面的子元素strong定义一个斜体不加粗的样式6 i7 i. T2 N" s6 r) w. ]
5 ?; v7 g& K7 @* [
6.id选择器
4 X7 p) m$ y0 `' }4 q5 H# M- c' _7 g/ X+ N& y; d; L
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ |5 }5 u' k/ H# ]
, ^5 ^/ G. e2 r* x) m. L7 T) W" S
/ e0 W% H G, f: o; N0 I: d然后在样式表里这样定义:: S' U7 W9 b! k" [3 m( a3 k j
8 j/ Z6 N4 z- |8 X( Z
x" m; y. G; n' e. _#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 k* n1 g- a7 x& M
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 b2 _; l* x& U/ `& R( j/ u1 u/ r- \3 Q0 e9 H* ~& H7 x; v. R
id选择器也同样支持派生,例如:
# u+ V1 ?. M" e: J* Q, ?% f$ x. B#menubar p { text-align : right; margin-top : 10px; }
! Y! o1 V% r/ e# Q这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& m, n* {, s$ l7 t' b5 L' I5 ?; O1 {! b! M: e* A
6.类别选择器5 ?9 ^2 h1 H1 p, U$ V$ g- n/ M
|( w6 |2 Q$ d2 A1 F) `6 j在CSS里用一个点开头表示类别选择器定义,例如:
6 ^! }3 D2 D! ^& ?( q.14px {color : #f60 ;font-size:14px ;} , [% n9 u! z; L }0 s i, w" T
" d4 F1 b/ B. q
在页面中,用class="类别名"的方法调用:5 ?7 c2 D% `& o% |$ b, i
<span class="14px">14px大小的字体</span>
% ?7 B2 w/ z: q8 j. O$ B
m- J7 C! J2 s1 j这个方法比较简单灵活,可以随时根据页面需要新建和删除。
& ]2 | B: |$ L
2 C3 w, h9 Y6 l8 P& u7.定义链接的样式
0 C/ s: }1 |. z: E# T( k' ~' BCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:, x- X" t* v [% W4 R k" `
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
, v# x5 o/ C: la:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 j( p( J( f: Q0 W* i, Ia:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 K ~3 Z9 w4 [; x- f
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} " m( d9 ~" d8 c% I/ V" p% U
" g. f& t0 i, ^. C3 W* ]: s) G+ |1 x以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|