html如何连接外部css文件?

不言
发布: 2018-09-29 13:49:53
原创
57914人浏览过

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

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 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的内容可以关注php中文网。

以上就是html如何连接外部css文件?的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号