课六：认识CSS - 在线演示

1. 内部样式表示例

这段文本使用内部样式表设置：红色、18px字号

内部样式表适用于单一网页的样式定义

<style>
.internal-demo p {
    color: red;
    font-size: 18px;
}
</style>

2. 外部样式表示例

这段文本使用外部样式表设置：蓝色、16px字号、1.5倍行高

外部样式表文件：demo-style.css

适用于多个网页共享相同样式

<link rel="stylesheet" href="demo-style.css">

/* demo-style.css 文件内容 */
.external-demo p {
    color: blue;
    font-size: 16px;
    line-height: 1.5;
}

3. 行内样式表示例

这是行内样式标题

这段文本使用行内样式设置：灰色、斜体

<h3 style="color: orange; font-size: 20px;">这是行内样式标题</h3>
<p style="color: #666; font-style: italic;">这段文本使用行内样式设置</p>
<button style="background: #2ecc71; color: white; padding: 8px 16px; border: none; border-radius: 4px;">行内样式按钮</button>

4. 综合应用示例

综合样式展示

外部样式：蓝色、16px字号

内部样式：紫色、加粗

行内样式：红色、17px字号

/* 外部样式 + 内部样式 + 行内样式 综合应用 */
<link rel="stylesheet" href="demo-style.css"> /* 外部 */
<style> /* 内部 */
.internal-style {
    color: purple;
    font-weight: bold;
}
</style>
<p style="color: #e74c3c; font-size: 17px;">行内样式</p> /* 行内 */