在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弹性盒模型实例介绍
May 27 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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的curl开启问题探讨
2014/04/08 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
网页常用特效代码整理
2006/06/23 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python去掉行尾的换行符方法
2017/01/04 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
django admin组件使用方法详解
2019/07/19 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
入团者的自我评价分享
2013/12/02 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
质量月活动总结
2014/08/26 职场文书
解除施工合同协议书
2014/10/17 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
仓库管理制度范本
2015/08/04 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android