第一种：

  1. <!--第一种：在标签style属性上设置“key:value value”修改标签样式-->
  2. <!--缺点：每个标签都要修改一遍，可读性差，没有通用性，所以不推荐使用-->
  3. <div style="border: 1px solid #3fe05f">div1</div>
  4. <div>div2</div>
  5. <span style="border: 1px solid #3fe05f">span1</span>
  6. <span>span2</span>

image.png

第二种：

  1. <!--第二种：可以在head标签中使用style标签定义自己需要的各种CSS样式-->
  2. <head>
  3.   <meta charset="UTF-8">
  4.   <title>CSS与HTML结合使用2</title>
  5.   <style type="text/css">
  6.     /*缺点：只能在一个页面里复用*/
  7.     div{
  8.       border: 1px solid red;
  9.     }
  10.     span{
  11.       border: 1px solid red;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16. <div >div1</div>
  17. <div>div2</div>
  18. <span >span1</span>
  19. <span>span2</span>
  20. </body>

image.png

第三种

image.pngimage.png