¿Por qué mis cambios de CSS, incluso cuando son importantes, no tienen efecto?
Al tratar de ajustar la apariencia de mi página de API web, realizo cambios en las clases CSS y agrego nuevas clases a \ Content / Site.css, pero no alteran la apariencia de la página como deberían, incluso cuando agrego "! important" a reglas específicas.
Por ejemplo, agregué una regla horizontal a la página, que aparece, pero de manera bastante discreta (con una línea débil y apenas perceptible). Entonces agregué esta clase .css a Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
... que funciona bien en otro proyecto, pero no en este. La línea permanece débil incluso cuando agrego "! Important" a la regla de "altura" allí:
height: 1px !important;
Intenté hacer clic derecho en la página en tiempo de ejecución y seleccionar "Volver a cargar la página", pero eso tampoco hizo ninguna diferencia.
Otros cambios CSS (márgenes y rellenos) tampoco están teniendo ningún efecto; Este es solo un caso específico cuya resolución debería funcionar para todos ellos.
¿Qué debo hacer para que se apliquen las reglas CSS modificadas / agregadas?
ACTUALIZARIncluso cuando yo, aceptando la sugerencia de Algernop K, cambio el código de esto:
. . .
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 />");
. . .
...a esto:
. . .
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;\' />");
. . .
... (agregando "; margin-top: 48;" al elemento h1 y "size" a la hr), no hay cambios evidentes.
ACTUALIZACIÓN 2Algo "gracioso" sucedió en el camino hacia la Inspección de Elementos. Como sugirió Chris W, hice clic con el botón derecho en el elemento hr de la página, pero es tan minúsculo que es posible que tenga un elemento diferente para inspeccionar. Sin embargo, un mensaje de error en la consola puede estar revelando el problema básico: allí dice: "bootstrap.min.js: 6 Error no detectado: JavaScript de Bootstrap requiere jQuery"
ACTUALIZACIÓN 3¿Debo agregar explícitamente mi archivo \ Content \ Site.css al html? Intenté arrastrarlo desde el Explorador de soluciones debajo de las líneas que se muestran arriba, esperando que generara el código correcto, pero en su lugar me dio:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
... y un mensaje para agregar "'System.Security.Policy.Site' y todas las demás referencias en el archivo"
Tenga en cuenta que tengo una pregunta relacionadaaquí
ACTUALIZACIÓN 4FWIW, aquí está el código completo (relevante) que construye este 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();
}
. . .
Todo se muestra básicamente como lo quiero, simplemente no me permite agregar el "pan de jengibre" (agregar márgenes, horas, sombras alrededor del área utilizada)
ACTUALIZACIÓN 5Aunque _ViewStart.cshtml apunta a Diseño:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
... y _Layout.cshtml representa (supuestamente) los Estilos en la carpeta Content / css, que contiene el Sites.css al que he estado agregando estilos CSS locamente:
<!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>
... todo eso no hace nada para agregar estos estilos que quiero. La única forma parece usar estilos en línea:
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;' />");
Ciertamente, todo el proceso podría hacerse mucho más claro [n, r] er / más sencillo.