|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。# b" n9 ]5 l4 @* Y5 E4 U1 m
( ]: {5 s+ w7 ^$ `+ Y1.基本语法规范
3 Y1 m! f2 `( [; o' t" z: T分析一个典型CSS的语句:
* ?2 k( w: a/ |5 i, }7 yp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 6 {% R9 {- g/ I& E' q
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 V3 m+ G( J$ n1 F/ w, m样式声明写在一对大括号"{}"中; 9 Q: y+ R1 \4 Z1 }
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
0 U5 m* w& \* Y: C7 n"#FF0000"和"#FFFFFF"是属性的值(value)。
/ _6 O* j4 F# p; m R, w/ u! X
, ]0 }7 O7 h' U: j2.颜色值
8 \6 [% G; |% W9 Q2 b5 E( B+ S4 K% U. s" J9 N4 _2 }
颜色值可以用RGB值写,例如:
+ |. |6 b5 s7 m+ w$ u- i9 ?$ b, Z9 f3 f( R! a/ L/ W3 b. ]4 ~
% [) }( I2 h; T5 L& {& [4 Y9 y/ {,也可以用十六进制写,就象上面例子
q8 u; }0 k- b- n: j
8 y' U, X$ a8 }4 J' p7 y- l# ?# `5 H
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。: p' m" J/ f. c3 |. j6 e
& w* U! H( h* u3 l$ v6 W
3.定义字体' `& x0 f0 `9 Z+ E u# K5 X
web标准推荐如下字体定义方法
" ]( C! N+ z( {9 p& u+ K3 s* W b2 f9 \( s. Y7 e2 [. s. \
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } % j, i( [$ [: i- S/ a
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
: A% H' r8 Q& j# a tLucida Grande字体适合Mac OS X;
- Y) v2 d) z) k8 A! BVerdana字体适合所有的Windows系统; " |% \' F) E) m* G1 Q% Q" X. ^
Lucida适合UNIX用户
( C* V: D% s" c# H"宋体"适合中文简体用户;
3 O! {7 D& o5 }/ L如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
/ t2 H" m7 y. a) P& X
) _( q' c9 r' h# C, _% B4.群选择器& h. A" Z( U! e8 V! C* M. m
! z. @) U2 I! _8 ~" t
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
7 k3 f3 t7 v6 F' t' T
0 M+ d+ t( O2 I- L5 q+ { p, td, li { font-size : 12px ; } , z+ y/ w6 o. ?
就是给li下面的子元素strong定义一个斜体不加粗的样式
2 E' S t; l T8 X# h. f( u! ^( P6 a& l5 p
6.id选择器
" p/ ]7 n5 x, \2 {& M T8 N* T! H0 A. g# U5 e! X# B
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
& X% y2 y; T k0 x% E8 Z& Q: D5 |. P U$ c
) o$ z7 q" {4 A) w# q6 h. E1 Q/ [4 k
然后在样式表里这样定义:
N+ T( L) H( t( |% z4 N! s w2 y1 F+ ?6 w& m6 Z
' @' m% J" ]4 K) B( N
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 4 G5 ]- m* k. s8 q
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。7 h/ e* q* K1 E# m# p
+ ~0 r$ R' Z+ @5 V+ j l; G: x
id选择器也同样支持派生,例如:
/ R+ }! p9 |3 x/ Z, D5 K#menubar p { text-align : right; margin-top : 10px; } ' \1 ], ?& e+ n3 C
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 b% h+ \" d6 {0 I$ e0 d8 m# l* J1 ^
9 c$ m! v- S7 E" J! s6 R6.类别选择器$ W9 I. y1 ^; J: B# X# o
# b0 R- K/ W5 A, G+ q% u" h
在CSS里用一个点开头表示类别选择器定义,例如:2 X% p! g$ M7 T+ I+ X( E
.14px {color : #f60 ;font-size:14px ;}
5 w& T5 o2 g% y0 z
) i! T. B0 I/ c6 ]* a在页面中,用class="类别名"的方法调用:6 w2 R# l3 s. P, a7 J
<span class="14px">14px大小的字体</span> 2 \% }: k) R9 n6 l& C" R
% G/ E6 j r5 e1 l
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
5 k! P3 \' J! r3 g
0 C4 a2 c2 Z' Y7.定义链接的样式
' j% }& X/ D, [5 o7 W( QCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
+ |! R1 v4 b: ~# ~! L- [, la:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}8 F5 V* T# n) v! Q0 y
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# b0 V2 w8 d0 B3 h6 R" P& p* H
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 d3 |# c- B( X1 Za:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
w" t* x( d! P" l( ^. v9 [9 R2 s d- J
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|