|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; _3 f# m: |( ]& m! V
3 W R W5 I+ W
1.基本语法规范
, N8 b* k# O% a4 H, s分析一个典型CSS的语句:
; b- [5 ^1 H- `9 ep {COLOR:#FF0000;BACKGROUND:#FFFFFF} " K' A$ ^4 f) ^* X5 u
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
* A& m D3 E$ P9 K# C8 @5 O& U样式声明写在一对大括号"{}"中; - t" V- l, H7 B. x! a+ S, C( R# s' S! y
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
2 u$ D: e, `8 P( _2 i9 H* q"#FF0000"和"#FFFFFF"是属性的值(value)。0 P/ n* p/ Z! O" c+ }9 k( }
; s% ~4 g% W5 P0 A2.颜色值
% \) e# p5 Y+ F! {3 k4 T! @2 `% K8 [8 \8 j4 O4 ~3 w& ?
颜色值可以用RGB值写,例如:
3 K$ a! ?7 d7 N$ g q) p3 ?- R
- ]8 f' b* r5 d
9 ~3 H/ j6 P1 I,也可以用十六进制写,就象上面例子
% b0 ~! N$ r+ E1 |; s& v& r* Z
! ~3 x) Z! g# X w& J4 H
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。4 x$ b. y: u; }/ c1 J: X
8 [, X9 q7 C9 K% B. L* J, v3.定义字体
$ L. Y1 X# c# n2 }5 p, Xweb标准推荐如下字体定义方法+ `8 {. x, G% @
3 }5 |9 W( g) D# v) pbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } % ]% V1 o) F- i
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
R2 m9 u- Z, v1 Y( a& fLucida Grande字体适合Mac OS X; ' a9 C$ `* D) U1 S
Verdana字体适合所有的Windows系统;
* a/ x' s& Z9 Q" j4 B1 Q4 f XLucida适合UNIX用户 " T( d0 v2 W# j8 w9 _/ N
"宋体"适合中文简体用户;
% U' @, u E6 W如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
" \+ f* X K0 B1 {. \8 {: H2 _4 Y( g# A. A
4.群选择器
+ \# C7 | [! z+ u* U7 \- m8 i1 l/ T7 e2 w
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
- ]+ d# p( Q2 t4 l
2 r7 v7 T! O$ X4 Z5 m+ ^ D1 M p, td, li { font-size : 12px ; }
5 B6 C2 ^3 E. B就是给li下面的子元素strong定义一个斜体不加粗的样式7 L6 X4 U8 B* k
6 a" n# }) h) q; f' }/ `6.id选择器- ~, k* ^( s& R# g4 P; `
& t) Z5 G. F( s4 B7 S
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层" P j4 i) Q. f: ~8 B* O
! R. n* R4 A( P$ F, y5 Q. a- K/ k" E C: T0 R" y9 p
然后在样式表里这样定义:
5 g, ?1 n3 [ K3 m7 l8 |1 z! j: j' x2 \) ^* K# Y% L, [
' N0 q* u, j- _% F#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 O. i6 O/ x5 Q. l8 [
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 q' C' l* w ~1 |- s# n4 n7 ?1 p
+ i/ r+ U e. z2 |id选择器也同样支持派生,例如:
8 j* E! B* ~, L: T! f! {" k; G#menubar p { text-align : right; margin-top : 10px; } - w& w6 x8 _/ g# x" P
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。, u" B7 Q+ h; ?7 Q8 `: `6 Q
$ t9 |6 n& {" \3 [* c+ v
6.类别选择器
; k7 X4 s' K/ F* Z L/ G$ ?7 F
* u, I* e$ L- ~% M/ q在CSS里用一个点开头表示类别选择器定义,例如:/ m' ]! i5 Q. _, z( B
.14px {color : #f60 ;font-size:14px ;} 7 e; H" ?* x; i$ {# I- j% U/ Q# }
, ~- w4 p6 J0 k T在页面中,用class="类别名"的方法调用:
* S9 `2 U! N5 s8 ]<span class="14px">14px大小的字体</span>
9 B/ u+ r, Z( S, A7 ^" b ]( i c- ?& Z8 k+ M
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
" t/ ?% H8 ^( [% P( _3 ~/ `% n' l2 |( c% k( ?$ i
7.定义链接的样式- I8 ^/ ~6 L" ^: G
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 N" H. O+ f3 [' e( z9 Za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}$ X3 c8 { \# O
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
# ?' i5 j. j# Z2 f& r( x8 ta:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} V* u6 q, I' _& F( P+ ?( q! R
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- M7 O& U, ^, c
3 M! V6 h. P4 p2 r6 @* B) ]9 k以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|