方式一：行内样式
在元素标签有跟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