Hvordan lage min overskrift en solid bar på CSS

June 14

En måte å style en overskrift er å gjøre det synes som en bar på siden. Overskrift tekst i barer skape klare divisjoner i tekst og se bra ut når godt designet. Styling en overskrift i en bar i CSS er enkel, og det krever bare en bakgrunnsfarge og noen padding på sitt minimum. Når du oppretter linjen, kan du fortsette å style teksten i baren så mye du vil, og legge til rammer eller andre stiler. Manipulere bredden på linjen hvis du ønsker å gjøre det kortere enn teksten under.

Bruksanvisning

1 Åpne HTML-filen for din webside i en kode editor eller Notisblokk. Finn overskriften du vil gjøre om til en solid bar og legge til det en klasse navn:

<H3 class = "bar"> Overskrift Tekst Her </ h3>

2 Åpne stilark for din webside eller finne <style> -kodene i sidens HTML-kode. Legg denne koden mellom <head> taggene hvis du ikke finner dem:

All CSS koden må gå mellom disse kodene eller innenfor stilark. Legg til ny CSS-koden til bunnen av stilarket som du skriver det i tilfelle du trenger å overstyre tidligere stiler.

3 Lag en stil regel for overskriften rettet mot baren klassen, eller hvilken klassenavnet du valgte å gi til overskriftskodene:

.bar {
}

4 Legg egenskaper og verdier innenfor klammeparentes av stilen regelen. Opprette baren krever minst en bakgrunnsfarge og noen padding. Du kan også angi en bredde, enten i piksler eller prosent:

.bar {
background-color: blue;
padding: 20px 10px;
}

Denne koden setter 20 piksler av padding på venstre og høyre for overskriften tekst og 10 piksler fra padding på sin topp og bunn. Som standard er en overskrift bredde 100 prosent.