Day.01.08 css的四种使用方式

2023年6月24日 114次阅读 来源: 挂树上的骷髅怪

css的四种使用方式:内联样式表,嵌入样式表,外部样式表,引入样式表
举例
index.html

<!DOCTYPE html>
<html>
 <head>
 <meta  charset="utf-8">
  <title> css的使用方式 </title>
  <!--外部样式表-->
    <link rel="stylesheet" type="text/css" href="./link.css">
    <style type="text/css">
    /*嵌入样式表*/
        .tb1{
            color:green;
        }
    </style>
 </head>
 <body>
    <p style="font-size:30px;color:red;">这是一个星期天!</p><!--内联样式表-->
    <p class="tb1">这是一个星期天!</p><!--嵌入样式表-->
    <p class="tb2">这是一个星期天!</p><!--外部样式表-->
 </body>
</html>

link.css

.tb2{
    color:blue;
    font-size:50px;
}

引入样式表

<!DOCTYPE html>
<html>
 <head>
 <meta  charset="utf-8">
  <title> 引入样式表 </title>
  <!--第一种方法
  <link rel="stylesheet" type="text/css" href="./a.css">-->
  <!--第二种方法-->
  <style type="text/css">
    @import url('a.css');
  </style>
 </head>
 <body>
    <p class="tb1">寒冰Carry,很无情</p><!--通过a.css 使用my.css的类选择器-->
    <p class="my-font">寒冰Carry,很无情</p>
 </body>
</html>

my.css

.tb1{
    color:orange;
    font-size:40px;
}

a.css

@import url("my.css");
.my-font{
    color:blue;

}
    原文作者：挂树上的骷髅怪
    原文地址: https://www.jianshu.com/p/1617ce675317
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞