在Html中引入CSS的方法-阿里云开发者社区

在Html中引入CSS的方法

2013-04-01 1123

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。在HTML中，引入CSS的方法主要有行内式、内嵌式、导入式和链接式4种。1，行内式Code: <div style="border:2px #00F solid; width:80px; height:30px;">文本内容&

HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。

在HTML中，引入CSS的方法主要有行内式、内嵌式、导入式和链接式4种。

1， 行内式
Code:

    <div style="border:2px #00F solid; width:80px; height:30px;">文本内容</div>  

在标记的style属性中设置CSS样式，这种方法无法体现CSS的优势，不提倡使用。

2， 嵌入式

将页面中元素的属性的设置写在<head>与</head>之间。
Code:

    <html>  
    <head>  
    <title>webpage</title>  
    <style type="text/css">  
    div{  
        border:2px #00F solid;   
        width:80px;   
        height:30px;  
    }  
    </style>  
    </head>  
    <body>  
    <div>文本内容</div>  
    </body>  
    </html>  

这种方式对于单一的网页很方便，但是对于包含较多页面的网站，如果对每一个页面都以内嵌的方式设置各自的样式，就失去了CSS的优点，而实际上对于一个网站都编写一个单独的CSS文件，用以下两种方法引入HTML文件中。

3，导入式与链接式

导入式与链接式的目的都是将一个独立的CSS文件引入HTML文件，二者的区别不大，但是深入了解还是有些地方不同。

实际上，链接式是使用HTML的标记引入外部CSS文件: 
Code:

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

而使用导入式则是使用CSS规则引入外部CSS文件。
Code:

    <style type="text/css">    
       @import"mystyle.css";    
    </style>  

这两种方法在显示效果上也略有区别：

1，使用链接式，会在装载页面主体之前装载CSS文件，这样显示出来的网页一开始就带有样式效果，而使用导入式时，会在整个页面加载完成后再装载CSS文件，对于网页体积较大时，可能在开始浏览时没有显示效果，等待数秒后才会显示样式。

 

2，对于一些较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放在几个CSS文件中，这样如果使用链接式，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。而使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立的CSS文件；而链接式不具备这个性质。

 

3，如果希望通过JavaScript来动态决定引入哪个 文件，则必须使用链接式才能实现。

在Html中引入CSS的方法

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

在Html中引入CSS的方法

热门文章

最新文章

相关课程

相关电子书

相关实验场景