HTML中引入CSS的四种常用方法及各自的缺点
在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。
1、行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。格式如下：
<div style=" width: 100%;height: 100%;margin: 10px;"> 内容 </div>
2、嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
<style type="text/css">
...此处写CSS样式
</style>
</head>
缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。
3、导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<head>
<style type="text/css">
@import url(mystyle.css); 此处要注意.css文件的路径
</style>
</head>
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
4、链接式
也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用语法如下：
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。
HTML中引入CSS的四种常用方法及各自的缺点的更多相关文章
- PHP中引入文件的四种方式详解
四种语句 PHP中有四个加载文件的语句:include.require.include_once.require_once. 基本语法 require:require函数一般放在PHP脚本的最前面,P ...
- PHP中引入文件的四种方式及区别
文件加载语句:include,require,include_once,require_once include,require: require函数通常放在 PHP 程序的最前面,PHP 程序在执行 ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
- 页面中CSS的四种引入方式的介绍与比较
转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- 使用CSS隐藏HTML元素的四种常用方法
CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...
- Java更新XML的四种常用方法简介
本文简要的讨论了Java语言编程中更新XML文档的四种常用方法,并且分析这四种方法的优劣.其次,本文还对如何控制Java程序输出的XML文档的格式做了展开论述. JAXP是Java API for X ...
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
- 在HTML中引入CSS的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件. ㈠内联方式 内联方式指的是直接在 HTML 标 ...
随机推荐
- idea 工具中项目文件上有灰色的小X号去除方法
初使用idea,在项目中发现类上有这样的灰色X号,启动项目后idea会报找不到这个类的错误,原因是它没有被编译, 解决方法 setting->Build->Compiler->Exc ...
- jmeter如何进行MQTT性能测试（测试前期准备二，MQTT插件及协议了解）
jmeter插件下载地址及使用,已经有大佬总结好了 大佬的博客地址: https://blog.csdn.net/yellowanwu/article/details/50889677 添加线程组:添 ...
- java——形参与实参
看了很多的文章,稍微有一些的总结:对最基本的形参与实参有了一定的理解,虽然还是不够深入. 1.基本概念 形参:全称为"形式参数"是在定义函数名和函数体的时候使用的参数,目的是用来接 ...
- Linux 使用硬盘
一.硬盘分区规划: swap(交换,掉期交易,互换)分区:虚拟内存使用,不能保存用户信息. boot(引导)分区:保存启动系统得相关文件. root(根)分区:放置系统文件得根,所有文件都保存在该分区 ...
- Bootstrap 总结
Bootstrap 首先要引入下面三个文件 <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcs ...
- zookeeper分布式服务中选主的应用
通常zookeeper在分布式服务中作为注册中心,实际上它还可以办到很多事.比如分布式队列.分布式锁 由于公司服务中有很多定时任务,而这些定时任务由于一些历史原因暂时不能改造成框架调用 于是想到用zo ...
- 微信小程序windowHeight的值在ios和android平台不一致问题解决办法
开发中遇到一个业务需求,需要把页面顶部.底部固定,中间的scroll-view内部滚动.要满足这个需求,需要根据屏幕高度计算中间的scroll-view高度.结果悲催地发现,使用 wx.getSyst ...
- 学习C语言，在软件测试中如何用？
1)为什么学? 掌握基础: 编写测试脚本: 自动化: 性能测试: 看懂代码,定位问题(白盒测试). C语言如何开发有界面的程序? 首先给大家扫盲:1 什么叫做界面程序: 归根到底就是设置LCD上的 ...
- Python多进程并发(multiprocessing)
1.新建单一进程 如果我们新建少量进程,可以如下: 2.使用进程池 是的,你没有看错,不是线程池.它可以让你跑满多核CPU,而且使用方法非常简单. 注意要用apply_async,如果落下async, ...
- Linux_系统管理_网络配置_命令行配置网络
因为格了系统,重新安装了VMware,加载了原来的虚拟机后,因为VMware虚拟网卡Vmnet8的地址已经变了,所以要改变下客户操作系统的地址,结果搞了半天才搞定,这里记下来,希望能够为遇到这类问题的 ...