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

4573 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
! L! d; y' h* Q  U8 x; X' u9 N
7 H( E/ U" B$ L  e8 B1.基本语法规范
% s) l3 B$ d$ U: C分析一个典型CSS的语句:
4 Z2 [4 Z9 F& t( f9 a# d8 g2 B
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

, c# ^7 l7 s5 N) s8 R# E% C; g其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
- G$ u3 i* q  }8 W样式声明写在一对大括号"{}"中; 1 e, G8 U8 y0 o
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
6 {$ U  f' Z1 O"#FF0000"和"#FFFFFF"是属性的值(value)。; g$ b' w" y) g. j$ C2 T
9 m2 g" [, m- T( ~2 F4 [1 |9 c" M
2.颜色值
: }6 M4 \4 {- G, t# O: j3 H+ E% w$ u; z; T& R; A8 M
颜色值可以用RGB值写,例如:2 z6 j% c) |5 n9 t4 F
8 }4 o) d& b! F% u
color : rgb(255,0,0)
2 m* a3 }+ p* Z0 i7 g
,也可以用十六进制写,就象上面例子# R9 `) N5 @3 j; N8 R& O0 y  I

# w; A& E2 @& R4 V0 R4 }8 r; s( P, I4 |
color:#FF0000

: P- [% c4 F0 h4 N5 ^0 s" o如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
' V3 D5 ~6 H3 E0 n7 N
; e& J! \4 U* I8 \7 n3.定义字体7 f% `' [! j0 p0 y' H
web标准推荐如下字体定义方法
- r8 N+ G; Y8 m; t+ Z. C& c& B. \, Q' D" x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 q5 o; M* t2 d+ e+ O
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - ]5 W3 j* U4 J0 ^7 R( X0 \
Lucida Grande字体适合Mac OS X;
: t% h% S) [, {0 }  X* rVerdana字体适合所有的Windows系统; 6 ^0 t+ p& a1 K. u
Lucida适合UNIX用户 3 T, J/ M4 \- F4 ^
"宋体"适合中文简体用户; ; E" x  @- |' ~: W
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
1 p, G8 x* R% B5 D2 _
& J6 e% S- w: y$ ?2 N! e4.群选择器* e/ O( B+ B9 \" f
* K- x; \$ D; W8 m# E- X6 A$ L
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
7 G% Y+ y9 D6 V' k. a
  K0 d& P7 j2 q' X" @0 ^
p, td, li { font-size : 12px ; }
- C+ U1 g# f, [" O5 I1 r" V
就是给li下面的子元素strong定义一个斜体不加粗的样式* S  j3 j4 e, n

) D# {( X/ X+ O: G  M* o6.id选择器
6 ^; ~7 C0 X1 c0 s# C
3 j) r) A. L: R& S' y用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 r: {0 l  i$ i. `
<div id="menubar"></div

# b; p* V+ Y- A% S: T4 ?
7 i) K" K, a3 P) P然后在样式表里这样定义:
" L; M2 t1 `' d/ |+ u6 t9 y
+ d% y. F' i- g4 p3 I0 ^, N+ g1 c6 r  Z, \+ q2 t- T
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( W  ~8 D' w7 \
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。1 k' z; o( f4 u: Q, P6 S" a( l1 v
9 F& z# D$ A/ s5 Y6 N! o; o
id选择器也同样支持派生,例如:% J. X- [( n  s6 p! ^
#menubar p { text-align : right; margin-top : 10px; }

4 L' n$ G* K6 o% B4 N这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
! \) q$ t! w+ z9 ~
, Z, p) k0 `1 A" e; x+ o8 Q4 S. r( \+ L% x6.类别选择器
" f6 n7 \+ X: c8 T) t1 E# N
$ @  z  H% q' {  [& k# d在CSS里用一个点开头表示类别选择器定义,例如:
+ h$ D* T4 ]9 N: }! P6 E. ]9 C$ F
.14px {color : #f60 ;font-size:14px ;}

- K  z( m+ E+ ?+ H/ o2 }/ I5 @$ t' k
; Z- x# Z* p3 P# i在页面中,用class="类别名"的方法调用:5 m# J7 E  B1 z" q7 o! G0 t
<span class="14px">14px大小的字体</span>

/ X. I" h7 S& H1 r+ o& d4 }/ S( _6 l" m' j4 t/ F
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
# |: f% Z& @1 M3 X, Q% K
  W4 U: T" i0 C1 [5 e4 [7.定义链接的样式! Q3 E/ y1 {7 X9 P
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:  y0 m9 ~. J- v0 b1 N% M+ [$ A
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}" }( i( f3 v" r2 n7 @' z' R
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( K& {" D- r, w5 V: f$ `8 I
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) f- S2 B% [6 G, R3 i* }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

$ e# M9 }, g: w, \  G1 A8 }# G# A7 ^) Z& q( w8 m9 I
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
2 @2 {( W- h* n6 H, t. s1 d  ~! ba                        { text-decoration: none; color: {LINK} }
1 y; Q; t# U: N3 B% o* Sa:hover                        { text-decoration: underline }
, Y! k* V. x' p$ g, S5 k+ g0 gbody                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
8 B  ]. U2 s& m( @/ itable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
) B2 s7 B, {2 `% z$ einput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }2 K% E0 v* F( O8 z
form                        { margin: 0; padding: 0}
  q$ f) L; v: w: z2 cselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
, l$ T6 S/ R+ [, g0 y% k- @.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }% @8 U: E7 K! U' M# Q+ ^
.nav a                        { color: {TEXT} }
7 D; g- v( [! b! l.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
$ m3 `% M$ S0 o& D' Q.header a                { color: {HEADERTEXT} }
+ J# J9 W: {& g# L, N& G6 m( _7 o5 g.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
% g# ^9 P& j' p; i8 H6 P.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
; Z1 q+ n3 k, G7 d) H( v.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
) Z- {. \7 C4 _2 S  O.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
2 i4 U1 n5 F7 e.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }4 F$ J8 \7 F( {+ ]' O
.outertxt a                { color: {TEXT} }
8 L% B2 _. |7 N* Z6 c.bold                        { font-weight: {BOLD} }
/ k- K, e1 P% L7 Y  j: C.altbg1                        { background: {ALTBG1} }# ]$ v! B( ?, i9 R- D. Q% M
.altbg2                        { background: {ALTBG2} }1 Z) z3 s8 v, g6 i) N8 S2 z
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
! m, ?7 I+ _: I- t% v.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}, L5 N5 Z8 ^. q5 B$ b. I) r
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} }
9 m+ ]4 s; ^" {. M6 }.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}) z3 d3 o  A" \3 X! [
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
3 |* U% Y( D. o- l& W- c) c.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
) E9 v) ^7 ]0 n) P5 X5 y2 U% }.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
. l. b7 P; F. f& _3 `6 @1 H.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
! O, ~9 ]4 u7 x+ I' c0 |- Y.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
9 ?; U0 x' h& i.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}5 f3 @, ^* p3 n) K3 Y, k' i1 W' v
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}" j1 E$ B$ P' A4 r/ z5 S. j6 s

( B; G" ?) F5 w* R--></style>
1 z: w, S: W$ h- q: o. P  h3 q
* n6 G$ N; n& ]" {+ S( _. _7 {
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-8-9 07:22 , Processed in 0.109247 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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