css - 如何使用 CSS 将框样式应用于 xhtml 文档？

Question

我正在使用 CSS 编写一个 xhtml 文档，我必须在整个页面周围应用框模型和我必须在页面中包含的图像。尽管该页面还将包含其他文本等。我​​很难弄清楚如何将框样式应用于此页面。请帮忙!

Answer 1

盒子模型解释了 margin、padding、border 和元素大小如何组合在一起来渲染图像，仅供引用。以下是如何编写 CSS 来设置页面主体元素的边框、填充和边距:

body {
    margin: 5px;
    padding: 10px;
    border: 1px solid #000000;
}

这会给你一个 5 像素的边距，一个 1 像素的黑色实心边框，以及一个 10 像素的边框。

上面的 CSS 以 body 标签为目标。您将只有一个正文标签，因此您不必比这更具体。但是，您可能有很多图像，并且只想在其中一张周围画一个边框。您需要用 id 或 class 标记您的“特殊”图像，以便您可以选择它。这里有两个例子:

<img src="image.jpg" id="myImage" />
<img src="image2.jpg" class="borderImage" />

现在您可以设置 CSS 以使用可找到所需图像的选择器来查找这些特殊图像:

#myImage {
    padding: 8px;
    margin: 2px;
    border: 2px dashed #AB34CD;
}

img.borderImage {
    padding: 4px;
    margin: 3px;
    border: 3px dotted green;
}

这只是如何设计 CSS 规则的开始。就像我建议的那样，去尝试 CSS 教程。这是 MDN CSS 教程:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started 这是来自 Tizag 的另一个。新手可能更容易访问:http://www.tizag.com/cssT/