|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。9 Q" y$ q# k9 b# t
( i8 e5 w- U- B4 d7 L* ?$ V' B1.基本语法规范/ \- x0 x5 r! C, ?' [/ }
分析一个典型CSS的语句:+ D" o n( Y% {- k9 k" }5 k* ]! R
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' |2 f1 G) F" w4 A' C4 r/ D其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
% v0 r ~1 @" o6 F+ Y+ N样式声明写在一对大括号"{}"中;
. ]9 Q; S3 F& aCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
1 m+ a' H7 k3 c7 T! C; g"#FF0000"和"#FFFFFF"是属性的值(value)。
" g( p0 B0 e$ I: x, p$ k9 Z: e7 d x+ A5 H! M2 k6 T) s1 X
2.颜色值
) g( C( Z5 n* P" @
g/ g% J7 N( j8 N3 R颜色值可以用RGB值写,例如:7 n% T+ P- [0 Y) I/ x/ N" Z. q& P1 k
4 L9 v/ }+ J; Z
6 w8 z/ I8 u! C, L,也可以用十六进制写,就象上面例子
' p$ l( w" l6 D& o- L0 e& q1 M/ j7 ~6 h* V
" ?0 a# H4 J4 y
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& _4 _+ q- o/ U. b6 ~+ F3 S7 W! J
& b+ Z) r( b* t* _7 o. R
3.定义字体
9 y6 p% b8 O7 m+ ?+ rweb标准推荐如下字体定义方法6 O( k4 ^; X: z" T ] ]- t
; b M9 u4 `, V2 Q5 Q7 G t$ Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } . c% U# Y7 p- N: m. N
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 7 j$ E. \6 o8 p/ u/ Z
Lucida Grande字体适合Mac OS X;
' V! I( M/ r. d3 A! kVerdana字体适合所有的Windows系统; ' E2 R% {: R; G2 E& {7 w- F
Lucida适合UNIX用户 4 S- Z0 ?: L6 d1 {' O) P
"宋体"适合中文简体用户;
! a9 t, r( s" \4 H7 w+ B如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
% c, J$ j4 X( p. C& `, [' Z2 d8 |) q0 e$ b
4.群选择器
8 c, B7 J3 W8 I7 B9 i2 h. m8 a% X) ]* T: @5 |6 i% Y7 O' _
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:& F# K+ p5 z+ |1 B b; {! g2 r$ Y
* l1 P. q- ?" t$ |9 o p, td, li { font-size : 12px ; } 1 s* [$ d m% @) e" Q
就是给li下面的子元素strong定义一个斜体不加粗的样式
, v) C5 u1 C7 y$ e( g( \
U/ q. N2 y0 ^3 c7 X# r4 z# F6.id选择器
, r, R( Y) w) x$ Y6 `# A7 u9 N2 }, O# H& ^, p
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 B. k7 V* u' T6 p1 a; j2 \' `9 ^
9 Q8 Q4 _( I! q9 F( m; a; ~1 {! M) C$ S) U
然后在样式表里这样定义:
# \( g4 J( C J9 _0 } S
# e6 n" L9 u( h" ]1 ~
3 T! D3 R( s3 u; t8 j( Y E#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, k2 i4 x) x* A1 A$ O% Q+ |其中"menubar"是你自己定义的id名称。注意在前面加"#"号。2 G* ?& F* _1 f2 m1 N% X/ }
0 j" E8 k, }4 G6 hid选择器也同样支持派生,例如:8 `, c- O+ X6 C' G. z# g
#menubar p { text-align : right; margin-top : 10px; }
- u: B. D+ Y t这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
5 m* _' r6 |$ ?: ~
v! V, B* [ {6.类别选择器
) j4 l9 a5 b; b: M% x/ O7 z
2 _3 P* E9 ~9 N5 k0 l3 V在CSS里用一个点开头表示类别选择器定义,例如:/ l: s1 W% q1 K [6 T2 I
.14px {color : #f60 ;font-size:14px ;}
& t5 N; `0 l* H7 `( J5 m
* l5 ^' U& v5 s2 x在页面中,用class="类别名"的方法调用:9 Q1 T2 b/ a- ^5 f9 i0 ^
<span class="14px">14px大小的字体</span>
, _/ n9 o$ R; @1 s( O! a6 H3 O' m% p( ^
) h. u( F% a7 W$ E& ]) e6 p这个方法比较简单灵活,可以随时根据页面需要新建和删除。$ p) u) D& A+ r! w, `. B
1 Y% s& P0 m4 d7.定义链接的样式: ~9 ?5 q" D4 K) j. j% R6 b
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
7 u; [7 v7 t1 \. K3 ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 r4 ?" B! }; ^4 x
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 s6 @! v9 {! n7 }8 {
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}$ q5 ~ B: L. v) o
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 S, O8 J: \! m! u* c) [8 U
& V- A$ W' s/ m9 A% X1 \& R+ s以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|