在使用 CSS 之前，需要稍微了解 CSS 是什么？为什么要用到 CSS？CSS 怎么用？当然，在使用 CSS 之前需要对 HTML 知识有基本的了解。

CSS是什么？

CSS 英文全程（Cascading Style Sheets）层叠样式表，是用来定义如何显示 HTML 标签的；

  1. <body>
  2.     <!-- 浏览器中看到的是黑色字体“你好？” -->
  3.     <h1>你好？</h1> 
  5.      <!-- 浏览器中看到的是红色字体“你好？ -->
  6.     <h1 style="color:red">你好？</h1>
  7. </body>

代码中，h1 标签字体样式默认是黑色，经过 CSS 定义后，标签中字体会显示为 CSS 定义的样式。这就是 CSS 的作用

为什么要用到CSS?

浏览器解析 HTML 元素的时候，不同的浏览器解析处的样式不尽相同，且标签的默认样式也不尽如意。比如：

  1. <body>
  2.     <ul>
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.         <li>4</li>
  7.     </ul>
  8. </body>

我想要的结果如图1所示，浏览器给我的结果如图2所示
前言 - 图1 前言 - 图2
（图1） （图2）

这时候就需要使用 CSS 按照我们想要的样式定义 HTML 标签了。比如这样：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         li {
  8.             list-style: none;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li>1、标题</li>
  15.         <li>2、标题</li>
  16.         <li>3、标题</li>
  17.     </ul>
  18. </body>
  19. </html>

通过 CSS，你可以对 HTML 标签为所欲为～

怎么使用CSS？

第一种：使用内联式 CSS 样式。

内联样式就是把 CSS 代码直接写在现有的 HTML 标签中，比如：

  1. <body>
  2.     <h2 style="color:red;font-size:20px;">你好？前端开发者</h2>
  3. </body>

运行上述代码，你可以看到红色字体且字号为 20px 的文字。

第二种：嵌入式CSS样式。

这种是将 CSS 样式代码写在 标签之间，比如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             color:blue;
  9.             font-size: 18px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h2 style="color:red;font-size:20px;">你好？前端开发者</h2>
  15.     <div>你好？嵌入式样式</div>
  16. </body>
  17. </html>

运行上述代码，你除了能看到一行红色字体且字号为 20px 的文字，还能看到一行蓝色字体且字号为 18px 的文字。有没有很简单。
也可以给标签命 class、id 名，通过这些 class、id 名定义元素显示的样式，比如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.       .box {
  8.           color: red;
  9.       }
  10.       #box {
  11.           color: blue;
  12.       }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 打开浏览器，你可以看待红色字体  -->
  17.   <div class="box">你好？前端开发者</div>
  19.   <!-- 打开浏览器，你可以看待蓝色字体  -->
  20.   <div id="box">你好？前端开发者</div>
  21. </body>
  22. </html>

第三种：外部式 CSS 样式

外部式 CSS 样式，将 CSS 代码写在一个单独到外部文件中，并以“.css”为扩展名，使用 标签将 CSS 样式文件链接到 HTML 文件内，比如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="index.css">
  7. </head>
  8. <body>
  9.     <h2 style="color:red;font-size:20px;">你好？前端开发者</h2>
  10.     <div>你好？嵌入式样式</div>
  11.     <p>你好？外部样式</p>
  12.     <p class="box">你好？可以通过class类名定义我的样式</p>
  13.     <p id="box">你好？可以通过id名定义我的样式,记得id名定义为唯一呦！！</p>
  14. </body>
  15. </html>

link 标签通过 href=”css路径”将 CSS 引入当前 HTML 文件；CSS 路径可以是绝对路径也可以是相对路径。

CSS 是什么、为什么用 CSS、怎么用 CSS、通过这篇文章不知读者有没有大致了解，作者水平有限，如有不明白，尽请谅解。