使用 HTML 边框属性很容易,但现在它们已经消失了。
我所发现的只是关于 CSS 对边框所做的奇妙事情的很多东西。但是我如何告诉它打开某些图像(图片)的边框,而不是其他图像(图标)?
标记应该与类有边框的那些:
<img class='picture' ...>
然后使用 CSS 添加边框:
.picture {
border: 1px solid green;
}
您可以为图像设置样式,如下所示:
<img src="yourimage.jpg">
img {border:2px dotted blue;}
并为其他图像(如图标)设置一个唯一的类,如下所示:
<img src="youricon.jpg" class="noborder">
img.noborder {border:none;}
无论如何,您必须在两个图像之间做出区别,以便 css 相互识别。
您可以将样式添加到特定的图像标签,这相当于使用 HTML 属性进行样式设置:
<img src="..." style="border:5px solid green" />
您可以在样式表中制定规则,并将类添加到图像标签以使用它:
CSS:
.Picture { border: 5px solid green; }
HTML:
<img src="..." class="Picture" />
您可以因为它已经指向您,只需向图像添加一个类,但在某些情况下您无法更改除 css 之外的内容和/或者您可能在大多数情况下都感觉像我一样不必要地浪费时间为您使用的所有图像添加类。使用正确的选择器可能会更好。如果有一个类的父元素,则使用该类。下面是一个示例:
HTML
<div class="content">
<img/>
</div>
CSS
div.content > img{
border:1px solid;
}
这是做事的最佳方式,因为它不会向您的内容添加额外的内容,这反过来又会加快加载速度和用户体验。
使用元素中的 class 属性将元素分配给命名类。为班级选择什么名称取决于您。文档中的多个元素可以具有相同的类值。
在您的样式表中,当您在选择器中使用类名时,在类名之前键入一个句号(句点)。
(例如,请参阅 RichieHindle 的答案)
使用元素中的 id 属性为元素分配 ID。由您为 ID 选择什么名称。ID 名称在文档中必须是唯一的。
在您的样式表中,当您在选择器中使用 ID 时,在 ID 之前键入一个数字符号(哈希)。
<div id="myStyledDiv">
#myStyledDiv{
border: 1px solid black;
}
来源:Webplatfroms.org(我建议你阅读所有这篇文章)