Arnel's WebbA brief introduction
to CSS
CSS är ett enkelt sätt att sätta layout (som fonter, färger, mellanrum, kolumner etc.) på webbsidor. CSS bör användas istället för tabeller för sidas layout, då det ger en flexiblare lösning. För vanlig tabelldata gäller naturligtvis tabellformatet fortfarande. CSS ersätter också användandet av "layers" (lager) som inte alls ger samma resultat i alla webbläsare.
En av de grundläggande fördelarna med CSS är "webmasters" kan koppla en önskad style sheet (stilmall) till webbsidan och sidan ändå är åtkomlig för webbläsare utan stöd för CSS och besökaren kan ta del av innehållet. Besökaren kan även ha en personlig stilmall i sin dator för att kompensera sig för teknologisk eller annat handikapp.
CSS finns nu i tre huvudnivåer som ska stödjas av webbläsare i vanliga datorer och som kort beskrivs här. Dessutom finns också speciella lösningar för mobiltelefoner, television, skrivare, program för syntetiskt tal, etc. som inte tas upp här.
Designa enkla stilmallar är egentligen ganska lätt. Många har redan använt sig av en stilmall för att ange egenskaper och färger för textlänkar på exempelvis detta sätt :
<STYLE TYPE="text/css">
A:link { color: red }
A:visited { color: blue }
A:active { color: lime }
</STYLE>
För att ange valfri färg på text mellan <H1> och </H1> kan man skriva: H1 {color: blue}
Exemplen här ovan är enkel CSS-layout. En CSS-kod består av två huvuddelar: en selector (väljare), ex.vis "H1" ovan, och en deklaration (ex.vis "color: blue" för "H1"). Deklarationen har också två delar: property (egenskap) "color" och value (värde) "blue". Exemplet påverkar bara en egenskap i dokumentet men är ändå en stilmall. Kombinerat med andra stilmallar kan den ge den slutliga presentationen av dokumentet.
Väljaren är länken mellan HTML-dokumentet och stilmallen och alla HTML-element kan vara väljare. Egenskapen "color" är en av många egenskaper för presentation av HTML-dokument. En webbplats behöver bara en stilmall för en speciell layout. Men flera stilmallar kan också användas för olika delar av webbplatsen.
För att stilmallen ska kunna påverka presentationen, måste webbläsaren känna till dess existens. Det finns fyra olika sätt att kombinera CSS och HTML: LINK-elementet till en extern stilmall, STYLE-elementet mellan <HEAD> och </HEAD>, importerad stilmall via "@import" och STYLE-attribut för ett HTML-element som mixar layout med innehåll.
För att minska stilmallens storlek, kan man gruppera väljare i en komma-separerad lista:
H1, H2, H3 { font-family: helvetica } och på liknande sätt kan deklarationer grupperas:
H1 {font-weight: bold; font-size: 1em; line-height: 2em; font-family: arial; font-variant: normal; font-style: normal;}
Man kan ange en "grundläggande" layout för alla webbsidor med egenskaper för "BODY":
BODY {color: black; background: url(texture.gif) white;}
I exemplet ovan blir all text i svart där inget annat anges "lokalt". För bakgrund har angetts en bild, men bakgrunden blir vit om bilden av någon anledning inte skulle gå att ladda ner.
Istället för "layers" används CSS för att placera ett innehåll "ovanpå" något annat:
Rubriktexten högst upp på denna sida är placerad med "position:absolute" i förhållande till skärmens övre och vänstra kant. Istället för tabell har jag skapat sidans layout med hjälp av CSS och använt mig av "position:absolute" även för det. Min externa CSS-fil ses här »
Högerklicka och välj "Visa källa" så ser du hur jag på mina olika sidor har använt mig av CSS på olika sätt. Den "grundläggande" mallen finns i en extern fil och är länkad till alla sidor på detta sätt: <link rel="stylesheet" href="style.css" type="text/css"/>. Länken finns mellan <head> och </head>. Ändringar i den externa filen påverkar alla sidor som länkar till den.
På flera delsidor har jag kompletterat med en liten "inbäddad" stilmall på ex.vis detta sätt:
<style type="text/css">
a:hover {background-color:yellow;}
ul {padding-left:0.6em; margin-left:0.6em;}
</style>
En inbäddad mall gör jag för att ange en speciell stil för något på just den sidan och placerar den under länken till den externa CSS-filen. Detta gör att jag kan påverka/ändra även sådant som annars styrs av den externa filen. Jag har också lagt in speciell stil direkt i en del HTML-taggar, som t.ex. <ul style="margin-top:0;"> när jag velat ge den enskilda taggen en annan stil än den annars har.
Detta var en kort introduktion till CSS. Ytterligare text kan eventuellt tillkomma, men för den som vill lära sig mera om grunderna kan länkarna här till höger vara en bra start. Där finns också lösningar på en del ganska avancerade tillämpningar, för den som vill prova dessa.
Ursprungligen infördes tabeller i HTML enbart för att man ska kunna visa tabulärdata. Men sen kom border="0" som gjorde det möjligt för designers att skapa rutsystem att placera text och bilder i.
Som det dominerande sättet att formge visuellt avancerade webbsajter, stör användandet av tabeller byggandet av en bättre, flexiblare, mer åtkomlig och funktionell webb.
Läs om var problemen härstammar ifrån och lär dig lösningar för att skapa övergångs- eller helt tabellösa layouter.
Full CSS Property Compatibility Chart listar CSS-egenskaper som fungerar och inte fungerar i olika webbläsare och versioner. OBS! Sidan är 460 kB!
