本文介绍: # size {} . red {} . box {}

&lt;style&gt;
  #class{
            color: yellowgreen;
        }
&lt;/style&gt;       
  <p id="class"&gt;Lorem ipsum, dolor sit amet consectetur adi</p&gt;

 h1{
            color: aqua;
            background-color: yellow;
            text-align: center;
        }
        <h1&gt;
        准备设置样式
       </h1>

     .red{
            color: red;         
        }
          /* 这里设置字体与字体大小 */
      .bac{
            font-size: 3em;
            text-align: center;
        }

调用的格式：

    <p class="red ">Doloribus accusantium aliquid officia </p>
    <!-- 一个标签里可以调用多个类名 -->
    <p class="red bac">Possimus excepturi eum eaque adipis </p>

每一个声明(属性)表达了某一方面的样式
出现在大括号中
声明块中包含很多声明(属性)。每一个声明(属性)表达了某一方面的样式。
例如：

 font-size: 3em;
 text-align: center;

 <p style="color: violet;">Lorem ipsum dolor sit amet</p>

将样式书写到独立的css 文件中。|
使用 link 进行css 文件的调用

  <link rel="stylesheet" href="./1.样式设置.html">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: aqua;
        }
        #size{
            background-color: blue;
        }
        .red{          
            color: brown;
        }
        .box{
            font-size: 3em;
            font-weight: 100;
        }
        
    </style>
</head>
<body>
      <h1>这是元素选择器</h1>
      <p id="size">这是id选择器</p>
      <p class="red">这是一个类选择器</p>
      <p class="red box">这是两个类选择器</p>
      <p style="color: chartreuse;">这是内联样式</p>
</body>
</html>