Por que minhas alterações de CSS, mesmo quando importantes, não têm efeito?
Ao tentar ajustar a aparência da minha página de API da Web, estou fazendo alterações nas classes CSS e adicionando novas classes ao \ Content / Site.css, mas elas não alteram a aparência da página como deveriam, mesmo quando anexo "! important" a regras específicas.
Por exemplo, adicionei uma regra horizontal à página, que aparece, mas de maneira discreta (com uma linha fraca e quase imperceptível). Então eu adicionei essa classe .css ao Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
... que funciona bem em outro projeto, mas não neste. A linha permanece fraca mesmo quando eu anexo "! Important" à regra "height":
height: 1px !important;
Tentei clicar com o botão direito do mouse na página em tempo de execução e selecionar "Recarregar página", mas isso também não fez diferença.
Outras alterações de CSS (margens e preenchimentos) também não surtiram efeito; esse é apenas um caso específico cuja resolução deve funcionar para todos eles.
O que preciso fazer para que as regras CSS modificadas / adicionadas sejam aplicadas?
ATUALIZARMesmo quando eu, seguindo a sugestão de Algernop K, altero o código a partir disso:
. . .
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 />");
. . .
...para isso:
. . .
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;\' />");
. . .
... (adicionando "; margin-top: 48;" ao elemento h1 e "size" à hr), nenhuma alteração é evidente.
ATUALIZAÇÃO 2Uma coisa "engraçada" aconteceu no caminho para a inspeção dos elementos. Como Chris W sugeriu, cliquei com o botão direito do mouse no elemento hr na página, mas é tão minúsculo que posso ter um elemento diferente para inspecionar. No entanto, uma mensagem de erro no console pode estar revelando o problema básico.bootstrap.min.js: 6 Erro não detectado: O JavaScript do Bootstrap requer jQuery"
ATUALIZAÇÃO 3Devo adicionar explicitamente meu arquivo \ Content \ Site.css ao html? Tentei arrastá-lo do Solution Explorer abaixo das linhas mostradas acima, esperando que ele gerasse o código correto, mas, em vez disso, me deu:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
... e um prompt para adicionar "'System.Security.Policy.Site' e todas as outras referências no arquivo"
Observe que tenho uma pergunta relacionadaaqui
ATUALIZAÇÃO 4FWIW, aqui está o código (relevante) inteiro que cria esse 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();
}
. . .
Tudo está exibindo basicamente como eu quero, apenas não me permite adicionar o "pão de gengibre" (adicionando margens, horas, sombra ao redor da área usada)
ATUALIZAÇÃO 5Mesmo que _ViewStart.cshtml aponte para Layout:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
... e _Layout.cshtml renderizam (supostamente) os estilos na pasta Content / css, que contém os Sites.css aos quais eu tenho adicionado estilos CSS loucamente:
<!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>
... tudo o que não faz nada para adicionar esses estilos que eu quero. A única maneira parece usar estilos embutidos:
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;' />");
Todo o processo certamente poderia ser muito mais claro / direto.