Warum haben meine CSS-Änderungen, auch wenn sie wichtig sind, keine Auswirkungen?
eim Versuch, das Erscheinungsbild meiner Web-API-Seite zu optimieren, ändere ich die CSS-Klassen und füge neue Klassen zu \ Content / Site.css hinzu. Sie ändern jedoch nicht das Erscheinungsbild der Seite, wie sie sollten , auch wenn ich "! important" an bestimmte Regeln anhänge.
Zum Beispiel habe ich der Seite eine horizontale Linie hinzugefügt, die zwar angezeigt wird, aber ziemlich unauffällig ist (mit einer schwachen, kaum erkennbaren Linie). Also habe ich diese CSS-Klasse zu Site.css hinzugefügt:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
... was in einem anderen Projekt gut funktioniert, in diesem aber nicht. Die Linie bleibt schwach, auch wenn ich dort "! Important" an die "height" -Regel anhänge:
height: 1px !important;
Ich habe versucht, zur Laufzeit mit der rechten Maustaste auf die Seite zu klicken und "Seite neu laden" zu wählen, aber das machte auch keinen Unterschied.
Andere CSS-Änderungen (Ränder und Abstände) haben ebenfalls keine Auswirkungen. Dies ist nur ein konkreter Fall, dessen Auflösung für alle von ihnen funktionieren sollte.
Was muss ich tun, um geänderte / hinzugefügte CSS-Regeln anzuwenden?
AKTUALISIEREAuch wenn ich Algernop Ks Vorschlag zustimme, ändere ich den Code wie folgt:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr />");
. . .
... dazu:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style=\'size:4;\' />");
. . .
... (durch Hinzufügen von "; margin-top: 48;" zum h1-Element und "size" zum hr) ist keine Änderung erkennbar.
UPDATE 2Eine "lustige" Sache ist auf dem Weg zur Inspektion von Elementen passiert. Wie Chris W vorschlug, habe ich mit der rechten Maustaste auf das Element hr auf der Seite geklickt, aber es ist so winzig, dass ich möglicherweise ein anderes Element zum Überprüfen habe. Trotzdem kann eine Fehlermeldung in der Konsole das Grundproblem aufdecken - dort heißt es: " bootstrap.min.js: 6 Nicht erfasster Fehler: Für das JavaScript von Bootstrap ist jQuery @ erforderlic"
UPDATE 3Sollte ich meine \ Content \ Site.css-Datei explizit zum HTML-Code hinzufügen? Ich habe versucht, es aus dem Projektmappen-Explorer unter die oben gezeigten Zeilen zu ziehen, in der Hoffnung, dass es den richtigen Code generiert, aber stattdessen gab es mir:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
... und eine Eingabeaufforderung zum Hinzufügen von "'System.Security.Policy.Site' 'und allen anderen Referenzen in der Datei"
Hinweis, dass ich eine verwandte Frage habeHie
UPDATE 4FWIW, hier ist der gesamte (relevante) Code, der diesen HTML-Code erstellt:
namespace PlatypusWebReports.Controllers
{
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
private string _unit;
[Route("{unit}")]
public HttpResponseMessage Get(string unit)
{
_unit = unit;
string beginningHtml = GetBeginningHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string fillRateHtml = GetFillRateHTML();
string priceComplianceHtml = GetPriceComplianceHTML();
string produceUsageHtml = GetProduceUsageHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
deliveryPerformanceHtml,
fillRateHtml,
priceComplianceHtml,
produceUsageHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("</head>");
builder.Append("<body class=\"body-content\" style='margin-top:0;margin-left:60;margin-right:60;'>");
builder.Append("<div class=\"jumbotronjr\">");
builder.Append("<img src=\"http://www.Platypususa.com/wp-content/themes/Platypus/images/pa_logo_notag.png\" alt=\"Platypus logo\">");
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available Platypus Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='color:red;height:12;' />");
builder.Append("</div>");
builder.Append("</div>");
// for beginning the row div
builder.Append("<div class=\"row\">");
return builder.ToString();
}
private string GetEndingHTML()
{
StringBuilder builder = new StringBuilder();
// for ending the row div
builder.Append("</div>");
builder.Append("</body>");
builder.Append("</html>");
return builder.ToString();
}
. . .
Alles wird im Grunde so angezeigt, wie ich es möchte. Ich kann nur nicht das "Lebkuchen" hinzufügen (Rand, Std., Schatten um den verwendeten Bereich hinzufügen).
UPDATE 5Auch wenn _ViewStart.cshtml auf Layout zeigt:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
... und _Layout.cshtml rendern (angeblich) die Styles im Content / css-Ordner, der die Sites.css enthält, zu denen ich verrückt CSS-Styles hinzugefügt habe:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - PRO*ACT USA</title>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@*@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")*@
@RenderSection("scripts", required: false)
</body>
</html>
... alles, was nichts tut, um diese Stile hinzuzufügen, die ich möchte. Der einzige Weg scheint, Inline-Stile zu verwenden:
builder.Append("<body style='margin-top:40;margin-left:60;margin-right:60;'>");
. . .
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;' />");
Der gesamte Prozess könnte sicherlich viel übersichtlicher / einfacher gestaltet werden.