|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。( L8 f& E- @, p& w$ |% G1 A
- F! \+ X( O- {% h8 @, {1.基本语法规范3 c7 g. U3 b/ }# x1 O" w. \/ j
分析一个典型CSS的语句：
) p8 {( h2 M: ^p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
6 n5 y4 v u; R0 t/ [6 Z" Y$ F其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 0 f1 s( E$ X* }, j8 J& m
样式声明写在一对大括号"{}"中； 6 V C1 s- C1 ]# m
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
8 x/ j: D- ]; e# F8 |) q+ L"#FF0000"和"#FFFFFF"是属性的值(value)。
2 f' F K8 I8 ? R1 \& O1 v# \# O$ |, {
2.颜色值
3 O0 ~0 G# A/ I6 |
( i& F6 [1 X4 S8 u9 @ K6 n( t颜色值可以用RGB值写，例如：
* ]9 q' V9 Z h5 T8 Y8 A3 h- i5 \8 l, j
8 ^: a9 ]8 _9 ?$ u* S- G ^1 |4 S
，也可以用十六进制写，就象上面例子
% A. f x% i9 t3 }, ]- _1 J: ^0 ]& r/ t4 f+ w9 o- m! a
% c- i# f, G: k如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。1 e' ?: s4 Y9 L' j1 Q5 b
- j! J7 V" R9 U- ?! v* p3.定义字体
5 Y; }6 d5 p1 c4 S1 D x: qweb标准推荐如下字体定义方法! }/ f' E2 q F! e1 e2 z
6 Z( ^3 s* U& x8 A7 P
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 S0 V7 E/ n( ?字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； % R0 _5 I$ I6 f$ v# o- W
Lucida Grande字体适合Mac OS X； , t! k* X. ]0 `
Verdana字体适合所有的Windows系统； 1 w* p- d& L) o9 v- W' B
Lucida适合UNIX用户 6 I5 M6 q! X5 A) E7 a/ X1 j( P
"宋体"适合中文简体用户;
( O( r1 b0 C# h: h( r' D$ B8 e如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
8 J) V* |0 R5 w( ?7 n. e- ~. |/ M; z$ h! \
4.群选择器
' W. o- |/ `8 `4 X* W; Y5 }' N( G- i0 ~( X" l6 b b- N) x
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：- v+ W& N, M9 H. T
) R* ^' W. E- s$ W- c- l! p* E
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式5 L$ u" X& _" \' e: @+ W. T
8 ~- U, L+ v7 u- P6.id选择器
- p6 Z% b# U+ Z9 R
# u; s7 D/ u7 a# R用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 r9 Z+ I) g) G
, _0 s& H3 i; f
" x" K* f, l8 [然后在样式表里这样定义：; A. F- U1 \, b/ k
- `$ N0 b0 e8 v0 I. v8 }% i/ r- I$ s$ z: ?/ x9 U
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 z# p' T& Z% K9 A其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 C) w( m0 l' t* r. w9 x u9 d% j+ P U/ d6 K
id选择器也同样支持派生，例如：
% q( m4 n' D. f9 _$ @2 Z#menubar p { text-align : right; margin-top : 10px; }
, b. f, K* h- C6 V' j' j. Q4 b1 Y这个方法主要用来定义层和那些比较复杂，有多个派生的元素。% c M9 `6 }3 i2 P k& z A& f
0 f$ t' v2 t7 e9 F- r9 `1 n& g6 }6.类别选择器4 y, V$ K3 p u3 n
& S% _7 ?( x% x2 Q1 n
在CSS里用一个点开头表示类别选择器定义，例如：
5 `. ~( q8 C' @8 d6 e0 y8 _1 u.14px {color : #f60 ;font-size:14px ;}
) H& C/ m% t4 l7 X7 y* a
* G1 [) f) p, q* J; N; R在页面中，用class="类别名"的方法调用：
$ Z- f. ~8 @6 \; O1 [! `0 v<span class="14px">14px大小的字体</span>
4 S- E7 V0 g; o5 ^2 `! q
这个方法比较简单灵活，可以随时根据页面需要新建和删除。, P( e% \% O9 q$ [' r& g
0 c/ U" N4 Y/ \7.定义链接的样式$ ]7 z! _" u8 w% |
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
- {, C& ~0 N! F3 La:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
e5 f c6 B& ]* A, |a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
5 l; x; A+ u2 j) ^2 S$ c' Pa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* V5 H6 o+ M! k' S( ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; U/ D3 n B( ^! o
4 e' W# B( U$ h6 P5 K2 _1 X2 A& y4 ^1 `以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
