|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。' m6 M% v* |: @% n
3 [8 t+ P6 P, z2 { @- R1.基本语法规范+ N0 F- P0 f, O: d9 r
分析一个典型CSS的语句:
9 j% _7 ^) c( [5 h, J3 ]p {COLOR:#FF0000;BACKGROUND:#FFFFFF} * L. x9 J- u+ k! N
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
( U/ b0 j: n5 L; X5 X7 M" q# v样式声明写在一对大括号"{}"中;
% U& n3 E2 a$ q2 [4 ACOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; y% o8 X7 ^3 K& G
"#FF0000"和"#FFFFFF"是属性的值(value)。8 V, ?) i1 n' d9 s, ?
* W4 I% S* e3 H+ P X; K% U" g% A1 N2.颜色值
( m1 _. r4 ?0 t/ S
, ^0 d9 y6 t [3 b颜色值可以用RGB值写,例如:3 F% [3 i3 q. P. t7 x7 K0 _
B' e1 z/ m8 }2 |& H
5 s/ r5 Y% b5 c# q; j) f! `+ ]$ P,也可以用十六进制写,就象上面例子% G, @ ?! |; g, ^/ W# c% k3 p
$ {; B8 H1 ]1 x0 v+ x- ^& B' `! J/ S
, g& y9 w' \' a. T1 u) n2 S如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。 |0 h/ L& i( { t8 b8 U
+ S( t; Z* u5 ~" N7 ], j3.定义字体
$ m8 L. Q8 L: Pweb标准推荐如下字体定义方法& C6 N4 ?( N. ^+ k8 {: o
' S/ s a6 ?$ Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
$ F& g L7 W- v0 j) _字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
& A7 e$ l# t9 S0 w' WLucida Grande字体适合Mac OS X;
) D# l* b4 j$ }) z; nVerdana字体适合所有的Windows系统; ( y; s7 w6 v) D- y) b
Lucida适合UNIX用户
3 p+ A! h9 C2 F ?* D) h"宋体"适合中文简体用户; 0 u, D! f) g. i
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
+ B5 {" J7 e. s5 r3 Z1 B" K( t2 K0 ]- L# w3 P, g% y* c4 q1 k
4.群选择器
* Z# ^# q. R% k$ W+ B2 b; f u8 r2 S' P8 K+ Q4 ]1 l! u5 [6 s
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:- B' h1 \. Y$ @9 ? ]& @
& u& E; t* P* R* z0 V& A# g p, td, li { font-size : 12px ; }
* v8 Q, c. f9 k1 o% ?! Z# H就是给li下面的子元素strong定义一个斜体不加粗的样式
2 E* q) e3 k9 f- y) y9 I# q0 t7 k5 r2 a
6.id选择器
# q( h4 ~# B9 K* F$ F
/ p5 i6 F& O# k用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; |* M3 z* G( e, |$ \3 G& q
9 Z3 U3 }- h# z0 `5 b' ~- x
2 }" q; q6 I w' g& z3 I然后在样式表里这样定义:
, B9 `4 ]* }. B# W9 o4 J: Z8 V) N% |2 _6 h& g c, J8 c5 H
5 g( I! x2 Y9 G- n7 X#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- R, _/ m) W% A- H其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 e% J" y0 H' t! O% j: C+ }( u- k% P% e. [ C9 i7 ^% K7 w
id选择器也同样支持派生,例如:
) \3 w1 A) |/ s- P#menubar p { text-align : right; margin-top : 10px; }
6 u5 ^# Z5 v, M9 Z& D4 b这个方法主要用来定义层和那些比较复杂,有多个派生的元素。8 R# z' T' R+ y5 g. q7 K$ L6 O
2 t( w% T7 `& r* c u: V6.类别选择器
" G7 \+ ~* \2 v5 _. A' P7 {5 Y6 F9 f* a4 A# X- N+ A q5 c
在CSS里用一个点开头表示类别选择器定义,例如:' _( o$ k6 y9 i4 }& M1 o
.14px {color : #f60 ;font-size:14px ;}
" Z: [# B9 T5 h8 G7 S n G$ J1 G* O# @- ] b/ X/ {
在页面中,用class="类别名"的方法调用:% k( h K& B, ]$ s$ `1 x
<span class="14px">14px大小的字体</span> 7 `' ~: t @( a# n% i
! {- ]/ e' q+ q$ h% A这个方法比较简单灵活,可以随时根据页面需要新建和删除。
; h+ L. |6 k5 @2 f* U" B8 ?
/ y G6 V" Z1 D" k7.定义链接的样式
3 E+ Q* E6 e8 k+ Q" c4 W1 ZCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% r" x6 q& w) ~1 F- @+ j2 f
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 K, Q) o: j2 `
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# }1 E1 a, l' a3 h7 f9 j4 ~
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& [9 F3 [2 I f- v. H
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; f( _. f+ L3 M, B6 j# l% {8 \
4 a6 L1 {" U' {) t
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|