|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( ?* @ F" U8 ^0 D2 n' W8 h8 ?
0 C" }7 ^0 U1 N& u) ?
1.基本语法规范: @3 T6 U3 U; X0 @' [
分析一个典型CSS的语句:
5 x( a( x/ I8 Y, p+ I# up {COLOR:#FF0000;BACKGROUND:#FFFFFF}
6 Z! ?0 K- c( A& A( B其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
. ?, Q0 c4 P+ u样式声明写在一对大括号"{}"中;
! G% J7 P" s! P3 I' rCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 8 |. n! Z# ]' k: O( H* u S$ a
"#FF0000"和"#FFFFFF"是属性的值(value)。
5 ]3 R* ]# `9 r5 A s' m; r( o1 L
2.颜色值
+ t- m% P M$ Y4 Y% Q3 W8 Y, v
1 g$ N# q' c2 D颜色值可以用RGB值写,例如:
. K) o; e% B3 r/ A2 P+ a* ?) M0 W7 _- S$ h3 r& N! S% c
: g7 k* O. B. f0 v0 b" J5 P4 U
,也可以用十六进制写,就象上面例子
% `. V: Z8 | V- i/ |. C
1 s5 Q- m, _; F! v1 R2 a. q: l; g8 ^7 N# y7 h/ U
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。9 o/ F n3 J' X0 O5 i7 A
# e" J4 {+ m8 {6 F
3.定义字体
4 F% n$ C+ q1 e- Y$ b% V o3 tweb标准推荐如下字体定义方法
9 A, t" E4 O+ l& B$ x: ?8 n5 I( R# ^" q; O: h
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } - c- K& O7 {' w
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 4 v" t- T7 p: w, {8 C6 M
Lucida Grande字体适合Mac OS X;
0 Q! }3 m/ B5 kVerdana字体适合所有的Windows系统;
9 e8 n- B. k h0 p( W* l& hLucida适合UNIX用户
& r: i, h( L2 z1 h( h, X9 x"宋体"适合中文简体用户; $ @7 Y0 M F) H9 m0 ~# M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
a* [$ u' ?- Y% Z
! T9 u5 R1 b9 s4 g, L, T2 o4.群选择器3 U8 D- v- ^4 M+ i
8 R+ u& f! S5 f" U+ ^% s当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
" T4 X l) H/ \1 \
1 J+ ^5 y& E/ p! e, |) _4 G p, td, li { font-size : 12px ; } : o- s# W9 W, a
就是给li下面的子元素strong定义一个斜体不加粗的样式
! J; R ~& v6 R/ l
& D) ?! ]6 A6 @$ j8 X, r6.id选择器 ?# k# C9 ` h9 l; N2 K3 h" n l
5 _+ ^" q: k; J5 }/ l: ~* n用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层( c [# M O8 T7 Q- r
# \4 V0 S J e; d$ u' A) N
/ f+ D4 Q0 f' H( h$ ~" V
然后在样式表里这样定义:4 k9 F: d4 N% h0 u+ z. S; p
7 s# o4 p5 |! i- r6 u2 b3 ~7 R S" G- ?; I8 Z
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
% E, i. t& K; S+ e其中"menubar"是你自己定义的id名称。注意在前面加"#"号。9 |& j7 p: z- U' O0 |
( e) R+ C# a M7 @! p* I
id选择器也同样支持派生,例如:( f9 o$ U( w- ]% W
#menubar p { text-align : right; margin-top : 10px; } 4 V( u& B" b/ ~" T2 }5 |
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。% X* F# Z1 `7 [0 ~1 }: l4 ?
; d- I k+ R/ ~1 Y# [, y3 W+ z6.类别选择器
4 c& I/ l/ N! [0 q4 k y+ g. K4 M1 e! q; h
在CSS里用一个点开头表示类别选择器定义,例如:' b7 h3 V, |+ a3 x2 U
.14px {color : #f60 ;font-size:14px ;}
A, F: D* k) W4 z+ _$ T. r) u- ]$ }; X" E1 }
在页面中,用class="类别名"的方法调用:& t7 M$ ^1 J' c& E2 q
<span class="14px">14px大小的字体</span> 8 b. U9 V# E) {; n4 d/ ~
3 z- o. i1 t X- [: K
这个方法比较简单灵活,可以随时根据页面需要新建和删除。2 v# p+ K5 V. }( v; }5 q* E
; ]) U& F1 j$ F7.定义链接的样式
1 ]' I1 E2 @( o% ]+ v7 b* UCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:5 {9 P3 i( ?% R4 x w' m. S. i
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 j# N4 a& L* s# I/ @a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}/ {) Y$ Y, `3 T
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% U l# W% h; X4 n4 u: i5 |a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
' z0 _# i3 f/ A( U
3 K( _. A( R% E" G; y9 c以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|