FAKTA - CSS

Objectives: En introduktion i stilmallar. Materialet går att läsa i en följd och att använda som uppslagsdel.

Background: Detta material använder jag i mina kurser inom webbteknologi på Mälardalens högskola. Eftersom de är allmänt efterfrågade så bjuder jag informationsarkitekts besökare på materialet också.

Audience: beginners-advanced

Keywords: cascading stylesheet, css, regler, inline, embedded, linked, pseudoklasser, cascading order, arv, läsarkommentarer

Date of publish: 2005-04-01

Author: johan.sundstrom@mdh.se

Innehåll

1 Introduktion
   1.1 Om CSS
   1.2 Bakgrund, regler
2 Tillämpning
   2.1 Inline
   2.2 Embedded
   2.3 Linked
   2.4 Stilomfattning
   2.5 Grupperingar
3 Pseudoklasserna Class och ID
4 Arv av stil
5 Flera stilinformationer, Cascading Order
6 Special stilar
   6.1 Länkar
   6.2 Första-X
7 CSS egenskaper
   7.1 Font egenskaper
   7.2 Color och Background egenskaper
   7.3 Text egenskaper
   7.4 Box egenskaper
   7.5 Klassifierings egenskaper
   7.6 Måttenheter
8 Länkar
9 Läsarkommentarer
   9.1 Kommentera själv

1 Introduktion

1.1 Om CSS

CSS är förkortning för Cascading Style Sheet.
Style Sheet blir stilmall på svenska.
Cascading i CSS betyder att flera stilmallar genomströmmar presentationen i en slutlig stil.
CSS kan tillämpas på XML och HTML.
CSS är en öppen standard och INTE proprietär (ägs och styrs i vinstdrivande intresse).
World Wide Web Consortium (W3C) är den ideella organisationen som utvecklar och sätter standarden för CSS.
Aktuell version är (april 2005) CSS 2.1 (Level 2 revision 1).
Tidigare version hette CSS 1.
CSS 3 är under utveckling (april 2005).
Trots att det finns en CSS standard behandlas dessa till viss del olika av webbläsartillverkare.

1.2 Bakgrund, regler

Syftet med CSS är att ytterligare påverka slutliga stilen i HTML- eller XML-dokument.
De HTML-koder som kan inrymmas inom <BODY>...</BODY> kan påverkas med CSS.
Den stilmall som finns inbyggd i alla webbläsare, kallas browser default.
I bl.a. Internet Explorer kan den inbyggda stilmallen (browser default) ersättas.
Genom att skriva nya stilregler förändrar man browser default.
Man kan aldrig hamna i situationen där ingen stil existerar, det ser browser default till.
Om en stildeklaration skrivits felaktigt, ignoreras det felaktiga av webbläsaren.
Internet Explorers browser default visar informationen och stilen <H1>Rubrik</H1> med:
- 20pixels toppmarginal
- text som fet, svart, 24pt Times New Roman
- styckeframmatning
- 20pixels bottenmarginal
I följande exempel på regel kallas H1 selector och { color: blue; } för declaration.

H1 { color: blue }

Kod 1: Exempel på selektor och deklaration

2 Tillämpning

Ursprunglig stil påverkas genom att man deklarerar regler där HTML-koder får stil.
CSS kan tillämpas på tre sätt:
- Inline, direkt på enskild HTML-kod
- Embedded, i en stildeklaration inom <HEAD>-delen
- Linked, genom länkad separat fil

2.1 Inline

...
<H1 STYLE="color: blue">Rubrik</H1>
...

Kod 2: Inline exempel som ändrar standard H1-färg till blå är

2.2 Embedded

...
<HEAD>
<STYLE>
H1 { color: blue }
</STYLE>
</HEAD>
...

Kod 3: Embedded exempel

2.3 Linked

Linked exemplet är en två-filslösning. I fil nr.1 stil.css står:

H1 { color: blue }

Kod 4: Linked exempel. Filen - stil.css

I fil nr.2 HTML-filen, länkar man till CSS-filen:

...
<HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="stil.css">
<HEAD>
...

Kod 5: Linked exempel. HTML-fil som länkas till stil.css

2.4 Stilomfattning

Inline-CSS påverkar endast aktuell HTML-kod och de som påverkas av arv.
Embedded-CSS påverkar alla berörda HTML-koder och de som påverkas av arv i aktuellt HTML-dokument.
Linked-CSS påverkar alla berörda HTML-koder och de som påverkas av arv i alla länkade HTML-dokument.

2.5 Grupperingar

Man strävar efter att skriva effektiv stildeklaration genom att deklarera liknande stil i samma grupp.

H1, H2, H3 { color: blue; }

Kod 6: Effektiv kommaseparerad gruppdeklaration

H1 { color: blue; font-size: 12pt; font-family: Arial; }

Kod 7: Grupperad deklaration:

H1 {
color: blue;
font-size: 12pt;
font-family: Arial;
}

Kod 8: Lång deklaration med radbrytningar

Font är ett exempel på stil med tillägg. Font är huvuddeklarationen -size, -style och -family är tillägg.
Skriv hellre:

P { font: bold 12pt Arial; }

Kod 9: Effektiv deklaration

...än...

P {font-weight: bold; font-size: 12pt; font-family: Arial; }

Kod 10: Ineffektiv deklaration

3 Pseudoklasserna Class och ID

Pseudo är ett annat ord för falskt, alltså "inte sant".
Pseudo-klasser används för att skapa grupp(er) av liknande stilar.
Man tilldelar en eller flera HTML-koder pseudo-klassers egenskaper.
Det finns två typer av pseudo-klasser:
- CLASS
- ID
Namnet CLASS antyder flera förekomster.
Namnet ID antyder unik förekomst.
CLASS används för att identifiera flera delar som rubriker, underrubriker etcetera i HTML-dokumentet.
ID används för att identifiera en unik del som rubrik, navigation, fot et cetera i HTML-dokumentet.
ID deklareras alltid med ett inledande # (number sign).
CLASS deklareras alltid med ett inledande . (punkt).
Pseudo-klasser är ett effektivt och vanligt använt sätt att tilldela samma stil på flera delar i ett eller flera dokument.
Istället för att upprepande skriva:

...
<STYLE>
b { color: blue; }
u { color: blue; }
i { color: blue; }
</STYLE>
...

Kod 11: Ineffektiv deklaration

...kan man istället skriva

...
<STYLE>
.blue { color: blue }
</STYLE>
...
<B class="blue">blå fet normal text</B>
<U class="blue">blå understruken text</U>
<I class="blue">blå kursiv text</U>
...

Kod 12: Effektiv deklaration

Med pseudo-klasser skapas i princip egna "HTML-element" som kan stilmärka delar i HTML-dokumentet.
<H1 ID="big"> eller <H1 ID="small"> presenterar samma tagg <H1> med olika stilar.

H1.big { font-size: 30pt }
H1.small { font-size: 15pt }

Kod 13: Stilvariationer på samma tagg

...
<STYLE>
.blafettext { color: blue; font-weight: bold }
</STYLE>
...
<H1 class="blafettext">Blå fet Rubrik 1</H1>
<P class="blafettext">Blå fet text...</P>
<H2 class="blafettext">Blå fet Rubrik 2</H2>
...
<TD class="blafettext">blå fet text i tabellcell</TD>
...

Kod 14: CLASS tillämpning:

...
<STYLE>
#sidtopp { color: red; text-align: center; }
</STYLE>
...
<H1 id="sidtopp">Röd centrerad Rubrik 1</H1>

Kod 15: ID tillämpning:

4 Arv av stil

Stilinformation ärvs från ovan satt stil på en HTML-tagg.
Stil som kan appliceras kan ärvas från andra omfattande taggars stil.
En horisontell linje <hr> kan t.ex. INTE ärva bakgrundsfärg eller fet stil.
En cell-tagg <td> ärver t.ex stil från rad-tagg <tr> som ärver från tabelltagg <table>.
<BODY>-taggens stil påverkar alla underliggande HTML-element.
<P> ärver t.ex. stil från <BODY>.

5 Flera stilinformationer, Cascading Order

Flera stilinformationer påverkar slutliga presentationen. Linked- embedded- inline- och webbläsarens inbyggda CSS.
Inline-stil vinner över embedded som vinner över linked som vinner över webbläsarens standard.
Med CSS-koden ...! important... kan den generella stilordningen åsidosättas.
Exemplet ger blå text i stycket.

<BODY STYLE="color: blue ! important">
...
<P STYLE="color: green">text</P>
...

Kod 16: Exempel på IMPORTANT

Programmerarens stil vinner över användarens stil som vinner över webbläsarens standardstil.
Vid konflikt med flera stilar gäller generellt att sista stilen vinner.
Om stilkonflikt råder mellan CLASS och ID kan man räkna ut vikten enligt följande:

Räkna antal ID-förekomster i selectorn (a)
Räkna antal CLASS-förekomster i selectorn (b)
Räkna antal tags i selectorn (c)

slå ihop talen (ej matematiskt) a, b och c.
Högst vikt avgör vem som vinner.

LI           {...} a=0 b=0 c=1 -> vikt = 1
UL LI        {...} a=0 b=0 c=2 -> vikt = 2
UL OL LI     {...} a=0 b=0 c=3 -> vikt = 3
LI.red       {...} a=0 b=1 c=1 -> vikt = 11
UL OL LI.red {...} a=0 b=1 c=3 -> vikt = 13
#xyz         {...} a=1 b=0 c=0 -> vikt = 100

Kod 17: Beräkna vinnande stil

6 Special stilar

6.1 Länkar

Länkar som besökts kan visas olika från de som ej besökts.
Med länkarnas pseudoklasser påverkas stilen på länkars olika status.
Pseudoklasserna inleds med : (kolontecken).
Länkar har pseudoklasserna
- :link - Stil för länk
- :visited - Stil för en besökt länk
Länkar har också dynamiska pseudoklasser.
- :hover - Stil vid hovring
- :active - Stil mellan tryck- och släpp på länk
- :focus - Stil vid fokus (kan aktiveras med Enter-tangenten)

a:link    { color: red }    /* obesökt länk */
a:visited { color: blue }   /* besökt länk  */
a:hover   { color: yellow } /* länk hovring */
a:active { color: lime }   /* aktiv länk   */

Kod 18: Exempel på länkars pseudoklasser

I exemplet ovan måste arv beaktas. a:hover ligger efter a:link.

6.2 Första-X

Pseudoelementet first-line används för att sätta stil på första raden.

...
<STYLE>
p:first-line { color: red; }
</STYLE>
...
<P>Första raden visas i rött</P>
...

Kod 19: Exempel med stil på första raden

Pseudoelementet first-letter används för att sätta stil på första tecknet.

...
<STYLE>
p:first-letter { color: red; }
</STYLE>
...
<P>Första tecknet visas i rött</P>
...

Kod 20: Exempel med stil på första tecknet

7 CSS egenskaper

7.1 Font egenskaper

7.2 Color och Background egenskaper

7.3 Text egenskaper

7.4 Box egenskaper

7.5 Klassifierings egenskaper

7.6 Måttenheter

8 Länkar

9 Läsarkommentarer

[ henrik@{dold} skrev den 10/10/2006: ]
Hej. Kan man kombinera pseudo-klass med klasser? Dvs - jag har definierat en klass som jag sedan vill lägga en annan egenskap på: BODY { font-family: Verdana; } .HelpUserText { background-color:#323232; } .HelpUserText:first-letter { font-size:xx-large; } .HelpUserText:first-line { left:-20 } Det vill säga jag vill ha en stor bokstav på första-raden i mina hjälp-texter men ingen annanstans och jag vill inte behöva göra mer än att ange klass för den texten.

[ johan.sundstrom@informationsarkitekt.se skrev den 10/29/2006: ]
Intressant tanke. Mitt försöag är att du räknar upp klasserna komma-separerade innan deklarationen. Fungerar det?

9.1 Kommentera själv

Här finns möjlighet att komplettera informationen, ställa frågor eller kommentera detta dokuments målgruppsanpassning eller utformning.
Länkar publiceras inte.