正文
CSS的四种引入方式
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1.使用link标签引入css文件：
<head>
<link rel="stylesheet" type="text/css" href="assets/css/index.css">
</head>
2.使用style标签：
<head>
<style>
#info-bar{
background-color: #23499E;
/* 设置大小为0，从而实现从小到大的动画 */
opacity: 0;
height: 0px;
width: 0px;
padding: 0px;
border-radius: 50%;
/* 设置字体 */
color: #31DE9F;
font-weight: bold;
font-size: 30pt;
/* 定位在@+的上方，隐藏超出部分 */
position: fixed;
left: 50%;
top: 68%;
transition: All 0.6s ease-in-out;
}
</style>
</head>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/index.css">
</head>
<head>
<style>
#info-bar{
background-color: #23499E;
/* 设置大小为0，从而实现从小到大的动画 */
opacity: 0;
height: 0px;
width: 0px;
padding: 0px;
border-radius: 50%;
/* 设置字体 */
color: #31DE9F;
font-weight: bold;
font-size: 30pt;
/* 定位在@+的上方，隐藏超出部分 */
position: fixed;
left: 50%;
top: 68%;
transition: All 0.6s ease-in-out;
}
</style>
</head>
style标签可以出现在html的任何位置，但是一般写在head标签内。
3.使用标签的style属性：
<div id="container" style="font-family: Arial, sans-serif;text-align: center;"></div>
4.使用@import引入css文件：
<div id="container" style="font-family: Arial, sans-serif;text-align: center;"></div>
1)放在html的style标签内：
<style>
@import url(style.css);
</style>
2)放在css文件中：
@import "style.css";
四者之间的比较：
要做到关注点分离尽量用第一种和第四种，但是第一种目前更常用。
