(Cascading Style Sheets) Rebecca Landmér 2007 CSS.

En presentation över ämnet: "(Cascading Style Sheets) Rebecca Landmér 2007 CSS."— Presentationens avskrift:

1 (Cascading Style Sheets) Rebecca Landmér 2007 rebecca.landmer@hb.se CSS

2 DAGENS FÖRELÄSNING Introduktion till CSS Vad är CSS och varför? -------------------------------- Syntax, regler och selektorer Klasser och ID Färger och typografi Mått Justering och marginaler Listformat Tabeller

3 Förenklar underhåll Separerar struktur (innehåll) och presentation (form/layout), vilket: ger mindre filstorlekar ökar tillgängligheten gör HTML-sidorna enhetsoberoende VARFÖR CSS?

4 VAD ÄR CSS? CSS ger fullständig kontroll över layout, utan att stöka till dokumentets innehåll CSS är ett språk som används för att kontrollera stil och layout på dokument uppmärkta med HTML, XML eller XHTML Med CSS kan all formatering flyttas från (X)HTML-dokumentet och förvaras separat, i en CSS-fil

5 VAD ÄR CSS? Styr typsnitt (familj, storlek, färg, stil), justering (”alignement”), symboler i listor, marginaler, kantlinjer (tjocklek, strecktyp, färg), storlek och position, bakgrundsbilder, visning/synlighet... Håkon Wium Lie (Opera) primär upphovsman CSS finns i tre versioner: 1 (1996), 2 (1998), 3 (under utveckling), men än så länge har endast version 1 bra stöd hos webbläsarna

6 VAD GÖR CSS? En stilmall kan styra en ändlös mängd dokument. Ger slutanvändaren större kontroll och tillgänglighet. Gör designändringar lättare genom att information och presentation är skilda åt. Möjliggör multipla användningsområden för varje dokument.

7 PLACERING I XHTML-FIL Alternativ 1 – i en sektion i : Valans spådom H1 { color: red; } Alternativ 2 – i en separat fil: Valans spådom

8 En CSS-regel består av en selektor (”väljare”) och en eller flera deklarationer. Selektorn avgör vilket eller vilka XHTML-element som påverkas av regeln. Varje deklaration i sin tur består av en egenskap och ett värde. Selektor {egenskap: värde;} Deklarationer omges av { } (måsvingar/krullparanteser), och varje deklaration i ett deklarationsblock avslutas med ; (semikolon). SYNTAX

9 Regel: ett direktiv som anger hur ett XHTML- element skall presenteras. Selektor: identifierar det eller de element som skall presenteras med hjälp av en regel. REGLER OCH SELEKTORER

10 Regel: H1 { font-family: Arial; font-size: 16px; } Selektorer: Element: td {text-align: left; …} Klasser: div.menuitem {border: 1px solid; …} Identifierare: #firstword {font-weight: bold; …} Kontextuella selektorer: table.menu td {color: white; …}

11 En klass är en grupp av element. Gruppen identifieras med ett klassnamn. Klass markeras med punkt (.). I stilmallen (CSS): div.menuitem {color: white;...} I XHTML-dokumentet: Introduktion En identifierare (ID) refererar till exakt ett (1) element i ett dokument. Fungerar som en klass. ID markeras med staket (#). I stilmallen (CSS): #firstword {font-weight: bold; …} I XHTML-dokumentet: Hören KLASSER OCH ID Namnge klasser och ID efter funktion, inte efter utseende!

12 Pseudoklasser är klasser som inte finns i dokumentstrukturen. Används bland annat för länkegenskaper: a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} PSEUDOKLASSER ”LoVe/HAte”: Pseudoklasser för länkar ska specificeras i ordningen Link, Visited, Hover, Active

13 I (X)HTML/CSS kan en färg anges genom en kombination av tre grundfärger: röd, grön och blå – RGB (Red, Green, Blue): Normal hexadecimal notation: #99CC33 Förkortad notation: #9C3 RGB-funktion: rgb(153, 204, 51) FÄRGER OCH TYPOGRAFI Vissa färger kan också anges med en färgkonstant: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow Teckensnitt, färg, storlek, stil, position, osv. anges i deklarationen. p {font-family: verdana; font-size: 11px; font-color: maroon} h1 {background-color: #CCFF33;}

14 Absoluta mått mm = millimeter cm = centimeter in = inch pt = point (72pt = 1inch) pc = pica (1pc = 12pt) px = pixel Relativa mått em = fyrkanten (emspace) ex = x-höjden % = procent MÅTT

15 body { font-size: 12pt; } p { font-size: 1em; } h1 { margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; } Exempel:

16 CSS LÅDMODELL innehåll margin padding border kantlinje ”TRouBLed”: När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre sidan och går medsols: Top, Right, Bottom, Left. Ex.: h1 { margin: 1em 1em 0 1em; }

17 Blocknivåelement visas normalt som textblock med radbrytningar före och efter. Exempel: p, h1, div. Radnivåelement visas i raden utan radbrytning. Exempel: strong, em, span. Elementen fungerar enligt lådmodellen/ boxmodellen. BLOCK- OCH INLINE-ELEMENT

18 Text kan justeras åt höger, vänster, centreras eller marginaljusteras. CSS-egenskapen margin definierar området runt ett element, enligt lådmodellen. JUSTERING OCH MARGINALER.center {text-align: center;} Centrerad! h1 {margin: 10px} Huvudrubrik

19 LISTFORMAT Punktlistor eller numrerade listor formateras med CSS. Hela listan, listelement eller bara vissa listelement kan formateras. Oordnade listor fungerar bra till t.ex. navigationsmenyer. ul { list-style-type: circle; }

20 TABELLER table { font-family: sans-serif; border: 1px; } td { font-family: serif; } Tabeller kan formateras på liknande sätt som andra element. Tabeller är användbara för presentation av data. För layout är det lämpligare att använda sektioner (div) och positionering.