|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。* ?6 L% E0 P; r
' ?; L X+ w J" I! c
1.基本语法规范
Q* r l7 _3 t+ C分析一个典型CSS的语句:2 k' j6 ~6 ?! {1 H7 {1 Y
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} " w2 f& T- _ A
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; $ b8 B6 D' `$ j5 {) n4 _
样式声明写在一对大括号"{}"中;
9 u# a b! a2 K/ g" HCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; - Z2 \" u5 H+ r0 Z
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 X* Q1 A1 {( D
' x |. ]) G8 p2 J1 K# F, _2.颜色值
: A4 Z+ Y1 y- V
0 e, P6 G( O0 c, e) B/ ?2 W颜色值可以用RGB值写,例如:
, S* C! B6 x P C( F7 v6 ~
3 p% Q1 V# i/ p ]. V2 g
0 R" X* E9 @9 O8 [. G5 H8 w,也可以用十六进制写,就象上面例子. {4 C- J {6 P
! D# N. s" x: o9 g$ m5 S
3 r) C) f1 K3 g: t$ s
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。2 c" q' x; f9 S% L3 X$ G
) E+ F5 N! H% C% a3.定义字体
- C, W& t- }" O1 U% dweb标准推荐如下字体定义方法4 ^& G& @1 _" U: @
; K# ~0 a9 A1 l' O8 Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } - a+ O2 ~" |/ h" n) w$ V, Y
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 H. N( K% T- q/ l
Lucida Grande字体适合Mac OS X; / L: G3 H* i3 o
Verdana字体适合所有的Windows系统; 5 ]+ L3 ~ ~) O
Lucida适合UNIX用户
# N1 T: @& \& D# @"宋体"适合中文简体用户;
! t( T- _1 W5 T3 [# F4 N" L1 B如果所列出的字体都不能用,则默认的sans-serif字体能保证调用; H b; g% r& ~* g% {# F& u- h
9 F% E6 a1 _1 N7 j4 K4.群选择器
" F- O: R" t" d- Y3 k6 @! F- r% [
2 f4 L5 C9 R4 O: f2 k E当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
1 v% i. S, ~+ j, c
: z: [& E# i- ]0 K# m p, td, li { font-size : 12px ; } ) ?7 o8 {5 q. l8 f3 A
就是给li下面的子元素strong定义一个斜体不加粗的样式- M2 R! A i/ m5 x9 p: x/ Q
# Y5 a6 N6 j! d+ W. ?# j: r
6.id选择器
- t5 m; v2 P8 f k) N! ?' |7 H, p6 b+ Z% ?7 ^8 ` w" y
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 Y* \# b6 J5 G5 x
; m0 P' M4 I+ m9 k3 c' Q2 e4 m3 ?' X9 P) h# j+ G
然后在样式表里这样定义:" r9 X) K) ~3 r; T" o1 X! ~
. i, W# w2 d; n' p M( L: T+ W
; D1 C+ Q! c& P& a/ c4 G* i1 B4 p
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
: ]7 @: ^4 `6 c) [% z其中"menubar"是你自己定义的id名称。注意在前面加"#"号。9 ~' A/ |( g% w" k6 u2 j
" t0 |& c5 N/ g1 E9 A3 R
id选择器也同样支持派生,例如:' d( o; P/ W. K1 s7 |
#menubar p { text-align : right; margin-top : 10px; }
2 U' L1 @2 d: O, K这个方法主要用来定义层和那些比较复杂,有多个派生的元素。; ~1 ~: W6 s9 ]4 E# W1 K" E
2 ~. U1 D4 Q- A% H
6.类别选择器
3 x+ `' D o! F, d
" N4 }* `! a+ {8 } ]) m4 A& l7 ~在CSS里用一个点开头表示类别选择器定义,例如:
7 a4 h$ C( `- j( Y% p* {# O$ n.14px {color : #f60 ;font-size:14px ;} , j0 q. s8 U3 X5 A
( E. p6 R! p8 `' @& v
在页面中,用class="类别名"的方法调用:$ Y# i# D3 U+ ~
<span class="14px">14px大小的字体</span>
" E9 x, W0 v& X4 ]) P/ T; d: M
: f _( N* F/ l这个方法比较简单灵活,可以随时根据页面需要新建和删除。
6 u+ l& m' b4 c) \; M5 {0 x) x r1 ?* ]) i- T6 B
7.定义链接的样式" Q+ f8 F; A. c+ Z7 e
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
q2 H% w1 G# M& p* P T# G2 c* T1 S# ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# d, ] r/ ~7 @" Za:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. g6 p. b0 Z9 I# k) @+ Z" l9 oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& t `3 e2 D7 b! i7 I& }6 m
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} / l' I7 r* v% i
$ |8 z0 o1 L X' N
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|