|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
' v2 ?- T' }0 K: B y
0 c& W9 B* ?4 C/ L s! p1.基本语法规范$ i B! M: L& e5 }0 D* l
分析一个典型CSS的语句:7 t' x {: I. E6 D+ h; B8 A
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 5 E1 K' M5 S$ @ G$ E( s) ]
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ' ?$ x* D0 a) g* {: d' o; E
样式声明写在一对大括号"{}"中; # J; Y% H; B& T$ [' N2 P
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; , N5 |' t( y0 H4 P" ^
"#FF0000"和"#FFFFFF"是属性的值(value)。' }# D7 V* g% T _( r# G
/ \; R6 H" e% h8 R& M, O
2.颜色值
' O/ F- D u' a; {! H4 i6 }
/ X1 u* [5 w, J; q8 o V( n颜色值可以用RGB值写,例如:& ]+ K% m" `+ r" v
5 P5 f1 d3 A: q9 b: Q( J( H
! ~. y Z- G/ J3 t/ j( g9 x,也可以用十六进制写,就象上面例子- ]! ? d9 a$ K, f$ r
, y0 X1 i6 A0 r$ Z9 U* c
& a+ B* o- t& {4 o2 S如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。4 a! n. o5 t1 l. d
/ D9 G9 u6 t. g' o0 o3 j
3.定义字体6 S$ {7 I! O& ^5 G3 A! X! d0 b
web标准推荐如下字体定义方法6 m( T$ q1 g0 R* B: N+ M
, `; I: n+ `, ]- t9 H4 m
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) f6 E$ E$ s, R1 z J9 ?9 F字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( f1 Y) i' B' u: c- }Lucida Grande字体适合Mac OS X; ; b* I5 D' [2 n. f
Verdana字体适合所有的Windows系统;
) q$ y' d1 s: G! xLucida适合UNIX用户 2 {1 u' ~$ M: O. K% K
"宋体"适合中文简体用户;
7 H7 Z$ j: _9 F# a6 h. c如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- l+ l1 v* A& u
% F2 P2 [" v/ m* ^7 J4.群选择器( g* K2 w( G% _4 ~% D2 ~* }
8 ?" D, B2 {* r- q ]8 ]" T6 o) E当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
! o5 ]. z; R% _3 ~; I9 z$ S) y, o$ |: w! p* B( w
p, td, li { font-size : 12px ; }
8 d; X, L2 O3 Q/ q就是给li下面的子元素strong定义一个斜体不加粗的样式
. g7 r, L! z. H8 Y1 S: K3 S3 s$ P7 r: Y2 P7 r
6.id选择器7 W( A# `! g5 c5 X$ i# p! R! Q+ G
: O5 w4 F. ]/ n6 j' @用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层: G& q3 E7 B3 ?( c1 G
* W) K6 y+ `$ c. i% U- L& d
9 U8 u( W2 a7 F' H% _/ i* y然后在样式表里这样定义:
- y- X7 Z0 e! f) g% U) _4 O' |$ a* \/ p* O! V' _7 z
S: L& c1 T& |0 y; e
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 f }+ b& O# V+ M9 ?2 G7 g其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
+ i$ F7 c, X+ P) ^7 _+ ~3 }+ K( b4 v W; j5 f. ~2 y
id选择器也同样支持派生,例如:/ R- @ {9 Y! b, m
#menubar p { text-align : right; margin-top : 10px; } 4 }8 J3 R9 U. b1 G! y
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。 n. ?, B, l+ \* ]* d7 R4 x! g
\7 R4 g- Z* o! E$ q6.类别选择器
; Z9 {# {2 x9 C1 m) h" |# K& N9 K0 V9 X7 M2 i) h2 x/ I
在CSS里用一个点开头表示类别选择器定义,例如:
S$ Z, [5 l- w- w' a.14px {color : #f60 ;font-size:14px ;}
2 s" z, }3 g3 l- [9 a/ |% N$ t" f* }) b
在页面中,用class="类别名"的方法调用:+ g' A8 p; r( `# l% [8 L7 j
<span class="14px">14px大小的字体</span> 2 D1 R- [# F! m
0 a- ?2 U$ ?+ m# ]这个方法比较简单灵活,可以随时根据页面需要新建和删除。4 k* }) t' i& [( T" K1 Q
% D2 P% {$ T4 v2 R1 Q; R7.定义链接的样式/ m- \% y, c6 v) x; N
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
; }7 h" L# Z3 s/ w$ Z( b0 F. ia:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 l5 O# [8 u9 m0 F$ i7 aa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}& C3 H8 c0 v# N2 a1 u5 X, \
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
5 b1 V: X) l; H9 [a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
1 O G. R8 C0 v' \, T y% j- i# H3 x e' V& k4 j
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|