HTML中怎么导入css?

html-css034

HTML中怎么导入css?,第1张

1、使用 <link>标签导入

使用 <link>标签导入外部样式表文件:

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

对各个属性的说明:

href 属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址。

rel 属性定义关联的文档,这里表示关联的是样式表。

type 属性定义导入文件的类型,同 style 元素一样,text/css表明为 CSS 文本文件。

一般在定义 <link>标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

也可以在 link 元素中添加 title 属性,设置可选样式表的标题,即当一个网页文档导入了多个样式表后,可以通过 title 属性值选择所要应用的样式表文件。

外部样式是 CSS 应用的最佳方案,一个样式表文件可以被多个网页文件引用,同时一个网页文件可以导入多个样式表,方法是重复使用 link 元素导入不同的样式表文件。

2、使用 @import 关键字导入

在 <style>标签内使用@import关键字导入外部样式表文件:

<style type="text/css">

@import url("001.css")

</style>

在 @import 关键字后面,利用 url() 函数包含具体的外部样式表文件的地址。

对比

两种导入样式表的方法比较:

link 属于 HTML 标签,而 @import 是 CSS 提供的。

页面被加载时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。

@import 只在 IE 5 以上才能识别,而 link 是 HTML 标签,无兼容问题。

link 方式的样式的权重高于 @import 权重。

一般推荐使用 link 导入样式表的方法,@import 可以作为补充方法使用。

1、在图像页面中,我们可以看到样式中的样式列表以及显示的渲染图。

2、选择样式中的所有CSS样式,然后复制或剪切。

3、然后ctrl+N创建一个新的CSS样式文件,如图所示,然后创建。

4、在创建的css样式文件中,粘贴刚刚复制到此处的文件。

5、导出时,您需要将其放在与上一个网页相同的文件夹位置。您可以创建一个新的css文件夹以便于导入。

6、然后返回到html文件,删除所有以前的样式,然后输入链接链接标记,链接以前保存的CSS样式,然后保存。

7、链接完成后,在浏览器中预览它以查看链接是否成功。

CSS通过内联、外联等样式嵌入到HTML中。

1、使用样式表的处理指令语句

在HTML文档的开头部分写一个关于样式表的指令处理语句

复制代码

代码如下:

<?xml-stylesheet type="text/css" href="mystyle.css" ?>

<html>

指令语句

</html>

不过只有使用xml语法格式编写的html文档才支持使用该指令,大多数浏览器仅当被保存为xhtml或xml格式才有效,且JS不能处理这种CSS,所以不建议使用。

2、使用@import命令

在style元素之间使用@import命令导入外部的css文件

复制代码

代码如下:

<head>

<style type="text/css">

<!--下面两行代码效果一样

@import "mystyle.css"

@import url("mystyle.css")

-->

</style>

</head>

任何@import规则必须出现在所有规则之前。参数是一个css文件的URL地址。在一个css文件中也可以用@import指令将另一个css文件导入。

3、使用link元素

复制代码

代码如下:

<head>

<link rel="stylesheet" href="css的url" type="text/css" >

</head>

这也是最常用的方式。

4、使用HTTP消息报头链接到样式表

可以使用HTTP消息报头的link字段链接一个外部样式表。

复制代码

代码如下:

link:<mystyle.css>rel=stylesheet

//等同于<link rel="stylesheet" href="css的url" type="text/css" >

HTTP报头中可以使用多个link,从而链接多个样式表,且HTTP报头中的link比HTML文档中的link(head元素中)具有优先级。