FAKTA - CSS

Audience: beginner-advanced

Objectives: En introduktion till CSS. Behandla följande som fakta.

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

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.
  • Rekommenderad version är (april 2008) CSS 1, men i praktiken används versionen CSS 2.1 (Level 2 revision 1) som har status working draft.
  • CSS 3 är under utveckling (apr 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-element 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 den av webbläsaren.
  • Internet Explorers browser default visar informationen och stilen <H1>Rubrik</H1> med:
    • toppmarginal på 0.67em (elastiskt mått, 67% av standard marginalsavstånd)
    • text som fet, svart, 2em (dubbla standardhöjden) Times New Roman
    • text placerad i ett block (innebär att inget kan skrivas bakom)
    • 0 pixels bottenmarginal.
  • I nedanstående exempel på ny stilregel är H1-elementet en selector och { color: blue; } är dess 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: Exempel på Inline-CSS som ändrar standard H1-färg till blå är

2.2 Embedded

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

Kod 3: Exempel på Embedded-CSS

2.3 Linked

Linked exemplet är en två-filslösning.

I fil nr.1 stil.css står:

H1 { color: blue }

Kod 4: Exempel på Linked-CSS. 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>
<H1>Rubrik</H1>
...

Kod 5: Exempel på Linked-CSS. HTML-fil som länkar till stil.css

  • En linked stilmall kan lagras varsomhelst i filstrukturen om korrekta sökvägarna pekar rätt.

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.
  • Man kan avdela flera deklarationer med semikolon.
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

  • CSS-elementet Font är ett exempel ett shorthand element, en "huvuddeklaration" och flera "egenskaper".
  • Shorthand elementet Font tillåter att man inleder med font och fortsätter med valfria delar av -style, -variant, -weight, -size, -line-height och -family.
  • Skriv därför 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 fiktiv.
  • Pseudo-klasser används för att skapa grupp(er) av liknande stilar.
  • Man tilldelar en eller flera HTML-koder pseudo-klassers egenskaper.
  • Man kan säga att man hittar på ett nytt eget HTML-element som då blir möjligt att stilbelägga i CSS.
  • 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 i HTML-dokumentet som rubriker, underrubriker etcetera.
  • ID används för att identifiera en unik del i HTML-dokumentet som en rubrik, en navigation, en fot etcetera.
  • ID deklareras alltid i CSS med ett inledande # (number sign).
  • CLASS deklareras alltid med ett inledande . (punkt).
  • CLASS och ID är ett effektivt och vanligt använt sätt att sätta stil på 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 text</B>
...
<TD class="blue">blå text i tabellcell</TD>
 

Kod 12: Effektiv deklaration

  • Olika stilar på H1 kan skapas med <H1 class="big"> eller <H1 class="small">
...
<STYLE>
H1.big { font-size: 2em; }
H1.small { font-size: 1em }
</STYLE>
</HEAD>
...
<H1 class="big">Rubrik med 2em</H1>
<H1 class="small">Rubrik med 1em</H1>
...

Följande är inte tillåtet, då ID big används två gånger:

...
<STYLE>
#big { font-size: 2em; }
#small { font-size: 1em; }
</STYLE>
</HEAD>
...
<H1 id="big">Rubrik med 2em</H1>
<H1 id="big">Rubrik med 2em</H1>
...

4 Arv av stil

  • HTML-element ärver egenskaper från andra omfattande taggars stil.
  • En tabellcell-tagg ärver t.ex stil från tabellrad-tagg som ärver från tabell-tagg, förutsatt att den kan ärva den egenskapen
  • Stilinformation ärvs från ovan satt stil på en HTML-tagg.
  • <BODY>-taggens stil påverkar alla underliggande HTML-element.
  • <P> ärver t.ex. stil från <BODY>.
  • En erfaren CSS-kodare vet effekterna av arv och sätter därför lämpliga stildeklarationer högt i nivå så att dessa kan ärvas av andra.

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 (browser default).
  • 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: Blå deklaration vinner över grön

  • 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:

    a = antal ID-förekomster i selectorn
    b = antal CLASS-förekomster i selectorn
    c = antal tags i selectorn

    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 = 001
UL LI        {...} a=0 b=0 c=2 -> vikt = 002
UL OL LI     {...} a=0 b=0 c=3 -> vikt = 003
LI.red       {...} a=0 b=1 c=1 -> vikt = 011
UL OL LI.red {...} a=0 b=1 c=3 -> vikt = 013
#xyz         {...} a=1 b=0 c=0 -> vikt = 100
  • I ovanstående exempel är cascading order som följer:
#xyz         {...} a=1 b=0 c=0 -> vikt = 100
UL OL LI.red {...} a=0 b=1 c=3 -> vikt = 013
LI.red       {...} a=0 b=1 c=1 -> vikt = 011
UL OL LI     {...} a=0 b=0 c=3 -> vikt = 003
UL LI        {...} a=0 b=0 c=2 -> vikt = 002
LI           {...} a=0 b=0 c=1 -> vikt = 001

6 CSS grupper

6. 1 Font egenskaper

6.2 Color och Background egenskaper

6.3 Text egenskaper

6.4 Box egenskaper

6.5 Klassifierings egenskaper

6.6 Måttenheter

7 Länkar

8 Läsarkommentarer

8.1 Kommentera själv

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

Kommentar:

Namn (frivilligt)

Publicerad av:
Johan Sundström
Page updated 3/20/2014 11:56:55 AM
  • Mälardalens högskola |
  • Box 883 |
  • 721 23 Västerås/Eskilstuna |
  • 021-10 13 00, 016-15 36 00 |
  • info@mdh.se |
  • Om webbplatsen