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

html-css04

引用外部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文件的路径">

css外部样式如何调用方法如下:

1、直接在div中使用css样式制作div+css网页

2、html中使用style自带式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件 推荐此方法

接下来将逐个讲解html引用css方法的例子

1、直接在html标签元素内嵌入css样式,如<div style="font-size:14pxcolor:#FF0000">我是div css测试内容-支持</div>效果如下图

2、在html头部head部分内style声明插入代码如下:

<style type="text/css"> 

<!-- 

.ceshi {font-size:14px color:#FF0000}/*这里是设置CSS的样式内容*/ 

--> 

</style>

具体方法如下图:

3、使用@import引用外部CSS文件方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=gb2312" /> 

<title>css引用方法实例-测试实例</title> 

<style type="text/css"> 

<!-- 

@import url(wcss.css)/*这里是通过@import引用CSS的样式内容*/ 

--> 

</style> 

</head> 

 

<body> 

<div class="ceshi">我是div css测试内容支持</div> 

 

</body> 

</html>

Wcss.css文件内代码.ceshi {font-size:14pxcolor:#FF0000}

效果如下图:

可以看出使用此方法和使用自带式引用css样式表方法有相同处,都是需要在html的head内使用style标签引用外部css。

4、使用link来调用外部的css文件

在head放置<link rel="stylesheet" href="wcss.css" type="text/css" />来调用外部的wcss.css文件来实现html引用css文件

详细如下图

此方法就不需要style标签,而是直接通过link一个样式来引用外部样式。