|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。( J6 s/ U! M0 V- P4 L* Z. p6 [7 d' N
4 n6 e$ G$ _* m/ K, t
1.基本语法规范1 p" h3 }7 h% X
分析一个典型CSS的语句：& P7 h+ U& A; X# g1 }/ G
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
! e: v. N2 y, f( N5 _+ l其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
4 T9 ~$ n! s9 f& s# z8 \+ T样式声明写在一对大括号"{}"中；
! a0 ?1 _2 [& G: D2 a/ n' x8 NCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
0 f$ v. c. x7 f' e3 o"#FF0000"和"#FFFFFF"是属性的值(value)。& W- G8 S) M) h% B
; h; E4 h' W4 |8 r
2.颜色值
?; a# w; v0 D+ Y6 j. c3 F* t3 U {1 I7 `& c( j
颜色值可以用RGB值写，例如：: \% e) t& |/ d" g0 E" ]
* c/ d; `: w) \2 N0 w* i' v* y
6 D2 v; ^5 E% h+ u，也可以用十六进制写，就象上面例子
6 n7 d/ _" H' Y! m. X$ C2 A% ?! [; c+ Q
" c0 ]1 _$ g. C) a
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
8 x8 d1 l% u u. x
" V& [9 S2 ]; O. y+ z; S3.定义字体" Q! ]1 Q8 \) ~$ K- [7 P- D
web标准推荐如下字体定义方法
2 o1 T& w+ q" U5 G- B1 O* y% p) y. ?5 S8 U, H1 v
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ; O# s( `( R' p$ S" Y
Lucida Grande字体适合Mac OS X； 3 j( D7 N* m8 G4 l" m k( q5 c7 R- a9 J
Verdana字体适合所有的Windows系统； & y6 h) r: v6 [! k" C& I
Lucida适合UNIX用户
( a2 f1 O) M, @7 B2 G"宋体"适合中文简体用户;
, G5 N) L& T. O2 r; ^6 a& X如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
+ W2 h }( w, G C1 }
u1 b" k2 w! @+ h4.群选择器3 L& P) v4 K9 U9 K5 K& j8 v, i
) w2 f% R( ], p3 ^* x( q0 t当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：1 N% g- ?! Y( g2 C9 o% {+ Y: j
$ {8 E: U1 C$ J8 V# _( H3 O- z
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式% a5 h" ], _' C) H
4 Y# S0 E! M; q6.id选择器
8 o/ n, v6 Q* S9 ^5 d1 O$ K& p$ Z7 M8 T; {) c; q
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; U9 ~# F3 f1 J/ S/ l! L( _( C2 E
* g5 O5 ~6 G6 z1 _6 S X, I% d; F, ] C# b% d
然后在样式表里这样定义：
4 O# m' Z0 v0 t6 I1 s
" M% m& R' l" d
. Z+ D x% L) H% B6 x% M+ q5 [#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。) v% P$ d3 |3 J5 L8 C) P6 U) |
3 { u5 D" y+ t, q) Oid选择器也同样支持派生，例如：7 u3 H" u# X- t$ ?2 }2 P; O! G
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。0 w! B* X. p# N) ^2 z
8 t4 J$ X1 z6 w& j/ L, ]
6.类别选择器/ N" i/ m2 `7 ^$ ~- Q S$ r; n
/ n" c) Z3 d5 c0 Z& v
在CSS里用一个点开头表示类别选择器定义，例如： Z" R) [$ s/ t) |9 e: B
.14px {color : #f60 ;font-size:14px ;}
! A! ], O# Z" G: u2 I0 N7 P g( Q9 x6 J' @3 |, g$ X2 h1 P
在页面中，用class="类别名"的方法调用：4 W) E3 g: ~6 l2 t* Z
<span class="14px">14px大小的字体</span>
; k% l: g5 A9 W2 k! q1 Y$ j; |: i
$ A( a& Y" N/ o# a* [5 a+ v这个方法比较简单灵活，可以随时根据页面需要新建和删除。2 A9 s- L) y8 m2 B! }; w; d5 {
+ @( R3 `% j- L6 e0 W6 J @. u7.定义链接的样式
* O+ D/ z5 W$ ~ F; ]* Z# ~ lCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：: \, Z0 u, c4 h5 |2 G, u, k
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 @) _! {5 N/ ^7 k* Ma:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. v* X2 e# N. \. Y6 z# j$ e) ma:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% h5 G- J& j9 [1 N8 \% d7 y1 l% La:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% `2 D! m4 @- j3 g4 x9 C; n! u" ?
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
