http://vonpepel.com/ref/css/ - Senaste uppdatering 10 juli 1997CSS © Eva von Pepel
Style Sheets introducerades redan i oktober 94 men det var först sedan Microsoft implementerade dem i sin Internet Explorer 3.0 som dess användning började sprida sig.
Sedan den 17 december 1996 är Style Sheets W3C:s Rekommendation. Det betyder att specifikationen är godkänd av alla medlemmar och är stabila att använda.
WWW-klienter som stödjer Style Sheets
Då varken Microsof eller Netscape ger ett fullständigt stöd åt Style Sheets kan det hända att några av egenskapen beskrivna här inte "fungerar".
Även själva implementationen är si och så därför är det viktigt att stänga varje element med respektive sluttag även om sådana är valfria, t ex </P> eller </LI>. Om (t ex) stycket är inte stängt "ärver" det element som kommer efter stycket dess marginaler dvs det nya elementets och styckets marginaler läggs ihop. Det kan resultera i att det nya elementet kan hamna utanför skärmen och måste skrollas efter.
CSS är ett stilspråk som används för att skapa Style Sheets. Style Sheet är en fil; stilmall eller formateringmall som innehåller en samling olika stilregler med vilka ett HTML-element formateras. Språket ger dig en möjlighet att påverka layouten, inte bara färger och fontstorlekar (det kan du göra med vanliga HTML-markeringar) men även inflytande över hur varje enskilt element presenteras i förhållande till själva dokumentet eller andra element t ex radavstånd, indrag eller marginaler. Mallen fungerar på samma sätt som formateringsmallar i ordbehandlingsprogram och kan formatera ett obegränsat antal dokument.
Själva filen länkas ihop med ett eller fler HTML-dokument och innehåller information om hur de olika HTML-elementen (stycken, tabeller osv) ska formateras. Grundkonceptet är mycket enkelt. Du listar varje element som ska formateras och talar om vilka regler som ska gälla för just detta element, med andra ord du tilldelar elementet den önskade stilen som färg, fontstorlek eller indrag. Om alla stycken i ett dokument ska vara röda skriver du i mallen:
P {color: red}
P {color: red}är en CSS-regel. Låt oss titta närmare på denna regel och vad den innehåller.
HTML-dokument består av mindre byggnadsdelar som kallas element, t ex ett stycke eller en tabell. För att en www-klient ska kunna avläsa de olika elementen måste den veta när vart och ett av dem börjar och slutar. Därför markerar du början på varje element med en starttagg och slutet med en sluttagg· . Början på ett stycke markeras med <P> och slutet med </P>. Början på en tabell markeras med <TABLE> och slutet med </TABLE>.
<P>Ett stycke (ett html-element)</P>
<TABLE>En tabell (ett html-element)</TABLE>
I CSS-mallen listar du de olika elementen och tilldelar dem en önskad formateringsstil, t ex röd text i styckena och blå i tabellerna:
P {color: red} TABLE {color: blue}
Men du kan även tilldela ett antal olika element en och samma stil, t ex en blå text till både styckena och tabellerna. För att kunna tilldela olika element en och samma stil samlar du ihop dem i en sträng, dvs du listar dem ett i taget och separerar vart och ett med ett komma:
P, TABLE {color: blue}
Dessa strängar kallas för selektorer (väljare) och kan innehålla ett eller ett antal olika element. Selektorerna skrivs utan avgränsare < och >.
<P></P> - ett HTML-element
P - en CSS-selektor
P, TABLE - en CSS-selektor (sträng)
Varje selektor tilldelas en viss formateringsstil, s.k. deklaration som talar om hur detta HTML-element ska presenteras, dvs vilka färger, vilken fontstorlek eller vilka indrag det ska ha. Om färgen på texten ska vara röd skriver du:
{color: red} - en CSS-deklaration
CSS-deklarationer består av två delar: egenskap (color) som är detsamma som ett attribut i HTML och ett värde (red) som är detsamma som ett värde i HTML.
color - ett HTML-attribut
color - en CSS-egenskap
red - ett HTML- och CSS-värde
Summering: En CSS-regel består av två delar: en selektor och en deklaration som tilldelas selektorn. Deklarationen skrivs alltid mellan klamrar. Deklarationen består av två delar: en egenskap och ett värde. Egenskapsdelen avslutas med ett kolon som följer direkt efter egenskapens typ och därefter kommer egenskapens värde eller värden.
Selektor {deklaration}
Selektor {egenskap: värde}
P {color: red}
P, TABLE {color: red}
En selektor kan tilldelas fler än en deklaration. Ett stycke kan till exempel vara både rött {color: red} och visas med en fontstorlek som har 12 punkter {font: 12pt}. Om du vill tilldela en selektor ett antal deklarationer listar du dem helt enkelt en i taget och separerar med en semikolon.
Selektor {deklaration1; deklaration2}
Selektor {egenskap: värde; egenskap: värde}
P {color: red; font: 12pt}
Vill du även formatera styckena med en 2 cm marginal, skriver du en deklaration till:
Selektor {deklaration1; deklaration2; deklaration3}
Selektor {egenskap: värde; egenskap: värde; egenskap: värde}
P {color: red; font: 12pt; margin-left: 2cm}
En och samma attribut kan ha olika värden. En och samma font kan till exempel ha en viss storlek och dessutom visas i fet stil samt i ett visst typsnitt. I ett sådant fall listar du värdena ett i taget och åtskiljer dem med ett mellanslag. Så kan deklarationen se ut som tilldelas rubrik på nivå 2.
Selektor {deklaration}
Selektor {egenskap: värde värde värde}
H2 {font: 14pt Arial bold}
Rubriken kommer att formateras med en font som är 14 punkter, fetstil och typsnittet Arial.
Deklarationerna kan du skriva på olika sätt. Mellanslag, tabbar och t o m tomma rader är tillåtna. Välj det sätt som passar dig bäst, t ex:
P {color: red; font: 12pt; margin-left: 2cm}
eller
P {
color: red;
font: 12pt;
margin-left: 2cm
}
Alla BODY elementen som finns i HTML har sina motsvarigheter som selektorer i CSS. Det finns följande element i HTML 3.2, dvs dagens standard: A, ADRESS, APPLET, AREA, BLOCKQUOTE, BODY, BR, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FONT, FORM, Hn, HR, IMG, INPUT, LI, LISTING, MAP, MENU, OL, OPTION, P, PARAM, PRE, SELECT, TABLE, TD, TEXTAREA, TH, TR, UL, XMP samt EM, STRONG, CODE, SAMP, KDB, VAR, DFN, CITE, TT, B, I, U, BIG, SMALL, SUB, SUP, STRIKE
Selektorerna, egenskaperna och de flesta värden är case insensitive. Det betyder att det spelar ingen roll om du skriver dem med versaler eller gemena eller t o m blandar. Alla de element/attribut/värden som är case insensitive i HTML är också case insensitive i CSS.
Värden, t ex adresser, som hänvisar till andra filer måste skrivas exakt. FILENSNAMN.gif och filensnamn.gif är inte samma fil. Det även finns några udda typsnitt som måste skrivas exakt.
Värdena behöver du inte citera ("red" eller red) men det skadar inte om du gör det. Namn däremot som innehåller mellanslag t ex "Times New Roman" måste citeras annars ignoreras det som kommer efter första ordet som i det här fallet är New Roman. Citattecken kan vara dubbla " eller enkla '.
Färgerna anger du genom att uppge deras RGB-värden t ex {color: rgb(250, 0, 0)}, hexadecimal av RGB-värden t ex {color: #FFFFFF} eller färgernas engelska namn, t ex {color: red} OBS! gäller bara de 16 vanligaste färgerna: white, black, yellow, red, aqua, blue, navy, lime, green, teal, olive, fuchsia, purple, maroon, silver, grey.
Enheter kan du ange i punkter (pt), tum (in), centimeter (cm), pixlar (px), procent (%), millimeter (mm), och picas (pc).
Efter den långa tiden av dödläge efter HTML 3.0-förslagets upphörande samlade man på W3C några av de mest vid den tidpunkten använda elementen/attributen/värden och kom med ett nytt förslag, s.k. Wilbur som döptes om till HTML 3.2. Förslaget återspeglade dåvarande praktik, dvs inkluderade de element vars användning och support var mest vanlig. Support av stilmallar var obefintlig under den tiden därför de element som används i dem inte kom med. Varje förslags livstid är 6 månader och om det inte ratificeras under den tiden dör det ut. För att inte hamna i dödläge igen accepterade man förslaget och den 14 januari blev det ofullständiga språket HTML 3.2 en rekommendation (standard) som ersatte den tidigare standarden HTML 2.0.
Pga supportbrist av ett antal viktiga element och attribut valideras inte många HTML 3.2-dokument som formateras med Style Sheets. (Alla är dock med i den kommande standarden Cougar). OBS! Alla nedan nämnda element eller attribut stöds av både Internet Explorer och Netscape. Det är bara valideringen som är lidande pga deras brist i HTML 3.2.
Gäller alla typer av mallar:
Supportbrist av attributet CLASS validerar inte pseudoklasser.
Supportbrist av elementet SPAN gör det omöjligt att tilldela ett antal efterföljande element samma stil. Men här kan elementet DIV komma till god användning.
Supportbrist av attributet ID omöjliggör skapandet av ID-selektorer.
Gäller in-line Style Sheet: Supportbrist av attributet STYLE gör det omöjligt att tilldela stil överhuvudtaget.
Gäller externa style sheets:
Supportbrist av attributet TYPE i elementet LINK gör att det inte går att specificera TYPE som "text/css". Tills nyligen kunde man gå runt problemet genom att inte uppge någon därför att det är underförstått att om attributet saknades då gäller TYPE="text/css".
I samband med Netscapes Style Sheets support gäller inte denna självklarhet längre. Av någon anledning bestämde man att standarden TYPE ska vara text/jssl och inte text/css. Det betyder att om TYPE="text/css" saknas laddas text/jssl istället som i sin tur gör dokumenten oläsbara i Navigator. Men Netscape lovade att i framtida versioner återgå till standarden text/css.
Lösning:
För att få kunna nyttja alla egenskaper som style Sheets erbjuder och få dokumenten godkända kom W3C med en ny DTD och Doctype Deklaration just för dokument som innehåller stilmallar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Experimental 970421//EN">
Annars kan du validera dokumenten under Cougar och inte HTML 3.2. Ha dock i tankarna att Cougar fortfarande är i en experimentell version.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Experimental 19960712//EN">
<!DOCTYPE HTML SYSTEM "http://www.w3.org/pub/WWW/MarkUp/Cougar/Cougar.dtd">
http://vonpepel.com/ref/css/ - Senaste uppdatering 10 juli 1997