美文网首页
CSS引入的四种方式

CSS引入的四种方式

作者: 9979eb0cd854 | 来源:发表于2018-08-14 18:13 被阅读19次

第三天学习内容:CSS

css有4种引入方式:

1.行内样式

最直接最简单的一种,直接对HTML标签使用style="",例如:

<p style="color:#F00; "></p>

缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。

2.内嵌样式

内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:

<style type="text/css">

body,div,a,img,p{margin:0; padding:0;}

</style>

优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。

3.链接样式

链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:

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

优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便

4.导入样式(不建议使用)

导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。

@import在html中使用,如下:

<style type="text/css">
@import url(style.css);
</style>

@import在CSS中使用,如下:

@import url(style.css);

第二:四种CSS引入方式的优先级

1.就近原则

2.理论上:行内>内嵌>链接>导入

3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高

相关文章

  • 导航条制作(1-1)

    html代码: css代码: CSS知识点:(1)四种引入 CSS 的方式:style 属性、style 标签、c...

  • CSS笔记1_CSS引入方式,样式选择器

    css引入方式主要有四种,按照优先级排列依次为:内联>内部>导入>link CSS引入方式 内联 直接在标签内部书...

  • css

    引入css样式的四种方式: 内联样式(style属性) style 标签 外部文件 (CSS link) @imp...

  • 入门任务6

    CSS的全称是cascading style sheets CSS有四种引入方式 内联样式:image.png 内...

  • css-入门

    1.css引入方式共有四种: 内联两种分别是在style属性和标签中引入 外联,css link 插入,在一个cs...

  • css3基础入门

    前端三层 结构层 HTML样式层 CSS行为层 JavaScript CSS 四种引入方式 行内式在 HTML 中...

  • css

    css四种引用方式: 1. 写在对应标签内: 2. 写在style标签内: 3.link标签引入外部css ...

  • CSS引入的四种方式

    第三天学习内容:CSS css有4种引入方式: 1.行内样式 最直接最简单的一种,直接对HTML标签使用style...

  • 引入css的四种方式

    style属性内联样式 style标签 link标签引入的外部样式 将style写在.css后缀的文件里,用lin...

  • CSS基础总结

    什么是CSS CSS是层叠样式表,用于控制网页数据的表现,使得网页数据和表现分离。 CSS引入的四种方式 行内式(...

网友评论

      本文标题:CSS引入的四种方式

      本文链接:https://www.haomeiwen.com/subject/bsavbftx.html