使用类应用的样式不起作用,但样式属性有效



我有以下CSS风格:

.iconBorder{
border : 3px solid #0aaaa0;
border-style: dotted;
}

我将上述样式应用于 img 标签,如下所示:

<img class="iconBorder" src="images/svg/address.svg" height="50px">

但是样式似乎没有在浏览器中呈现,如果我将其作为内联 CSS 提供,它可以工作:

<img class="iconBorder" style="border : 3px solid #0aaaa0;border-style: dotted;" src="images/svg/address.svg" height="50px">

我错过了什么?,帮我弄清楚,提前谢谢。

如果你把你的CSS添加到它应该在的地方,这是:

在样式标记内:

<style type="text/css">
.iconBorder {
border: 3px solid #0aaaa0;
border-style: dotted;
}
</style>

包含在引用 html 文档头部的.css文件中:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  type="text/css"  href="mysitestyle.css">
</head>
<body>
...
</body>
</html>
</head>

或者像您已经做的那样内联。

您的代码应该完全正常工作,并且您完全没有问题。

此处代码中的工作 CSS 示例。

您可以使用此代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"  type="text/css"  href="mysitestyle.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.iconBorder {
border: 3px solid #0aaaa0;
border-style: dotted;
}
</style>
</head>
<body>
<img class="iconBorder" src="https://www.w3schools.com/images/picture.jpg" height="50px">
<img class="iconBorder" src="https://www.w3schools.com/images/picture.jpg" height="50px">
</body>
</html>

最新更新