包含html引入css样式的词条

在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样式方法。

相关问答

Q1: HTML中怎么导入css？

参考以下html导入css的方式：

HTML 中引入 CSS 的方式

有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

div style="background: red"/div

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 div 拥有相同的样式，你不得不重复地为每个 div添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 style 标签下书写 CSS 代码。

示例：

head

style

.content {

background: red;

}

/style

/head

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 head 标签引入外部的 CSS 文件。

示例：

head

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

/head

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

style

@import url(style.css);

/style

比较链接方式和导入方式

链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。

link 属于 HTML，通过 link 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

小结：我们应尽量使用 link 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。

Q2: HTML网页怎么使用CSS样式？

在制作一个网页的时候，Css样式的添加一共有四种方式，一起来看看这四种方式：

一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。

元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

例如：

TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%

这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签： 将样式规则写在STYLE.../STYLE标签之中。

通常是将整个的 STYLE.../STYLE结构写在网页的HEAD /HEAD部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以LINK标签引入。

假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入

LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"

即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的head/head部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。

四、使用@import引入： 跟LINK用法很像，但必　放在STYLE.../STYLE 中。

要注意的是，行末的分号是绝对不可少的！这种方式也可以把

Q3: 在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

浏览器运行效果：