Lektioner

HTML och CSS: hierarki och kaskad

Hierarki i HTML

HTML kan beskrivas som ett träd, mer exakt ett släktträd som har att göra med var olika element befinner sig i strukturen. Till exempel är både <head> och <body> barn (child) till föräldern (parent) <html>. De båda barnen som har samma förälder är syskon (siblings) och så vidare.

Element som härstammar från ett annat element är alla ättlingar (descendants) till sin förfader (ancestor). Element som är syskon har också en plats före (preceding) eller efter (following) varandra i syskonskaran.

Ett HTML-dokument, som

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Min hemsida</title>
  </head>
  <body>
    <h1>Min hemsida</h1>
    <p>Nu ska jag berätta om mina favoritdjur.</p>
    <ol>
      <li>Älg</li>
      <li>Iller</li>
      <li>Dammkvalster</li>
    </ol>
  </body>
</html>
kan sägas motsvara ett släktträd, eller mer korrekt, dokumentträd som skulle se ut ungefär som följer:

Detta påverkar CSS så att egenskaper ärvs, förfaderns egenskap ärvs till ättlingen om inte ättlingen har getts en annan, motsvarande egenskap, som då gäller i stället.

Om man känner till detta blir det enklare att förstå hur alla reglerna i din stilmall hänger ihop med varandra.

Kaskaden

CSS betyder ju Cascading Style Sheets. Style sheet kan vi begripa vad det är, men vad är det för kaskad namnet syftar på?

Du kan ju ha flera stilmallar som tillämpas på din HTML-sida. Webbläsaren själv innehåller stilmallar, det är dessa du ser när du inte har lagt till någon själv. Användaren kan ha egna stilmallar kopplade till webbläsaren av olika skäl. Och sedan har vi också de stilmallar du som skapare av sajten lägger till (du kan ha flera).

Kaskaden är själva beskrivningen av vilken prioritet dessa har och ser ut som följer:

  1. Webbläsarens inbyggda regler
  2. Användarens egna regler
  3. Upphovsmannens regler
  4. Användarens regler som är utmärkta som viktiga (important)
  5. Upphovsmannens regler som är utmärkta som viktiga (important)

Om regler försöker styra samma sak gäller alltså att fem i denna lista har företräde före fyra, som har företräde före tre… och så vidare. Kaskaden rinner alltså neråt i hierarkin.

Vidare gäller att en mer specifik väljare har företräde före en mer allmän:

h1.minklass {}
har alltså företräde före
h1 {}
gällande elementet
<h1 class="minklass">

Om en regel skall få extra företräde, kan man märka den som viktig, detta görs genom att du lägger till en egenskap som heter !important.

h1 {!important}
får alltså företräde före
h1 {}

Var sparsam med detta. Om en användare använder sig av !important för att konkurrera ut dina regler kan man tänka sig att denna har gjort detta av en anledning, som att han eller hon behöver större bokstäver eller högre kontrast om han eller hon till exempel har ett synfel.

CSS Shorthand

En smart sak i CSS ör möjligheten att skriva shorthand, att förkorta och sammanfatta egenskaper. Detta sparar inte bara in tid och tangentbordsslitage, utan kan faktiskt medverka till att webbsidor laddas snabbare.

Skillnaden i hämtnings- och lästid är dock marginell, den stora vinsten med shorthand är den att CSS:en går snabbare att skriva och att det ger en mer överblickbar kod.

Om du tittar på W3C:s lista över CSS-egenskaper ser du att vissa egenskaper är sammansatta ord med bindestreck i. Alla dessa kan kortas ned. border-top-color i exemplet nedan är att se som en precisering av exakt vilken kantlinje det gäller.

I stället för att skriva till exempel:

#meny {
border-top-color: #ff0000;
border-top-width: 4px;
border-top-style: solid;
border-right-color: #ff0000;
border-right-width: 4px;
border-right-style: solid;
border-bottom-color: #ff0000;
border-bottom-width: 4px;
border-bottom-style: solid;
border-left-color: #ff0000;
border-left-width: 4px;
border-left-style: solid
}

så kan du sammanfatta detta som

#meny {
border-color: #ff0000;
border-width: 4px;
border-style: solid;
}
Eller rent av till
#meny {
border: #ff0000 4px solid;
}

Alla tre exemplen ovan kommer att ge id:t meny en röd, 4 pixlar bred kantlinje på all sidor. Alla fyra sätten är också korrekta, men det sista innebär mycket mindre text att skriva än det första exemplet.

...och så här ser det ut

En liten varning: All shorthand fungerar inte alltid, ibland måste man vara specifik och dela upp sina regler. Jag föreslår att du börjar med att försöka sammanfatta så mycket som möjligt, och dela upp reglerna om du stöter på problem, men du bestämmer själv vad du tycker känns mest bekvämt, som sagt: samtliga exempel ovan är formellt korrekta.

Uppgift shorthand

Läs igenom den CSS du producerat och se efter om du kan korta ned och effektivisera din CSS. Låt också någon kamrat kolla och komma med förslag. Skriv kodkommentarer som förklarar dina ändringar.