举例说明在html中引入css的方法

举例说明在html中引入css的方法
【篇一：举例说明在html中引入css的方法】
html与css是两个作用不同的语言，它们同时对一个网页产生作用，因此必须将css与html链接在一起使用。

在html中，引入css的
方法主要有4种：行内式、内嵌式、导入式和链接式。

行内式行内
式即在标记的style属性中设定css样式，这种方式本质上没有体现css的优势，因此不推荐使用。

行内式示例：
p>2. 嵌入式嵌入式将页面中各种元素的设置集中写在 head /head
之间，对于单一的网页使用方便。

但对于包含很多页面的网站，如
果每个页面都以嵌入式方式设置各自的样式，也将失去css带来的
优点，因此一个网站通常都是编写一个独立的css文件，然后将其
引入html文档中。

嵌入式示例：
!doctype html html head meta name=viewport
content=width=device-width / title /title style type=text/css
p>3. 导入式与链接式导入式和链接式的目的都是将一个独立的css
文件引入html文件中，二者的区别在于链接式使用html的标记引
入外部css文件，而使用导入式则是使用css的规则引入外部css
文件。

使用链接式引入外部css文件示例：
link href=~/content/base.css rel=stylesheet type=text/css / 使用
导入式引入css文件示例：
style type=text/css @import /content/base.css /style 采用这两
种方式的显示效果区别：使用链接方式时，会在加载页面主体部分
之前加载css文件，这样显示出来的网页从一开始就是带有样式效
果的。

而使用导入式时，会在整个页面加载完成后再加载css文件，对于有的浏览器来说，在一些情况下，如果网页文件比较大，则会
出现显示无样式的页面，闪烁一下之后再出现设置样式
后的效果。

从用户体验来说，这是使用导入式的一个缺陷。

对于一些比较大的网站，为了便于维护，可能会希望把所有的css
样式分别写在几个css文件中，这样如果使用链接式引入，就需要
几个语句分别导入css文件。

如果要调整css文件的分类，就需要
同时调整html文件。

这对于维护工作来说是一个缺陷。

如果使用导
入式，则可以只引入一个总的css文件，在这个文件中再导入其他独立的css文件。

如果仅需要引入一个css文件，则使用链接方式；如果需要引入多个css文件，则首先用链接方式引入一个目录 css文件，这个目录css文件中再使用导入式引入其他css文件。

但是如果希望通过javascript来动态决定引入哪个css文件，则必须使用链接方式才能实现。

浏览器的私有属性webkit类型的浏览器（如safari、chrome）的私有属性是以-webkit-为前缀的，gecko 类型的浏览器（如firefox）的私有属性是以-moz-为前缀的，opera 浏览器的私有属性是以-o-为前缀的，ie浏览器的私有属性是以-ms-为前缀的（只ie8+支持-ms-前缀）。

【篇二：举例说明在html中引入css的方法】
引用css文件到html网页里方法 - divcss5欢迎来到divcss5查找css资料与学习div css布局技术！您的位置： > > ssi ?? b>
引用文件到方法-css引入,css引用
使用不同的方法来引用表，最终到达的效果相同，但是使用不同方法应用的将影响到seo及网页打开速度效率。

html引用css方法如下
1、直接在中使用css样式制作网页
2、html中使用style自带式
3、使用@import引用外部css文件
4、使用引用外部css文件推荐此方法
扩展阅读：
接下来我们将逐个讲解html引用css方法的例子
1、直接在html标签元素内嵌入css样式，如 p>p>
2、在html头部head部分内style声明插入代码如下：
styletype= text/css !--.ceshi{font-size:14px;color:#ff0000;}/*这里是设置css的样式内容*/-- /style 具体方法如下图：
3、使用@import引用外部css文件方法
!doctypehtmlpublic -//w3c//dtdxhtml1.0transitional//en
测试实例 /title styletype= text/css !--@importurl(wcss.css);/*这里是通过@import引用css的样式内容*/-- /style /head body p>wcss.css文件内代码.ceshi {font-size:14px; color:#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一个样式来引用外部样式
一般推荐使用link来引用外部的css样式方法。

使用link来引用外部的css的优势
1、有利于seo，使用此方法引用外部css文件，将使得html页面
的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网
页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘
蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。

2、节约html使得浏览器下载网页时候分开线程了，就像加载一个
页面同时有两条线在打开一个页面道理，使得网页打开格外快。

（用户浏览此网页的时候html源代码和css文件同时下载，使得更
加快速）
3、修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。

我要分享到：上一篇：
下一篇：必备css教程 essential css tutorials () () () 必备html基础教程 essential html tutorials () () () () ()如对文章有任何疑问请提交到，或有任何网页制
作css问题立即到发贴求解或直接divcss5网页顶部搜索遇到divcss疑问。

文章修订日期：2010-04-20 14:02 原创：
本文 divcss5版权所有。

在html中引入css的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。

1.行内式
行内式是在标记的style属性中设定css样式。

这种方式没有体现出css的优势，不推荐使用。

2.嵌入式
嵌入式是将css样式集中写在网页的 head /head 标签对的 style /style 标签对中。

式如下：
head
style type= text/css
...此处写css样式
/style
/head
缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。

单一网页可以考虑使用嵌入式。

3.导入式
将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件， style 标记也是写在 head 标记中，使用的语法如下：
style type= text/css
@import mystyle.css 此处要注意.css文件的路径
/style
导入式会在整个网页装载完后再装载css文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。

这是导入式固有的一个缺陷。

4.链接式
也是将一个.css文件引入到html文件中，但它与导入式不同的是链接式使用html规则引入外部css文件，它在网页的 head /head 标签对中使用 link 标记来引入外部样式表文件，使用语法如下：
link href= mystyle.css rel= stylesheet type= text/css /
使用链接式时与导入式不同的是它会以网页文件主体装载前装载css文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的css文件，然后在这个css文件中在使用导入式来引入其他的css文件。

但如果通过javascrip来动态引入css文件则只能使用链接式。

原文：。