|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
8 y# R# }6 r+ h2 s; ~/ @0 N& M3 P1 L' X M
1.基本语法规范
0 J \, s, }4 B9 s8 T! @分析一个典型CSS的语句:
: x G2 I- `: _% M( Z/ vp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
; i. a; P1 Y# D0 _ b其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
$ Z& c7 {* v' H( T样式声明写在一对大括号"{}"中; 4 }/ {6 q5 k4 H( s3 ^# _" |, k
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % d) V* Q1 |2 `3 E' b
"#FF0000"和"#FFFFFF"是属性的值(value)。
! L. e. c6 m5 A# Z" {- k
. t0 s8 Q6 ?. h8 q2 Q6 ?& Y2.颜色值
% J6 W! Z( Q4 I# L5 b* Z& `0 j2 y# i) e7 [, e0 w e2 t
颜色值可以用RGB值写,例如:7 l# J2 S- w. f' }
$ q- F2 L+ t" Y& i' _
0 A" f8 A- r/ L+ S3 n, g
,也可以用十六进制写,就象上面例子, J4 T k" g+ B. f9 H; p; _& ]
' E- p4 y* f6 P5 ]- A: N
8 m& e! z- d) T- `) C如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
- D6 D1 e' m+ o0 }4 Y. p+ \- ?3 ~3 D$ w
3.定义字体0 g# T0 b0 x" c7 [% M' y3 v+ s8 a
web标准推荐如下字体定义方法
v9 ]1 v( b. ?* r) }
+ W. p+ F. W/ P) M! Ebody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
2 H! ~+ P9 N9 }& x0 M& f9 w, V字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 J ~: M$ w3 q. T
Lucida Grande字体适合Mac OS X; # E, M1 g9 u7 p" u. C
Verdana字体适合所有的Windows系统;
" T& u: e/ g/ oLucida适合UNIX用户 0 g/ G, I5 A% f, {
"宋体"适合中文简体用户;
, Y- Y, d1 C' N4 K" x如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
! x/ U1 O! j, H. L' _: z! C4 g# X% E3 `9 C
4.群选择器; W7 y, E$ P& ^ {
4 i* }, M7 r8 v$ x3 l4 R" I8 H当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:! R# U$ [6 ]8 l/ z$ e) p
6 P+ W; A7 `5 T/ B p, td, li { font-size : 12px ; }
% U5 H3 A) s9 \3 I" l6 e. ~6 K, Z就是给li下面的子元素strong定义一个斜体不加粗的样式$ N2 j: t, k* c) |2 O: l
" L& P6 C$ l6 S) j
6.id选择器: Z1 K$ s) E+ D% v0 p
% i- G5 F0 p6 U& N用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
s1 z4 c/ a; \. }9 M9 g7 S6 F. J9 H4 m; k7 f. d* r
, O: V h( N/ \2 A# u# `5 ~然后在样式表里这样定义:0 P" ~9 a! [! t" W7 P* D# r4 E9 v
! k# E6 k3 c w$ Y) U3 W
' A4 n: {2 e2 g+ m#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
" f/ r% s% V+ G0 W其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
$ K8 f& A0 _, j% S& s' v/ e
1 h' Q* I; Z& S4 M4 m- v0 k4 jid选择器也同样支持派生,例如:
5 ^/ E" X: z J9 L#menubar p { text-align : right; margin-top : 10px; } : c$ r5 y! [7 c! Y- C1 Z/ U
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。" \* p' B* H' |( p* Y. b. y
! G( b4 \- K3 e$ k6.类别选择器
% }3 {6 c' c: u7 y
) S& R# x' P5 v1 H/ [在CSS里用一个点开头表示类别选择器定义,例如:
3 a ?% x$ T. |* ]& P.14px {color : #f60 ;font-size:14px ;} , K; `( ^8 Y* S( R* r, S4 l
4 \5 D; i! M, n2 R% A6 P" b
在页面中,用class="类别名"的方法调用:) b; ?5 i# Y" X! {6 ^2 N
<span class="14px">14px大小的字体</span>
% L8 l( s# v- Z/ W) G6 \! ?0 \ j1 [$ |+ t. @- N& _6 \+ P/ f$ K
这个方法比较简单灵活,可以随时根据页面需要新建和删除。1 B; O% g T# O4 t5 P
9 B9 L: u$ a4 k0 N
7.定义链接的样式
# f2 e5 [; }. o; p& _0 {CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ D# W2 ]3 E5 m+ x* [3 L
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
7 C- ] p$ `6 X" E ^) b/ M Ka:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}- a- X0 s: L5 {$ _% K) X* [3 Y
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
Y" M/ D( F9 d, t! a3 m6 Ga:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 6 O$ w8 x" p( z8 d
# u8 J* [; S+ c0 n; f) @
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|