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 ...
随机推荐
- pgsql 建数据库注意事项
在用navacat建好表之后,需要主键自增的时候,把字段建好之后,可以使用下面的sql来建立主键自增. ALTER TABLE "public"."chart_sql&q ...
- PHPCMS导航栏当前栏目选中方法
{if $top_parentid==0}<!--判断首页显示的是不是首页--> <li><a href="{siteurl($siteid)}" s ...
- Opera 浏览器各版本下载地址
新版本下载地址: 正式分支: http://get.opera.com/ftp/pub/opera/desktop/ beta分支:http://get.opera.com/ftp/pub/opera ...
- [Java] JSP笔记 - Filter 过滤器
一.什么是Web过滤器 Servlet API 很久以前就已成为企业应用开发的基石,而 Servlet 过滤器则是对 J2EE 家族的相对较新的补充. Servlet 过滤器是可插入的 Web 组件, ...
- 阿里云推送SDK在某些机型（某米为主）下崩溃问题的解决方法
引言 最近APP上线,遇到一个比较诡异的问题.最后竟然和dex文件有关,也是醉了,看来还得深入底层学习啊. 问题描述 在集成阿里推送SDK时,需要在Application中进行初始化,大多数Andro ...
- ORA-00600: 内部错误代码
运行时报ORA-00600: 内部错误代码, 参数:[qcsgpvc3],[],[],[],[],[],[],[],[],[],[],[] ,上网搜了但大多数都不行.无心插柳柳成荫,就在无奈想要 ...
- net.sf.json.JSONException: There is a cycle in the hierarchy!的解决办法
使用Hibernate manytoone属性关联主表的时候,如果使用JSONArray把pojo对象转换成json对象时,很容易出现循环的异常.解决的办法就是, 在转换json对象时忽略manyto ...
- sql手工注入时的探测技巧汇总
工具的灵活性肯定比不上人,在手工探测的基础上再去自定义工具,才是正道. sql注入时手工探测技巧 =================================================== ...
- Java EE 经验
环境配置 GlassFish Error 1 Exception while loading the app : CDI deployment failure:Error loading class ...
- How to Delete XML Publisher Data Definition Template
DECLARE -- Change the following two parameters VAR_TEMPLATECODE VARCHAR2(100) := 'CUX_CHANGE_RPT1 ...