在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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 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
php数组转成json格式的方法
2015/03/09 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
javascript实现简易计算器
2017/02/01 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python中执行shell的两种方法总结
2017/01/10 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
小班秋游活动方案
2014/02/22 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2015年父亲节寄语
2015/03/23 职场文书
业务员岗位职责范本
2015/04/03 职场文书
主婚人致辞精选
2015/07/28 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python