引用外部css文件有几种写法?

html-css05

引用外部css文件有几种写法?,第1张

目前有两种引用方式,一种是通过在head里面的link来引用,另外一种是直接通过import来引用,示例代码如下:

第一种:link引用

<link rel="stylesheet" href="/css/mycss.css" />

第二种:@import引用

<style type="text/css">

@import url(/css/mycss.css)

</style

link和import语法结构不同,前者<link>是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。

import在html使用时候需要<style type="text/css">标签,同时可以直接“@import url(CSS文件路径地址)”放入css文件或css代码里引入其它css文件。

本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。

调用css外部样式文件,首先需要创建一个css文件。

比如创建一个含有以下代码的css文件:

body{width:100%margin:0padding:0}

.content{width:300pxheight:200pxfloat:left}

保存成.css后缀的css文件。

现在开始在html文件中写入以下代码调用即可。

<link rel="stylesheet" type="text/css" href="这里是刚才保存的css文件的路径">