|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。- ?( N7 C/ w a- j
4 [0 J& o- n# n
1.基本语法规范
$ E2 z+ n0 U- v3 Q9 i. P. e3 E分析一个典型CSS的语句:
; h7 I) ?( n0 b# w) Xp {COLOR:#FF0000;BACKGROUND:#FFFFFF} & D0 i2 N& M$ |0 B0 J0 J% i
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
; j$ {' z6 A9 C5 b# A; V样式声明写在一对大括号"{}"中;
8 K- X# b. \" B1 a% CCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ) A# a- G/ `0 K% i# I! r
"#FF0000"和"#FFFFFF"是属性的值(value)。
( c3 z( a3 Q$ k7 q% i3 V5 _6 f( p( C ?) a7 y; `( q
2.颜色值6 {: e! Q- }0 c, U0 f7 H
+ T# s4 w4 m, M; O$ X# T6 H7 y
颜色值可以用RGB值写,例如:9 y8 ~# j# O6 v) ~9 ~4 z7 u& y9 s5 H
4 S* h; a' w0 e9 B+ |5 c/ `0 P. |$ R# j$ j
,也可以用十六进制写,就象上面例子8 h8 z8 X y7 ]
# m* f% g2 ^ w m- l8 M9 T2 a8 G, y0 V; r, z* o
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
( X9 K0 I) T+ ^! R+ A) ^& r \# {% ?( \. @$ W& o
3.定义字体3 P3 F* g6 I7 E( ?% [6 K
web标准推荐如下字体定义方法/ \ R0 a) N. n9 P+ K) \
: _, a- I" I) J% R/ x' Q
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } " f* j% a. g2 p2 ^# i0 E/ M, g
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
/ \! U- z% n& \Lucida Grande字体适合Mac OS X;
4 Q6 V3 Y* s& u/ t5 y* Z6 D2 \- iVerdana字体适合所有的Windows系统; . a2 X( K! s( ~! A4 B
Lucida适合UNIX用户 8 _0 h' a8 V3 ~7 E3 D% P. J' p
"宋体"适合中文简体用户;
% C) \6 K4 W6 c& g3 ?5 |如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;4 f# E: W. u; P6 Y {" Z% B6 P3 i# I
( x1 w# |) i8 g- g5 c
4.群选择器 ?3 Z: F5 i) Y9 ^0 V* Y+ b; q) O7 ^
$ n- I$ ?& P, b: ]3 g A
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
. V! H8 q6 h! a; h* P4 }/ q1 p1 `2 T0 [
p, td, li { font-size : 12px ; }
9 B! C$ H1 p4 ^! G7 a! M" m* S就是给li下面的子元素strong定义一个斜体不加粗的样式
" Y( }" w N/ U% \* e6 i/ _
) d' r) ~% S1 Q% C3 l6 T6 b6.id选择器
! X3 f o, n2 |, i% w# U9 O0 Q: [2 R0 P4 ]7 |% f5 |
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
1 t/ f* d( u& K3 L2 b3 e$ L
9 W t+ {. w8 Z0 a$ e5 r. l1 F
1 ^$ P! `' M" H0 B0 U+ e, `然后在样式表里这样定义:
( F0 M9 ]6 N H# @4 L0 Z' M" u0 k& T% s: k4 F- Y0 X; t/ ]5 t
! D R5 Q9 [( b7 l+ P( |3 j1 U
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} / C5 G; q' W4 y; \
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
% d6 F; K) m$ u1 m& o
8 F- p) ^ k8 S* C- Eid选择器也同样支持派生,例如:4 q: W& R% m! K. t
#menubar p { text-align : right; margin-top : 10px; } / u- r" j6 l, c" `9 F
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 W. X- l, Q7 z- L- |
5 L- Q, a; u s) K) k/ p' Y! @# }
6.类别选择器1 Z% t" N- ^, Y5 v
* N9 c! T& S4 y, h0 i& q
在CSS里用一个点开头表示类别选择器定义,例如:
3 u) n$ Z1 c# k) c- i.14px {color : #f60 ;font-size:14px ;}
" T" f# t0 q4 |* M, S$ E: e7 x, Z" c1 T: R; c' D
在页面中,用class="类别名"的方法调用:
4 T ?& s+ a$ ~- D/ r: J<span class="14px">14px大小的字体</span> # y9 Q3 K% X$ e$ A" i$ H0 G
2 `. l% @# [+ D: c f# Q这个方法比较简单灵活,可以随时根据页面需要新建和删除。
1 w+ L5 Z1 y& N* M( r9 y7 D; K* t( b2 L H5 j
7.定义链接的样式2 Y6 _5 l8 D, c; p# _9 v# u* d
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 G# L# N5 W C+ Za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
( a) a" B6 h3 I5 u1 I1 b+ Fa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}; [7 Z: }& H8 ]1 ]
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 k- M* k ~2 ]* q- }$ C
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
* X7 X3 K. a3 H$ W( K1 y
4 i- g1 k% W/ V1 k- u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|