html导入css样式表的简单介绍

如何把css导入html

1、html引入css文件之直接在div中使用css样式制作div+css网页

创新互联公司成立于2013年，公司以网站设计、做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户上千多家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

div style="border:1px red solid;"html引入css文件/div

说明：html引入css文件的这种方法不建议使用，因为会让页面的标签很多，看起来很累赘，体现不了css的优势，当然如果你非常想用这种方法，在不经常更改的地方可以用一用，但是还是不推荐。

2、html引入css文件之html中使用style自带式

直接在header 里面写css

style type="text/css"

div{margin: 0;padding: 0;border:1px red solid;}

/style

说明：html引入css文件的这种方法适合在页面较少的情况下使用。优点：速度 快，所有的css控制都是针对本页面标签的，没有多余的css命令；再者不用外链css文件。直接在html文档中读取样式。缺点如果页面较多改版会很麻烦，单个页 面显得臃肿，css不能被其他html引用造成代码量相对较多，维护也麻烦些。但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进 行复杂的维护工作。

3、html引入css文件之使用@import引用外部CSS文件

将一个独立的.css文件引入HTML文件中，导入式使用css规则引入外部css文件，style标记也是写在head标记中，使用的语法如下：

style type="text/css"

@import"mystyle.css"; 此处要注意.css文件的路径

/style

4、html引入css文件之使用link引用外部CSS文件

在网页的head/head标签对中使用link标记来引入外部样式表文件，使用html规则引入外部css。

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

说明：html引入css文件的这种方法就不需要style标签，而是直接通过link一个样式来引用外部样式，推荐使用link来引用外部的css样式方法。

HTML中怎么导入css？

1

新建一个html文件，命名为test.html，用于讲解html中如何导入css。

请点击输入图片描述

2

在test.html文件内，使用div创建一个模块，下面将对该div进行css样式的定义。

请点击输入图片描述

3

在test.html文件内，设置div的class属性为mydiv，主要用于css文件对该类名进行样式定义。

请点击输入图片描述

4

新建一个css文件夹，在文件夹内创建一个css文件，命名为test.css，用于编写css样式。

请点击输入图片描述

5

在test.css文件内，使用div的类名进行样式定义，设置div的宽度、高度均为200px，背景颜色为黄色。

请点击输入图片描述

6

在test.html文件内，使用link标签导入test.css样式文件，href为css路径。

请点击输入图片描述

7

在浏览器打开test.html文件，查看实现的效果。

在html下导入css

html引用css方法如下

1、直接在HTML标签中内嵌css样式

2、html中使用style自带式

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

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

方法说明：

1、直接在html标签元素内嵌入css样式

我是div css测试内容

效果如下图

1.jpg

2、在html头部head部分内style声明插入

代码如下：

!--

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

--

我是div css测试内容

效果同上。

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

HTML代码：

css引用方法实例

!--

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

--

我是div css测试内容

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

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

在head放置

来调用外部的wcss.css文件来实现html引用css文件

此方法就不需要style标签，而是直接通过link一个样式来引用外部样式，一般推荐使用link来引用外部的css样式方法。

在html里可以使用什么方法引入css

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：

h1 style="color:red;"style属性的应用/h1

p  style="font-size:14px;color:green;"直接在HTML标签中设置的样式/p

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

!DOCTYPE

html

head

meta charset="utf-8" /

title行内样式/title

/head

body

!--使用行内样式引入CSS--

h1 style="color:red;"Leaping Above The Water/h1

p style="color:red;font-size:30px;"我是p标签/p

/body

/html

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例：

head

style type="text/css"

h3{

color:red;

}

/style

/head

例如：

!DOCTYPE

html

head

meta charset="utf-8" /

title内部样式表/title

!--使用内部样式表引入CSS--

style type="text/css"

div{

background: green;

}

/style

/head

body

div我是DIV/div

/body

/html

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

link type="text/css" rel="styleSheet"  href="CSS文件路径" /

2、导入式

style type="text/css"

@import url("css文件路径");

/style

例如：

!DOCTYPE

html

head

meta charset="utf-8" /

title外部样式表/title

!--链接式:推荐使用--

link rel="stylesheet" type="text/css" href="css/style.css" /

!--导入式--

style type="text/css"

@import url("css/style.css");

/style

/head

body

ol

li1111/li

li2222/li

/ol

/html

链接式和导入式的区别

link

1、属于XHTML

2、优先加载CSS文件到页面

@import

1、属于CSS2.1

2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

行内样式内部样式外部样式(后两者是就近原则)

例如：

行内样式和内部样式比较优先级：

!DOCTYPE

html

head

meta charset="utf-8" /

title行内样式和内部样式表的优先级/title

!--内部部样式表--

style type="text/css"

p{

color: blue;

}

/style

/head

body

!--行内样式--

p style="color: red;"我是p段落/p

/html

浏览器运行效果：

结论：行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级：

a、内部样式表在外部样式表上面

!DOCTYPE

html

head

meta charset="utf-8" /

title内部样式表和外部样式表的优先级/title

!--内部部样式表--

style type="text/css"

p{

color: blue;

}

/style

!--外部样式表--

link rel="stylesheet" type="text/css" href="css/style.css" /

/head

body

p我是p段落/p

div我是div/div

ol

li1111/li

li2222/li

/ol

/html

浏览器运行效果：

b、外部样式表在内部样式表上面

!DOCTYPE

html

head

meta charset="utf-8" /

title内部样式表和外部样式表的优先级/title

!--外部样式表--

link rel="stylesheet" type="text/css" href="css/style.css" /

!--内部部样式表--

style type="text/css"

p{

color: blue;

}

/style

/head

body

p我是p段落/p

div我是div/div

ol

li1111/li

li2222/li

/ol

/html

浏览器运行效果：

结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。

注意：导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

优先级：ID选择器类选择器标签选择器

!DOCTYPE

html

head

meta charset="utf-8" /

title选择器的优先级/title

style type="text/css"

#a{

color: green;

}

.b{

color: yellow;

}

h2{

color: red;

}

/style

/head

body

h2111/h2 !--红色--

h2 id="a" class="b"222/h2 !--绿色--

h2 class="b"333/h2!--黄色--

/html

浏览器运行效果：

html中如何导入css

1、使用链接式

link href="style.css" rel="stylesheet" type="text/css" /

2、使用导入式

style type="text/css"

@import "style.css"

/style

扩展资料：

二者的区别

导入式和链接式的目的都是将一个独立的css文件引入一个文件中，二者的区别不大，事实上，二者最大的区别在于链接式使用html的标记引入外部css文件，而使用导入式则是使用css规则引入外部css文件，因此它们的语法也不同。

采用这两种方式后的现实效果也略有区别。使用链接式时，会在装载页面主体部分 之前装载css文件，这样现实出来的页面从一开始就是带有样式效果的，而使用导入式时，会在整个页面装载完成之后再装载css文件，

对于有的浏览器来说， 在一些情况下，如果页面文件的体积比较大，则会出现先现实无样式的页面，闪烁一下之后再出现设置样式的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。

在HTML中使用CSS样式的几种方式

在html网页中引入引入css主要有以下四种方式：

（1）行内式

网页中css的导入方式

（2）嵌入式

嵌入式一般写在head中，对于单个页面来说，这种方式很方便。

（3）导入式

!-- 导入外部样式：在内部样式表的标记之间导入一个外部样式表，导入时用@import。 --

（4）链接式

导入式和链接式差不多，都是从外部引入css文件。但是链接式对于客户端用户浏览网站时，效果会好些。