开店乐

开店乐电子商务研究 KaiDianLe.Com

网站地图 :

  搜索:

Xhtml第7天:css入门知识

作者:佚名    文章来源:不详    点击数:    更新时间:2006-8-7    

css是cascading style sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。【来自:开店乐KaiDianLe.Com

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名称。注意在前面加"#"号。

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

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的语法规范还有很多,这里列的只是一些常用的,毕竟我们是循序渐进,不可能一口吃成胖子:)


【日期:2006-10-19】【作者:不祥】【转载自:开店乐】

相关文章:
 最好的网上开店系统:凡人网络购物系统免费下载
 定位你的网站CI形象
 网页布局理念
 主页的艺术处理
 怎样设计首页?(解答)
 新颜:经典品牌logo的web2.0版
 世界顶尖网页设计师作品
 韩国站点精选
 服装网站
 商业网站设计主要原则
 几千个3D及素材网址收集!
 网站欣赏0131
 网站欣赏0130
 网站欣赏013
 网站欣赏0219
 网站欣赏0218
 网站欣赏0216
 网站欣赏0215
 网站欣赏0214
 网站欣赏0213
 网站欣赏0211
 网站欣赏0212
 网站欣赏021
 网站欣赏0119
 网站欣赏0118
 网站欣赏0117
 网站欣赏0115
 网站欣赏011
 网站欣赏113
 网站欣赏112
 网站欣赏111
 网站欣赏110
 网站欣赏109
 网站欣赏108
 网站欣赏108
 网站欣赏107
 网站欣赏107
 网站欣赏106
 网站欣赏105
 网站欣赏104
 网站欣赏103
 网站欣赏102
 网站欣赏101
 网站欣赏10
 网站欣赏99
 网站欣赏98
 网站欣赏97
 网站欣赏96
 网站欣赏95
 网站欣赏94
 网站欣赏93
 网站欣赏92
 网站欣赏91
 网站欣赏90
 网站欣赏9
 网站欣赏89
 网站欣赏88
 网站欣赏87
 网站欣赏86
 网站欣赏85
 网站欣赏84
 网站欣赏83
 网站欣赏82
 网站欣赏81
 网站欣赏80
 网站欣赏8
 网站欣赏79
 网站欣赏78
 网站欣赏77
 网站欣赏76
 网站欣赏75
 网站欣赏74
 网站欣赏73
 网站欣赏72
 网站欣赏71
 网站欣赏70
 网站欣赏7
 网站欣赏69
 网站欣赏68
 网站欣赏67
 网站欣赏66
 网站欣赏65
 网站欣赏64
 网站欣赏63
 网站欣赏62
 网站欣赏61
 网站欣赏60
 网站欣赏6
 网站欣赏59
 网站欣赏58
 网站欣赏57
 网站欣赏56
 网站欣赏55
 网站欣赏54
 网站欣赏53
 网站欣赏52
 网站欣赏51
 网站欣赏50
 网站欣赏5
 网站欣赏49
 网站欣赏48

版权所有:Kaidianle.Com  联系方式:Shnxn@Yhaoo.Com.Cn 京ICP备06028743号 在线留言