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

4746 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 {: l8 P5 @  U( ?$ \% k( m
6 q: @( d# i# v. F- u6 O) ?4 k1.基本语法规范
1 X. |5 v3 k/ q% v6 k分析一个典型CSS的语句:) H8 F" y6 h1 y5 B: q: j0 m: \
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* D$ e. l, M) H" F, r: D) @5 K$ K
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
5 B& I1 A' P1 b6 T" O; I样式声明写在一对大括号"{}"中; ! X0 h6 g) I9 e$ f) t" {
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
) G8 {5 X2 V; x4 }$ l+ ^"#FF0000"和"#FFFFFF"是属性的值(value)。
1 }! x3 `/ L- S- O+ Z% a
5 w8 ], Z4 _( {$ Q+ O2.颜色值
' f( S" y) J, x( R
' d$ b" C1 }2 p2 I颜色值可以用RGB值写,例如:
: F" D9 ~- @1 _; N, g  j: T) R) |3 x6 L4 \3 `& H& `
color : rgb(255,0,0)

# o2 {+ m2 a2 f* ^& |! C3 I: s& P,也可以用十六进制写,就象上面例子$ H2 l  W' i4 Q' B4 w  u! u

3 l0 Y4 b! `+ x2 W; ~$ t- [" o' x
color:#FF0000

; p* h# c% p) I; f2 j如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
  j! S. ?% j/ U5 j5 h% w' [+ G0 E8 S& D( X. F" d+ u6 {* h
3.定义字体
' j' y8 p  g) q% g% r1 S. k# xweb标准推荐如下字体定义方法- ^$ ~! m" C' H7 h
& j9 L1 t% @) D5 v1 C* M% W
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

- u/ @! a1 {$ N; i4 B, D9 o4 U字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
3 _8 o7 _. f* i+ c* g6 g% _$ zLucida Grande字体适合Mac OS X;
/ I; E: t; V- _( ]0 z: ?2 X2 y/ S1 DVerdana字体适合所有的Windows系统; : k. j4 u; e+ c) v* ?& Y4 }
Lucida适合UNIX用户 4 z. Q- _; Y8 F8 m( L/ t: x1 u% x
"宋体"适合中文简体用户;
2 T/ {2 u/ X, j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
4 c$ t3 ?: D7 c7 U+ @
- Q* {  F! u& ]5 ]  |) J. }8 a! N4.群选择器% b3 ^4 s% z: [, r, n1 ~7 \% d

( i) A! k- j- V' H9 j6 `1 a当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:3 `2 ?$ Z+ w" A( g

! Z6 t! a0 F- c2 l" K. V+ y
p, td, li { font-size : 12px ; }
9 G  n! K4 F. ~
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ `- v" q# _, h1 u0 c7 G9 G1 `4 u
9 i# E2 u0 v# b) |3 v9 D; V9 D! V6.id选择器3 A5 i& T" V! _9 V& w4 i* s

+ N( Y$ E% f- O4 T4 J, C用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
1 J* Q% Y' r/ p$ U! s( y
<div id="menubar"></div

7 V: M7 A$ x8 l# ~9 u( z$ |
" ?$ p! V7 p- l: E' a) Y然后在样式表里这样定义:2 ~9 x8 o" Z8 [- @( l+ w6 F
& W2 T: n, P8 Y  u3 i0 c% F
; P' d* D+ |# Q  G9 w
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
  ~- z; j7 t' m) N* n
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
6 d7 s5 K4 [' C$ _! E! t+ a, q% Z8 M- S# U% w
id选择器也同样支持派生,例如:
$ [( U* O" l+ [; q
#menubar p { text-align : right; margin-top : 10px; }

8 m- O/ k! w; ]5 z7 o# B- i, _这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
$ |: e4 y4 n' l: v* S
! H6 e$ _7 d# O7 N% \. B% }6.类别选择器
9 i- `# c9 ?3 [4 O( P$ u  U' K! H6 ~* {. S2 h' b1 J
在CSS里用一个点开头表示类别选择器定义,例如:
$ u1 _- ]/ }/ {5 i/ g
.14px {color : #f60 ;font-size:14px ;}

$ _. F2 }" T2 g$ h  z+ V( J0 y  q5 T
' ?  E, ~% x  z在页面中,用class="类别名"的方法调用:
9 h4 i% b% I$ v7 k9 C- u
<span class="14px">14px大小的字体</span>
& z. a) I8 ?/ m8 y
# Z5 `8 H( U, _+ B
这个方法比较简单灵活,可以随时根据页面需要新建和删除。" ^: v' c' \9 R7 k

* q" w$ B* `( `  i* |2 v9 N" |: X  r: U7.定义链接的样式
. O+ E; B# Z) GCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 o: Z6 L2 Q' i: S# i
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 Y( s5 c( `$ p8 `) C) h& ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
( T# F9 R+ t1 m6 @a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 w" G1 C/ A$ Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

7 G; J1 a; X- f( b! s) X( J5 ?$ V3 r; J
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--+ v5 `2 u% d, T7 H9 c9 k
a                        { text-decoration: none; color: {LINK} }, e+ p5 J* e1 R" v3 ?9 D2 z$ Y
a:hover                        { text-decoration: underline }) V7 n8 D$ i  @5 C# M; Z% g
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
( F; B& m4 y# W. I5 G% B7 x3 Ptable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }& `! p7 ?& y- z9 M  _' L
input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
# c. }. I$ p) ]form                        { margin: 0; padding: 0}2 J7 S, m. `) y8 `
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
3 [6 V4 e4 v$ ^/ B: n6 S) X3 ].nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }8 Q% Q6 E; Q3 U( a  _2 h+ Q5 _( m3 r
.nav a                        { color: {TEXT} }( v: ]0 K3 R# t# K4 `7 b3 a
.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }. P& _4 ^! Z2 Y" ^- L, j! G5 n4 P
.header a                { color: {HEADERTEXT} }* S  Y  @+ O2 ]8 R
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
' ?7 K: k9 H. `/ B* V; b6 D.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } " i( o' a- t7 n* }
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }1 j* ?9 r4 j! Y4 n9 O4 q
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
* k0 }6 F; ]0 o" G, i8 a8 R# a.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }" q* b& T. L/ L6 _4 h, }
.outertxt a                { color: {TEXT} }
% P* s0 B, v( ]- K9 J.bold                        { font-weight: {BOLD} }  C& V4 Q6 A7 n+ f# u: L/ x
.altbg1                        { background: {ALTBG1} }1 b' v; ?& ?3 {; V4 {8 X
.altbg2                        { background: {ALTBG2} }: B; g5 n( ]; d1 a
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }; y& Q( ], T& {' r+ w$ P) O- 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}) L0 d2 i; B6 m9 r8 X% v6 O
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } 4 Q' E6 v! l$ U$ K" o
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
& J; c2 B  Z' Y% W.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
) ~! k8 _3 m% K7 U# I.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
+ Y+ B( _6 `4 L& D8 k1 t.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }
( I& g2 h5 T. I.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}8 N5 C& g2 {* h
.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
* `8 _1 a) U& G4 f7 x8 O- X.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
# ^5 G. t! r9 a, L; d, c.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}/ }/ F* @" u% P& B4 x

, X6 f4 p: _$ m! F0 Q4 T1 E* [( ^--></style>
8 n2 U: m+ ~* _& t* b8 ^
( q8 D  f' w; v
上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

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

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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