如何使用style.css文件在EJS文件中样式元素
我只是在这里和那里尝试 ejs ,因为我是新手。
然后我想,为什么不带有条件流动的样式元素?基本上,当条件为真时,特定的元素将看起来紫色,而当它不是时,它将看起来红色。当我在标签本身中造型元素时,它可以正常工作,但是当我将 style.css 文件与之链接时,它不起作用。
<body>
<%if(4>3){%>
<h1 style="color: blue;">4 is more than 3</h1>
<% }else{%>
<h1 style="color: red;">Something is very wrong</h1>
<% }%>
</body>
这正常工作。
但是,当我试图以 style.css 进行样式时,它不起作用。什么原因?
EJS文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>To Do List</title>
</head>
<body>
<%if(4>3){%>
<h1 id="one">4 is more than 3</h1>
<% }else{%>
<h1 id="two">Something is very wrong</h1>
<% }%>
</body>
</html>
CSS文件:
#one{
color: purple;
}
#two{
color: red;
}
输出:
I was just experimenting here and there with EJS, because I am new to it.
Then I thought, why not style elements with a conditional flow? Basically a particular element will look purple when the condition is true and it will look red when it is not. When I style the elements in the tag itself, it works, but it doesn't work when I link a style.css file with it.
<body>
<%if(4>3){%>
<h1 style="color: blue;">4 is more than 3</h1>
<% }else{%>
<h1 style="color: red;">Something is very wrong</h1>
<% }%>
</body>
This worked properly.
But when I tried to style it in style.css, it didn't work. What is the reason?
EJS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>To Do List</title>
</head>
<body>
<%if(4>3){%>
<h1 id="one">4 is more than 3</h1>
<% }else{%>
<h1 id="two">Something is very wrong</h1>
<% }%>
</body>
</html>
CSS file:
#one{
color: purple;
}
#two{
color: red;
}
The output:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您确定已正确曝光了文件吗?例如,在Express.js中,您需要提供静态文件夹,其中将文件保存在根域上以使其工作。
要检查此问题,请尝试访问您的网站并打开 /stypyle.css,看看它是否打开。
Are you sure you have exposed the files properly? Such as in Express.js you need to serve the static folder where your file is kept on root domain for this to work.
To check this, try going to your website and opening /style.css and see if it opens.