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

4522 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
' p3 W" S5 U7 [2 t; w+ p. ~- r7 J1 n6 l. e4 N
1.基本语法规范5 ]' q" P! h, a
分析一个典型CSS的语句:0 v% _+ X: ?& w! s  N, K
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 E3 s/ ]" C( S% _3 X/ E
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
) u( I* {" C; b# o. |4 [+ n. Z样式声明写在一对大括号"{}"中; ( w5 s, D) Z9 g& Y+ C/ k- b
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
& ?5 Q& l. j) c. P8 _2 m8 k& h"#FF0000"和"#FFFFFF"是属性的值(value)。! K& G+ g; y% e+ p8 v2 }" w
2 S  r2 D/ @! v5 L' E# Z& F8 L. h
2.颜色值; b$ Z* o) r" f% T3 K) @
- }9 T9 [" w/ S# z# o& _/ \7 |' d
颜色值可以用RGB值写,例如:
7 \+ e* ]2 v0 W( p9 u% R  Z
2 l- ]% Q, E/ g8 i. p
color : rgb(255,0,0)
2 x  f) Q2 R3 D; a
,也可以用十六进制写,就象上面例子0 e8 k: F/ A- L5 U

% G1 B  {1 `7 C6 ?  _& T
color:#FF0000
+ ?+ i# x1 D# W8 p% R# s
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。% G; l% R, I) q5 d8 o
6 ^: j/ s4 S* R; o% x. q3 w: V
3.定义字体
4 X0 T4 y9 j# Z; @' @# I, s3 w: Fweb标准推荐如下字体定义方法1 {0 Y% @, I5 f& W4 j: B& P
4 {) U: j8 U- H+ i# c
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
& K2 ~* y# v$ t; ^+ |9 q. N
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; % H5 A7 ^9 L2 Y9 S" k
Lucida Grande字体适合Mac OS X;
; m; A9 ]5 }. a, m0 U: VVerdana字体适合所有的Windows系统; * k' w* J9 T3 {( q& u; ~0 s0 _; n
Lucida适合UNIX用户 1 r% c. A9 T: q; e) U! v# j/ w
"宋体"适合中文简体用户; , X6 o' D- w. c  g# u
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
4 O7 n# _7 ^! W. ?7 F% S# m* s6 b5 n7 {9 {
4.群选择器
* x: O8 u4 [1 ~8 e2 I' z% S* R" `5 B4 i' z8 K
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:5 l+ Y6 `9 |( a! w) d
* ]1 p3 O/ c* y( x  V1 S+ E; [
p, td, li { font-size : 12px ; }

5 a. r0 T7 @$ W5 J就是给li下面的子元素strong定义一个斜体不加粗的样式
7 o( h$ J  o6 x# |, e  i$ [/ y& c0 N1 X3 B9 }' l
6.id选择器
  H# p$ e( O1 f! `; @- @, X( {2 N( r0 {  }- U0 e* C$ o/ G; k! e* x1 K4 q( `
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层7 ~9 W$ G$ o# w% y
<div id="menubar"></div

( m, r) b" S. ~6 c% Y8 ~7 G5 T' T
  P& a) b3 P" G然后在样式表里这样定义:' |9 F" q" o! J( Y- O! L

) y: \1 m! [7 q1 }, Q
: g, J* [2 o' U& W
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

: z/ j# m! N- B& \1 J! \* b% x其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, f* W; j; J5 i( U" {
' n( K; {8 B" o2 X+ Q7 n) C
id选择器也同样支持派生,例如:- @0 x# f, u) j: p) I' F) G( n. Y
#menubar p { text-align : right; margin-top : 10px; }

, r& K( B0 M& h% \- {4 n这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 l7 q+ {& t6 a) f/ I9 I+ U" V7 |1 ]. d; Y' Q, a0 t
6.类别选择器" z0 {. Z6 `- x9 ]
! G& R( X# ^3 y, k# s% e
在CSS里用一个点开头表示类别选择器定义,例如:3 @. R* m, W: V9 T8 ^
.14px {color : #f60 ;font-size:14px ;}
' L- {0 d9 Z) `/ Z/ v6 ]

% n+ l* f9 u3 f; F, H1 q8 ~在页面中,用class="类别名"的方法调用:
6 Y. o+ `9 i% q' B+ {
<span class="14px">14px大小的字体</span>
2 ?* O4 K2 \4 E: {
# x0 r8 }& K- E/ G
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
3 G8 e: V& c# q& ]7 l& i) J- h9 X. H7 z$ r
7.定义链接的样式2 t" t! ?4 g- w0 [% q) n- [
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
  z' U2 L& D% ]/ S. X& ?) e9 E3 a/ c
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
0 J8 ~: j6 h3 a4 d' \% j3 Pa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}& d1 T5 j+ c  z. \. x
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
7 E0 N9 w0 `& v& f# ~- z' ja:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

5 s5 s3 Z9 x3 e* B# q: l0 y0 ^' h9 Z
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
5 h1 Q8 h$ V/ l0 H% `2 d$ ^a                        { text-decoration: none; color: {LINK} }( k( d1 j& G; f
a:hover                        { text-decoration: underline }
, G  u' D* t6 q' [( n1 {body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }* d- j  Z7 n4 b" E+ v0 W- r3 O
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }+ V% C$ i; K8 f0 r* V
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
9 n9 Y  W! C0 Z1 M" z6 Pform                        { margin: 0; padding: 0}6 C6 b4 C( ~( w# A; e
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }$ P6 c" }& L! X  ]8 J) e/ O
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }* @# Y/ z7 O% K  I" T7 F
.nav a                        { color: {TEXT} }0 r3 j7 [& s& L+ _# A+ q9 I' w7 r* a
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
# b, \- p6 F6 T% Q7 N+ v4 \.header a                { color: {HEADERTEXT} }
6 ]7 [) h2 e3 i6 M( r.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
( z! M  }: \  s, B- L0 Q.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } & G% |, }0 V) l, o2 k
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }. ?7 V+ E( U4 L/ ]
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
. g4 J) P/ v( H.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }/ n+ P- W. ^  }' `/ F# V
.outertxt a                { color: {TEXT} }8 ^) F8 N7 M/ e% _% I. g# }, E3 ~. m
.bold                        { font-weight: {BOLD} }
- O! j. q; K0 Z3 h.altbg1                        { background: {ALTBG1} }1 W- D- L7 d' O3 c0 P1 c
.altbg2                        { background: {ALTBG2} }1 |, F4 y1 Q3 y* |; I% e
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
& U- s8 c( j) u1 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}/ ]8 q* X7 R0 s; Q2 t+ q
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
0 h+ s5 K/ L! O.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}0 [/ E6 J/ E, t1 U" Z$ r
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
! F! D0 h: m3 z& l' K! c.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
# D! _$ [5 C  L.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
5 p; Q7 D* {1 M( a3 z# s.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
. L# R8 Q* W+ {- J) W.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}+ [# Z6 \% Y3 N( `$ A1 K
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
# V, m. ~7 l3 c3 F9 _4 T  F.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
3 B0 a7 a9 Y$ T3 d8 B. \, G4 M
, E: e0 h* f7 h# B) k. K) g--></style>

) H- y) a/ s7 I  e: u" r! E1 G& @, y$ y- ~" @
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-7-31 17:51 , Processed in 0.081639 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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