CSS引入方式

CSS语法：

选择器{

　　声明 ;

　　声明；

}

声明 => 属性名 : 属性值

可以放一条或多条声明，而且每条声明用分号隔开，最后一条声明后面的分号可以省略。

CSS引入方式有四种：行内式、内嵌式、外链式、导入式。

CSS引入方式 — 行内式

通过style这个标签属性，将css键值对直接写入标签内。

<div style="width:100px;height:100px;background-color:red;color:#000">css引入方式之行内式</div>

语法：写在开始标签里面打一个空格隔开 style="声明 ; 声明 ; ......"

CSS引入方式 — 内嵌式（嵌入式）

使用style标签将css属性名和属性值引入到html页面中，通常style标签放置在head标签中。

为什么css样式要放置在head标签中呢？因为代码从上到下执行，如果先加载结构，那么用户看到的就将是干巴巴的内容，而没有通过美化；而先加载样式后加载结构，就相当于孩子出生就是穿着衣服的。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> 
    div{
        background-color: red;/*背景颜色*/
        color: #000;/*字体颜色 黑色 black #000 rgb(0,0,0)*/
    }
    </style>
</head>

语法：<style type="text/css">

　　　　选择器{

　　　　　　声明 ;

　　　　　　......　　　　　

　　　　　}

</style>

内嵌式可以放在head或者body里，建议放在head标签里面title标签的下面。

CSS引入方式 — 外链式（外联式）

通过link标签将独立的css文件引入到html文件中。

<!-- 
    rel="stylesheet"描述了当前页面与href所指定文档的关系，即说明的是，href连接的文档是一个新式表。
    type="text/css"是指定MIME类型，也就是css文档。
    href="css/index.css"规定被链接文档的位置。
-->
<link rel="stylesheet" type="text/css" href="css/index.css">

语法：link标签 href="css样式路径名称" 可以放在head标签或者body标签里面。引入一个外部的css样式表。

CSS引入方式 — 导入式

通过@import ‘url' 或者 @import url('url') 引入一个独立的css文件

/* index.html文件 */
<style> 
    @import 'css/index.css'; 
    @import url(css/index1.css);
</style>

/* index.css文件 */
@import "index1.css";
div.content{
    background-color: yellow;/*背景颜色*/
    color: #000;/*字体颜色 黑色 black #000 rgb(0,0,0)*/
}

语法：导入式要依赖css样式文件，所以它要放在style标签或者css样式表中。

@import "css样式路径"

如果style标签里面既有内嵌的样式，又有导入的样式，导入式要放在内嵌式的上面，放在下面会报错，导致导入式的样式直接失效。

外链式和导入式的区别（面试题）

link和@import虽然都是引入外部的css文件，但是存在着很大的区别：

1、 link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中。

2、加载顺序不同。当一个页面被加载的时候，link引入的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载。

3、当使用JavaScript控制DOM去改变css样式的时候，只能使用link标签，因为@import不能被DOM控制的。

原文地址：https://www.cnblogs.com/youknowUL/p/11396259.html