行内样式表（inline style sheet）

直接定义在标签的style属性中。

  • 作用范围：仅对当前标签产生影响。 ```html <!DOCTYPE html>
background
background
zdkk

  2. <a name="ba4Jp"></a>
  3. ## 内部样式表（internal style sheet）
  4. 定义在`style`标签中，通过选择器影响对应的标签。
  6. - 必须放在`<head>`标签下
  7. - 作用范围：可以对同一个页面中的多个元素产生影响。
  8. ```html
  9. <!DOCTYPE html>
  10. <html lang="en">
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  15.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.     <title>Document</title>
  17.     <style type="text/css">
  18.         img {
  19.             width: 300px;
  20.             height: 500px;
  21.             border-radius: 50%;
  22.         }
  24.         p {
  25.             width: 50px;
  26.             height: 50px;
  27.             background-color: aquamarine;
  28.         }
  30.         .blue-p {
  31.             background-color: cadetblue;
  32.         }
  34.         .big {
  35.             width: 70px;
  36.             height: 70px;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <img src="static/images/background.jpg" alt="background">
  43.     <br>
  44.     <img src="static/images/background.jpg" alt="background" class="big">
  46.     <p style="background-color: blueviolet">1</p>
  47.     <p class="blue-p">2</p>
  48.     <p class="big">3</p>
  49.     <p class="blue-p big">4</p>
  50.     <p>5</p>
  51. </body>
  53. </html>

外部样式表（external style sheet）

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面

  • 作用范围：可以对多个页面产生影响。
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="static/css/style1.css" type="text/css">
  10.     <link rel="stylesheet" href="static/css/style.css" type="text/css">
  11. </head>
  13. <body>
  14.     <img src="static/images/logo.png" alt="">
  15.     <img src="static/images/background.jpg" alt="">
  17.     <p class="blue-p big">1</p>
  18.     <p class="big">2</p>
  19.     <p class="blue-p">3</p>
  20.     <p>4</p>
  22. </body>
  24. </html>

:::danger 样式生效的顺序取决于执行顺序，后者覆盖前者
执行顺序是从上往下执行 :::

注释

不能使用//
只有/**/

  1. img {
  2.     width: 300px;
  3.     /* border-radius: 50%; */
  4. }