SupportData.Net Stilmallar med CSS

När du har definierat en klass, kan du utnyttja den för att förändra delar av innehållet i taggen, enstaka taggar och taggar av flera olika typer.

<HTML> <HEAD> <TITLE>Klasser</TITLE> <STYLE TYPE="text/css"> .rubrik {font-family: verdana; font-size: 12pt; color: red; text-align: left;} </STYLE> </HEAD> <BODY> <H1>Den vanliga rubriken</H1> <H1 class="rubrik">Rubrik som påverkas av klassen</H1> <P>Vanlig svart text i teckensnittet Arial.</P> <P class="rubrik">Vanlig text som påverkas av klassen men där <I>två ord</I> dessutom blir kursiva och <FONT COLOR="Green">två ord</FONT> gröna.</P> </BODY> </HTML>

Observera att såväl P-taggen som H1-taggen redan påverkas utifrån av den globala stilmall jag använder. Det är denna som anger egenskaperna för den "vanliga rubriken" och den "vanliga texten". Här använder jag klassen till att ändra på dessa egenskaper.

Den vanliga rubriken

Rubrik som påverkas av klassen

Vanlig text som påverkas av klassen men där två ord dessutom blir kursiva och två ord gröna.

Som ".klass" anger du ett klassnamn och detta skall alltså inledas med en punkt. Sedan anger du egenskaperna som skall påverkas och hur de skall se ut. Precis som i HTML-selektorerna kan du lägga in flera egenskaper i samma klass.

I taggen där du vill använda klassen anropar du klassnamnet, till exempel som i exemplet ovan:

Det är endast de anropande taggarna som påverkas. Alla andra taggar kommer att visas normalt eller med de inställningar du har i övriga stilmallar.

De här båda HTML-taggarna är mycket användbara just i samband med klass-selektorer. Eftersom de i sig inte gör någonting är de utmärkta att lägga anropet av CSS-stilen i.

Du vill ha ett textblock med 130 pixlars marginal till höger och till vänster. Textblocket skall ha en rubrik och under denna en liten bild. Sedan kommer brödtexten och den skall ligga med ytterligare indrag till höger om bilden, och eftersom du vill ha den med lagom marginal från rubriken drar du upp texten en bit (Se Tips! nedan). En liten del av brödtexten skall ha en annan färg än resten och vara kursiv samt understruken. Du skapar några klasser:

.indrag {margin-left: 130px; margin-right: 130px;} .nytext {margin-left: 30px; margin-top: -20px;} .kursiv {color: green; text-decoration: underline; font-style: italic;}

Du sätter in dessa klasser i en stilmall. I BODY-elementet, där det indragna stycket skall visas, placerar du anropet av den första klassen i en DIV-tagg, medan den andra klassen anropas av P-taggen inne i DIV-taggen:

<HTML> <HEAD> <TITLE>Klasser</TITLE> <STYLE TYPE="text/css"> .indrag {margin-left: 130px; margin-right: 130px;} .nytext {margin-left: 30px; margin-top: -20px;} .kursiv {color: green; text-decoration: underline; font-style: italic;} </STYLE> </HEAD> <BODY> <DIV class="indrag"> <H4>En rubrik</H4> <IMG border="0" src="hus.gif" width="18" height="20"> <P class="nytext">Utan anropet av klassen .nytext hade det här textblocket hamnat längre ned i förhållande till rubriken och bilden, och <SPAN class="kursiv">dessutom placerats till vänster</SPAN> med marginalen i samma nivå som rubriken.</P> </DIV> </BODY> </HTML>

En rubrik

Utan anropet av klassen .nytext hade det här textblocket hamnat längre ned i förhållande till rubriken och bilden, och dessutom placerats till vänster med marginalen i samma nivå som rubriken.

Som du ser går det bra att anropa en klass i den inledande DIV-taggen, sedan anropa en helt annan klass i ett element i DIV-taggen och slutligen inom detta element anropa en tredje klass.

<SPAN> är en så kallad inline-tagg, vilket innebär att det inte sker några radbrytningar före eller efter taggen.

<DIV> däremot gör alltid en radbrytning så att DIV-elementet kommer att stå för sig självt.

Selektorer: Klasser

Den vanliga rubriken

Rubrik som påverkas av klassen

En rubrik