设为首页收藏本站
开启辅助访问

创星网络[分享知识 传递快乐]

 找回密码
 立即注册

QQ登录

只需一步，快速开始

用新浪微博登录

只需一步，快速搞定

搜索
创星网络[分享知识 传递快乐] › 门户 ›网页编程语言› HTML/CSS› CSS › 查看内容

三种方法实现CSS样式表插入

2012-8-8 10:38| 发布者: cryinglily| 查看: 464| 评论: 0|原作者: luinstein

摘要: 本文向大家简单介绍一下CSS样式表插入的几种方法，当读到一个CSS样式表时，浏览器会根据它来格式化HTML文档。插入CSS样式表的方法有三种，请看本文详细介绍。 如何插入CSS样式表 当读到一个CSS样式表时，浏览器会根 ...
本文向大家简单介绍一下CSS样式表插入的几种方法，当读到一个CSS样式表时，浏览器会根据它来格式化HTML文档。插入CSS样式表的方法有三种，请看本文详细介绍。
  如何插入CSS样式表
  当读到一个CSS样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：
  外部CSS样式表
  当样式需要应用于很多页面时，外部CSS样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：      
  1. <head>
  2. <linkrellinkrel="stylesheet"type="text/css"href="mystyle.css"/>
  3. </head>
复制代码

  浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。
  外部CSS样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子：        
  1. hr{color:sienna;}      
  2. p{margin-left:20px;}      
  3. body{background-image:url("images/back40.gif");}      
复制代码

  不要在属性值与单位之间留有空格。假如你使用“margin-left:20px”而不是“margin-left:20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
  内部CSS样式表
  当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表，就像这样:
  1. <head>
  2. <styletypestyletype="text/css">
  3. hr{color:sienna;}  
  4. p{margin-left:20px;}  
  5. body{background-image:url("images/back40.gif");}  
  6. </style>
  7. </head>
复制代码

  内联样式
  由于要将表现和内容混杂在一起，内联CSS样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
  要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：
     
  1. <p style="color:sienna;margin-left:20px">
  2. This is a paragraph  
  3. </p>
复制代码

  多重样式
  如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
  例如，外部CSS样式表拥有针对h3选择器的三个属性：
     
  1. h3{      
  2. color:red;      
  3. text-align:left;      
  4. font-size:8pt;      
  5. }      
复制代码

  而内部CSS样式表拥有针对h3选择器的两个属性：
  
  1. h3{      
  2. text-align:right;      
  3. font-size:20pt;      
  4. }      
  5.    
复制代码

  
  假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：
     

       
  1. color:red;      
  2. text-align:right;      
  3. font-size:20pt;      
  4.   
复制代码

  
  即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
  
原文:http://developer.51cto.com/art/201009/224078.htm

鲜花
握手
雷人
路过
鸡蛋
收藏 分享 邀请

相关分类

QQ|Archiver|手机版|小黑屋|创星网络 ( 苏ICP备11027519号 ) |网站地图  

GMT+8, 2025-2-23 01:18 , Processed in 0.052960 second(s), 16 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

返回顶部