|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
: e( s: U/ N" M% U# G) e0 f# [- N0 r: _' _5 k4 X
1.基本语法规范
7 H: o: Q- \5 E' C' i分析一个典型CSS的语句：
, H3 Y7 x2 j: Q, j2 tp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
4 ^0 N4 v. V/ J$ H1 q样式声明写在一对大括号"{}"中； * M J3 \& X" v4 U2 U
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 5 U, ^7 N- u. C
"#FF0000"和"#FFFFFF"是属性的值(value)。
6 }/ T$ y, C) p' i, Q$ Z% y9 F2 T# p, D- p5 E
2.颜色值
8 d$ d5 s' j& A2 d) S. v2 P/ `4 a5 U* X% r# W4 z0 Y! X; g7 ]
颜色值可以用RGB值写，例如：
. w4 D7 n7 @9 ?# |0 ]3 y8 _0 Y' T' ~9 o! O$ Q- i
3 X( q9 _' k1 h& V$ e
，也可以用十六进制写，就象上面例子
0 G) Q+ n1 }0 j! M* q/ w# _
- }/ e& B* N5 f; W$ e6 W2 K& x$ C/ O: @" k6 M b, H- o" v; }, h
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
7 n' R) l' d) D5 U y" _& R( F3 I3 Z* e* V/ R4 G9 U
3.定义字体1 t3 z# a5 J1 v
web标准推荐如下字体定义方法
# b' Z/ d0 p7 W4 Y* c* F
$ _5 O. }* b6 W) }+ q4 d$ rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； & V5 H' t. }' e/ S
Lucida Grande字体适合Mac OS X；
( a7 f, K1 \* N# P. VVerdana字体适合所有的Windows系统；
( s* H/ ~6 I4 B' K ^( Z$ A8 SLucida适合UNIX用户
4 w3 a6 g6 h; W* F$ b"宋体"适合中文简体用户;
3 Y- F3 a" ?, D$ h! Y如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;8 z4 k! m4 X4 D
* M9 Q# S! f- X9 o% A2 ~4.群选择器7 f" l; ^0 ]0 j0 w# Y
7 Z6 k% P0 Y8 H9 T' T
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
0 ?' p4 V2 j2 S; S7 s/ w) e8 i
p, td, li { font-size : 12px ; }
% E; i: I; Q3 C1 @8 h, v4 S就是给li下面的子元素strong定义一个斜体不加粗的样式
, V" w2 t3 ~. d! {' D1 N& D; X
" I$ G& s2 j2 {. W4 ]0 a# d3 w, Z6.id选择器
# `; w8 z. F2 w# Q9 x; h7 \3 r6 H$ ?; }: e; B/ g! ?
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 Z2 `% |! s1 C8 m2 R, M2 B( `
- f" }! @0 l# F6 ]1 U6 T
9 p: l! v! Q4 }4 H" n, ^1 K% X, s$ d7 `然后在样式表里这样定义：( g4 v9 R5 u; T' o) _* u! E5 z! `
3 p7 |; B0 C2 P0 }% u4 n1 U0 u# B
/ a* W6 x, I' ]#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
# R3 N9 x, S2 j: s8 X( i其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
+ ?/ G$ V% Y7 w! i5 E8 R8 r' ^
9 K8 e- D' a* Z* y! Cid选择器也同样支持派生，例如：
, d. k! M: S+ f" L5 Q#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& Z u: g0 @! a5 s' O. c
0 i1 n! l, Z* i% L* a. |0 c6.类别选择器, G7 A. s2 p5 Y* \, M, y( J
- V/ b7 c) ?. V3 G4 ~1 \0 U. L
在CSS里用一个点开头表示类别选择器定义，例如：
& V @. i2 Y, Q6 Z' M.14px {color : #f60 ;font-size:14px ;}
- S& f9 _$ k! M) L9 v$ ?
在页面中，用class="类别名"的方法调用：* q$ M3 ~* C, S5 B C9 o
<span class="14px">14px大小的字体</span>
7 B6 B4 a1 V5 V
. j# {0 o' F' a/ I# N; T这个方法比较简单灵活，可以随时根据页面需要新建和删除。3 r K3 o6 e, f; s& `3 r
7 E. i5 f. F+ `+ k u+ ]
7.定义链接的样式. |; x9 Q* y/ W( w
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
. W3 X7 d/ g6 w& Y3 f8 k# Ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}" o& V% F5 C5 X) a
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
, ?6 S+ B3 r4 E; R/ Z! Ga:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}- b( l" J0 h: n! R2 I0 [
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" n( x9 S: `- `4 P0 k3 n7 |
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
