前端基础：HTML 与 CSS 的深度结合

一、让 HTML 骨架披上 CSS 外衣

上节课咱们初步认识了 CSS 选择器，这节课就来实际操作操作，把 HTML 和 CSS 真正融合起来，让网页从 “有骨无肉” 变成 “有血有肉”。

二、HTML 与 CSS 结合的多种方式

内联样式

  • 直接在 HTML 元素里style属性添加 CSS 样式，比<p style="color: blue; font-size: 16px;">这是一段蓝色的 16 像素大小的文字</p>。这种方式简单直观，不过样式和内容混在一起，修改起来不太方便，适合偶尔的小调整。

内部样式表

  • 把 CSS 样式写在 HTML 文件<style>标签里，放<head>部分。例如：

```html

<head>

<style>

h1 {

color: green;

}

.special {

background-color: pink;

}

</style>

</head>

<body>

<h1>这是一个绿色标题</h1>

<p class="special">这段文字背景是粉色的</p>

</body>