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

4340 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。& M$ i2 O7 ~' P8 W+ a% ?
# @8 F  C" L: }2 V
1.基本语法规范
3 D( p/ e) S' `分析一个典型CSS的语句:; }, ]- j' i3 D* g( l' t
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

3 J, l9 T2 A. I8 z5 U其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
0 `+ y- E- T6 P! e# R样式声明写在一对大括号"{}"中;
1 L9 y# i' U$ f6 W1 g8 m/ k! q/ XCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
1 d$ f. j4 l1 h# R"#FF0000"和"#FFFFFF"是属性的值(value)。6 C. z+ D/ X& J3 a" y

' Z4 c& O3 Y1 A2.颜色值
$ q" @" U! }/ ^& g' R
/ D" S: X* e# N0 h3 g" l3 J% `5 h颜色值可以用RGB值写,例如:
" V2 w, b4 K5 ~, r1 C" x+ ~: d' X/ Z6 U! D) ^4 n! b
color : rgb(255,0,0)
& F7 |4 F( }* D! e( \/ h
,也可以用十六进制写,就象上面例子8 g  f* ^& K6 _

# x& K  R7 p2 [% H0 h9 H" n
color:#FF0000
5 ]: M( H& n. F5 ^" s% z6 m
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
* l  W) \3 H/ ^9 z0 \" ^
: v/ \- M. z% Y8 T' b5 n! _3.定义字体
7 b$ `5 C: i* r' Yweb标准推荐如下字体定义方法
/ i' K; b: t3 \* W( B2 V" W
9 B. ~8 q) V8 {9 I: c
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

+ H1 K5 H4 Q) z! Z! a字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
& v% o+ X: o. L2 [+ ]( m1 j* \# ELucida Grande字体适合Mac OS X;
7 q$ {: I. m5 N/ X) ~Verdana字体适合所有的Windows系统; $ O! }4 L- v( R/ c  C3 ~' M
Lucida适合UNIX用户 ; @1 K3 ~$ t- k% `
"宋体"适合中文简体用户; ; m- Q  d% W0 ]4 A+ ~; f. {7 y
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 [$ ^6 c! ]% `/ z- f3 `4 A1 N7 o9 e. i
% D& G4 c; Z8 x+ K+ L% _! G" e4.群选择器1 {1 x; ]/ Z' Q! l  b! ], ]; O

" t& U& B2 p+ b3 Q3 P4 [当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:% C; z0 E9 l# g  |% g
! p/ ?9 e2 W  ^% m+ T
p, td, li { font-size : 12px ; }
: s9 u8 \& o8 f
就是给li下面的子元素strong定义一个斜体不加粗的样式2 Q0 k5 K' C, h5 E8 A& P2 [: T

" C; ]3 M$ f1 N& X3 o6.id选择器2 D2 N5 E8 ]: ]- B: s4 t& t" V

; E( Y3 Z0 g/ f( W用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层' W: ]5 r1 \/ r: I, y8 `
<div id="menubar"></div
* [. U3 V2 I& @+ x1 L. `
) b; a  h* }2 l- H
然后在样式表里这样定义:
7 v$ h3 Y+ w/ c8 T. v& v
* M! [. g( U: _/ L; W" m9 e
; B! a6 M2 X6 X8 e2 N
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

- M( v! L3 w$ g- e9 @5 Y/ U其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
5 J5 {" u6 ~1 }! x3 [& h
4 w9 i, c  }' `2 F& t# D4 wid选择器也同样支持派生,例如:( H$ n1 b: w. x7 q& [8 i; w
#menubar p { text-align : right; margin-top : 10px; }
8 i& B0 f. l5 Z, n
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 r& ?1 ~" n7 Y' w$ ~0 z8 b, C* O
) e  H, @" Q/ j- Y% w+ O6.类别选择器
& c; S! @. s* q  r) ~1 X
- p$ j$ D9 Y, g+ t) J# V在CSS里用一个点开头表示类别选择器定义,例如:! L6 b+ F* {6 O" X- W" w3 R9 c
.14px {color : #f60 ;font-size:14px ;}
" w3 f  J8 N* U
/ c6 W% p" r7 r4 O
在页面中,用class="类别名"的方法调用:
8 v; l5 \  E+ w. k
<span class="14px">14px大小的字体</span>
% K9 E# o9 k! I$ e0 G/ v
+ p$ g0 W( g1 k% h; Z9 ~
这个方法比较简单灵活,可以随时根据页面需要新建和删除。( ^4 F/ A7 p+ `4 B8 _' M2 U) m
  x! X- h; Y! ]# `+ G' e
7.定义链接的样式
6 ~' [4 C" j8 ?- r4 U! _CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
. u% l! [3 H$ E# Q9 ]* i
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 K6 }* i+ y% ]9 x( v
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
4 m8 u0 H( V/ O  Ra:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}2 g" w  \+ @7 S; r% f  Y
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

$ ?$ g* G; a& m" A2 X/ ~% ~( ~% {6 k" y' H5 S
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--9 `5 Q. A4 ~) |
a                        { text-decoration: none; color: {LINK} }6 L3 M1 ^$ e' F% n
a:hover                        { text-decoration: underline }
- u7 s4 l5 H/ O- i" j% Qbody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }/ M% q' G( s) C6 z, w
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }# C, \' ^- v2 n7 }0 P2 D! r; z* M
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }1 b( o3 l! _, j$ h* D7 ^
form                        { margin: 0; padding: 0}0 n5 m; T4 ^; _# u2 d
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }7 r0 E& p3 F6 X2 {0 I; O5 A+ N
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }& e5 m2 ]; I/ v2 U1 e
.nav a                        { color: {TEXT} }
# {" p) `, c8 b4 e8 H2 }.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
/ m( b+ y5 m8 v# M% |0 e8 ?: J.header a                { color: {HEADERTEXT} }
, q* l) D+ F6 c- t.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
! F2 z; y4 g$ g# t& H.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } % r- K# Z1 b6 C- H3 T* z
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }4 U9 d2 V( o- h/ v/ o
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }( Y1 K& x1 d3 ~) d7 D
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
! u( ~3 r7 C# Q2 j.outertxt a                { color: {TEXT} }- ~3 m% c" x5 U5 E8 P) C. ~( _9 y; u
.bold                        { font-weight: {BOLD} }, g4 G/ }! H& b0 P2 t" e, W( o2 U
.altbg1                        { background: {ALTBG1} }
. l8 h6 @( K* Z; r4 Q/ M.altbg2                        { background: {ALTBG2} }
1 H( k  @3 [3 {: d4 c" h* x. A.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
1 o* E! J4 S% ~+ g.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}" u: K( [+ n9 ?9 l& C# ~' u+ I
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } / n! O: o9 w. a  A1 x9 y
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
) H) B7 ]1 r! b.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}8 A9 T5 C7 }1 U+ F- g! s3 s
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}; A9 ~- z2 N! b7 ^+ n
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
/ e" B% V% L0 W& h. Q9 X.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
* S1 f6 ~! e4 E, H# W.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
2 T3 L' m* Y! i9 B+ Y* J* Q.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
6 u7 R" Z0 ^; ~7 t' T.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}3 G- D  N' h( m' ]/ \( w
* i3 i5 I' j+ A
--></style>

3 i0 @/ I; x# q) k0 _  _# M5 M- F& x# r
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-6-30 15:19 , Processed in 0.106175 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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