如何将我的 CSS class 链接到我的 HTML 文件？
[英]How can I link my CSS class to my HTML file?
问题描述
I am new to Web development and trying to create a basic avatar using HTML/CSS.
我是 Web 开发的新手，并尝试使用HTML/CSS 创建基本头像。
I created a style.css file, an avatar.css file and an index.html.我创建了一个 style.css 文件、一个avatar.css文件和一个 index.html。
Everything works fine until I set the .avatar CSS class.一切正常，直到我设置.avatar CSS class。 I want to use it to round the corners of my image.我想用它来圆我图像的角落。 But after I set the img class to "avatar", the images stay square while I should have 2 rounded images, one of 50x50ph and the other of 30*30 (one being set to the class avatar and the other on the class avatar-small). But after I set the img class to "avatar", the images stay square while I should have 2 rounded images, one of 50x50ph and the other of 30*30 (one being set to the class avatar and the other on the class avatar-小的）。
Here is what the page looks like:这是页面的样子：
Here is my code这是我的代码
CSS style CSS风格
/* --- Google Fonts--- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet")
/* --- Components Design--- */
@import "avatar.css";
/*@import url("components/button.css");*/
/*@import url("components/dropdown.css");*/
/*@import url("components/card.css");*/
/*@import url("components/badge.css");*/
/*@import url("components/banner.css");*/
/*@import url("components/tabs.css");*/
/*@import url("components/list.css");*/
/* --- Fonts--- */
body {
font-family: "Open Sans", "Helvetica", "sans-serif"
}
h1, h2, h3 {
font-family: "Montserrat", "sans-serif"
}
CSS avatar CSS头像
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
HTML HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href='style.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/73fba8f7d3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Web Components</title>
</head>
<body>
<div class="container">
<h1 class="text-center">UI components sprint</h1>
<h2>Avatar design</h2>
<img src="https://via.placeholder.com/50" alt="" class="avatar">
<img src="https://via.placeholder.com/50" alt="" class="avatar-small">
</div>
<!-- jQuery & Bootstrap JS for dynamic Bootstrap components -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I really can't understand what's wrong here.我真的不明白这里有什么问题。 I tried finding the answer on my own but didn't manage to...我试图自己找到答案，但没有设法...
Thank you for your help.谢谢您的帮助。
2 个解决方案
解决方案1
0 2020-12-20 19:36:39
First, check your developer tools to see if the file is loaded.首先，检查您的开发人员工具以查看文件是否已加载。 if both files are in the same hierarchy level, it should be fine as your code seems to work.如果两个文件都在同一层次结构中，那应该没问题，因为您的代码似乎可以工作。
Your CSS code misses some ";"您的 CSS 代码缺少一些“；” at every rule, which might be the reason they're not applied.在每条规则中，这可能是它们没有被应用的原因。 the fix should look like this:修复应该如下所示：
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
I hope it works, and happy coding:)我希望它有效，并且编码愉快:)
解决方案2
0 2020-12-20 19:38:49
If you have linked the url of your image, and put border-radius: 50% properly, you should get the result.如果您已链接图像的 url，并正确放置border-radius: 50% ，您应该得到结果。
What I find is that you've linked style.css 2 times, and missed out avatar.css external link file.我发现你已经链接了style.css 2 次，错过了avatar.css外部链接文件。 If its typo, then fix it.如果它的错字，然后修复它。 Otherwise, you should get the result.否则，您应该得到结果。
img {margin: 20px;} #img1 {border-radius: 10px;} #img2 {border-radius: 30px;} #img3 {border-radius: 50%;}
<img id="img1" src="https://picsum.photos/200/300" /> <img id="img2" src="https://picsum.photos/200/300" /> <img id="img3" src="https://picsum.photos/200/300" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.