1 行间样式

<div style="width:100px; hieght=100px; background-color:red;"></div>
这种将css样式写在标签的style属性里面的，就叫做通过行间样式的方法引入css

2 页面级CSS

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.   <!-- 告诉浏览器里面的内容是CSS代码 -->
  6.     <style type="text/css">
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div></div>
  16. </body>
  17. </html>

在 <head></head> 标签里面添加一个 <style></style> 标签，里面的内容填写CSS样式。这种方法就叫做通过页面级CSS来引入样式

3 外部CSS文件

第一步 在另一个文件夹中创建一个CSS文件，然后将想要的样式写进去

div{
    width: 100px;
    height: 100px;
    background-color: red;
}

第二步 在html文件的 <head></head> 标签里面通过 <link> 标签的href属性将css文件引入进来 

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/index.css" type="text/css">
</head>