css的四种使用方式

方式一:内联样式

内联样式,也叫行内样式,指的是直接在style属性中添加CSS

示例:

<DIV style="display: none;background:red"></DIV>

不建议使用这种方式,它只能改变当前标签的样式,如果想要多个<DIV>拥有相同的样式,你不得不重复得为每一个<DIV>添加相同得样式如果想要修改一种样式,又不得不修改所有style中的代码,很显然,内联方式的使用会导致HTML代码变得冗长,使得网页难以维护.

方式二:嵌入样式

嵌入方式是指的在HTML中的<style>标签中书写CSS代码

示例:

<head>
    <style>
      .content {
         background: red;
       }
    </style>
</head>

嵌入式的CSS只对当前网页有效,因为CSS代码是在HTML文件中,所以会使得代码比较集中,当我们写模板网页时会比较有利,因为查看模板代码的人可以一目了然的的查看HTML结构和CSS样式,因为嵌入的CSS只对当前的HTML文件有效,所以当多个页面要使用相同的CSS代码时,这样写会导致代码冗余,当页面较多时也不利于维护

方式三:链接样式

链接方式是指在HTML引入外部的CSS文件

示例:

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

这是最常见的也是最推荐的引入CSS样式,使用这种方式,所有的CSS代码只存在单独的CSS文件中,所以具有良好的维护性.并且CSS代码只存在于CSS文件中CSS文件会在第一次加载时引入,以后切换页面时只需要加载HTML文件

方式四:导入样式

导入样式指的是使用CSS规则引入外部的CSS文件

示例:

<style>
    @import url(style.CSS);
</style>

或者写在CSS 样式中

@charset "utf-8";
@import url(style.CSS);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}

比较导入方式与链接方式

link是属于HTML,通过<link>标签中的href属性来引入外部文件,而@import属于CSS导致语句应该写在CSS中,并且写在CSS的头部,否则无法正确的导入外部文件;

@import是CSS2.1才出现的概念,所以如果浏览器版本比较低,无法正确导入外部样式文件

当HTML文件被加载时,link引用的文件会同时被加载,而@import引用的文件会等页面加载完成后再被加载,

建议:尽量使用<link>标签导入外部CSS文件,避免或者少使用其他的三种方式

css的四种使用方式

猜你喜欢