|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
! B" U8 N( j4 l: A9 ^2 c9 g. W! U6 e' g
1.基本语法规范3 `+ R4 v9 h! M- O! N$ \
分析一个典型CSS的语句：+ G/ F: l; |1 j% d
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 W/ z1 s3 A( X" e2 O$ Y, r其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
) n/ w' ^* c6 }样式声明写在一对大括号"{}"中；
" n7 k5 T% B7 x$ i- @' bCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； " X- G' n' J$ E t: C& ]
"#FF0000"和"#FFFFFF"是属性的值(value)。* ?3 O, e2 T6 k6 M& ~
8 P9 p% E8 c. d2 @. V e) j# H
2.颜色值0 l/ _! [/ _* }5 x( A" J3 l
, p& N, p0 {0 ]9 Y# _颜色值可以用RGB值写，例如：
6 n. d% q7 t5 n! d8 k% U8 N( G. J9 O3 z6 B$ b: i
( `6 v0 T4 r1 l& ?* k- Q5 n，也可以用十六进制写，就象上面例子* @8 T) W% M+ `( ~9 R- l2 M5 [
6 C4 E$ R- ]* z- k: J6 x0 b a# B- S) m- o
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。- T* N' h# m8 c
& G. p5 q+ a& y) X9 d
3.定义字体
. ?9 l7 I" D/ |+ H# s9 d5 |0 c! H9 lweb标准推荐如下字体定义方法/ ~6 A v) ^" V* B7 D
5 c) C: F% |$ l3 d$ B
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
9 u5 E: u" C: X# E% |# A字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
' o7 l6 ?. {+ A( L* @0 JLucida Grande字体适合Mac OS X；
5 L7 x; Y8 q! kVerdana字体适合所有的Windows系统； . E( O, `, O& w4 I9 G' ~; L2 @- f
Lucida适合UNIX用户 ( L, {# {! }6 k3 b0 y
"宋体"适合中文简体用户;
% O& h/ L6 K5 ]0 h* j如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
* v' W5 F& @: Q3 D5 z o7 _0 D1 S# V1 z6 z
4.群选择器: [* Z( l. \6 f- R! p2 U, B
+ j2 d% s, {2 ~ c5 n
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：6 {) r& P; n% F- i' c
. t+ u% I8 W, a! Y7 J2 K p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
% h7 w( M) u8 E0 \) Y8 r# g
4 i; W. Y) G$ s# ]. W6.id选择器( h) M, ~# `& f- @# G% j
. `8 m3 F: \# J- ?$ _& E9 J/ g& ~
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. n7 T& C; i8 B* r
4 N* d* J n9 R, K: o9 I. t- I: b# f, O. h- B l( r- L) ?) |# B
然后在样式表里这样定义：/ U) L L' {) I/ T
. y" |5 Q: Y5 I. {# q: c, V" P% @
6 L: \1 i4 [( o- W#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
" _; \3 N7 ` y其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
6 w0 ^! s" g. ~, [$ i
0 {0 }! |" r& ~4 s+ I9 A( {0 lid选择器也同样支持派生，例如：8 L7 X0 w8 Y9 G) e4 z! V
#menubar p { text-align : right; margin-top : 10px; }
1 L0 ~5 Z$ k' p0 B$ J' c. l C' s这个方法主要用来定义层和那些比较复杂，有多个派生的元素。5 f, T' p; G! L# M- S+ T
+ u* J) X+ B3 W" N) _
6.类别选择器 E$ p% a, I. A/ m, h
1 x5 S% k2 d4 @, T6 z
在CSS里用一个点开头表示类别选择器定义，例如：
- Q, |# P5 n* E& n+ j* I5 k.14px {color : #f60 ;font-size:14px ;}
1 c" N0 o! g3 ^# K在页面中，用class="类别名"的方法调用：0 ^, y/ T) f) p2 j# t
<span class="14px">14px大小的字体</span>
0 ~" H; Q# q" r这个方法比较简单灵活，可以随时根据页面需要新建和删除。1 X7 p- R- w! X: P( Q
, e: b6 o" Z& a& g$ H7 Q
7.定义链接的样式 Y ?( o4 F* q, j. i) }5 e* K
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
7 T t* q+ R- T' Y( [& p2 ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
) Z: l, P8 y* }8 W* @- ]# ea:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
5 Z+ E* ?( h( j& s, Pa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
/ _- f1 i5 O$ E5 l! Da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 c5 {+ Z0 [' k0 l3 D) Z
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
