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

4841 3

重点教程一:CSS

[复制链接]
发表于 2006-8-24 03:05:43 | 显示全部楼层 |阅读模式
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。) E6 j' o5 W  J
, p) y/ T; ~! b0 R% P
1.基本语法规范5 c+ I; M4 D. A3 ?5 c3 v  {: Y
分析一个典型CSS的语句:& `2 X! W' F" i5 i4 M; c' v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

( @; o) }6 u, ^; m) [; M; }其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
) {- e0 I* l$ z8 o% j+ S样式声明写在一对大括号"{}"中;
$ s  m8 B) V8 h# o% `, gCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % t( ^4 v2 r" L8 h# ]5 |. j
"#FF0000"和"#FFFFFF"是属性的值(value)。% x2 J5 R! b3 ^/ b+ ~4 C

* v9 G% p- k- @6 r1 j2.颜色值
9 }' n; ?* n' H, f+ s/ S
% M/ E8 X. N3 R% \0 M" @2 t8 q1 F颜色值可以用RGB值写,例如:- j" j8 `# p: \) `

) L, z" _* o( j1 j! ^
color : rgb(255,0,0)

, j" v( g% P9 G' s+ N,也可以用十六进制写,就象上面例子2 }$ D3 K) x6 v( f
3 l4 B$ p2 v( Y5 U. l, C
color:#FF0000
  {' G/ {7 }! x3 j9 b4 c$ _
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。6 U( A' j* i0 O# G$ [# d) M) O
7 Y* @) A( Z3 d% ^
3.定义字体. b& v( Y& H+ e  }+ ?
web标准推荐如下字体定义方法7 Q, k6 O2 B( o2 u
- K" R3 e4 \1 B8 W" H
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

: K+ S9 r; T* z) T" P9 h. x字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* h3 m, F5 P* s) R& C0 \Lucida Grande字体适合Mac OS X;
, U3 g! I8 G: s0 C4 t3 a8 e) L1 YVerdana字体适合所有的Windows系统;
" o) @- }% A, D( rLucida适合UNIX用户 3 S$ Y, v- e; G
"宋体"适合中文简体用户;
. \; q5 {# I" O- x如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;! n# q/ f. W; t9 a8 G  }' d
; j8 L# K; K7 B) h2 [* K! ~& D
4.群选择器
5 d/ t0 U/ a- ~# M/ w4 Q: F6 W' k( W) `6 o3 J/ k/ u
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
* O1 q8 U+ X1 D1 U* \; P+ u' @( G5 H! v8 U- [8 |9 W% W
p, td, li { font-size : 12px ; }

! y9 \, ]5 ]5 c2 Y: q7 n# U就是给li下面的子元素strong定义一个斜体不加粗的样式: i3 D* y+ X; V$ ~
( C6 v' I: m5 F7 z5 }0 T; O! B
6.id选择器
$ n, \9 a$ u( w8 h- g! |( a
! A+ A2 m% P+ ^; y2 Y# W用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层3 d! L7 ?" A; L9 b* C) {
<div id="menubar"></div

7 W6 H# ^  W3 D$ O
% |3 c) ~2 H" ^* `9 m1 a3 P) ^然后在样式表里这样定义:- \! R9 ^2 I4 k6 \

: q/ A3 @* |9 `, l  k" k; h- ~
! ]9 ]0 o% e4 B+ K. t6 Y  j7 x
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

( G5 j" @, J4 h& z8 J5 o& `$ B其中"menubar"是你自己定义的id名称。注意在前面加"#"号。/ b/ ?- I  L( i

. n. N5 l, @1 jid选择器也同样支持派生,例如:- p1 N2 i0 G$ ]4 c3 a! [
#menubar p { text-align : right; margin-top : 10px; }

- p: C1 L, F9 |这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
1 d5 U, Y8 `. u8 t) X8 a# W7 t+ x. N; r- c
6.类别选择器: G1 Q6 \6 H8 Y& j# G; P: P# D

5 J/ ^8 |* a; b% e在CSS里用一个点开头表示类别选择器定义,例如:' n; H+ ^, M" e" H8 T5 O
.14px {color : #f60 ;font-size:14px ;}
$ ^7 r, n8 E5 P" |
1 f+ Y! K* D/ B* v( @# h; Z1 c2 P
在页面中,用class="类别名"的方法调用:
2 q& ?- ~+ O. n7 ^' A( c- \' E
<span class="14px">14px大小的字体</span>

0 i  d2 m. I/ P$ t9 ]5 ]' a# H; n: X
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
. i3 c0 ]8 u7 S3 l! c3 Z2 H
& u% s7 ]. z# G7.定义链接的样式9 M/ X, y  ^  \( Y$ @  K8 i3 b, W
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# o- `& ~  v: k; R
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; I1 f2 c- K' ^* n0 y/ Ta:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. Q9 D9 }$ y. J% x8 @1 Oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
( m# \) B+ @, ?8 q: f9 X, _8 Da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}

0 E9 u: v* p. z# M+ u5 k0 C1 F
; o6 L) |. i. M以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
发表于 2006-8-24 03:07:58 | 显示全部楼层
html语法和css都是一门必修的功课,先一点一点的跟大家解释,然后大家可以找这方面的资料看看,到时候我再以我们自己站的实例让大家分析
发表于 2006-8-24 03:09:21 | 显示全部楼层
<style type="text/css"><!--2 w$ g% \. V7 X3 r& `
a                        { text-decoration: none; color: {LINK} }
7 ^3 e6 r6 i# y; m1 _: F( H1 ea:hover                        { text-decoration: underline }( y* G5 G; U: W8 E
body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
. j, e+ G; F& {8 ^0 b8 H$ ltable                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
( D/ E/ ~$ Q! \$ Y+ M! zinput,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }5 m* g: ]: e4 ~
form                        { margin: 0; padding: 0}
; |/ t* ?" w, t' b! g: A# Vselect                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }2 P" Y! G0 n8 f+ K/ G( {' @6 \, o
.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
; ]6 ~$ T3 ~- V5 f# Z% m0 g.nav a                        { color: {TEXT} }
& H7 D% E9 U! W( K; a- w) m.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }0 _1 z$ w3 l1 A/ I0 [
.header a                { color: {HEADERTEXT} }
9 z3 z5 W1 E7 B& N.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
3 T+ }# P; ^$ }0 O.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} } ; Z' b; ^- B, ^4 U) ^- P( |8 N
.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
( O. a: K- v# s! w8 ~6 d.smalltxt                { font: {SMFONTSIZE} {SMFONT} }* h' g6 N  A+ x+ N; N
.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
1 y! z" z$ @4 Y.outertxt a                { color: {TEXT} }
) O1 b  }8 e7 b0 d# c6 E7 p: u.bold                        { font-weight: {BOLD} }5 i  L" k. B1 I2 V% U
.altbg1                        { background: {ALTBG1} }
. a3 j. @, \- B$ W: ^9 g% ?8 ?4 z.altbg2                        { background: {ALTBG2} }
, f( I* Y- I3 ]* u+ b.maintable                { width: {MAINTABLEWIDTH}; background-color: {MAINTABLECOLOR} }
$ y7 s$ B+ e' t1 u8 a( q* ^.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 h1 ^9 A. W7 E- p
.popupmenu_option { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; WHITE-SPACE: nowrap; background: {ALTBG1} } 7 e% E: Q& s* u2 T2 y
.popupmenu_option A {COLOR: {CATTEXT}; TEXT-DECORATION: none}2 N" g! o* w& w7 b# s- Q' Z9 C
.popupmenu_option A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}: ?* {0 K$ ~% q+ I- C5 ]
.popupmenu_option A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}$ r3 `1 D& M) w( n" E
.popupmenu_highlight {FONT: 12px Tahoma, Verdana; CURSOR: pointer; font-weight: normal; color: {HEADERTEXT}; WHITE-SPACE: nowrap; {HEADERBGCODE} }; E4 P$ w5 p' Y8 E2 Y4 Q1 C' Y
.popupmenu_highlight A:link {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}
& m# O; F1 e# s.popupmenu_highlight A:visited {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}  K  T( B$ S* C" s! J. O- j" i
.popupmenu_highlight A:hover {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}. |/ J1 T4 k5 p  B  C# }$ ~! r( m
.popupmenu_highlight A:active {font-weight: normal; color: {HEADERTEXT}; TEXT-DECORATION: none}# l0 W3 I6 [4 M" i& z  K! s

$ q  d) N; T) ^! ?6 R0 s% g--></style>

% T0 \2 w/ v; ?1 E& U3 l0 I# {
$ Z: z! |8 M; O/ z上面这段就是我们论坛的CSS内容,大家分析下看看,都是什么意思??
发表于 2007-3-26 11:35:33 | 显示全部楼层
日!!脑袋要炸了!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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

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

GMT+8, 2026-9-24 02:03 , Processed in 0.099312 second(s), 7 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

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