|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。2 O! D' c1 @# u* r, t( c1 f
$ C( L; l, w$ n& g3 [
1.基本语法规范5 W, G, H: k- P# b0 H: ^
分析一个典型CSS的语句:& E5 a6 P5 c% j2 p
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
8 }* v* F; o: R1 \. C其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 J' b" f: d+ j% ^) O样式声明写在一对大括号"{}"中;
- h; _' u) x4 [# h- v1 dCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# K) Y, J' I0 ]/ T"#FF0000"和"#FFFFFF"是属性的值(value)。
2 P: s1 i1 O3 Q) d0 A: U; w1 w2 w# Y: O2 R9 H
2.颜色值4 l+ I, C6 j9 v' g \
0 f# T7 B- `' p7 z颜色值可以用RGB值写,例如:6 Q0 B/ E0 a: g6 ~) F
]9 r* ?7 x0 r" |$ L
" ?0 v; [: t& j2 a9 {; M3 ]
,也可以用十六进制写,就象上面例子; E& X( k. g4 {* g$ y2 {
0 K% I6 L) O% d
7 `; F7 f+ `$ k$ S3 j) c如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
* ~6 i' k' D7 y4 Q' O$ N! d7 u" O9 `9 [* S; {: D g
3.定义字体
1 t2 Z' M8 I4 N4 s0 Vweb标准推荐如下字体定义方法$ n8 G4 T a8 [0 v5 \1 Y2 i8 N' g
! M) f1 y8 Q; E$ C
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
+ H# w: r" |2 M, y字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; % V' R) ?: {: [1 u2 o
Lucida Grande字体适合Mac OS X;
- g' m; K3 ~' e8 j TVerdana字体适合所有的Windows系统;
9 L" T i3 d" w& l0 ILucida适合UNIX用户
- }5 L: M: y1 f0 ^"宋体"适合中文简体用户; $ S3 S3 D3 X: h5 r# t% K
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
! K m% o+ |5 J
# H+ h+ @* T4 L* x" H4 g7 z4 m4.群选择器! [" J' ^7 ]7 p' Z8 o4 `8 h1 G
5 G) e0 s; n0 }. X) l8 N
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:' d5 o; s5 Q# w7 \) v
$ a* V/ ^, A, G6 d0 w+ V, s p, td, li { font-size : 12px ; }
$ K# S8 }9 a* s/ A) q% g0 {1 i就是给li下面的子元素strong定义一个斜体不加粗的样式* e& B) s8 ?9 D' O% f5 b7 G4 W" k) K
% L0 K% g, C0 S" C( Y6.id选择器
% e) f/ z: l$ H. q& d/ @1 f% M& E0 O% W
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 L/ W0 _3 J4 A6 d2 Z& a; S& b4 t; C/ b+ T9 _7 R( x$ f
, d; d# v0 L9 u- i% D6 s7 F) q+ ~- K然后在样式表里这样定义:! k* \8 W3 |8 g- h! J( w' `
, |0 s$ ^( C* j9 |$ p' i: W! F/ N% R) y* a# S. Q8 F7 h
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
* a7 \$ K6 J/ U, l# w/ D% g其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' S5 p2 Y. X- A9 u! E) o; e+ f6 B9 v
id选择器也同样支持派生,例如:: C7 s( v5 s4 G! X D9 \
#menubar p { text-align : right; margin-top : 10px; } 4 V$ q' A0 o' N* O# k
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。. M3 Z3 W6 N+ A/ ^9 x
, Z1 B) [- a) ^7 d6.类别选择器
7 v2 R, r3 o7 S" M3 ]% g, W' w3 @
+ ^5 `) W. f; @4 S8 o" H" u# o' q在CSS里用一个点开头表示类别选择器定义,例如:
8 } z( l" S# z* f/ p' ^, o, j.14px {color : #f60 ;font-size:14px ;}
' R) k% {# U# g4 y" \
7 i/ j* u3 Y+ |在页面中,用class="类别名"的方法调用:5 W$ S7 Q3 C3 H: Y
<span class="14px">14px大小的字体</span>
8 F- t7 c3 p0 z, ~0 J( W: f3 y8 K( \4 F: S- h# k& s/ a
这个方法比较简单灵活,可以随时根据页面需要新建和删除。5 z& j B* v% D) P& n
3 h9 ]! m. b# ?% _ X7.定义链接的样式
& J/ Q/ [" u |5 i) W/ SCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:! ?+ E2 V9 W. |2 m$ Q
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
& y. l x+ L7 I; U# ^/ {# N ka:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}9 ?* T9 @1 [( x8 D9 y, B: e
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
; y! X% _$ m+ v2 I0 a, ~: ya:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! [ s+ {$ z, |! ~ j. D% o. E3 v2 M
3 s/ {3 G z/ T0 f! S以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|