|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。( ~4 x# p3 `5 C7 F, w* y0 K" M/ f
& d( f2 t% Z" Y5 Z3 y9 W1.基本语法规范" Q5 f8 ?3 Q5 @6 x6 k
分析一个典型CSS的语句：. M5 Y. {1 e, P1 H8 }- y
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
9 H* W+ r, d9 b, q样式声明写在一对大括号"{}"中； ! H6 \( X& m7 k1 b s
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 3 g+ N1 g* X; R( a2 ?% l- ^
"#FF0000"和"#FFFFFF"是属性的值(value)。2 ~" ?* l% `1 _! }1 y6 W
' n; M1 p+ m2 x. ?; A2.颜色值
( F/ _& p1 [! c* L
3 u1 A7 r+ z4 i, ^1 w- [" M颜色值可以用RGB值写，例如：
4 c# |9 B( I& w
* N+ l, C& x7 {+ p$ }9 G8 ]2 m6 o P, k9 t
，也可以用十六进制写，就象上面例子& s) z$ a, ]$ _& f
4 T0 c% _* H2 P# Y" `5 R3 V) |
0 G% K0 e7 h6 v s& \1 U如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。4 m, B+ X$ d' L& c( b8 X5 M# |
6 r6 j$ b, f/ i! i4 T
3.定义字体
0 k2 Q7 i) B( V5 Z% ]7 {. Eweb标准推荐如下字体定义方法2 g2 p/ N! M6 t6 r# `8 K' {& m
" @1 j, j1 A) c5 Bbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; M2 @* @* M- C* d. Q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
, F7 g: j) `# w2 P' pLucida Grande字体适合Mac OS X； 1 D3 f7 v- `3 c4 W% D4 c
Verdana字体适合所有的Windows系统； 5 j4 i/ k3 i! l2 ^, n- d
Lucida适合UNIX用户 - R( D- z8 N% F% _" K4 j; Y, N
"宋体"适合中文简体用户; ; C8 d. h8 E c: Y! H0 l
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
3 f2 I% j/ R0 u) K. Y8 Z! b; H$ G$ [- f$ r8 k
4.群选择器
% [1 H5 O; z# J+ G
0 E" L+ x' }5 v+ w3 s" T. y3 T当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：' v. j9 S- v% h/ a# L( y
: D% I3 r$ I% j5 i& J# `
p, td, li { font-size : 12px ; }
7 ^: n( n: u! e1 \/ z( H- M1 Q* B1 x就是给li下面的子元素strong定义一个斜体不加粗的样式1 k/ P/ ^! J! |; i' ?* \* Y
- \* n" z/ {3 A4 _* T6 t- F; i j6.id选择器% l. Z- R4 y2 X5 I$ ?
2 j9 V& d6 K* ^" F+ \8 O
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
% c1 F; T" X* p5 _( ?% l l9 R
6 w; \( \/ W& ]% {: m0 w, i4 v: [- j3 K# O
然后在样式表里这样定义：
( ~ ~! @3 W8 o3 _1 V
$ l# X6 \# G6 n' t3 J& W) |, n! i& D( u" \+ ?& Q
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。) y/ i, l+ o8 O, B; x6 C
! L) `" H4 d* i
id选择器也同样支持派生，例如：
% q) I- g. d2 u+ x+ a0 I( {#menubar p { text-align : right; margin-top : 10px; }
! }( A& j. y2 l- L5 w这个方法主要用来定义层和那些比较复杂，有多个派生的元素。0 i1 X% t8 Y6 V+ G# b
7 O- v. O! C6 m0 ~. N; l4 ]6.类别选择器
* D( t5 {% h. w/ M$ R& _4 u
& J ~# L9 [) Y1 ?5 D. q9 W在CSS里用一个点开头表示类别选择器定义，例如：
) ^! U, T5 z7 B/ p.14px {color : #f60 ;font-size:14px ;}
) N% B! M3 {' r# N! p# c5 R
) E2 T: v# l' K: ~. p在页面中，用class="类别名"的方法调用：
. K- v3 T$ I' I P<span class="14px">14px大小的字体</span>
% s5 g* q4 X3 n% j% t7 _- \) u, I. c( G7 Q这个方法比较简单灵活，可以随时根据页面需要新建和删除。
6 f: o' i/ F/ ^- h% a. K0 z ~7 p/ h2 d5 G, a
7.定义链接的样式) r+ l9 O: y3 g$ l1 b' R6 O
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
5 l- T9 Z9 N2 @- r( Y4 Za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
% ~3 z& S, t; F; Da:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- d3 D3 {; { |2 _a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ A; n* t, Z9 f4 v( i- U# e/ r& Ya:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( W# f: k+ U7 I, s7 @* `
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
