|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
5 y9 T/ x) l& o0 ]2 p8 `, s8 b* a; E9 Q, c# ^" C- i
1.基本语法规范
7 I! M5 G3 ?) V分析一个典型CSS的语句:, f4 n4 ~3 y1 |- ^
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
( v9 h# @! T9 _3 y& o4 l其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
, k+ O- m/ s% j. W5 K' E样式声明写在一对大括号"{}"中; , q! @3 b! {4 D( J2 \6 X
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
; ~" n5 n- F- C) g5 w Q1 R8 q"#FF0000"和"#FFFFFF"是属性的值(value)。
; p" l$ s4 R" b# @4 v- x. M# {; Y3 c5 i _
2.颜色值7 Y2 y1 w" k0 U
# s7 ]6 ?3 u8 W0 q, `" k颜色值可以用RGB值写,例如:
; z3 h- x) e7 ^& m E P/ b$ `) e
1 T l; i& J9 q* f7 }" c9 Z
,也可以用十六进制写,就象上面例子
3 ?' i1 H+ d+ D; }8 C5 \+ L' g
' d3 M- g6 J0 u* u3 i& _" z# ? q' V; {& P! B i. l' c ]7 n8 n
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
% V0 n' w2 l5 }- V7 g( ~0 \" ^
2 J" S+ [# Z y( P! m$ V9 L% {3.定义字体
& B( l. a8 D, ^* R8 Vweb标准推荐如下字体定义方法1 d0 f J/ ^1 ^8 O" E
0 E' b5 z4 i W a! ~
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } + t2 b' v, h- ^- M/ j: ~
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
# x( Z3 j: G4 v6 V4 _* r/ ^8 ~Lucida Grande字体适合Mac OS X; : j9 v9 E$ ^0 Q+ L
Verdana字体适合所有的Windows系统;
$ j5 r. k6 F* B R9 XLucida适合UNIX用户 ' m, V) Y( ~ b+ j
"宋体"适合中文简体用户; & `5 R* M% H6 r6 O* R
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, u' Q+ P2 |# [3 i d1 x. k0 p& f/ R
4.群选择器# j5 {6 m/ Z0 m6 b( u0 ?) w3 Y
. \( _" r* s* w. a% W2 V9 w, h4 j当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
: a3 {5 |$ Y+ t+ x6 u( q# U/ m3 _* ~4 n7 N" v* M0 V. @
p, td, li { font-size : 12px ; }
; e6 w) b+ f8 ~" y就是给li下面的子元素strong定义一个斜体不加粗的样式
$ `0 g# ?3 Q- P2 I/ h& _( M7 a& d) {7 s- t4 Y/ p
6.id选择器7 |7 M; t6 P: c3 o5 P; N: t% {
/ Q; ]4 M0 n7 l' @2 ^7 ?% l
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- Q R T/ K% t8 `: t, u3 ]+ g' w, ~" a6 f9 r% j0 w
' ], W, H! k. F, S0 `9 D+ {
然后在样式表里这样定义:% X+ ? m" ~$ r
: S; D1 C* p2 W; S) b
* M( V* V% @( d6 V- O, y5 c# ~( S#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
9 q: F$ N" p8 ?. j+ F( Y+ c3 d其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& z$ ]5 k. _' w5 U
1 T n6 _" b) n3 t0 uid选择器也同样支持派生,例如:
+ G; {+ ~ C2 L! ]+ {#menubar p { text-align : right; margin-top : 10px; }
: n d1 h9 k* J6 g这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
% R2 z: ?: M5 P# |0 U) r
% s# E" i! r) c$ d# p" \# V6.类别选择器
, Y! v9 V1 ~3 y
% X( \% S" u H% \9 p在CSS里用一个点开头表示类别选择器定义,例如: O$ S3 Q4 t$ u" R; q1 f* {
.14px {color : #f60 ;font-size:14px ;}
& z) T( x$ O) k" v$ [+ k8 X$ |& }8 b
在页面中,用class="类别名"的方法调用:) T1 E% J9 P8 v
<span class="14px">14px大小的字体</span>
( w- Z& v/ \/ r+ r: g" F# F, B& x6 }
这个方法比较简单灵活,可以随时根据页面需要新建和删除。' M2 z% u# {0 n( s5 O
8 _' D& M8 @9 U
7.定义链接的样式
2 [2 i9 r9 y5 G( `1 s, y) X/ `CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:9 ? `' B! ~ z e
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}2 p( q5 X4 k1 E; M
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
: Z% O. x( W* m2 ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} u1 {* o7 D" p. h
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! Z& h$ o6 u" C, K9 ]3 f* R+ q6 Y2 Y+ K1 Q1 n8 K" Z
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|