|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
/ u4 z5 X: n- q/ a4 V- N' W* O* q d% N
1.基本语法规范( r2 W* P$ |8 d2 N
分析一个典型CSS的语句：! N- v( J9 @! W4 b" n" _
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
! G) v }3 w) m7 F2 U! Z0 L. h其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
3 {5 s& j! W* o6 `: s; ^; B( J+ @样式声明写在一对大括号"{}"中；
9 X6 `1 T1 ^0 @COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； % _+ k* m3 W- n! |2 q
"#FF0000"和"#FFFFFF"是属性的值(value)。, [/ a5 n. i: i9 G
0 T# G X7 K- e+ X
2.颜色值
$ k; S; P3 U( `( w* O6 n
7 u$ Q: E5 O( b+ y) M, r3 A) j9 D颜色值可以用RGB值写，例如：$ Q' h1 E& O1 p$ Y$ t) E( b) i
6 ?* R6 Q' h& ]8 _# e+ g* o" P( N
& f5 z. B M4 ~5 k* h% K& Y. u7 [
，也可以用十六进制写，就象上面例子
u( o1 Z8 I. S# A: @
% \, v+ Z1 W+ m( v2 f
$ i: Z7 u" Z' i( J' S' ]如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
9 c* N( ?5 v) ]+ s+ v8 i2 x$ Q% r: m$ M' {
3.定义字体6 o; z9 h, t% I- k3 V( E( F
web标准推荐如下字体定义方法
3 X! w( h0 u3 [1 S- N& N% h$ T4 _% ]" ]0 t* S' z
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
% z5 H& d' Y- _ Z! q" v字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 7 a4 a7 t9 f+ Q' Z
Lucida Grande字体适合Mac OS X；
) @$ y7 a( @2 i4 i7 iVerdana字体适合所有的Windows系统； , f3 w0 x- ]7 C5 E# k' {) M1 @
Lucida适合UNIX用户
% S' g. k3 h4 T( U, E" V6 O: `6 P"宋体"适合中文简体用户;
" r' t7 ]1 P( J; B8 R) S如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
# l- J( t$ E" E s7 \ e# u( y0 \( w4 K4 _! N; {# O
4.群选择器
9 M; g9 ?: h! _8 H/ h% P0 q' D8 S# s9 D: H
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：* x$ N3 ^- Y5 y: i$ F, _0 o
, D$ G6 ~) y- h p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
# z" l) o N- I/ z2 T: o3 V2 X# k& h# [% |2 H+ e6 @7 v
6.id选择器
3 v1 ?% b; A- L% l8 W6 \9 Q1 r7 M3 I
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
% k+ c# j$ y$ s. R1 I2 P6 k# I7 h/ \2 Z
4 |: v n" \& j6 O6 B1 h$ S) V+ ^然后在样式表里这样定义：
. ^) {% J W5 e7 `* R( E
- q% r8 C; |& O# k- V# y* E1 }5 ^, @' N* G" a7 @% C
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 j% S/ l7 j% q: p' F6 Q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 | [! y/ ^" G% `* ]0 h5 ^! d
" c- \, y( g) f& x; {id选择器也同样支持派生，例如：
5 I+ s1 b; J) v+ J1 B#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。" `6 W3 Y v2 n
$ S8 A: b: U- M* X
6.类别选择器+ o6 e# u5 ]1 c4 B! H1 t
& i& k/ I- f1 `, Y; U
在CSS里用一个点开头表示类别选择器定义，例如：! ?# H7 h6 m8 n/ O3 Z+ N7 Q; Z
.14px {color : #f60 ;font-size:14px ;}
0 s+ I- u @- i" T ^7 }在页面中，用class="类别名"的方法调用：; Q# m* R; H0 c9 |" I
<span class="14px">14px大小的字体</span>
# Q7 t# ~* ~9 b& Z; O$ {
这个方法比较简单灵活，可以随时根据页面需要新建和删除。5 x6 o* v6 T" N" P) N D
' W8 E1 |" L }$ V: v! \
7.定义链接的样式
! T, b+ U( f0 vCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
5 P" \, }: T# za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 G4 `+ }% R v" ba:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
: {; Y4 V; K) ^/ L# qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
/ e/ H) }# a0 z: [a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 W& l2 _2 a* `+ b$ ~以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
