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

4545 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。6 N7 J  Y/ Q5 M+ [4 |$ M: @/ g

0 c  I9 j2 P1 r1.基本语法规范
& ?3 i% w: p/ @分析一个典型CSS的语句:
) p( S" o; [! N' C$ p: g
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
! ^. [% w9 [" W+ K
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
' _0 [% P! \- l# n( u1 ]样式声明写在一对大括号"{}"中;
/ H) a' ?: [- Z+ }, i/ }! |' FCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 m% q, ~6 L3 t* B
"#FF0000"和"#FFFFFF"是属性的值(value)。
/ N" H3 G- D6 b8 H
& b6 }9 K2 ~$ |/ K2.颜色值+ f' c4 b# z) N. o
# _) L4 ]& d( G1 j* s
颜色值可以用RGB值写,例如:
5 D& ^1 v6 O/ n. P, _4 h  S" _  n' X  N3 N/ V
color : rgb(255,0,0)

. j: O4 o- }( a! Z# x+ A,也可以用十六进制写,就象上面例子& H0 w! F* g% f' }

( p, x+ i' ^* S; ]3 e
color:#FF0000

. B2 }; E- R7 W' [9 [' O& J+ K如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。0 S) D3 V, H, L5 d  N

  |# w  ~5 D3 z, `' y0 R/ M3.定义字体
- ?2 u2 Z6 I9 {, w) t. fweb标准推荐如下字体定义方法
' F- n" M6 H  F& f3 t4 {5 ^3 G
! Z( m$ ]8 B/ W$ V  [4 V
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

2 ?" Q* p$ [4 u7 V  k" m" r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ; Z! j% u; @1 b$ c1 Z, A
Lucida Grande字体适合Mac OS X; 6 V3 ]# ]+ d% Z* O" @' k
Verdana字体适合所有的Windows系统; * j  s6 _2 c7 g+ j5 j( I7 t" i
Lucida适合UNIX用户
* P# v  G4 O$ y"宋体"适合中文简体用户; $ C9 D8 Y  u' s
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;$ `+ T5 v5 C7 |; m
9 k/ ?, d- j* I9 d0 ^- i, o
4.群选择器
! _- z2 B/ e5 x
0 v$ Z2 g0 L9 S" x当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
" T( I! X+ z  A  N# M$ o  X: I9 ^
8 g* s( W' C# |% v
p, td, li { font-size : 12px ; }

" y" u/ z7 S# c- z/ v就是给li下面的子元素strong定义一个斜体不加粗的样式4 ?, _' k9 s+ T- `# h: }! T
" P8 s$ a  Y9 z- ^+ C- M, _) W$ F
6.id选择器" j) E, J5 r( O. g8 Y; O

7 Y* R/ Q; [% l8 j; F用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层3 d7 I0 ~0 ~" [0 v
<div id="menubar"></div
2 E5 g- M- o6 ]' T4 A/ ~. A+ y% Z6 K5 v
( B. ]0 K' Z4 O3 n$ Z1 V
然后在样式表里这样定义:3 E1 l$ v" {  k0 X

! [. j7 Q/ d0 t# o0 @! b0 ?* i% V" y! V/ |- `
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, Z) F8 {* Z8 l$ @/ }: e
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。6 W  A$ x3 T6 [. K5 j# u. t! R: m

& n" [+ U& R( i! c7 ?id选择器也同样支持派生,例如:
; c* h9 a4 m$ Z, N5 V
#menubar p { text-align : right; margin-top : 10px; }
  V6 C1 P) R: ^  q* u$ D: z9 Y/ {
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。. K9 j( z1 C4 V- m" ~
, M# w1 H% h: P
6.类别选择器
. {2 C9 I& h( K/ q! U! f/ y9 V' r
在CSS里用一个点开头表示类别选择器定义,例如:
) i' v6 w# r0 c( Y
.14px {color : #f60 ;font-size:14px ;}

3 O# Y4 M% E( w9 G4 Q
2 [. N2 A- ~# E6 W在页面中,用class="类别名"的方法调用:
2 Q: x" R; _# u0 e! ~5 z3 ~- [
<span class="14px">14px大小的字体</span>
( ^. i# i* f, k5 m8 ?% f
2 E; o/ q) o' L3 `
这个方法比较简单灵活,可以随时根据页面需要新建和删除。8 l6 U) j6 O* L% N+ _

4 R% P  C" S  d; w& ?% P7.定义链接的样式* l. {, q( m1 A/ j( h4 O
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
* Z: U7 d4 C# K" s. Z$ r
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}" {+ O- m1 j' [6 ~- w; D
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- d# z" ^* H, a/ _. s4 D& u+ Za:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
) N5 }* a; S* e& [& I# F/ f5 la:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 E, ^( V% s7 S) o

- @. @7 i, _5 L以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--
, h  I5 l; Q( y% u* M3 Q* ^1 j- Ga                        { text-decoration: none; color: {LINK} }: ?; a: g9 k! F7 P
a:hover                        { text-decoration: underline }# T; K- N/ n. x& a" U  X6 E+ e) U
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }7 |$ `9 O; A7 z! }8 H; K3 v. D
table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
1 w1 x6 g* G9 P5 H. n& D# ginput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
5 k# A. O4 V2 m/ fform                        { margin: 0; padding: 0}  A. h  I+ R1 H$ v2 ^6 `! o+ R
select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
* q) _6 V/ A7 F% b% a% p.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
# j* C2 n* @6 U/ \" S4 \.nav a                        { color: {TEXT} }
3 \' R: x1 l9 p6 s& @, u5 t2 d.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }3 E: Y' E: m4 q7 \
.header a                { color: {HEADERTEXT} }: X" g7 h7 F# K
.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }; p) w  y$ N4 s) J" J1 M; h  S
.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
5 z" z! ~7 H, Z: W5 {/ {) a. h.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }1 O$ c8 b) s. g( f! ]; K; Y
.smalltxt                { font: {SMFONTSIZE} {SMFONT} }( _3 R) h' J& O" \- v, c
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
( q- `8 B- H, X' M.outertxt a                { color: {TEXT} }
& d0 H5 T* ]2 y6 V.bold                        { font-weight: {BOLD} }1 N( u4 o0 s) U, @% ^
.altbg1                        { background: {ALTBG1} }
" y& x/ h2 f% c9 E) @& I.altbg2                        { background: {ALTBG2} }$ [& w0 Y( s+ T% ]
.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }0 X) [, V6 |- v5 X  N- 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}
. N2 ?/ x( Y3 Y% ^% @# k.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } - y  e+ Y* \7 Y
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}
1 |! v8 k0 {0 `9 `* F# p.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
* P& Q) [! w% D$ z# Z. N- A( l, z.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}- \- I- l( q2 p8 g
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }0 V  G4 |0 j* r1 V5 L1 W
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
$ B* Z  {# u1 O" @* O& h.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
9 ^4 b8 \8 ]* Z2 w. W/ y  A( F2 J.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}) n+ K& ]% T' \: f, i' R  G
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
& U, l, q! P/ |( |" V' m0 m* K# y, H/ L' y
--></style>
* @$ y8 O3 ]% s# C

0 Y* U  w% c0 [# c- Z' {! x- Z上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-8-4 21:34 , Processed in 0.107308 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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