html中使用css的三种方式-CSDN博客

方式一：行内样式

在元素标签有跟style属性，将样式写到改属性中。格式 style=" 属性1 : 值；属性2 : 值；属性3 : 值；"多个属性用分号“ ; ”隔开。

例：

1 <!-- 在div 后跟style属性，等号后面写上css样式 -->
2 <div style="background-color:#000;color:#fff;">  
3   <h1>这是一个DIV标签为</h1>
4 </div>

方式二：内联样式

在<head>标签中加入<style>标签将CSS样式表写到该标签中。格式：.class{ 属性1 : 值；属性2 : 值；属性3 : 值；}，值后跟分号。

例：

 1 <head>
 2     <meta charset="utf-8">
 3     <title>js测试</title>
 4   <!-- 内部样式表开始 -->
 5     <style >
 6       .box{
 7         background-color:#000;
 8         color:#fff;
 9       }
10     <!-- 内部样式表结束 -->
11     </style>
12   </head>
13 
14   <body>
15     <div class="box">
16       <h1>这是一个DIV</h1>
17     </div>
18   </body>

方式三：外联样式（链接外部样式表）

这是一种比较实用的方式。使用方法：在<head>标签中用<link>标签引入。

例：

1   <link rel="stylesheet" type="text/css"  href="./css/layout.css" > <!--href中写css样式表存放的路径-->

转载于:https://www.cnblogs.com/anadiot/p/10943876.html