注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

中老年人学电脑摄影博客

摄影采风、摄影作品欣赏、摄影指导、摄影教程、后期制作教程

 
 
 

日志

 
 
关于我

我从事中老年人摄影、计算机教育行业,在哈尔滨老年人大学任教,在从事摄影、计算机教育13年当中11年从事中老年人摄影、计算机教育,是国内最早从事中老年人计算机教育者之一,给我的感觉是中老人学得快,忘的快,人非常好,乐观向上。是我学习的榜样,我非常感谢中老年朋友,让我在学习和工作中得到了宝贵财富。

网易考拉推荐

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

2009-11-14 14:52:41|  分类: HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在了解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”。
  评论这张
 
阅读(108)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017