|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。5 C) `+ V& F% \, E: x( b$ |
( h R/ \. C6 [5 g" j8 s$ l! Z
1.基本语法规范- R) y' ? x2 V4 {& I4 V" k
分析一个典型CSS的语句：; c$ R+ b. l3 P/ ~: d' M3 b4 g' ]
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 k! |2 T" f( A: S其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
$ c, O5 f, F" u0 ]样式声明写在一对大括号"{}"中；
$ x/ Q. A6 p5 m9 e# c; NCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 2 `7 p/ A5 z6 ~* I9 A8 X0 \* |* ~
"#FF0000"和"#FFFFFF"是属性的值(value)。/ f! F7 h- w6 ^+ R
" j+ b$ x5 W6 A: B. v
2.颜色值! S2 P+ m- l- ~9 B
$ j0 k( L& @" e/ q颜色值可以用RGB值写，例如：
; O' Z# h% E2 r, m p
6 j! n% u) W/ I# R, G
0 X) U1 n7 g6 J8 U3 s，也可以用十六进制写，就象上面例子* z& O4 c1 t+ }! ^
) ~3 m- |, m5 D$ V, I4 a& c
- r. d9 f: O$ f. C8 i% H如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
* y) ^( R) Z4 p- x2 m6 R8 @/ x5 m
3.定义字体- ~/ O. Z. j4 V! g y! ]& b
web标准推荐如下字体定义方法
, ~6 F% ]3 _- r, I Q W9 h0 P& g# V+ j, G3 B* K; g
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
" ~7 k) m* J VLucida Grande字体适合Mac OS X； / z6 y/ I2 d9 l6 q' o
Verdana字体适合所有的Windows系统；
# V$ d) J/ a5 _% H$ V' `! \Lucida适合UNIX用户
: u% X$ S( K1 \; s, l/ m6 S"宋体"适合中文简体用户;
% D5 l7 R% s$ Q: Z0 A6 \如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;5 _! B/ j) O Z, R" Y- {% H, C
9 a# v8 G6 l: }' q0 l) N7 u$ H" m4.群选择器+ Q1 d$ K. D8 ?3 Z# i' x2 r* |
8 R; l3 S! j5 j q) r当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
; u. G9 e- m* P6 }
/ O: ~; u& @- [- w) [6 X p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
& V( i% q9 v- k) F# [: `8 ?6 F2 M: E. G% y& I1 s( j$ `
6.id选择器# |( X7 X1 V% Q3 \- b$ i; s
, Z: ?; x5 ~: d, o( i' ?
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层) i, n6 F' I3 `0 S [% H& O
K1 Y$ f/ F& e( K( ]3 Q
: H) g6 }, u0 D2 U) ~1 F
然后在样式表里这样定义：# e: c+ t& c& Z9 t
1 K0 F K, B$ g8 q
' u; n0 {* e) L8 _' E+ W' d
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 L1 j+ e: f4 b' R其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
( X5 E, Q9 O5 A4 ]$ W/ }3 f- ]) F
+ P7 S3 g4 o! Oid选择器也同样支持派生，例如：- E( n' \0 y2 F% M: l! V
#menubar p { text-align : right; margin-top : 10px; }
: M1 r) J: v t% @这个方法主要用来定义层和那些比较复杂，有多个派生的元素。+ g, [( \8 v3 p' k
0 P6 T5 e; ]9 g+ U1 [2 ]! \6.类别选择器. k- {, r5 D( q* _) Z
3 c4 z1 G$ [& u7 L3 {
在CSS里用一个点开头表示类别选择器定义，例如：- J, n1 z" ]" K
.14px {color : #f60 ;font-size:14px ;}
5 `0 A) c* n2 D
在页面中，用class="类别名"的方法调用：
0 Q: u( p5 ]6 {! I: _! D5 k<span class="14px">14px大小的字体</span>
5 g9 ^% e6 x9 n: I5 a
这个方法比较简单灵活，可以随时根据页面需要新建和删除。* l( {! x/ b1 D( s; t4 X9 F( ^ X/ P
u( B- M% V' I6 t
7.定义链接的样式
( v) I# M& E) u. o+ F/ oCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：; r4 S: R+ [$ c0 g, _5 _7 b: v
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}7 w4 U/ E1 y3 F
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
{3 J$ I; ^! {a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
' G# j f1 G6 L$ t4 B0 w( e9 ga:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
k. m; q7 R( M+ B! F以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
