在HTML中引入CSS的几种方式介绍


Posted in HTML / CSS onDecember 06, 2021

使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。

html引用css方法如下

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

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

如<div style="font-size:14px; color:#FF0000;">我是div css测试内容-www.3water.com支持</div> 效果如下图
 

在HTML中引入CSS的几种方式介绍

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

插入代码如下:

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 
--> 
</style>

具体方法如下图:

在HTML中引入CSS的几种方式介绍

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木测试</title>
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 
--> 
</style> 
</head>
<body>
<div class="ceshi">我是div css测试内容-www.3water.com支持</div>
</body>
</html>

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

效果如下图:
 

在HTML中引入CSS的几种方式介绍

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

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

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

详细如下图
 

在HTML中引入CSS的几种方式介绍

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

使用link来引用外部的css的优势

1、有利于SEO,使用此方法引用外部css文件,将使得html页面的源代码少很多比起直接加入css样式,因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的,这样使得html源代码很少,使得蜘蛛爬行更快,处理更少,增大了此网页的权重,有利于排名。
2、节约html使得浏览器下载网页时候分开线程了,就像加载一个页面同时有两条线在打开一个页面道理,使得网页打开格外快。(用户浏览此网页的时候html源代码和css文件同时下载,使得更加快速)
3、修改网页的样式方便,只需修改css样式即可修改网页的美工样式,如果在网站项目中此方法,因整站应用了共用的css基本样式,这样修改整站风格样式根据快捷方便。

下面是一些补充

在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式
行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用

例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
</head>
<body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
</body>
</html>

嵌入式:嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之间,对于单一的网页,这种方法很方便。但是对于一个包含很多页面的网站,如果每个页面都以内嵌方式设置各自的样式,就失去了CSS带来的巨大优点,因此一个网站通常都是编写一个独立的CSS样式表文件,使用以下两种方式中的一种,引入HTML文档中。
例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
       color:white;
       background-color:boue;
       }
</style>
       </head>
       <body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
       </body>
       </html>

导入式与链接式:导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件,二者有相应的区别。
事实上,二者最大的区别在于链接式使用HTML的标记引入外部CSS文件,而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。
如果使用链接式,需要使用如下语句引入外部CSS文件。

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

如果使用导入式,则需要使用如下语句。

<style type="text/css">
       @import"mystyle.css";
</style>
 

此外,采用这两种方式后的显示效果也略有区别。使用链接方式时,会在装置页面主体部分之前装载CSS文件,这样显示出来的网页从一开始就是带有样式的效果,而使用导入式时,会在整个页面装载完成后再装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现样式设置后的效果。从浏览者的感受来说,这是使用导入式的一个缺陷。对于一些比较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放到几个CSS文件中,这样如果使用链接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来说,是一个缺陷。如果使用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接式则不具备这个特征。
 

因此这里给大家的一个建议是,如果需要引入一个CSS文件,则使用链接方式;如果需要引入多个CSS文件,则首先用链接方式引入一个“目录”CSS文件,这个“目录”CSS文件中再使用导入式引入其他CSS文件。

如果希望通过JavaScript来动态决定引入哪个CSS文件,则必须使用链接方式才能实现。

 
HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
div与span之间的区别与使用介绍
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 #HTML / CSS
HTML5 新增内容和 API详解
Nov 17 #HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 #HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
CSS中妙用 drop-shadow 实现线条光影效果
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP教程 基本语法
2009/10/23 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python 装饰器使用详解
2017/07/29 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python机器学习之决策树算法
2017/12/22 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
书法大赛策划方案
2014/06/04 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
入党现实表现材料
2014/12/23 职场文书
采购员岗位职责范本
2015/04/07 职场文书
红歌会主持词
2015/07/02 职场文书
记者节感言
2015/08/03 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript