Почему мои изменения CSS, даже после импорта, не имеют никакого эффекта?
Пытаясь настроить внешний вид моей страницы веб-API, я делаю изменения в CSS-классах и добавляю новые классы в \ Content / Site.css, но они не изменяют внешний вид страницы, как должны, даже когда я добавляю "! Важно" к конкретным правилам.
Например, я добавил горизонтальное правило на страницу, которое отображается, но довольно ненавязчиво (с едва заметной, едва различимой линией). Поэтому я добавил этот класс .css в Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
... который отлично работает в другом проекте, но не в этом. Линия остается слабой, даже когда я добавляю «! Важное» к правилу «высота»:
height: 1px !important;
Я попытался щелкнуть правой кнопкой мыши страницу во время выполнения и выбрать «Обновить страницу», но это тоже не имело значения.
Другие изменения CSS (поля и отступы) также не имеют никакого эффекта; это только один конкретный случай, решение которого должно работать для всех из них.
Что мне нужно сделать, чтобы применить измененные / добавленные правила CSS?
ОБНОВИТЬДаже когда я, соглашаясь на предложение Алджернопа К, изменяю код из этого:
. . .
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 />");
. . .
...к этому:
. . .
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;\' />");
. . .
... (добавление «; margin-top: 48;» к элементу h1 и «size» к часу), никаких изменений не видно.
ОБНОВЛЕНИЕ 2«Забавная» вещь произошла на пути к осмотру элементов. Как предположил Крис В., я щелкнул правой кнопкой мыши элемент hr на странице, но он настолько мал, что у меня может быть другой элемент для проверки. Тем не менее, сообщение об ошибке в консоли может выявить основную проблему - там говорится: «bootstrap.min.js: 6 Uncaught Ошибка: JavaScript Bootstrap требует jQuery"
ОБНОВЛЕНИЕ 3Должен ли я явно добавить свой файл \ Content \ Site.css в HTML? Я попытался перетащить его из Solution Explorer ниже строк, показанных выше, надеясь, что он сгенерирует правильный код, но вместо этого он дал мне:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
... и приглашение добавить «System.Security.Policy.Site» и все другие ссылки в файле »
Обратите внимание, что у меня есть связанный вопросВот
ОБНОВЛЕНИЕ 4FWIW, вот весь (соответствующий) код, который создает этот HTML:
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();
}
. . .
Все отображается в основном так, как я хочу, просто не позволяет мне добавить «пряник» (добавление полей, часов, тени вокруг используемой области)
ОБНОВЛЕНИЕ 5Хотя _ViewStart.cshtml указывает на макет:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
... и _Layout.cshtml отображает (предположительно) стили в папке Content / css, которая содержит файл Sites.css, в который я безумно добавлял стили CSS:
<!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>
... все, что не делает ничего, чтобы добавить эти стили, которые я хочу. Кажется, единственный способ использовать встроенные стили:
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;' />");
Весь процесс, безусловно, можно сделать гораздо понятнее / проще.