第二章：在HTML文档中放置CSS的几种方式_html需要的多个css文件单独放在一个文件-CSDN博客

本文链接：https://blog.csdn.net/a123456zabc/article/details/50970828

1.内联样式表

内联样式表也叫内联引用，就是在任意一个HTML标签中使用style属性，在style属性中使用样式属性；

如下：

<p style="font-size:1cm;color:red;border:1px solid blue;background:yellow;">这是一个段落</p>

特点：内联的样式比其他方法更加灵活，但需要展示的内容混淆在一起，内联样式表会失去一些样式表的优点。

2.内嵌样式表

使用HTML的style标记，将CSS嵌入到HTML中：

如下：

<html>
    <head>
        <style>
        /*
            这里面是CSS的语法
            只能写CSS语法
            不能使用HTML的注释，以及任何HTML标记    */
        p{
               font-size:1cm;
               color:red;
               border:1px solid blue;
               background:yellow;
          }
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

3.外部链接样式表

使用获取的后缀为CSS的文件专门定义样式，然后在HTML文件中使用<link>标记（head中写）将CSS和这个HTML文件结合，link标签可以有多个：

如下：

CSS文件：

/* 直接写CSS语法*/
p{
       font-size:2cm;
       color:blue;
  }

HTML文件：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <p>这是一个段落</p>
    </body>
</html>

4.输入样式表

输入样式表是将一个CSS文件导入另一个CSS文件中：

如下：

@import：url(demo.css);

5.多重样式表的叠加

如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准；
依照后定义的优先，所以优先级最高的是内联样式，内嵌样式表高于输入样式表，链入的外部样式表和内嵌样式表之间是最后定义的优先级高。