900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 9—css的引入方式(行内样式表 内部样式表 外部样式表)

9—css的引入方式(行内样式表 内部样式表 外部样式表)

时间:2021-04-18 06:36:37

相关推荐

9—css的引入方式(行内样式表 内部样式表 外部样式表)

按照css样式书写的位置(或者引入的方式),css样式表可以分为三大类:

行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)

行内样式表

行内样式表(内联式)是在元素标签内部的style属性中设置css样式。适合修改简单样式

<div style="color: red; font-size: 12px;">zmy会成功的</div>

style其实就是标签的属性在双引号中间,书写要符合css规范不推荐使用使用行内样式表设定css,通常也被称为行内式引入

内部样式表

内部样式表(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中。

<head>

<style>

div {

color: red;

font-size: 12px;

}

</style>

</head>

<style>标签理论上可以放到html文档的任何地方,但一般会放在文档的<head>标签中通过此种方式,可以方便控制当前整个页面中的元素样式设置代码结构清晰,但是并没有实现结构与样式完全分离练习时经常使用

外部样式表

实际开发中都是外部样式表,适合样式比较多的情况,核心是:样式单独写到css文件中,之后把css文件引入到html页面中使用

引入外部样式表分为两步:

新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中在HTML页面中,使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

例如:<link rel="stylesheet" href="zmy.css">

使用外部样式设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

CSS引入方式总结

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。