首页 > 代码库 > CSS的四种引入方式

CSS的四种引入方式

2024-08-24 22:11:13   215人阅读

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>

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";

 

四者之间的比较：

要做到关注点分离尽量用第一种和第四种，但是第一种目前更常用。

CSS的四种引入方式


联系
我们