【发布时间】：2021-01-20 20:27:59
【问题描述】：
我有一个老小提琴 here 为 h1 元素设置各种属性，并且有一个 smallcaps 类：
h1 {
font-family: "Lucida Sans", "Courier";
text-shadow: -4px 4px 3px #999999;
font-size: 3.5em;
}
.smallcaps {
font-variant: small-caps;
}
在那里它工作正常。我正在尝试在这样的 aspx 页面中做同样的事情：
<head runat="server">
<title>Flix 4 Fams</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="dumboJr" style="text-align: center !important;">
<h1>Flix 4 Fams (Flicks for Families)</h1>
<h5>Select the Criteria you want to search by and then tap or click the "Find" button</h5>
</div>
. . .
...在 Site.css 文件的末尾加上这个：
#dumboJr h1 {
border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-size: 3.5em;
}
.smallcaps {
font-variant: small-caps !important;
}
...但它没有效果。因此，即使使用“！important”指令，它也不会被确认。
并不是说 Site.css 是“不可见的”；至少在 Site.css 中应用了一件事，即：
input[type=number] {
width: 60px;
margin-left: 4px;
margin-right: 4px;
}
...所以 Site.css 并没有被完全忽略...
我尝试了更直接的方法来让 CSS 在此之前应用，例如这个（起初没有“！important”指令）：
h1 {
border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-variant: small-caps !important;
font-size: 3.5em;
}
...但这也无济于事。
我至少能够通过添加这个内联使文本居中：
style="text-align: center !important;"
...但这有点混乱和笨拙。我宁愿找出 CSS 不工作的原因以及如何让它工作。
事实上，即使我尝试通过内联所有样式属性来“暴力破解”：
<h1 Style="border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-size: 3.5em;">Flix 4 Fams (Flicks for Families)
</h1>
...它所做的唯一更改是在 h1 元素周围放置一个蓝色边框 - 没有应用其他样式。
是什么破坏了我的 CSS 被应用？
更新
首先，我对 Site.css 的部分影响是错误的。我认为是 Site.CSS 文件的影响是其他原因造成的。
那么，我按照建议看“ViewSource”
回顾一下，我在我的页面中包含了 Site.css：
<head runat="server">
<title>Flix 4 Fams</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
...它确实出现在“查看源代码”中：
<head><title>
Flix 4 Fams
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
但是我在 Site.css 中添加的指令无效。即使我以蛮力方法添加到 h1 元素中的内联样式，如下所示，也没有效果：
<body>
. . .
<div id="dumboJr" style="text-align: center !important;">
<h1 Style="border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-size: 3.5em;">Flix 4 Fams (Flicks for Families)
</h1>
. . .
更新 2
这并没有回答我的问题，但它解决了我的问题：
我通过向 h1 添加一个 id 和一个 runat:server 来让它工作：
<h1 runat="server" id="fakeJumbotron">
...然后根据 Robert C. Barth here 的评论将其添加到代码隐藏中：
protected void Page_Load(object sender, EventArgs e)
{
fakeJumbotron.Attributes.Add("style", "font-family: \"Lucida Sans\", \"Courier\";");
fakeJumbotron.Attributes.Add("style", "text-shadow: -4px 4px 3px #999999");
. . .
【问题讨论】：
-
你是说 site.css 被调用了对吗？仍然去查看页面源并检查它是否再次被调用。
-
请看我的更新
-
@B.ClayShannon 不确定出了什么问题。你能分享MVP吗？它对我有用：github.com/dipen08it419/AspNetCssTest
标签： html css asp.net twitter-bootstrap