在HTML中有哪些引用CSS的方式


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来在HTML中有哪些引用CSS的方式,在HTML中有引用CSS的方式的注意事项有哪些,下面就是实战案例,一起来看一下。

在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式
行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用
例:

1

2

3

4

5

6

7

8

9

10

11

      <html>

      <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Text Demo</title>

      </head>

      <body>

<h1 style=color:white;background-color=blue;>

This is a line of Text.

</h1>

      </body>

      </html>

嵌入式:嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之间,对于单一的网页,这种方法很方便。但是对于一个包含很多页面的网站,如果每个页面都以内嵌方式设置各自的样式,就失去了CSS带来的巨大优点,因此一个网站通常都是编写一个独立的CSS样式表文件,使用以下两种方式中的一种,引入HTML文档中。
例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

      <html>

      <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Text Demo</title>

<style type="text/css">

h1{

      color:white;

      background-color:boue;

      }

</style>

      </head>

      <body>

<h1>This is a line of Text.</h1>

<h1>This is another line of Text.</h1>

      </body>

      </html>

导入式与链接式:导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件,二者有相应的区别。
事实上,二者最大的区别在于链接式使用HTML的标记引入外部CSS文件,而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。
如果使用链接式,需要使用如下语句引入外部CSS文件。

1

<link href="mystyle.css" rel="stylesheet" type="text/css" />

如果使用导入式,则需要使用如下语句。

1

2

3

<style type="text/css">

       @import"mystyle.css";

</style>


此外,采用这两种方式后的显示效果也略有区别。使用链接方式时,会在装置页面主体部分之前装载CSS文件,这样显示出来的网页从一开始就是带有样式的效果,而使用导入式时,会在整个页面装载完成后再装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现样式设置后的效果。从浏览者的感受来说,这是使用导入式的一个缺陷。对于一些比较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放到几个CSS文件中,这样如果使用链接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来说,是一个缺陷。如果使用导入式,则可以只引进一个总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接式则不具备这个特征。

因此这里给大家的一个建议是,如果需要引入一个CSS文件,则使用链接方式;如果需要引入多个CSS文件,则首先用链接方式引入一个“目录”CSS文件,这个“目录”CSS文件中再使用导入式引入其他CSS文件。
如果希望通过JavaScript来动态决定引入哪个CSS文件,则必须使用链接方式才能实现。

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

iframe的去边框和无边框有哪些操作方式

怎样使用html网页中的锚点

html中如何使用js来获取本地系统时间

html超级链接a的click事件之后跳转href所指向的地址

以上就是在HTML中有哪些引用CSS的方式的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html中怎么把div居中

css font-size属性怎么用

css中伪类和伪元素的详细介绍(代码示例)

css target属性怎么用

详解angular中为Html元素添加css类的几种方式

jq怎么替换Html内容

css怎么让a标签居中

css page-break-before属性怎么用

css最大的优点是什么

css如何让a标签不可点击

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...