CSS的四种引入方式-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

CSS的四种引入方式

简介: 1.行内式 行内式是在标记的style属性中设定CSS样式. hello world 这种方式没有体现出CSS的优势.因此不推荐使用. 2.嵌入式 嵌入式是将.CSS样式集中写在网页的下的标签对里. 格式如下: index s...

1.行内式

行内式是在标记的style属性中设定CSS样式.

<p style="color:red;background-color: yellow">hello world</p>

这种方式没有体现出CSS的优势.因此不推荐使用.

2.嵌入式

嵌入式是将.CSS样式集中写在网页的<head></head>下的<style></style>标签对里.

格式如下:

<head>
    <meta charset="utf-8">
    <title>
        index
    </title>
    <style>
        s1 {
            color: red;
            background-color: yellow
        }
    </style>
</head>
<body>
</body>

3.链接式

将一个.css文件引入HTML文件中

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

4.导入式

将一个独立的CSS文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,style标记也是写在<head>标记中.

使用语法如下:

<style type="text/css">
    <!--index.css指的是CSS文件的路径-->
    @import "index.css";
</style>

注意:

导入式会在整个网页装载完成后再装载CSS文件,因此如果网页比较大则会出现先显示CSS无样式的页面,
闪烁一下之后,再出现网页的样式的问题.这是导入式固有的一个缺陷.

使用链接式则会在网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带CSS样式的效果的.

它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点.

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章