|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
" b" X* x2 T+ z5 M
V! w1 G% N& |# m# @4 r1.基本语法规范9 i9 w5 A# @3 c r
分析一个典型CSS的语句：
0 p1 B( y+ ?! S' j1 |$ G/ Wp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
G8 [7 ~3 |' s9 [1 n其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
9 B5 f8 J' v+ |, k6 a, S样式声明写在一对大括号"{}"中；
1 N0 B( P- {4 j: ? W4 aCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 7 v4 o+ O, F9 t# g
"#FF0000"和"#FFFFFF"是属性的值(value)。& R1 E7 Q7 t5 @1 B5 v( w- D
& \* n6 k& [& a2 n5 A% p% u5 E& W2.颜色值
0 O) a8 b" z2 _+ ? g$ r4 Z/ ~! [ K7 c( `
颜色值可以用RGB值写，例如：
; F8 [0 B0 C9 F" Z7 N, p" I8 N- ] e1 m9 M: n/ Y( ?' a* V" K7 P
% H7 x! K/ J4 E- g+ i，也可以用十六进制写，就象上面例子! B9 f% V# ?! Q3 S- `- x" L8 [
6 A6 `& o) x7 z' e7 k) d
. C7 |) Z" A5 C( | r( w9 S/ g+ w0 q
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
) R* z6 ~. e- `% ^8 G1 o# b' d# ]$ V/ E2 }8 c
3.定义字体
, w- [( e0 x/ [: _1 Sweb标准推荐如下字体定义方法
* n+ m! [- b e4 F5 B4 W! ~" }! k V6 C0 w; x6 G* `) {9 w$ E% n
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
/ {! f: x" Q. J) z: ]; f& @6 TLucida Grande字体适合Mac OS X； 6 p# s+ L& @& ^; S# [4 P
Verdana字体适合所有的Windows系统；
! x! u; b( [8 t; l1 S, qLucida适合UNIX用户 6 w7 d( T% [' ]+ W' h& i
"宋体"适合中文简体用户;
% D8 U6 k) t$ v- ?4 r# V {6 C0 ^如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! `, O: `$ f" }* ~: t8 B
. R% Y! g. ~! \8 E2 F7 N' |4.群选择器% u% s' u4 n, D! g% p
1 h/ \* k1 `' t5 D2 l4 Z% R
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
1 V5 f9 B& ?* R* |/ N7 F
: S5 D( B& [ q p, td, li { font-size : 12px ; }
( {+ _) C$ ?4 \2 w& C* U) e就是给li下面的子元素strong定义一个斜体不加粗的样式
! h' e0 D, P' ~, _( t. K" _' B7 i6 s7 N- j) m, S- x
6.id选择器8 S' p& i' w0 Y8 g9 I' h; _
# i% E% B" T) s5 j+ g& h m用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层' e) b" v; v# B" Y- {& z
5 m, v% w" G. N" G) c6 m
c' q# p6 V! m5 ~9 o; _然后在样式表里这样定义：1 g7 Y* F: k! N
, m* N$ V: G" l* ~3 `+ }% M* s
; V: f4 |% t8 V. Q; L+ g#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
' Y: H! }2 H4 I& ?8 U& K4 J其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 o$ G2 q# `$ O% c: B$ v( E9 h9 F. T' V2 ]$ y% h) f2 ~; u
id选择器也同样支持派生，例如：
. |* L2 Y& {& }. a8 s% O#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。- G ?* M" _& o' s7 R! f' B! d
9 N5 o3 m1 {$ g; c0 ?9 V$ v, n! z6.类别选择器& a& s; N+ c1 ^+ e5 K7 J3 E: ~
! G. u8 u, L) b1 \, u) V
在CSS里用一个点开头表示类别选择器定义，例如：% A" O+ l& u/ Q1 V
.14px {color : #f60 ;font-size:14px ;}
4 Z/ ]7 B7 q$ _% K: x. O
在页面中，用class="类别名"的方法调用：3 Y' K6 A+ p% _3 F2 m6 t |
<span class="14px">14px大小的字体</span>
5 h6 K7 D6 [- N( a2 A9 g1 E& W! Z
[/ b; V& i8 c5 e C. H这个方法比较简单灵活，可以随时根据页面需要新建和删除。
4 e! a7 u8 s' E+ S3 D2 M
( W0 _) B0 Z; Z/ a% \- t" f& t7.定义链接的样式
- c: e' \' ]* P4 c1 d* ?CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
1 Y: v! d3 y+ v7 W- M& Wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# B3 a, M; l, |( B- wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}: V3 e+ j. A% n3 M$ n8 t T
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
, y( c. o( k2 x# V2 F; E& v* K% Ka:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; y2 b) J- x% i* L: k
( L1 g7 P8 {! D8 E2 R9 O以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
