技术部 收藏本版 今日: 0 主题: 115

4635 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。) e6 _" `1 O+ v/ h# r- b6 e- `
1 Z* t2 L2 e0 p
1.基本语法规范
# t5 s. e9 X6 u/ V' k* ]分析一个典型CSS的语句:. e+ ]1 k0 _! Y5 P8 _2 C
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 y6 C: J1 B' b. X* s+ Y
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 9 A2 n% b0 a! U: I& e2 A. @
样式声明写在一对大括号"{}"中; 8 l9 Z$ H) W. o, k7 B
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
" {6 m' N. N4 I7 w, v5 p" Z1 @"#FF0000"和"#FFFFFF"是属性的值(value)。
5 r2 N+ k' ]9 L( |. s9 L- w) S6 n7 H4 V( }* ^: `
2.颜色值6 V4 s' Y- r/ F7 f9 R

+ {3 s2 \6 ~* Y4 I颜色值可以用RGB值写,例如:/ e7 z' g& O% Q0 h3 b# A

1 k: U7 e" W) k: q7 V; O! |) b
color : rgb(255,0,0)

$ U, h$ A) m# ?5 w) y3 x) K5 p: Q,也可以用十六进制写,就象上面例子1 j! \7 w" j6 k. ~4 v
! B  `8 N( q9 [6 s3 t8 Z7 T
color:#FF0000

6 o8 E9 G7 j* x% }" L7 w0 t+ [如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& a* ]  |3 v! O& M( F9 a3 X

+ g. }, |4 {0 d3 L( T8 [3.定义字体& u9 v3 F+ _, z/ ]
web标准推荐如下字体定义方法
+ Y0 c/ L* Q0 V$ u1 v4 n; h3 A$ O. b6 s1 I3 t# Z& I
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 {: Z, y( U1 B! ]' ]# u, a* j
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* K+ Y5 k2 E) }Lucida Grande字体适合Mac OS X;
/ y9 ?/ \3 K  KVerdana字体适合所有的Windows系统; 1 c, W4 t5 j: X0 E) d
Lucida适合UNIX用户
% c* Y" V* y) q"宋体"适合中文简体用户;
6 Y/ x7 M* u. s( [" H- p如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;% j) g" G6 g- z6 U; b* E! ^% |

/ }- n. w( k; W  W9 @4.群选择器
! Z0 A6 g9 Z& Z  n6 N+ }4 y* ^8 k% S& I( L6 Y% K  R* Q
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:( q# u3 c+ j3 Y+ X' @  b
' b  u3 f9 c% L# Z' ]8 h9 b2 y
p, td, li { font-size : 12px ; }
. {, |& @: q1 D* V7 J- B' D5 {0 @
就是给li下面的子元素strong定义一个斜体不加粗的样式
9 E0 F8 [) e/ Q3 f& A/ ?
( C' L; X* O2 Q% G4 ~. ?" x6.id选择器9 s- j) p# ?$ E/ {2 y- C% i1 j

8 ?& M5 E+ t1 u/ Q5 P用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层* n* m0 G+ Q9 k; z! b
<div id="menubar"></div

5 i" Z& H5 a5 J% i: m) M+ B4 W5 ]1 A* L0 g5 x& \
然后在样式表里这样定义:
: V6 D2 ~' a: l* e4 B2 r5 ^' h2 g. G+ p9 a9 i

+ w/ o" k* [* ~3 e( n2 W5 D9 |
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

3 [5 n4 B) p5 j( s! W5 _# ~其中"menubar"是你自己定义的id名称。注意在前面加"#"号。( r2 R! b1 R; j

( U+ F. F5 r4 \id选择器也同样支持派生,例如:
' ?- v/ S# ^; i; u/ D4 k) d
#menubar p { text-align : right; margin-top : 10px; }

5 E4 B% m' Q/ P3 V这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 M1 L: A% U6 b5 }: E) N
" {; e" ?* M( l* j6 I% u! c+ {- G
6.类别选择器
  B1 ?9 Q- \' ^, y' r5 h" W- E, Z5 Q4 e) z- D: |# d
在CSS里用一个点开头表示类别选择器定义,例如:7 Y- X. Q6 m8 ~; }, c
.14px {color : #f60 ;font-size:14px ;}

. }, V! r6 U. ^6 l" U! g- }. v4 s; \( R' X3 i
在页面中,用class="类别名"的方法调用:# @4 {4 p- n5 ^+ v% q9 O
<span class="14px">14px大小的字体</span>

3 o$ }: G$ L. i! R" Q7 \+ V* x9 ~4 |# o: X9 P+ ^# t$ e1 k
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
( V+ y5 o7 [9 o+ a) F0 C9 k& g' `$ R7 M1 }. Q- m+ O) ~! [6 _
7.定义链接的样式
1 G# _- s  a6 YCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
$ L7 i. N9 j7 Z" D1 s: X% t6 Y
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. a& L! X. x2 [& \; d1 Q
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
7 @; U; b5 v) _/ {* t1 P- ^. ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& m0 x) z4 d$ N! k6 T. R! H; H  }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 u0 |# S0 ?" T! y5 h$ h
" f& p3 b) s3 j& ?
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--7 R  P# Q! e& R
a                        { text-decoration: none; color: {LINK} }
0 o2 k, ?9 U8 G! Y% }, Ga:hover                        { text-decoration: underline }7 @$ o8 }! J% W, t+ I0 t
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }: h% D+ B! i  X
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
3 u  u( [3 E# g1 K! }( s2 Hinput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }6 M* H; C. p* f4 K* U6 w5 C
form                        { margin: 0; padding: 0}
6 v" [# I  Y5 U" ^2 B  u6 }select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }% a, R9 T. @$ q: S& @# j# H% ^$ n
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
  w- {+ |* P+ j4 y7 x1 d- G9 f! m.nav a                        { color: {TEXT} }
' W2 I( ^  w0 m! w3 g& J# L.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }: S+ c, Z; L' i- K
.header a                { color: {HEADERTEXT} }8 t9 [1 n; {6 n: ]" M4 j
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
3 w  Q; J+ ~# a  ?. p- s+ l.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }   N# g; Q" u, a, E
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
" \0 p% b6 H. D" W( B0 \.smalltxt                { font: {SMFONTSIZE} {SMFONT} }. a; |* X7 z! h
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
0 D  j* w7 T. \5 ^  K5 `.outertxt a                { color: {TEXT} }
( R) J9 A" u6 C- q$ D0 `- v' O.bold                        { font-weight: {BOLD} }; c& r( y* M# }, N: C
.altbg1                        { background: {ALTBG1} }0 |1 c! b- U7 n+ Y/ d. S; k
.altbg2                        { background: {ALTBG2} }
/ a4 H# O2 N$ W.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
0 ]1 w4 f' F5 o5 y.popupmenu_popup {BORDER-RIGHT: {BORDERCOLOR} 1px solid; BORDER-TOP: {BORDERCOLOR} 1px solid; BACKGROUND: #ffffff; BORDER-LEFT: {BORDERCOLOR} 1px solid; COLOR: {CATTEXT}; BORDER-BOTTOM: {BORDERCOLOR} 1px solid}8 M; k/ _  P% D9 w+ \( \: {& [$ a
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } 9 U, r7 a7 U7 _! _- e8 r3 e2 U8 \" P' w
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
& s7 }0 }' q/ K0 K+ K9 @6 T.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
5 [) _9 R$ {' X* j.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}. s  x& L+ V. G- F% L
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
1 ~* s! U, Q8 ~- {.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}/ \6 h& t* H( N) O+ w
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}$ A3 k, h7 m2 D. u
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
4 o! b$ x# a5 Z& V4 r% ].popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
9 A% g. O9 K; x% x, R4 E# e* N
--></style>

  l6 @, X  h3 F  j8 E1 _
. e( Y% j* e' ^" s% \0 M上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

傲天阁游戏公会
联系我们
咨询电话 : 020-88888888
事务 QQ : 85075421
电子邮箱 : admin@admin.com

小黑屋|手机版|Archiver|傲天阁游戏公会 ( 粤ICP备14058347号 )|免责声明

GMT+8, 2026-8-19 21:13 , Processed in 0.095334 second(s), 6 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表