HTML-stil

style-egenskaben bruges til at ændre stilen på HTML-elementer.

Denne tekst er i Verdana og rød
Denne tekst er i Times og blå
Denne tekst er 30 pixels høj

Prøv det selv

HTML's style-egenskab

style-egenskabens funktion:

bider til at ændre stil på alle HTML-elementer.

Stil blev introduceret i HTML 4 som en ny foretrukken måde at ændre stil på HTML-elementer. Gennem HTML-stil kan du tilføje stil direkte til HTML-elementer ved hjælp af style-egenskaben eller indirekte i en uafhængig stilside (CSS-fil).

Du kan finde alt om stil i vores CSS-turlær alt om stil og CSS.

I vores HTML-tur vil vi bruge style-egenskaben til at forklare HTML-stil.

Ikke anbefalede mærker og egenskaber

I HTML 4 er der flere mærker og egenskaber, der er forældede. Forældet (Deprecated) betyder, at disse mærker og egenskaber ikke vil blive understøttet i fremtidige versioner af HTML og XHTML.

Her er budskabet klart: Undgå brug af disse forældede mærker og egenskaber!

Undgå brug af følgende mærker og egenskaber:

Mærke Beskrivelse
<center> Definer centreret indhold.
<font> og <basefont> Definer HTML skrifttype.
<s> og <strike> Definer slettede tekst
<u> Definer understreget tekst
Egenskab Beskrivelse
align Definer teksts justering
bgcolor Definer baggrundsfarve
color Definer tekstfarve

For disse mærker og egenskaber: brug stil i stedet!

HTML stil eksempel - baggrundsfarve

background-color egenskab definerer baggrundsfarve:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

Prøv det selv

style egenskaben har afløst den gamle "bgcolor" egenskab.

Prøv det selv: Sæt baggrundsfarve med den gamle metode

HTML stil eksempel - skrifttype, farve og størrelse

font-family、color og font-size egenskaber definerer elementets teksts skrifttype, farve og skriftstørrelse henholdsvis:

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Prøv det selv

style egenskaben har afløst den gamle <font> tag.

Prøv det selv: Sæt skrift med den gamle metode

HTML stil eksempel - tekstjustering

text-align egenskaben bestemmer elementets teksts horisontale justering:

<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>

Prøv det selv

style egenskaben har afløst den gamle "align" egenskab.

Prøv det selv: Sæt indrykning med den gamle metode