CSS系列：在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须将CSS与HTML链接在一起使用。在HTML中，引入CSS的方法主要有4种：行内式、内嵌式、导入式和链接式。
1. 行内式
行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现CSS的优势，因此不推荐使用。
行内式示例：
<div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div>
2. 嵌入式
嵌入式将页面中各种元素的设置集中写在<head></head>之间，对于单一的网页使用方便。但对于包含很多页面的网站，如果每个页面都以嵌入式方式设置各自的样式，也将失去CSS带来的优点，因此一个网站通常都是编写一个独立的CSS文件，然后将其引入HTML文档中。
嵌入式示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
div {
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div>HTML中引用CSS的嵌入式方法</div>
</body>
</html>
3. 导入式与链接式
导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件中，二者的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。
使用链接式引入外部CSS文件示例：
<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />
使用导入式引入CSS文件示例：
<style type="text/css">
@import "/Content/Base.css"
</style>
采用这两种方式的显示效果区别：使用链接方式时，会在加载页面主体部分之前加载CSS文件，这样显示出来的网页从一开始就是带有样式效果的。而使用导入式时，会在整个页面加载完成后再加载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件比较大，则会出现显示无样式的页面，闪烁一下之后再出现设置样式后的效果。从用户体验来说，这是使用导入式的一个缺陷。
对于一些比较大的网站，为了便于维护，可能会希望把所有的CSS样式分别写在几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说是一个缺陷。如果使用导入式，则可以只引入一个总的CSS文件，在这个文件中再导入其他独立的CSS文件。
如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。
但是如果希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。
4. 浏览器的私有属性
Webkit类型的浏览器（如Safari、Chrome）的私有属性是以-webkit-为前缀的，Gecko类型的浏览器（如Firefox）的私有属性是以-moz-为前缀的，Opera浏览器的私有属性是以-o-为前缀的，IE浏览器的私有属性是以-ms-为前缀的（只IE8+支持-ms-前缀）。
CSS系列：在HTML中引入CSS的方法的更多相关文章
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
- HTML中引入CSS的四种常用方法及各自的缺点
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...
- 在html中引入css、js和jQuery的方法
在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...
- vue的cli中引入css文件
在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦
- 在HTML中引入CSS的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件. ㈠内联方式 内联方式指的是直接在 HTML 标 ...
- vue-cli中引入jquery的方法
vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...
- SSM项目 以及 springboot 中引入swagger2的方法
swagger2是一个非常好用的接口文档,在开发的过程中方便前后端接口的交接. 下面我们就来讲讲在使用java时,分别在SSM框架,以及springboot+mybatis框架中引入swagger2的 ...
- Spring MVC：在jsp中引入css
为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...
- vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
随机推荐
- python学习笔记-（十四）I/O多路复用 阻塞、非阻塞、同步、异步
1. 概念说明 1.1 用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空间(虚拟存储空间)为4G(2的32次方).操作系统的核心是内核,独立于普通的应用程序,可 ...
- Windows10配置NFS服务端和客户端
环境:Windows10企业版x64 安装服务端 安装hane win nfs server,版本1169(官方最新版1223经试验不成功). 设置如下: 以管理员身份重启服务(注:软件界面上&quo ...
- SQL 一条记录的的两个字段值相同与不同的查询
select * from (select xm,je from table) a , (select xm01,je01 from table) bwhere a.xm = b.xm01and a. ...
- 使用rsync+inotify同步两台服务器文件
目标功能:将B服务器文件同步到A服务器 A服务器rsyncd.conf配置 权限600 A服务器rsyncd.pas文件配置 权限600 同步文件路径 /data/wwwroot/shen/ 权限 ...
- 基于linux(centos)的svn环境搭建
1. 安装svn yum intall subversion 2. 查看安装位置 rpm -ql subversion 3. 检验svn是否安装成功,查看帮助 svn --help , 看到下图表示成 ...
- C#编写window服务，一步一步（1）
Window服务是啥,这里就不废话了,如何用在哪里用也不废话了,这里我这篇文章只是详述了我在vs2012中创建window服务的经过,希望对你有所帮助. 另外:我在编写服务过程中参考了 Profess ...
- codevs1257 打砖块
题目描述 Description 在一个凹槽中放置了n层砖块,最上面的一层有n块砖,第二层有n-1块,--最下面一层仅有一块砖.第i层的砖块从左至右编号为1,2,--i,第i层的第j块砖有一个价值a[ ...
- Postgresql 简单配置 (ubuntu server 14.04.3)
安装和配置 ubuntu server 已经自动安装了progresql,故安装步骤就省略 初始postgresql没有密码,不能使用,需要先设置密码,命令(从网上随意找的)如下: sudo su p ...
- qt5中文代码编码编译问题
qt中文代码用vs2010编译问题解决 总结说就是qt5默认UTF8不支持微软默认的ANSI(GB2312/GBK).解决办法是把中文字符串全部用 QString::fromLocal8Bit() 封 ...
- 查询EBS中LOV的SQL语句
1.帮助->关于:查找会话 SID : 507: 2.点一下LOV右边的三点,触发LOV事件: 3.运行如下代码段: DECLARE l_sid NUMBER := :SID;BEGIN F ...