|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。$ f2 J' i* Q3 n, x
# l0 N3 a' \1 F. v, v
1.基本语法规范5 K, ?5 V6 a! k, s. b6 G4 p
分析一个典型CSS的语句：
+ A- Z+ _" O: t6 Fp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； ; v! Y# |9 b2 s1 _8 }
样式声明写在一对大括号"{}"中；
- q6 I. s4 r" `. M! g; G! S: N# hCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
( V& i# d5 b0 ?$ ^2 [/ a( |"#FF0000"和"#FFFFFF"是属性的值(value)。
/ y b: s$ Y+ P- [& |6 z% r( \" T
2.颜色值8 ~9 B* H# c Z4 M' V$ r9 b* y
# i" Z; ]) Y+ t& O
颜色值可以用RGB值写，例如：
8 j3 z9 y/ D, ]) O, y- G' W/ B% a0 t/ a! w4 m, J
+ G ^! J/ x/ h+ q! L/ V" W4 t# y
，也可以用十六进制写，就象上面例子& V8 Q) L' |' V1 Y
) ^; B* e; z: n @& x& W# k" M# H" p
# ]9 L; Z! j6 B2 R' n8 q; O( m5 k0 @
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
1 e' A) g. J& e( M- b& K! T9 Q! ^7 F& a- b8 Z2 [: L$ |+ W
3.定义字体
& c0 c6 j2 B- o/ ] h$ J6 r7 M9 |0 aweb标准推荐如下字体定义方法
6 L, c4 Y9 Z. [5 c p7 N; S* C
: k7 n5 H `5 Y) G) H( rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
$ _* B* G v( X: N; U1 o7 h7 U字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
# |) M6 }% F4 u+ R( ~% s& MLucida Grande字体适合Mac OS X；
' s3 a" C8 W: } a; x' R' s, h4 LVerdana字体适合所有的Windows系统； A2 y) _1 _3 v- w4 P# ~
Lucida适合UNIX用户
8 @( a, K8 Q" l+ r! B) B/ }. b9 V# J"宋体"适合中文简体用户; 3 R; o' a+ R, H& ]: r4 w
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;% L& O V( s% M& U2 i9 ]5 [; o( I4 B
: k2 B8 R+ p% o4 @7 r
4.群选择器
" i1 `' r! r7 Z( L6 r
7 |8 y( T& z9 d+ z) x/ D当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
% |" X& ]6 g3 U. U$ Y/ N3 m' I6 {. R9 v1 X; J8 W: ~) V
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
4 l5 [2 `( h) |: U1 l$ O$ W6 t- |( k9 ?7 @ x
6.id选择器
- L5 g( b/ H! d* T
6 g( W) `4 Q/ v1 }5 k* ?用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 U6 m% {& J, W$ @- W/ [: s9 l$ X8 ^
* m4 p7 c/ x/ H( ]& [4 \
5 ^8 F. Z3 L0 h6 v然后在样式表里这样定义：- z, K# S: Q4 U) [
9 Q0 j/ U! W( \6 E& u; L! g
3 K' G: x. ~4 m9 k5 ?5 M+ C#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。& F* ~3 `/ ~. Z( M
6 w9 o4 \6 `- ?, [. P
id选择器也同样支持派生，例如：
4 p, {3 `6 G$ c V" T2 [#menubar p { text-align : right; margin-top : 10px; }
, J2 X8 [0 t- }( b; O! j& z) G这个方法主要用来定义层和那些比较复杂，有多个派生的元素。1 R7 F: s/ n4 _' u3 |% N' T
+ l/ v* G, ~6 B0 e' f# r6.类别选择器. \$ a1 Q) o; w: w
3 w0 b8 W0 l+ Q" a) t- L1 p2 @在CSS里用一个点开头表示类别选择器定义，例如：4 s, s7 r5 G( H) T+ q7 x1 x3 g
.14px {color : #f60 ;font-size:14px ;}
- r4 ~9 E2 U5 M8 K' y4 r: E# f: T! J
在页面中，用class="类别名"的方法调用：
2 I: N( a& ^& x7 q$ ~<span class="14px">14px大小的字体</span>
' L3 I$ u' q0 k% ~这个方法比较简单灵活，可以随时根据页面需要新建和删除。" {9 m) X& v/ ~9 k* t
& w1 \) r6 }8 m, Z3 f, M/ X; V, p4 w; b7.定义链接的样式
* v* S' O& v7 U- g0 ]& PCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：: i. d6 z# U& n% K( J+ y" h' i2 \
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}% H% ^" R) m6 d5 ?
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' r; s0 B) t" Q7 ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- X/ b! l+ u/ h8 g) m; _a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
/ i( U. f, b! C6 d& i8 u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
