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 ...
随机推荐
- Linux学习之CentOS(二十八)--RAID原理基础及Linux下软件RAID配置
一.RAID的原理基础 在 讲解RAID的原理基础之前,我们首先来了解一下传统磁盘的劣势.我们知道一台PC机种都会包含CPU.内存.主板.硬盘.网卡等硬件,影响计算机性能的 组建包括:CPU.主板总线 ...
- redis 操作string 的测试
1>set set name zhangsan :OK get name: zhangsan set name lisi:OK get name: lisi 2> setnx 如果存 ...
- 【先定一个小目标】Redis 安装成windows服务-开机自启
1.第一步安装成windows服务的,开机自启动 redis-server --service-install redis.windows.conf 2.启动\关闭 redis-server --se ...
- 怎么把本地项目和远程git仓库相连通
1. 打开在你的项目文件夹,输入下面的命令 git init 输完上面的命令,文件夹中会出现一个.git文件夹,如下图所示,其他的的文件也会出现蓝色小问号的标志 2. 添加所有文件 git add . ...
- JS中用apply、bind实现为函数或者类传入动态个数的参数
为纪念10年没写blog,第一篇博文就以这样一个有趣的窍门开始吧 -___- 在ES5中,当我们调用一个函数时,如果要传入的参数是根据其他函数或条件判断生成的,也就是说不确定会传入多少个参数时,在不改 ...
- 库AFNetworking的使用
库AFNetworking的使用 1.GET请求(html,json,xml) #pragma mark -GET请求 -(void)testGetRequset{ NSString *urlStri ...
- mysqldump数据库同步遇到的问题
1.同步数据是遇到 没有 lock database权限,报 " mysqldump: Got error: 1044: Access denied for user 'spider_dat ...
- FTP下载文件失败
这几天的定时任务下载文件的脚本失败了. 于是手工执行测试,发现报550 Permission denied. Passive mode refused. 意思就是被动模式下,没有权限获取文件. 解决方 ...
- 关于GridView中控件的问题
最近做项目报表时,会遇到在Gridview中有一些控件,报表中也会有更新.删除等一系列的操作,但往往会遇到一些控件取值取不到或者找不到控件得问题,通过网上查阅资料对其中的一些做一总结: 前台代码如下: ...
- ssh
ssh的配置文件有两个:服务端:/etc/ssh/sshd_config 客户端:/etc/ssh_config 服务端配置文件:/etc/ssh/sshd_config [root@localhos ...