欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html如何引入Css文件?HTML引入外部Css文件的四种方法

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

在学习前端的时候,我们应该知道Css给Html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容。既然Css是用来给Html添加各种样式的,那么,Html中如何引入外部的Css文呢?本篇文章将给大家来介绍关于Html引入Css文件的四种方法,下面我们就来看看具体的内容。

1、Html引入Css文件之直接在div中使用Css样式制作div+Css网页

<div style="border:1px red solid;">Html引入Css文件</div>

说明:Html引入Css文件的这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了Css的优势,当然如果你非常想用这种方法,在不经常更改的地方可以用一用,但是还是不推荐。

2、Html引入Css文件之Html中使用style自带式

直接在header 里面写Css

<style type="text/Css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

说明:Html引入Css文件的这种方法适合在页面较少的情况下使用。优点:速度 快,所有的Css控制都是针对本页面标签的,没有多余的Css命令;再者不用外链Css文件。直接在Html文档中读取样式。缺点如果页面较多改版会很麻烦,单个页 面显得臃肿,Css不能被其他Html引用造成代码量相对较多,维护也麻烦些。但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进 行复杂的维护工作。

3、Html引入Css文件之使用@import引用外部CSS文件

将一个独立的.Css文件引入HTML文件中,导入式使用Css规则引入外部Css文件,<style>标记也是写在<head>标记中,使用的语法如下:

<style type="text/Css">
    @import"mystyle.Css"; 此处要注意.Css文件的路径
</style>

4、Html引入Css文件之使用link引用外部CSS文件

在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用Html规则引入外部Css

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

说明:Html引入Css文件的这种方法就不需要style标签,而是直接通过link一个样式来引用外部样式,推荐使用link来引用外部的Css样式方法。

本文地址:http://itbyc.com/web/html5/20349.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1