Wie meine Überschrift Solid Bar auf CSS machen

December 18

Eine Möglichkeit um eine Überschrift zu formatieren ist zu machen, wie eine Bar auf der Seite erscheinen. Überschrift Text in den Bars erstellen Sie klare Divisionen in Text und sehen Sie gut wenn gut konzipierte aus. Styling eine Überschrift in eine Bar im CSS ist einfach und erfordert nur eine Hintergrundfarbe und einige Padding seiner mindestens. Nach dem Erstellen der Bar können Sie weiterhin den Text innerhalb der Bar Stil so viel wie Sie mögen und Grenzen oder andere Stile hinzufügen. Die Breite des Balkens zu manipulieren, wenn Sie es kürzer als der Text darunter machen möchten.

Anweisungen

1 Öffnen Sie die HTML-Datei für Ihre Webseite in einem Codeeditor oder Notepad. Finden Sie die Überschrift zu verwandeln in einen durchgehenden Balken und fügen Sie einen Klassennamen hinzu:

< h3-Klasse = "Bar" > hier Überschrift Text < / h3 >

2 Öffnen Sie das Stylesheet für Ihre Webseite oder finden Sie < Style >-Tags im HTML-Code der Seite zu. Fügen Sie diesen Code zwischen die < Head >-Tags, wenn Sie sie nicht finden:

< Typ style = "Text/Css" >< / style >

Alle CSS-Code muss zwischen diesen Tags oder in das Stylesheet. Fügen Sie neuen CSS-Code auf der Unterseite des Stylesheets, wie Sie es schreiben, für den Fall, dass Sie frühere Stile überschreiben müssen.

3 Erstellen Sie eine Stilregel für Ihren Kurs gezielt die Bar Klasse oder welcher Klassenname wählte der Überschriften-Tags geben:

.Bar {}}

4 Eigenschaften und Werte innerhalb der geschweiften Klammern der Stilregel hinzufügen. Erstellen der Bar erfordert mindestens eine Hintergrundfarbe und einige Padding. Sie können auch eine Breite, entweder in Pixel oder Prozent angeben:

.Bar {}Hintergrund-Farbe: blau;Padding: 10px 20px;}

Dieser Code stellt 20 Pixel der Abstand Links und rechts neben den Überschriftentext und 10 Pixel Polsterung an der Ober- und Unterseite. Standardmäßig ist eine Überschrift Breite 100 Prozent.