CSS Opbyg.

CSS er et 'programmeringssprog' der kun kan anvendes som tilføjelser / add-on's til HTML-tags. Mens HTML styrer en sides strukturelle opbygning og placeringen af dens indhold styrer CSS hvordan strukturen og indholdet skal vises / se ud.

Hver enkelt CSS kode består af en selektor og en eller flere deklarationer.

SELEKTORER

En selektor kan være et element (et HTML tag) eller et brugerdefineret ord. Elementer bruges kun i beskedent omfang. Den kan have et prefix og / eller et suffix.

Prefix

Selektorer kan have 4 forskellige prefix:

• * - stjerne
  Påvirker alle elementer der kan påvirkes med den/de tilknyttede deklarationer.
  Kaldes universel selektor.
  Anvendes især til at 'nulstille' default deklarationer sat af browseren.
  * {margin: 0; padding: 0;}
• ingen
  Kan kun anvendes for elementer. Alle forekomster af det pågældende element bliver stylet med denne selektor - medmindre der sker individuel ooverstyring med et af de andre 2 prefix.
  Ved at placere en af operatorerne *, >, + eller ~ mellem 2 elementer kan endvidere opnås forskellige effekter.
  Kaldes også elementselektor.
  h1 {font-size: 30px;}
• . - punktum
  Klasse-selektor
  Kan anvendes for selektorer med egen navngivning
  Kan anvendes et ubegrænset antal gange på en enkelt HTML-side.
  .bghvid {background-color: white;}
• # - 'havelåge'
  ID-selektor.
  Kan anvendes for selektorer med egen navngivning
  Kan kun anvendes en gang på en enkelt HTML-side (incl. indlejringer fra include-filer).
  #header {background-color: forestgreen;}

Selektor

Selve selektoren kan opbygges som:
- enkeltstående
- indlejrede (nested)
- grupperede (grouped)
- kombinerede

• ENKELTSTÅENDE
  p {deklaration}
  #top {deklarationer}
  
  
• INDLEJREDE
  2 eller flere selektorer (incl. deres evt. prefix) kan indlejres i hinanden ved at placere dem efter hinanden uden , som separator. De vil da udgøre en sti således at tilstedeværelsen af den første selektor i HTML-koden vil automatisk knytte deklarationerne til forekomsten af den sidste selektor i HTML-koden.
  
  Indlejringer kan foretages på 3 ferskellige måder;
  • Generelle indlejringer
    2 eller flere selektoridenter efter hinanden uden separator.
    Blank svarer til logisk AND
    Rækkefølgen af selektorer anvendes som en sti, der begynder ved den første selektor. Deklarationerne benyttes af den sidste selektor.
    kan bestå af elementer og / egne selektorer i aktuelt relevant sekvens
    #top h1 {deklarationer}
    #top p {deklarationer}
    p #top {deklarationer}
    
    
  • Child / sibling
    To elementer i et child eller sibling forhold kan indlejres i hinanden på 3 forskellige måder ved at indsætte +, ~ eller > imellem dem.
    
    
  • 2 elementer
    To elementer kan indlejres i hinanden på 4 forskellige specielle måder ved at indsætte *, >, + eller ~ imellem dem.
    
    
• GRUPPEREDE
  2 eller flere selektoridenter efter hinanden med komma som separator. Anvendes som separate selektorer men med tilknyttet samme deklarationer.
  Komma svarer til logisk OR
  kan bestå af elementer og / egne selektorer i valgfri sekvens
  td, th {deklarationer}
  h2, .foo01, .foo02 {deklarationer}
  
  
• KOMBINATIONER
  #foo td, #foo th {deklarationer}
  .foo p, .foo ul {deklarationer}

Suffix

Efter identen for en selektor kan der tilknyttes parametre, pseudo tags eller pseudo klasser som suffix. Dermed kan foretages en yderligere målretning af selektoren.

Parametre

Nogle af parametrene i en række tags (f.eks a, img og input) kan styres med css via selektoren [].
img[alt]{}
img[src$="gif"]{}
img[src*="abc"]{}
input[type="text"] {}

PSEUDO ....

Ved hjælp af separatoren :: kan en række pseudo tags og pseudo classes tilknyttes relevante selektorer som 'add-on's.

Alle pseudo.... er adskilt fra selektorens ident med :: som separator.

Pseudo elementer

<p>-tags kan editeres med pseudo taggene: ::first-line, ::first-letter, ::before og ::after.
p::first-letter {}
a::after{}

Pseudo klasser

23 forskellige pseudo klasser - fordelt på 6 grupper - kan bruges sammen med et bredt spekter af tags:

• Dynamiske
  ::link, ::visited, ::hover, ::active og ::focus.
  
  
• Target
  ::target.
  
  
• Sprog
  ::lang(sprog)
  
  
• Bruger interface
  ::enabled, ::disabled og ::checked
  
  
• Strukturelle
  ::root, ::empty, ::first-child, ::last-child, ::only-child, ::nth-child(n), ::nth-last-child(n), ::first-of-type, ::last-of-type, ::only-of-type, ::nth-of-type og ::nth-last-of-type(n).
  
  
• Negation
  ::net(selektor)
  
  

DEKLARATIONER

En deklaration består af et parameter (property) og en værdi. parametre afsluttes med : og værdier med ;. Der kan være et ubegrænset antal deklarationer knyttet til en selektor. Samtlige deklarationer knyttet til en selektor skal indlejres i en enkelt {}.

Talt op på det mest detajlerede niveau er der flere hundrede parametre. For mange af dem gør det sig dog gældende, at nogle stykker er varianter over samme tema. Tages højde derfor falder antallet af forskellige parametre betydeligt.

Der synes ikke at være noget sted, hvor man kan finde en oversigt over samtlige deklarationer. To gode steder synes at være hhv. rapporterne fra CSS3 arbejdsgrupperne og W3schools. Medvirkende til denne situation er også, at parametre fortløbende bliver færdigdefinerede i de respektive arbejdsgrupper. Derudover vil der være variation i hvornår den enkelte deklaration er indarbejdet i den enkelte browser. Endvidere kan det ind imellem tage nogen tid, før browserproducenterne bliver enige om, hvordan beskrivelsen af et parameter skal udlægges

Opbevaring / hentning

CSS-data kan opbevares / hentes på 4 forskellige måder: