Introduktion till webbutveckling HT12: föreläsning 4

CSS Introduktion till webbutveckling

Stilmallar • Regler för hur innehåll ska presenteras. • Separation
mellan innehåll och utseende. • Se t. ex. ordbehandlings- och presentationsprogram. Exempel (Visar byte av tema i presentationsprogrammet Keynote.)

(Icke-)exempel Några webbsidor utan egna stilmallar aktiva (genom Web Developer
Toolbar i Firefox)

Cascading Style Sheets • Språk för att skapa stilmallar för
webbdokument. • Kan användas tillsammans med HTML och XML, men är ett helt separat språk. • Kan ge vilt skilda utseende, utan att man behöver ändra innehållet HTML-dokumenten.

• Hette ursprungligen Cascading HTML Style Sheets (CHSS) • 1994,
Håkon Wium Lie (som skrev sin doktorsavhandling ”Cascading Style Sheets” 2005). • Döptes om för att inte vara speciﬁkt till HTML.

CSS har tre (bakåtkompatibla) nivåer • Nivå 1: ursprungliga rekommendationen
från 1996. • Nivå 2 (2.1): 2007, primär version med bra (men inte fullständligt) webbläsarstöd. • Nivå 3: Under aktiv utveckling. Kommer att släppas som "delrekommendationer". Begynnande webbläsarstöd.

Hur skriver vi en stilmall med CSS? Hur anger vi
vilken stilmall som ska användas?

Hur skriver vi CSS? • En CSS-mall är en uppsättning
stilregler. • Varje regel anger: • vilket innehåll som ska påverkas • någon aspekt av presentationen

h1 { color: green; font-size: 24px; } Selektor Deklarationsblock Deklaration
Deklaration Egenskap Värde

h1 { ... } ul, p { ... } h2
a { ... } Några enkla selektorer

Några intressanta egenskaper • color • background-color • background-image •
font-family • font-size • font-style • font-weight • text-align • text-transform • border • padding • margin

h1 { color: green; font-size: 24px; } h2, h3 {
font-weight:bold; } /* 2012-09-22: More space after paragraphs */ p { margin-bottom: 16px; }

1. Separat CSS-ﬁl (extern mall) 2. Inkludera CSS-regler i dokumentet
(inbäddad mall) 3. Lokalt på ett individuellt element (genom attributet style). Applicera CSS-regler på HTML-dokument

Inbäddad mall • Elementet <style> används för att inkludera CSS-regler
i ett HTML-dokument. • Anges också i <head> <style type="text/css"> p { color: blue; } </style>

Attributet style • I princip alla element stöder attributet style.
• Värdet på style-attributet ska vara en eller ﬂera CSS-deklarationer. <p style="color: red;">Hej</p>

Cascade (+ arv) http://www.ﬂickr.com/photos/viamoi/3482345454/

Arv (inheritance) body { color: orange; }

Arv (inheritance) body { color: orange; } p { color:
blue; }

Arv (inheritance) body { color: orange; } p { color:
blue; } em { color: green; }

The Cascade • ...är ramen för hur CSS-regler ska prioriteras.
• Vad gäller om två CSS-regler säger olika saker om samma element?

1. Importance (var står regeln?). 1. Användarens stilmall. 2. Författarens
stilmall. 3. Webbläsarens stilmall. 2. Hur speciﬁk selektorn är. 3. Ordningen reglerna är skrivna i.

strong { color: black; } /* Mer specifik selektor: */
p strong { color: blue; } /* Ännu mer specifik selektor: */ h1 p strong { color: red; } (Se föreläsningsanteckningar för mer avancerade exempel.)

p { color: blue; } p { color: red; }
Står senast, prioriteras därför

Exempel Enkelt HTML- dokument ges en serie stilregler (framförallt typografi,
färger, etc.).

Introduktion till webbutveckling HT12: föreläsning 4

Introduktion till webbutveckling HT12: föreläsning 4

Fredrik Ohlin

More Decks by Fredrik Ohlin

Other Decks in Technology

Featured

Transcript

CSS Introduktion till webbutveckling

CSS

Stilmallar • Regler för hur innehåll ska presenteras. • Separation

(Icke-)exempel Några webbsidor utan egna stilmallar aktiva (genom Web Developer

Cascading Style Sheets • Språk för att skapa stilmallar för

• Hette ursprungligen Cascading HTML Style Sheets (CHSS) • 1994,

CSS har tre (bakåtkompatibla) nivåer • Nivå 1: ursprungliga rekommendationen

Hur skriver vi en stilmall med CSS? Hur anger vi

Hur skriver vi CSS? • En CSS-mall är en uppsättning

h1 { color: green; font-size: 24px; } Selektor Deklarationsblock Deklaration

h1 { ... } ul, p { ... } h2

Några intressanta egenskaper • color • background-color • background-image •

h1 { color: green; font-size: 24px; } h2, h3 {

1. Separat CSS-ﬁl (extern mall) 2. Inkludera CSS-regler i dokumentet

<link rel="stylesheet" href="mall.css" type="text/css"> • Skriv CSS-regler och spara i

Inbäddad mall • Elementet <style> används för att inkludera CSS-regler

Attributet style • I princip alla element stöder attributet style.

Cascade (+ arv) http://www.ﬂickr.com/photos/viamoi/3482345454/

Arv (inheritance) body { color: orange; }

Arv (inheritance) body { color: orange; } p { color:

Arv (inheritance) body { color: orange; } p { color:

The Cascade • ...är ramen för hur CSS-regler ska prioriteras.

1. Importance (var står regeln?). 1. Användarens stilmall. 2. Författarens

strong { color: black; } /* Mer specifik selektor: */

p { color: blue; } p { color: red; }

Exempel Enkelt HTML- dokument ges en serie stilregler (framförallt typografi,