html如何引入css文件?HTML引入外部css文件的四种方法

  • 时间:2020-04-24 15:08 作者:一个php程序媛 来源: 阅读:285
  • 扫一扫,手机访问
摘要:在学习前台的时候,我们应该知道css给html标记增加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容。既然css是用来给html增加各种样式的,那么,html中如何引入外部的css文呢?本篇文章将给大家来详情关于html引入css文件的四种方法,下面我们就来看看具体的内容。1、html引入

在学习前台的时候,我们应该知道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文件

在网页的标签对中使用标记来引入外部样式表文件,使用html规则引入外部css

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

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

以上就是给大家详情的四种html引入外部css文件的四种方法

HTML+CSS+JS+vue前台基础入门~https://www.bilibili.com/video/av82371580

以上就是学习web前台开发的需要哪些条件的详细内容

我的学习交流群web前台学习交流群

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部