CSS引入方式

本文记录WEB前端学习过程中遇到的CSS引入方式~

CSS使用非常灵活,既可以嵌入在HTML文档中,也可以是一个单独的文件。如果是单独的文件,则必须以.css为扩展名。CSS常见的引入方式有三种:

1.行内样式

行内样式是通过style属性来设置元素的样式。

示例代码:

<a style="color: #F00; font-size: 30px;" href="http://www.oliver.ren/">Oliver's Blog</a>

行内样式通过标签的属性来控制样式,这样并没有做到结构与表现(HTML展示结构和CSS显示效果)相分离,所以一般很少使用。

2.内部样式

内部样式又称为内嵌式,是将CSS代码集中写在HTML文档的<head>头部标签中,并且使用<style>标签定义。

示例代码:

<style type="text/css">
    body{
        background-color: #DDD;
    }
</style>

内嵌式CSS样式只对其所在的HTML页面有效,可以对多处标签统一设置样式。因此,单独设计一个页面时,使用内嵌式是个不错的选择。但是,如果是一个网站,不建议使用这种方式,因为他不能充分发挥CSS代码的重用优势。

3.外部样式

外部样式又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签将样式连接到HTML文档中。

示例代码:

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

链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个<link>标签链接多个CSS样式表。

注意:优先级为1>2>3。

标签: none