Selektorer: Taggspecifika selektorer

Inledning
Klasser
ID
Grupperade selektorer
Sammanhangsstyrda

Förändra utseendet på hela taggen

Genom att definiera HTML-selektorer eller taggspecifika selektorer förändrar man utseendet på den definierade taggen överallt där den används på sidan eller - om man använder en global mall - på hela webbplatsen.

Ett exempel

<HTML>
<HEAD>
<TITLE>HTML-selektorer</TITLE>
<STYLE TYPE="text/css">
I {font-family: Georgia; font-size: 12pt; color: Red;}
P {font-family: Arial; font-size: 10pt; color: Black;}
</STYLE>
</HEAD>
<BODY>
<P>Vanlig svart text i teckensnittet Arial, men där den <I>kursiva texten</I> har avvikande färg, teckensnitt och teckensstorlek.</P>
</BODY>
</HTML>

Det här blir resultatet

Vanlig svart text i teckensnittet Arial, men där den kursiva texten har avvikande färg, teckensnitt och teckenstorlek.

Det här fungerar fullt ut i både Netscape och Internet Explorer.

Syntaxen för HTML-selektorerna

HTMLSelektor {egenskap: värde;}

Som du ser i exemplet ovan ersätts "HTMLSelektor" med taggnamnet, egenskap med den egenskap man vill påverka och värde med hur egenskapen skall se ut. Det går alldeles utmärkt att lägga in flera egenskaper i samma HTML-selektor - i det här fallet teckensnitt, textstorlek och färg på texten.

Taggselektorn förändrar alltså alla tillhörande taggar på hela sidan - eller på hela webbplatsen. Om du vill att enstaka taggar inte skall påverkas av taggselektorn, kan du lägga in en "kontraorder" i just de taggarna.

Ett exempel

<P><I style="font-family: Arial; font-size: 10pt; color: Black">Kursiv text</I></P>

Resultatet

Kursiv text

Den kursiverade texten får nu samma egenskaper som den övriga brödtexten på sidan, bortsett från att den är kursiv.

Men ...

Om du gör så här, motverkar du själva syftet med att använda stilmallar: Att skilja sidans innehåll från formateringen av innehållet.

När du sedan vill ändra utseendet på dina webbsidor måste du ändå ge dig ut på jakt efter alla formateringar som ligger inblandade i den vanliga HTML-koden. En bättre metod är då att använda klass-selektorer.

Inledning
Klasser
ID
Grupperade selektorer
Sammanhangsstyrda

©SupportData.Net
www.supportdata.net