A-A+

二、如何将CSS应用到网页?

2007年11月14日 网站运维 暂无评论 阅读 2,350 views 次

css编码允许我们以多种方式应用到我们所设计的XHTML页面之中,主要有以下三种方式,应用时应根据设计要求确定。
1、行间样式表
行间样式表是将CSS样式编码应用到XHTML标签之中,格式如下:

XML/HTML代码
  1. <p style="font-size:15px;color:#33ccff;font-weight:normal;line-height:22px;">  
  2. [...文本内容...]   
  3. </p>  

行间样式是使用style=""来完成样式设置的,把标签所支持的属性丢到双引号之中,每一属性中间用分号隔开,结局处分号可以省略。
根据web2.0要求的“表现与内容分离”的标准,显然这种方式是不妥当的,它仅仅利用了CSS对元素的精确控制,没有实现样式与内容的分离,所以我们在应用中当完全杜绝此种方式。但然在调试CSS时还是可以临时使用的。

2、内部样式表
内部样式与行间样式都是将CSS样式写在页面之中,但不同的是,内部样式表方式把样式表统一放置在一个固定页部<head></head>标签内。如:

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>页面标题</title>  
  4.   
  5. <style type="text/css">  
  6. body{}   
  7. a:{}   
  8. a:hover{}   
  9. td{}   
  10. p{}   
  11. #content{}   
  12. .text{}   
  13. </style>  
  14.   
  15. </head>  
  16. <body>  
  17. </body>  
  18. </html>  

以上代码中的<style></style>标签内放置样式表,注意应当丢在<head></head>之中。此代码只能被当前页执行,不能跨页执行,因而也达到到重复利用CSS的目的,所以也不是我们所提倡的方式。下面就重点讲外部样式表的应用。

3、外部样式表
外部样式表是CSS应用最好的一种形式,把CSS样式代码集中放置在一个单独的CSS文件之中,由页面直接调用,可以实现多个页面的调用,实现了代码最大化重用及网站文件的最优化配置,是我们重点推荐的方式。调用方式如下:

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>页面标题</title>  
  4.   
  5. <link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" />  
  6.   
  7. </head>  
  8. <body>  
  9. </body>  
  10. </html>  

代码中使用link标签将名为style.css的css样式文件丢在<head></head>标签之中,便使用了外部CSS样式的调用。而href=""的作用则指明了CSS文件的路径。

外部调用CSS主要为了实现网站内容与样式的分离,有利于网站文件管理与样式管理,同时也增强了代码的可读性。在以后的探讨中,我们将深入了解如何组织CSS文件。
声明:为了便于讲解,以后的代码,会适当采用第二种内部样式表的方式,以便于对代码的修改来对比实现的效果。

 

原文地址:http://www.chaojibaby.com/blog/article.asp?id=106  

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录