寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,435,438 次
  • 运行天数:619 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

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

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  

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-14
2,408 views
标签: , ,
暂无评论

发表评论

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