IT学习者 | 文章大全 | 技术文档 | 桌面壁纸 | 实用查询 | 网络电台 | 成语 | 歇后语 | 网址 | 下载 | 周公解梦 | 生日密码 | 电视剧365 | Flash
 您现在的位置: IT学习者 >> 文章大全 >> 网页制作 >> HTML&CSS

使用Web标准建站第7天:CSS入门

【 作者:阿捷    来源:网页设计师  更新时间:2004-12-2 | 字体:

  在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了,可以跳过这一节,直接进入下一节。

  CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。

1.基本语法规范

  分析一个典型CSS的语句:

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
  • 其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
  • 样式声明写在一对大括号"{}"中;
  • COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
  • "#FF0000"和"#FFFFFF"是属性的值(value)。

2.颜色值

  颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

3.定义字体

  web标准推荐如下字体定义方法:

  body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
  • 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
  • Lucida Grande字体适合Mac OS X;
  • Verdana字体适合所有的Windows系统;
  • Lucida适合UNIX用户
  • "宋体"适合中文简体用户;
  • 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;

4.群选择器

  当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; }

5.派生选择器

  可以使用派生选择器给一个元素里的子元素定义样式,例如这样:

li strong { font-style : italic; font-weight : normal;}

  就是给li下面的子元素strong定义一个斜体不加粗的样式。

6.id选择器

  用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层

<div id="menubar"></div>

  然后在样式表里这样定义:

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

  其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

  id选择器也同样支持派生,例如:

#menubar p { text-align : right; margin-top : 10px; }

  这个方法主要用来定义层和那些比较复杂,有多个派生的元素。

6.类别选择器

  在CSS里用一个点开头表示类别选择器定义,例如:

.14px {color : #f60 ;font-size:14px ;}

  在页面中,用class="类别名"的方法调用:

<span class="14px">14px大小的字体</span>

  这个方法比较简单灵活,可以随时根据页面需要新建和删除。

7.定义链接的样式

  CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

  以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

  呵呵,看了这么多,有点头晕吧,实际上CSS的语法规范还有很多,这里列的只是一些常用的,毕竟我们是循序渐进,不可能一口吃成胖子:)

相 关 文 章
相 关 软 件
没有相关下载
逃生 放生 黄玫瑰 想太多 那滋味 擦肩而过 放手去爱 北京欢迎你 依然在一起 吻得太逼真 感动天感动地 坐上火车去拉萨 怎么会狠心伤害我
心碎 冲动 小太阳 别碰我 蒲公英 千山万水 改变自己 一定要爱你 等爱的玫瑰 陷入爱里面 北极星的眼泪 最后一次的温柔 亲爱的那不是爱情
光荣 火花 坏女人 日不落 樱花草 为你写诗 独家记忆 夏天的味道 寂寞才说爱 忘不掉的伤 爱上你是个错 第三者的第三者 地球人都知道我爱你
假如 相思 是非题 有缘人 舍不得 我的答铃 死而无憾 外滩十八号 越爱越难过 123木头人 和寂寞说分手 爱上你是我的错 爱情里没有谁对谁错
加入收藏留言建议自助友情链接普通友情链接站长的Blog
版权所有   COPYRIGHT 2002-2008 ★IT学习者★ ALL RIGHTS RESERVED.