c# - 如何在cshtml页面中使用css自定义样式?

标签 c# html css razor

我在 asp.netcore mvc web 应用程序的 site.css 文件中创建了一个自定义 css 按钮类。出于某种原因,当我尝试在 cshtml View 中使用它时,此样式不会显示。我试过添加链接,我试过将样式添加到布局页面,它们都不起作用吗?我错过了什么?

我的 site.css 文件有这个自定义按钮类。

.custom-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

这就是我的观点。

@{
    ViewData["Title"] = "PlaylistBuilder";
}
    <head>
        <link rel="stylesheet" href="~/css/site.css" />
    </head>
      <center>
        <h2>PlaylistBuilder</h2>
        <input type="button" class="custom-button" value="Create Playlist with your top songs" onclick="location.href='@Url.Action("TopSongCreator", "Playlist")'" />
        <input type="button" class="custom-button" value="Create Playlist with recently played songs" class="btn" onclick="location.href='@Url.Action("RecentlyPlayed", "Playlist")'" />
      </center>

试过第一个评论,还是不行。这就是我现在的观点。我需要更改布局文件中的某些内容吗?

@{
    ViewData["Title"] = "PlaylistBuilder";
}

    <link rel="stylesheet" href="@(Url.Content("~/css/site.css"))" />
    <center>
        <p style="font-family:'Arial'; font-size:72px; font-weight:bold">
            Playlist Builder
        </p>

        <input type="button" value="Create Playlist with your top songs" class="custom-button" onclick="location.href='@Url.Action("TopSongCreator", "Playlist")'" />
        <input type="button" value="Create Playlist with recently played songs" class="custom-button" onclick="location.href='@Url.Action("RecentlyPlayed", "Playlist")'" />

    </center>

最佳答案

那个 View 被插入到 body 元素的中间某处。将 head 元素放在那里会使 HTML 格式不正确,因此链接的行为不像您期望的那样。

此外,波浪号(~)与razor的助手有关,并不意味着相对于普通href属性中元素的顶级范围。你仍然应该在这里使用帮助程序。

删除 <head>元素定义,只需使用链接。使用助手。

<link rel="stylesheet" href="@(Url.Content("~/css/site.css"))" />

关于c# - 如何在cshtml页面中使用css自定义样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57317637/

相关文章:

c# - 无法结合 Microsoft.AspNet.WebApi.Client 加载文件或程序集 'Newtonsoft.Json,Version=6.0.0.0

c# - nhtmlunit javascript 不工作

javascript - 何时使用函数式 setState

html - 将导航栏 float 到图像的两侧

html - 封面图像上的灰度文本

c# - DAL 中的异常处理

C#:将复杂的对象列表传递给另一个类是否会占用大量内存

css - 在 Bootstrap 下拉切换和下拉菜单之间添加空间

html - 如何使用 CSS 将内联元素置于 block 元素中?

css - 如何使 4 个矩形框适合 bootstrap 3 中的屏幕?