CSS的引入的方式

CSS的引入方式

CSS和HTML一样，也是一门标记语言，通过浏览器就可以渲染。

但是和HTML不同的是，CSS语言需要绑定HTML，来渲染结构和内容(不能单独运行)。浏览器运行的还是我们的html网页文件。

CSS引入到HTML的方式有以下四种:

行内(内联)式、嵌入(内嵌)式、外链(链接)式、导入式。

行内式

直接使用html的标准属性style定义css样式，style 属性用法<tag style=”样式:样式值;”/>

行内式耦合性较高(并没有达到结构与样式的分离)， 后期维护成本高;

嵌入式

在head标签内，使用style标签引入css样式，解决了.上面行内式的问题，但是还是没能达到结构与样式的完全分离; htm|文档从. 上往下依次执行,如果嵌入的样式过多，会影响页面的加载速度。

外链式(工作中常用)

在head标签内，使用link标签引入外部独立的css文件。

  注: css文件不能使用数字开头

达到了结构与样式的完全分离，也是工作中常用的方式。通过link引入的css文件，与html文件是并行下载的。，

导入式

在style标签内，使用@import ur(“cs路径”)引入外部独立的css文件。

但是这种方式，是在html加载完成后，才加载的。会影响样式渲染的速度，常见的现象是页面加载时，先闪一下，然后正常。有时候，css 文件中也会使用@import引入另外的css文件,

如: @import ur(“css文件路径”)

对比HTML

键值对的概念:

html的键值对: k=“V” .

CSS的键值对: k:V;

分号的重要性:分号必须写。

每一个属性之间必须用分号隔开。

CSS对空格、换行、缩进，也不敏感。

在书写的时候:每个属性都换行缩进。为了清晰易读。

在将css文件发送到服务器之前:对代码进行压缩，删除所有的空格、换行，让代码在一行显示。文件的体积变小，这样加载速度就变快了。