CSS的四种引入方式 1.使用link标签引入css文件: 2.使用style标签: 3.使用标签的style属性: 4.使用@import引入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>
style标签可以出现在html的任何位置,但是一般写在head标签内。
3.使用标签的style属性:
<div id="container" style="font-family: Arial, sans-serif;text-align: center;"></div>
4.使用@import引入css文件:
1)放在html的style标签内:
<style> @import url(style.css); </style>
2)放在css文件中:
@import "style.css";
四者之间的比较:
要做到关注点分离尽量用第一种和第四种,但是第一种目前更常用。