Stilmall med deklarationer
Så här sätter du upp reglerna för din stilmall
I den här artikeln lär du dig att sätta upp deklarationer i stilmallen som du i kopplade ihop med en webbsida i förra artikeln. För att kunna sätta upp deklarationer i din stilmall som bestämmer hur olika element ska visas krävs det att du först har märkt upp de element som ska formateras med ett unikt id eller en class som du tidigare läst om i XHTML-guiden.
All kod som presenteras nedanför är kod som skrivs in i stilmallen som du skapat tidigare!
Välja ut olika element med selektorer
Ett enkelt exempel:
p {color: red;}
Detta betyder att varje stycke på din webbsida ska ges en röd text. Stycketaggen p kallas för selektor eftersom det är den som är det utvalda elementet.
Kanske vill du vara lite mer restriktiv i din användning av rödfärgen och därför skriver du in detta:
div p {font-color:red;}
Ovanstående kod betyder att varje stycke p som befinner sig i en div-tagg kommer att färgas rött. Div p är en s.k kontextuell selektor.
Det går att vara ännu mer selektiv:
div p span {font-color:red;}
Detta gör att endast text inom en span-tagg i ett stycke som befinner sig i ett div-element färgas röd.
Deklarationer för id-element
För att ytterligare kunna skilja ut element från varandra så lärde du dig att använda dig av id:n. Det innebär alltså att du kan sätta upp ännu fler varianter av formateringar.
Exempelvis skulle vi nu kunna skriva:
div#red p span {font-color: red;}
div#blue p span{font-color: blue;}
div#green p span {font-color: green;}
Att hänvisa till ett speciellt id för ett div-element sker alltså med att lägga till "#idnamn" till elementet div. Med denna funktion så får du i stort sett full frihet att formatera olika delar av sidan på alla möjliga olika sätt.
Kom ihåg att ett id är unikt och inte får förekomma flera gånger på samma webbsida.
Skriva in flera deklarationer på samma gång
Det går självklart att skriva in flera deklarationer samtidigt när du ska sätta upp regler för ett element. Separera bara varje deklaration med ett semikolon (;).
Exempel:
div#menu {width: 200px; background-color: #CCCCCC; color: blue; border: solid 1px; border-color: green;}
div#menu a {color: yellow;}
Ovanstående kod säger att div-elementet med id "menu" ska ha bredden 200 pixlar, en ljusgrå bakgrundsfärg, blå text och en heldragen 1 pixel grön linje som omsluter innehållet. Den sista raden har också lagt till regeln att varje länka ska vara gul. Jag kan lova att det inte blir vackert, men som ett teoretiskt exempel så fungerar det iallafall.
Deklarationer för class-element
Som nämnts tidigare så används en class för att göra små variationer av texten på din sida. Att skapa deklarationer för dessa klasser fungerar dock i stort sett på samma sätt som för id:n.
När du vill sätta upp regler för en klass så skriver du bara in en punkt följt av klassnamnet:
.klass {deklaration}
Nästa artikel: Marginaler
