CSS 内嵌式样式 - 将样式代码嵌入 HTML 文件 - 常规

<p>**CSS 内嵌式样式**指的是将 CSS 样式代码直接嵌入到 HTML 文件的 `<head>` 标签中的 `<style>` 标签内，用来为该 HTML 文件中的元素设置样式。以下是一个示例：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;My Webpage&lt;/title&gt;
    &lt;style&gt;
      body {
        background-color: lightblue;
      }
      h1 {
        color: navy;
        text-align: center;
      }
      p {
        font-size: 20px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Welcome to my webpage&lt;/h1&gt;
    &lt;p&gt;This is a paragraph of text.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>在上面的例子中，CSS 样式代码被嵌入到了 `<head>` 标签内的 `<style>` 标签中，用来设置 `<body>`、`<h1>` 和 `<p>` 元素的样式。这样做的好处是，可以将所有样式代码放在同一个 HTML 文件中，方便管理和维护。但是，如果 HTML 文件很大，样式代码很多，就会造成 HTML 文件的加载速度变慢，影响用户体验。因此，通常建议将 CSS 代码单独存放在一个外部的 CSS 文件中。</p>