4当前位置:网页制作CSS教程-应用CSS美化网页
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
4本站推荐内容
4最新网页制作
·IE6/7下absolute/re…
·二行代码解决全部网…
·一行代码解决iframe…
·CSS自动限制文本显…
·CSS属性全解析
·很流行的图片分割显…
·常用CSS命名规范
·绿色系网页配色应用…
·CSS使网页背景图片…
·几种常用的新闻列表…
4热门网页制作
·使网页变灰的代码(…
·应用CSS美化网页
·CSS实现文字底部对齐
·一款DIV+CSS制作的…
·CSS隐藏表格超出的…
·CSS使网页背景图片…
·用CSS改变鼠标箭头
·表格边框CSS语法大全
·CSS制作文本或图片…
·几种常用的新闻列表…
4相关网页制作
·CSS实用教程
·CSS+JS制作漂亮的超…
·CSS读取图片坐标实…
·应用CSS的类class和…
·层叠样式表(CSS)…
·overflow代替left截…
·表格边框CSS语法大全
·CSS避免表格被撑开…
·CSS实现文字超出宽…
·FireFox文本自动换行
应用CSS美化网页
类别:CSS教程    来源:网络    时间:2007-1-22    贴士:推荐给好友
收藏本页 8 
    现在我们设计网页已经离不开CSS,使用CSS可以美化我们的网页,这已经是大家所共知的了!

  CSS是“Cascading Style Sheets”的缩写,译为样式表。HTML允许我们利用CSS来实现风格的显示,举个简单的例子:我们可以使用<b>标签来使页面的字体加粗。如:

  
<b>中国站长天空加粗字体显示</b>


  如果你使我们使字体显示为红色、宋体、并且加粗显示我们可以使用下面的代码:

  
<font color="#FF0000" face="宋体"><strong>中国站长天空字体演示</strong></font>


  这时我们观察上面的代码时我们发现网页中的元素比较多了,当我们自己编写时可能显得很凌乱,这时我们该想有没有一种方法使用的代码比较少,而同时达到上面显示的要求呢?回答是肯定的,这时我们就要用到CSS了。用CSS设置一种风格,设置好我们需要的特性,给它命名一个唯一的名字,然后保存放在网站的其它地方,然后我们在编写HTML时引用刚才的风格的名字就可以达到这种要求。如:

  
<p class="myNewStyle">中国站长天空的 CSS 风格文本</p>


  然后在网页的头部<head></head>之间加上设置风格的代码,如:

  
<style type="text/css">
  <!--
  .myNewStyle {
  font-family: 宋体;
  font-weight: bold;
  color: #FF0000;
  }
  -->
  </style>


  如果你想使上面的CSS控制你的网页的每个页面,那么我们复制粘贴上面的代码就可以了,如果觉得比较麻烦或者说你觉得网页的头部很乱的话,我们也可以把CSS设置的风格单独保存为一个文件(文件的扩展名为.CSS),之后我们在HTML直接引用那个保存的文件就可以引用样式了。如你保存的文件的名字为:myFirstStyleSheet.css,那么我们可以使用下面代码来引用:

  
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">


  注意:上述代码要放到HTML页面的<head>区域内。

  至于CSS的设置就在这里不提了,我们可以专门打开一个记事本,或使用专门的设计工具如DW等。

  在编辑CSS注意不要再加上如下代码了:

  
<style type="text/css"> 
 …………
  </style>
 

  我们在CSS文件中只要设置CSS风格就行了,如: 

  [/code].myNewStyle {
  font-family: 宋体;
  font-weight: bold;
  font-size: 8pt;
  color: #FF0000;
  } 
  .my2ndNewStyle {
  font-family: 宋体;
  font-weight: bold;
  font-size: 9pt;
  color: #FF0000;
  } 
  .my3rdNewStyle {
  font-family: 宋体;
  font-weight: bold;
  font-size: 12pt;
  color: #FF0000;
  }[/code]

  然后直接保存为扩展名为css的文件就行了(如:myFirstStyleSheet.css)

  最后我们在HTML代码的BODY区域内加入如下代码就可以引用我们的设置了:

  
<p class="myNewStyle">中国站长天空CSS字体显示1</p> 
  <h2 class="my2ndNewStyle">中国站长天空CSS字体显示2</h2> 
  <h3 class="my3rdNewStyle">中国站长天空CSS字体显示3</h3>
 

  我们在上面的代码中用到了<h2>标签,我们在CSS中也可以直接对标签进行风格的定义:

  
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
 

  然后我们就可以直接在代码中加入:

  
<h1>中国站长天空CSS字体显示2</h1>
 

  那么同样按我们设置的风格来显示。

  我们也可以对其它的标签设置风格,举个例子:我们对整个页面的边框进行设置:

  
body { margin-left: 15%; margin-right: 15%; }


  我们也可以对DIV标签进行设置:

  
div {
  background: rgb(204,204,255);
  padding: 0.5em;
  border: 1px solid #000000;
  }
 

  在HTML代码中只要在 <div>和</div>之间的内容将都按上述的风格进行显示。

  最后在举个例子,关于超级连接的变色:

  
.a:link { color: rgb(0, 0, 153) } /* 未访问连接的情况 */
  .a:visited { color: rgb(153, 0, 153) } /* 访问连接之后的连接 */ 
  .a:hover { color: rgb(0, 96, 255) } /* 鼠标盘旋的状态 */ 
  .a:active { color: rgb(255, 0, 102) } /* 连接激活的状态 */


  然后在HTML代码中加入:

  
<a href="http://www.zzsky.cn">中国站长天空</a>


  上述代码可以按我们设置的风格显示。

  最后给大家扩展一下,因为最近总有网友在论坛中问,如何使在同一页面的连接不同呢?我们接最后这个例子给大家介绍一下。这时我们需要设置CSS的另一种风格:

  
.a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 红色、有下划线*/
  .a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }
  .a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 黑色、无下划线*/
  .a1:active { COLOR: #0000ff; TEXT-DECORATION: none }


  然后在HTML代码中加入:

  
<a href="http://www.zzsky.cn">中国站长天空</a>
  <a href="http://www.zzsky.cn" class="a1">中国站长天空</a>


  就会出现两种连接效果了。

  CSS在我们设置网页时功能是非常强大的,希望大家在制作网页时要熟练的运用,以使我们的页面更加漂亮和统一。在本站有好多关于CSS的教材希望大家好好研究吧!希望这篇文章能起到画龙点睛的作用。
·上一篇:web开发流程思考
·下一篇:25条CSS编写的提醒及技巧
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2008 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备08002933号