使用 CSS 样式表

改变这个：

对此：

要使用样式表，您必须向要设置样式的 HTML 元素添加一个类：

<div class="w3-container w3-black">

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</div>

HTML/CSS 骨架

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.91xjr.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>

<img src="img_la.jpg" alt="LA" style="width:100%">

<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

</body>
</html>

亲自试一试 »

单击"亲自试一试" 按钮查看其工作原理！

尝试将容器的背景颜色从青色更改为黑色。

你做了吗？

恭喜！

您刚刚学习了使用样式表的基础知识。

继续阅读！

如何做出反应

HTML 代码

亲自试一试 »

如何制作卡片

准备好接受真正先进的东西了吗？

HTML 格式的名片怎么样？

包括图片和文字。

尝试一下下面的代码，直到您认为您已经掌握了它。

之后，我们将开始编写非常精彩的 HTML 页面。

约翰·多伊

工程师

HTML 代码

<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>

亲自试一试 »