|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。6 _& h8 q- d% _8 b$ j
& Z6 R2 t9 b: p. g1.基本语法规范
+ q( \" @1 s& K$ T+ O: a$ T分析一个典型CSS的语句:1 {* h5 a7 i& o6 T
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 7 @5 c* r, n# D" U
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; " Z" ?2 D1 l5 n& e
样式声明写在一对大括号"{}"中; " [! i* X# h# E7 l. z7 |) A
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
7 J( t6 S, Y- L3 `8 r5 ?& R. n6 q$ e# N"#FF0000"和"#FFFFFF"是属性的值(value)。
* x6 ^% z6 ^( F* Z+ ?
$ h" L6 S( A% I. y2.颜色值* t; {4 e5 N8 \/ R- E
# U/ D+ v4 }& M. k颜色值可以用RGB值写,例如:
$ H: Z* h% V" t, g) c i T: j8 O' H0 y; S2 R
; x7 [3 g5 M3 F9 d _# q$ f- M, j1 o
,也可以用十六进制写,就象上面例子3 _6 i$ l+ b# o* O$ X$ _
- n5 m1 ^! k: Q; d
, k0 r0 U# a$ s7 B8 y% n9 S8 N如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
5 Y6 @, o) D. S$ X4 I. k1 K- ?# _
3.定义字体
3 S! b6 K& U! a+ kweb标准推荐如下字体定义方法
5 Q$ ~) _3 N# j- E# V( l9 E4 a/ @1 R- E7 T% C
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 Q! t N* Y Y: T" \字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; . N6 M3 n1 i) O- `' c# J6 b/ n8 h
Lucida Grande字体适合Mac OS X;
0 H" Y$ w J+ E; lVerdana字体适合所有的Windows系统;
$ d2 {8 a( o' ~, iLucida适合UNIX用户
3 l' k/ W3 M- B2 T+ F"宋体"适合中文简体用户; 3 M7 C9 W- L! h$ y* j/ }6 M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;; V7 J1 F ^1 A6 _9 ~0 x
! G. O" t. W6 k% M' `/ B/ E4.群选择器$ i! T" [* ]' {9 ]9 y! H7 V: \
* x( l J, O T, B$ Y
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:& p% u$ t6 }+ I( r* p" F& J* ]" d
( c# g; g! k2 p( {& j
p, td, li { font-size : 12px ; }
& u7 Z% C5 }# x& S' Z就是给li下面的子元素strong定义一个斜体不加粗的样式8 W% X+ t% J3 U8 X. [* r. y
2 V9 h( t; ~1 i. g
6.id选择器
1 U* Q) H2 F, E# B, u
' G; P0 K+ P6 h. ^# r% d用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. u# `$ n5 g% }
- M4 T4 J' ^/ O2 h9 i/ A& q' I1 z
/ y) f7 Z% p0 B; y6 k! r: N$ G$ b然后在样式表里这样定义:
! x: |$ l, Q+ N/ d
8 _2 `+ @1 W# {5 L1 K
, b: ^4 [4 _( L0 W& |0 z- Y#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} * s8 v* U. O: R+ Y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
, N$ h% U0 b( O2 \$ H& R8 D7 O! Z' F% s! h+ \6 u
id选择器也同样支持派生,例如:
* a8 s* O& c' C3 v: f! ^#menubar p { text-align : right; margin-top : 10px; } ' A0 G& z2 n$ R& O2 h: w
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& o& Z# I7 [$ H @3 e
) c( b: L1 X& R+ q6.类别选择器# k$ k+ F4 J4 w0 t
- _( q) V0 C2 A2 o. c! J8 n& V/ m在CSS里用一个点开头表示类别选择器定义,例如:
1 |1 w/ t2 A7 l.14px {color : #f60 ;font-size:14px ;} & ^6 E5 f" D$ u, Y2 c h. u" R
9 r: U8 e. N7 _在页面中,用class="类别名"的方法调用:
( S, R+ A0 K+ G1 I2 @<span class="14px">14px大小的字体</span> & ?0 e" U' @8 D1 u. ^- u: |
# M2 M3 p1 S- V2 p+ ~# z" Q
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
& [% K( o4 j7 e0 i. N) g/ U# }: E0 Y
( @% {* J' I; Y6 Z, ~2 h) j# T0 v- M7.定义链接的样式 i6 M V- ^6 u3 u! O
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:' d8 Z2 V' X: T
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
$ L0 X' ] `2 j8 Ca:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} k1 n$ w# {, d) i3 J# A# J
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 ?/ A% K3 q! y0 r* r( j5 p/ s/ u
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} & h8 h: j' a2 e0 M9 r" n d
" S& F4 p" z7 ]( C: k9 I* R
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|