1 分别使用三种方式的 CSS 样式设置如图 - 1 效果。

EXERCISE - 图1

图 - 1

参考答案

步骤一: 通过内联 (行内) 的方式实现样式的设置

1）创建文件 homework1.html

2）通过快捷方式生成页面结构

3）添加 h1 标签，并通过 style 属性设置样式

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>css案例</title>
  7. 5.  </head>
  8. 6.  <body>
  9. 7.      <!-- 行内样式 -->
  10. 8.       <h1 style="width: 300px; height: 50px;line-height: 50px;
  11. 9.   text-align: center;
  12. 10.   background-color:black;color:gold;">
  13. 11.          《普希金文学集》
  14. 12.  </h1>
  15. 13.  </body>
  16. 14.  </html>

步骤二: 通过内嵌的方式实现样式的设置

1）创建文件 homework2.html。

2）通过快捷方式生成页面结构

3）添加 h1 标签，并设置内容

4）在 head 标签内，添加 style 标签，并设置样式

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>css案例</title>
  7. 5.      <style>
  8. 6.          h1{
  9. 7.              width: 300px; 
  10. 8.              height: 50px;
  11. 9.              line-height: 50px;
  12. 10.              text-align: center;
  13. 11.              background-color:black;color:gold;
  14. 12.          }
  15. 13.      </style>
  16. 14.  </head>
  17. 15.  <body>
  18. 16.      <h1>
  19. 17.          《普希金文学集》
  20. 18.      </h1>
  21. 19.  </body>
  22. 20.  </html>

步骤三: 通过外链的方式实现样式的设置

1）创建文件 homework.css，并添加如下内容

  3. 2.  h1{
  4. 3.      width: 300px; 
  5. 4.      height: 50px;
  6. 5.      line-height: 50px;
  7. 6.      text-align: center;
  8. 7.      background-color:black;color:gold;
  9. 8.  }

2）创建 homework3.html 文件

3）通过快捷方式生成页面结构

4）添加 h1 标签，并设置内容

5）在 head 标签内，添加 link 标签，并设置属性

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>css案例</title>
  7. 5.      <link rel="stylesheet" href="homework.css">
  8. 6.  </head>
  9. 7.  <body>
  10. 8.      <h1>
  11. 9.          《普希金文学集》
  12. 10.      </h1>
  13. 11.  </body>
  14. 12.  </html>

https://tts.tmooc.cn/ttsPage/NTD/NTDTN202109/WEBBASE/DAY02/EXERCISE/01/index_answer.html