Uppdated 1999-05-02

Funktionerna Class och Id

Class

Class-kommadot var förts föreslagen till HTML 3 specifikationerna och blev också antagen som en HTML-standad.
Alla HTML-element som kan användas inom BODY-elementet kan använda sig av CLASS-kommandot.

Class-kommandot används för att utforma flera olika stiltyper på te x: text, tabeller, citat, m.m.
När man använder Class-elementet så punktar (.) man framför defineringen te x:

P.eget { Font-size: 14pt; Color: blue; Font-weight: bold}
Så när sedan elementet p används med attributet (kommando) CLASS och med värdet på den stiltype man definerat kommer det att slå igenom på texten.

Denna text är formaterad med det exemplet som är ovan.

Om stiltypen är definerad utan någont specifikt HTML-element, så kommer alla HTML-element man använder attributet CLASS och med värdet eget att förändras enligt den defineringen som man har gjort i stiltypen.

Id

ID-kommandot var även detta först antaget till HTML3 specifikationen.
Skillnaden mellan Class och Id attributen är den att Id-kommandot måste garanteras en unik identitet inom HTML-dokumentet, och vid defineringen av 'Id-stiltypen' används staket teckenet (#) framför defineringen te x:

#rodtext { Color: #FF0000 }
Sedan adresseras stiltypen inom vilket HTML-element som helst te x:

Lite röd text

Context Sensitive Selectors

Om man vill förändra egenskaperna för ett specifikt HTML-element, te x: STRONG-elementet, så gör man på detta sättet vid defineringen.

STRONG { Color: #00FF00}
denna definering slår igenom på all text som är inbäddad i STRONG-elementet. (har högre prioritet än den defaulta egenskapen)
Det kanske inte är så bra att förändra ett HTML-element hel och hållet, utan istället göra på detta sättet. Vid defineringen av stiltypen skriva:

P STRONG {Color: #00FF00}

Detta inebär att texten som berörs av STRONG-elementet inte kommer att bli LimeGrön, utan se ut som det skall, men om man bäddar in STRONG-elementet i P-elementet så kommer det att bli LimeGrönt.

 Så här ser det då ut !!!!

| upp | startsidan | föregående |