Formulering av väljare i CSS

CSS-mallI en CSS-fil används väljare för att beskriva vilket element på webbplatsen som ska formges.

Väljare kan formuleras på olika sätt för att komma åt rätt element, samt rätt element beroende på sammanhang.

 

Enkel väljare

Den enklast formulerade väljaren är det namn som också taggen i HTML-dokumntet bär. T.ex. <p> (stycke). Skillnaden är att du i CSS-filen utesluter avgränsningstecknen ”<” och ”>”.

p { color:#aaa }

Klassindela dina element

Med ovanstående exempel, formges elementet på samma sätt oavsett var det förekommer i sidstrukturen. Genom att klassindela elementet på de ställen där det ska formges annorlunda, kan du undvika att det blir lika precis överallt. Skiljetecknet punkt, används alltid strax före namnet på en klass.

I sidstrukturen (html):

<p class="ingress">Bla bla...</p>

I stilmallen:

p.ingress {  }

Vad man ofta inte tänker på eller känner till, är att man får använda två eller flera klasser till ett och samma element. Dessa anges då med mellanslag mellan sig.

<p class="ingress anfang">

Kom åt element genom hierarkisk information

Ett annat sätt att komma åt element på speciella ställen är att unyttja informationen om var i strukturen de ligger. Låt oss säga att du vill gör något med listelementen i en lista som ligger i en sidospalt. Det skulle då kunna se ut något i stil med nedanstående i stilmallen. Skiljetecknet staket/fyrkant, används strax före namn som är ett id, d.v.s. namn du använt till attributet id i (x)html-koden.

div#sidebar ul.meny li {  }

Om man läser väljarna bakifrån får man fram att stilreglerna kommer att gälla enbart listelement i listor med klassen ”meny” som ligger i divisionen med id ”sidebar”.

Se upp med skiljetecken

Det gäller också att vara uppmärksam på hur man använder de olika skiljetecknen i CSS. Se t.ex. upp med skillnaden på de två raderna nedan. Det lilla mellanslaget efter div gör skillnaden.

div.nav a
div .nav a

Rad 1 säger att stilreglerna gäller länkar i alla divisioner med klassen ”nav”. Rad 2 säger att reglerna gäller länkar i vilket element som helst med klassen ”nav” som ligger i elementet ”div”.

I en och samma (x)html-sida får ett id-namn förekomma endast en gång, medan klassnamn kan användas flera gånger i samma dokument. Bra att tänka på när man bygger sin struktur.

Tid 2010-02-26 (8:20) Kategori Webbdesign och webbutveckling

  1. En sidfot som alltid sitter längst ner
  2. Spalter sida vid sida med CSS
  3. Vad du kan göra med listor i CSS
  4. Formge länkar i vågrät meny
  5. Min första HTML-bok

Dela med dig:

Kommentera inlägget