CSS包含一个 width 的属性,用于控制元素的宽度。就像使用字体一样,我们将使用 px(像素)来指定图片的宽度。
例如,如果我们要创建一个名为 larger-image 的CSS类,把HTML元素的宽度设定为500像素,将使用:
<
style>
.larger-image {
width: 500px;
}
<
/style>
CSS 边框具有 style(样式)、color(颜色)、width(宽度) 等属性。
例如,如果我们想要设定一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为实线(solid),代码如下所示:
边框颜色为红色,宽度为5px,样式为solid。
图片的边框目前有尖角。我们可以用一个叫 border-radius(边框半径)的CSS属性来改变它的边框变成圆角。
可以使用像素来指定 border-radius 的属性值,给你的猫咪图片的 border-radius 设定为10px。
除了像素之外,还可以使用百分比来指定 border-radius(边框半径)的值。
a元素,也叫anchor(锚点)元素,用于链接到当前页面之外的内容。
下面是一张a元素的图示。在这种情况下,a元素位于段落元素的中间使用,这意味着链接将出现在段落的中间。
Nesting(嵌套)就是把一个元素放在另一个元素中。
例如:
现在把你的a元素嵌入进一个新的p元素(在现有的h2元素之前),让段落的文本显示为View more cat photos,但只有cat photos是一个链接,其余的文字是纯文本。
你可以通过将某元素嵌套在a元素中使其变为一个链接。
把你的图片嵌入到a元素中。例子如下:
<
a href="#“><
img src=”/images/relaxing-cat.jpg"><
/a>
请记住使用 # 作为元素的 href 属性, 以便将其转换为固定链接。
将现有的图像元素放置在锚点元素中。
完成后,把你的光标悬停在你的图片上。此时光标应该由光标指针变成手形指针。这张图片现在是一个链接了。
alt 属性, 是当图片无法显示时的替代文本。alt 属性对于盲人或视觉障碍的用户理解图片中的内容非常重要,搜索引擎也会搜索alt 属性来了解图片的内容。
总而言之,alt 属性是一个必需的属性,为页面上的图片都加上 alt 属性是好习惯。
你可以像下面例子中一样为img元素添加一个 alt 属性:
<
img src=“www.your-image-source.com/your-image.jpg” alt="your alt text">