如何使用CSS设置图像样式

介绍

在本教程中，您将学习如何使用 CSS 设置图像样式以添加边框，以及更改图像的形状和大小。使用 CSS 设置图像样式可以让您通过几个规则集统一指定图像在您的网站上的显示方式。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

将图像添加到 `index.html`

首先，您需要将图像添加到 images 文件夹。您可以从演示网站下载图像或使用JPEG/JPG或PNG格式的任何图像。如果您的图像尺寸约为 150-200 像素 x 150-200 像素，此练习也将更有效。

注意：要下载Sammy the Shark的图像，请访问此链接和CTRL + Left Click（Mac）或Right Click（Windows）图像并选择“将图像另存为”并将其另存为 small-profile.jpeg 到您的 images 文件夹。

选择图像后，将其作为 small-profile.jpeg 保存到 images 文件夹。如果您将其保存为不同的文件名，则需要在下面的步骤中修改图像文件路径。

接下来，擦除 index.html 文件中的所有内容（第一行代码除外：<link rel="stylesheet" href="css/styles.css">）并添加以下代码片段：

索引.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">

此代码片段使用 <img> 标记插入图像，并为浏览器提供图像文件的位置 (images/small-profile.jpeg)。如果您更改了图像的文件名，请确保突出显示的文件路径正确。

注意：要使用 Visual Studio Code 复制图像的文件路径，请将鼠标悬停在左侧面板中的图像文件图标上，单击 CTRL + Left Click（在 Mac 上）或 [X169X ]（在 Windows 上），然后选择“复制路径”。有关该过程的说明，请参见下面的 gif：

确保复制图像的相对或项目文件路径，而不是图像的绝对或完整文件路径。相对路径指的是相对于当前工作目录的文件位置（与 absolute 路径相反，后者指的是相对于根目录的文件位置。）虽然这两个路径都可以在这种情况下工作，如果您决定在线发布网站，则只有 relative 路径有效。由于最终目标是创建一个可发布的网站，您现在将在向文档添加 <img> 元素时开始使用相对路径。

您还使用 alt 属性添加了替代文本 Sammy the Shark, DigitalOcean’s mascot。创建网站时，应将替代文本添加到所有图像中，以支持使用屏幕阅读器的个人访问网站。要阅读有关在 HTML 中使用替代文本的更多信息，请访问我们的指南如何使用 HTML 将图像添加到您的网页中的替代文本部分。

保存您的 index.html 文件并在浏览器中重新加载它。（有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。您应该会收到一个显示图像的空白页面：

如果您的图像未显示，请检查您的代码是否有错误，并确认您具有正确的图像文件路径。

为图像添加样式

现在 index.html 显示了 Sammy the Shark 的图像（或您选择的图像），您将添加 CSS 规则来设置图像的样式。在您的 styles.css 文件中，删除所有内容（如果您一直按照教程系列进行操作）并在文档底部添加以下规则集：

样式.css

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}

保存 styles.css 文件并在浏览器中重新加载 index.html 文件。您现在应该收到具有新样式属性的图像：

在此 CSS 规则中，您为 HTML <img> 元素的三个不同属性指定了值。让我们停下来检查每个不同的属性和值：

border 属性允许您为图像添加边框并指定边框的大小、样式和颜色。请注意，您可以为此 CSS 属性添加多个值。在此规则中，您指定了宽度为 2px 的 solid、red 边框。
border-radius 属性定义元素角的半径，允许您对元素的边缘进行圆化。在此规则中，您已指定 8 个像素作为半径的大小。尝试更改此数字以查看它如何影响图像的显示。
width 属性定义图像的宽度。在此规则中，您已将宽度指定为 200 像素宽。请注意，如果您未定义高度，图像的高度将自动调整以保持图像的原始比例。尝试同时更改高度和宽度以检查会发生什么。

探索风格如何应用于所有图像

请注意，如果您向 HTML 文档添加任何其他图像，它们也将具有相同的样式。要研究其工作原理，请使用 HTML <img> 元素将第二张图片添加到您的 index.html 文件中。（您可以复制并粘贴第一个

如果您手边没有第二张图片，请使用元素）：

索引.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot"> 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">

确保使用您的图像文件路径更改突出显示的部分。保存您的 index.html 文件并将其加载到浏览器中。您的网页应该显示两个使用相同 CSS 规则集的 <img> 标签样式的图像：

要继续探索图像的样式可能性，请尝试更改您刚刚在 styles.css 文件中创建的 CSS 规则中的值，保存文件，然后重新加载 index.html 以检查结果。

结论

在本教程中，您探索了如何设置图像的边框大小、颜色、外观、高度、宽度和边框半径。当您在本教程系列的后半部分开始构建演示网站时，您将返回图像样式。

既然您已经熟悉了如何将一组样式规则应用于所有 <img> 元素，您可能会好奇如何将 不同的 样式规则应用于单个或一组 [X186X ] 元素。在下一个教程中，您将创建 CSS classes，它允许开发人员将 HTML 元素分类到不同的类中以实现不同的 CSS 样式。

如何使用CSS设置图像样式

介绍

先决条件

将图像添加到 index.html

为图像添加样式

探索风格如何应用于所有图像

结论

将图像添加到 `index.html`