|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。* }2 w- v8 v6 M$ M: J+ B5 W4 P
5 U" E$ U# `% t: X! J3 R% u# m, E
1.基本语法规范
6 L& U0 `) @% R% e分析一个典型CSS的语句:1 B: b# o C, U
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} : L/ ?2 K2 {5 q. z
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
/ H& Y8 P5 q$ {7 O样式声明写在一对大括号"{}"中; / h- e7 m' p4 _+ _
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ E( m7 b5 q- @
"#FF0000"和"#FFFFFF"是属性的值(value)。5 }+ b0 r3 x( t. Y+ O
7 j# I/ G# B, \; j, m; g7 y
2.颜色值8 D/ j, T l( z. t4 h
( M+ O/ b5 w7 W
颜色值可以用RGB值写,例如:! ?, |7 m: x% R; g( n$ X
# s* ?+ T E" R9 c/ J1 V, p
, a' y: ]- |/ O3 f,也可以用十六进制写,就象上面例子
M }/ {3 _1 w) S. N( F# g7 c# W( R W% ~) L# \" L
$ [9 H4 F, {* r% r* G& s: L# |
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。 s; W* A1 p2 z8 a# M
) b' @1 j( e- A; d
3.定义字体, o) R' a/ ]: ^) R# h( n
web标准推荐如下字体定义方法( e: o8 F7 |; k5 a; _4 J
- ]/ U+ \! J$ c' F
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
( w. T) z' _; H, r# I# y字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 1 h5 P2 M0 R( C$ P3 l p2 U/ D% q
Lucida Grande字体适合Mac OS X; / T d) j6 p2 E* }+ R5 H( x0 f
Verdana字体适合所有的Windows系统; , ~3 C8 u- U! \. P o3 l& S8 J, s. W
Lucida适合UNIX用户
( O/ p9 ~0 g& B; @"宋体"适合中文简体用户; / s' \. m3 w1 o0 G. d5 x! E1 ^
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
' ^, Q l* [! n3 Y
9 m3 I! o) m8 ]4.群选择器
) k# g9 w# J! O) ~8 _) B& w# p9 H% t+ C" I% R+ d1 @& l7 i+ q# r
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:' @; R$ b( H# g3 h
% |6 T# [) Q* }) m/ c. }( K$ D$ r p, td, li { font-size : 12px ; }
# t1 W( j8 F4 l2 W9 z* t就是给li下面的子元素strong定义一个斜体不加粗的样式
j+ `. I% k) k) A
% K6 J) V# F/ a; Y6.id选择器
/ \) z7 k, \$ a8 t
, @" N* J3 M3 }用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
& ?/ x% |" Q/ c$ J, Z! u3 g* y5 s( w- A" P \; [# x% G3 Z
/ |4 e; Y/ k9 h+ l6 K4 V9 j$ Y然后在样式表里这样定义:
& k2 b' u% ]4 l' M0 n
" y) I& D8 |. q D! k/ Y2 c; ^
, {, {, U/ z8 ^( E; W" t8 L#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
7 p) u. ~8 R; ~0 m, @其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 M3 k6 f( B0 v1 H+ |! k
. z/ [" Z2 V; u/ Tid选择器也同样支持派生,例如:, c% a- ?& X% \& z' Y
#menubar p { text-align : right; margin-top : 10px; }
( Q' e" l, c) i9 ?" E: V! {5 X这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 m8 K3 @" w# @* m* Q3 X" F/ N) [
* I& q0 I4 r4 e2 b# T/ b6.类别选择器7 g; o6 y- x5 B' \; X
' h1 |2 a. K V8 V' ?, z在CSS里用一个点开头表示类别选择器定义,例如:
% Z- g& }4 j W6 y( M* P7 B9 k.14px {color : #f60 ;font-size:14px ;}
+ u8 x, ]. m; G4 Z1 i. ?- R+ O4 q: p/ k# U9 q
在页面中,用class="类别名"的方法调用:
* q f1 H. y$ p$ K, S/ n i% V<span class="14px">14px大小的字体</span> 1 f+ j+ o( g; p# K+ G, K
7 B. T; b3 v5 Z2 H' c! H这个方法比较简单灵活,可以随时根据页面需要新建和删除。: z3 C- y+ s% S' s- v; Y& M
& y5 s0 j2 h1 x6 b7.定义链接的样式
3 ?& W) j' B% e+ t5 RCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
% n$ B6 D C" X! l2 r6 s2 G$ ra:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- q. `8 ?2 D- y' t4 e: r# R
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
+ e( [/ b8 A1 z; e' ~8 V9 ~a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
p( f% K9 X' xa:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 3 z# r& k& d9 h
" b7 F$ f; r/ k3 Y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|