css之 11.12.13.14. css引入方式之行内式、内嵌式、外链式和导入式
css引入方式之行内式、内嵌式、外链式和导入式
1. css引入方式——行内式
- 通过style这个标签属性，将css键值对直接写入标签内。缺点：比较杂，比较乱且没法公用。
- css引入方式之行内式
语法：写在开始标签里面 打一个空格隔开 style=“声明;声明;…”
例如：
<div style="background-color: black;color: aliceblue">css引入方式之行内式</div>
<span style="color: chartreuse;font-size: 50px">行内式</span>
2.css引入方式——内嵌式
- 使用style标签将css属性名和属性值引入到HTML页面中，通常style标签放置在head标签中。
为什么css标签要放置在head标签中呢，因为代码从上到下执行，如果先加载结构，那么用户看到的将是干巴巴的内容，而没有通过美化，而先加载样式后加载结构，就相当于孩子出生就是穿着衣服的。
例如：用内嵌式描述一个宽度高度为100像素，背景颜色是红色的一个P标签和背景颜色是红色的div标签。
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<!--
css引入方式之内嵌式
语法：<style type="text/css">
选择器{声明;
声明;
....
}
</style>
内嵌式可以放在head或者body里面 建议放在head标签里面title标签的下面
-->
<style type="text/css">
p{width: 100px;height: 100px;background-color: red;}
div{background-color: red;}
</style>
</head>
<body>
<p>内嵌式</p>
<div>内嵌式</div>
</body>
3.css引入方式——外链式（外联式）
- 通过link标签将独立的css文件引入到HTML文件中。（可以选中css文件鼠标右键选中Split Vertically进行分屏操作）
例如：
HTML文件：
<head>
<meta charset="UTF-8">
<title>外链式</title>
<link rel="stylesheet" type="text/css" href="外链式之css文件.css">
<!--
css引入方式之外链式
引入一个外部的css样式表 样式表和结构相互独立
语法：link标签 href="css样式路径名称"
可以放在head标签或者body标签里面
rel="stylesheet"
描述了当前页面与href所指定文档的关系。即说明的是，href连接的文档是一个新式表。
type="text/css"
是指定MIME类型，也就是css文档。
href="外链式之css文件.css"
规定被链接文档的位置。
-->
</head>
<body>
<div>外链式</div>
<p>外链式2</p>
</body>
css文件：
div{
background-color: blue;
}
p{
color: chartreuse;font-size: 100px;
}
css文件和结构相互独立：
4.css引入方式——导入式
- 通过@import 'url’引入一个独立的css文件。
例如：
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css">
/* css引入方式之导入式
语法：导入式要依赖css样式文件 故他要放在style或者css样式表里
@import "css样式路径"
注意：若style标签中既有导入式样式又有内嵌式样式
导入式要放在内嵌式的上面;放在下面会报错，导致导入式的样式直接失效
*/
@import "外链式之css文件.css";/*导入式样式*/
span{
font-size: 100px;color: red;
} /*内嵌式样式*/
</style>
</head>
<body>
<div>导入式</div>
<P>导入式2</P>
<span>内嵌式</span>
</body>
css文件同3.外链式。