方式一：行内样式
在元素标签有跟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样式表存放的路径-->