2016-05-11 11 views
0

Ich möchte die Hintergrundfarbe meiner h1 Kopfzeile auf meiner Webseite zur Laufzeit ändern. Wenn wir in prod/dev laufen, möchte ich die Hintergrundfarbe des H1-Header-Tags entsprechend einstellen.C# ASPX Set h1 Hintergrundfarbe Laufzeit

ich zur Zeit die Hintergrundfarbe für h1 bin Einstellung wie folgt:

align="center" style="background-color: #389BD6 ">HEADER 1 LINE 

Aber ich möchte die Farbe können unterschiedlich auf die aktuelle Umgebung abhängig spezifizieren.

Ich gehe davon aus, dass es eine CSS beinhalten wird, aber das ist neu für mich und brauche Hilfe.

Dank

+0

Was verwenden Sie, um die Umgebung zu definieren? IE Wie wird das Stylesheet wissen, in welcher Umgebung Sie sich befinden? – Pete

Antwort

0

CSS: What Just The Doctor

bestellt

CSS ist wie Sie erwähnt die richtige Vorgehensweise, dies zu umgehen, können Sie einfach einen Stil festlegen, dass Ihre h1 Elemente wie erwartet Ziel würde :

konnten
<style type='text/css'> 
    h1 { 
     text-align: center; 
     background-color: #389BD6; 
    } 
</style> 

Sie dies ausdrücklich selbst (vorzugsweise im <head> Abschnitt) oder über eine externe CSS-Datei (auch in Ihrem HTML-Referenz defin ed im <head> Abschnitt Ihrer Seite):

<!-- A reference to a CSS file containing the previous style --> 
<link href="your-css-file.css" rel="stylesheet" type="text/css" /> 

Styling

zum Ändern des Stils auf Ihrer Umgebung basierte Im Hinblick auf Umwelt Basierend, betrachten Sie könnten eine CSS-Klasse zu einem High-Level-Zugabe Element Ihrer Seite zur Laufzeit und einen anderen Stil Hinzufügen der vorhergehende Standard außer Kraft setzen ein:

<!-- Define a runat="server" tag on your body element and an ID (assumes Web Forms) --> 
<body id="body" runat="server"> 

und dann in Ihrem Page_Load Ereignis, stellen Sie die Klasse auf der Grundlage Ihrer en Umwelt (d.h. Debug, Produktion usw.):

// Find your body element 
var body = FindControl("body") as HtmlGenericControl; 
// If you were able to find it, set it's class 
if(body != null) 
{ 
    // Set your environment here 
    body.Attributes["class"] = "production"; 
} 

Dies wird die "Produktion" Klasse auf Ihrem <body> Element machen:

<body id="body" class="production"> 

, die Sie verwenden können, eine andere CSS-Stil zu definieren, nur <h1> Elemente gezielt in die Produktionsumgebung:

<style type='text/css'> 
    h1 { 
     text-align: center; 
     background-color: #389BD6; 
    } 
    /* Target <h1> elements in production */ 
    .production h1 { 
     background-color: purple; 
    } 
</style> 

Man könnte dies auch durch den Bau mehrerer Sheets erreichen (dh production.css, development.css, usw.) und definieren Sie jeden Ihrer spezifischen Stile dort und verwenden Sie einen Mechanismus wie Preprocessor Directives, um zu bestimmen, welche zu verwenden.

0

Wenn Sie es benötigen, dynamisch zu sein, könnten Sie so etwas wie:

<link href="http://somewebsite.com/css.aspx" type="text/css" rel="stylesheet"> 

diese Weise erhalten Sie eine aspx-Datei, die wie eine CSS-Datei behandelt wird, aber Sie können den Wert von h1 Hintergrund dynamisch gesetzt B. indem Sie die gewünschte Logik in der .aspx verwenden Verwenden Sie dieses Stylesheet jedoch nur, um Stile zu enthalten, die sich zur Laufzeit ändern können, da dadurch viel Overhead entsteht.

Verwandte Themen