在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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php控制文件下载速度的方法
2015/03/24 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
实现动画效果核心方式的js代码
2013/09/27 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python多线程操作实例
2014/11/21 Python
python实现手机通讯录搜索功能
2018/02/22 Python
django反向解析和正向解析的方式
2018/06/05 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
副总经理工作职责
2013/11/28 职场文书
大客户销售经理职责
2013/12/04 职场文书
大家检讨书5000字
2014/02/03 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
小学运动会开幕词
2016/03/04 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
JavaScript文档对象模型DOM
2021/11/20 Javascript