|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
" M+ D1 y2 O$ A1 w9 x; _+ I, B
1 S/ H% |3 c+ k: @1.基本语法规范3 i) R3 I" L& E1 ?2 f3 a
分析一个典型CSS的语句:- t7 y( K7 O( K( _2 v i1 |- V! q7 ?
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
" k* w& J" k6 l! u其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ( Y' p* a2 l- u& Y
样式声明写在一对大括号"{}"中;
E) j9 Z5 t. M+ M5 ~5 dCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ) M9 G$ L& D; Z$ k, z* k7 }
"#FF0000"和"#FFFFFF"是属性的值(value)。1 s) W( F3 k: h1 w$ t( a: c
% r+ Y& t f( r; x. Y9 l; _
2.颜色值: m. m3 \* ]! N' C- N! M$ A h+ U
4 \; k n0 h0 G0 [' f
颜色值可以用RGB值写,例如:- a2 Q! P4 |9 U) {5 M
- v6 ~ E4 p+ Z
1 c1 U d# H A+ [4 O. M. N,也可以用十六进制写,就象上面例子
# N/ X3 v6 \$ O( G2 G
6 I5 ?* g& D; P+ u5 E9 Z/ ?1 B. L( w& e1 ^& E- E
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
% n: |6 ^/ I/ {& i$ t. f7 `
6 l& b9 ~1 Y! }* m2 ~+ @3.定义字体
4 @, R( x+ p' R& ?web标准推荐如下字体定义方法
4 q( Z/ f! @& k8 i: D9 Q! f3 u/ t( m3 v! X" g4 l" b# C X3 s% `
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
- r, N1 @/ m* V. y0 Q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; / }# Z2 [ d6 \8 J" l; @8 Z
Lucida Grande字体适合Mac OS X;
, c T: q- F0 M; ~/ Q uVerdana字体适合所有的Windows系统; $ `* ?. _& f& f$ F: B
Lucida适合UNIX用户
! T$ |! l1 V z2 B! f7 n"宋体"适合中文简体用户;
; e5 L a2 M) a" K: V/ {4 s如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 d D. I: e. C$ Q1 V% o1 E0 E, v+ [2 Y, D3 [5 @
4.群选择器
' C; R1 m# |/ u' f& i# X- T1 c( z
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:9 ~$ e% T) E* F: S+ c# U+ B- z' ^
& X- a1 t. F1 T2 \3 R p, td, li { font-size : 12px ; } 5 K/ Q0 P f( ~3 D; ^3 _
就是给li下面的子元素strong定义一个斜体不加粗的样式' t4 Z9 @8 ?2 F! ]; P
0 N. \( x: q! `6 Z/ E) u# J6.id选择器- Q( ~& V( }% Z! S& H
0 T6 x$ Z& e3 K+ B& n5 n用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
A7 [7 @" k; v4 {9 J1 f, i& u- j7 c* `
1 i! d$ [( a+ K$ x
* y# s! a8 a2 X* m$ F% \然后在样式表里这样定义:1 L6 \, \% X% ]" g1 X: x) K8 r) G; S. r
* _0 j ~- y4 X/ f! K$ O+ w0 G6 L" d0 `, h
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : i/ @% J# R+ [7 \! \8 L8 W6 ~. d& k
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# n8 e7 N8 i" y7 R/ {
& ~2 ^1 M5 b+ g# N: H e
id选择器也同样支持派生,例如:
, |5 h/ b8 i4 c8 K; F! c#menubar p { text-align : right; margin-top : 10px; }
" {8 _! [( K, S7 P0 C9 z& _这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: N: q# ]- I: q
. H7 s* R& Z3 f) ~6.类别选择器. b0 G6 y$ _& L j
2 b# Q3 }8 B8 _; n" ^& k" n1 ~6 Q) W在CSS里用一个点开头表示类别选择器定义,例如:3 ~9 V7 G* |+ |& R1 d; }
.14px {color : #f60 ;font-size:14px ;}
; s c3 ` V9 |, u8 Z
" @1 o5 t6 ]$ i) @1 F在页面中,用class="类别名"的方法调用:& z3 n, U% b8 W: O
<span class="14px">14px大小的字体</span>
& C% a9 r" c, K1 R; Q) X' c
! \, k3 `1 a$ w, {, i这个方法比较简单灵活,可以随时根据页面需要新建和删除。+ j( Q5 [# k, W7 C5 G
8 [8 o) ?; U: [% F1 |3 e7.定义链接的样式
+ v) C* k& L( m; CCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:: Z1 Q) B; i6 B% }# Q
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
/ E8 N I7 f+ L6 t* F) f; la:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 ` f+ D S( a; M6 \/ l2 B8 ^
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) w- K* f7 p9 N2 n$ _
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ! y/ W4 H G: z3 m; }& ]
* g% B+ m7 Y: F1 P [2 Y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|