CSS3-logo   CSS Opbyg.



css selector 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:


EksterntEkstern 'xx.css' fil. F.eks. Bootstrap.
Kan enten bruges via eksternt link, eller downloades og bruges som enhver anden lokal fil.
<link rel="stylesheet" type="text/css" href="mystyle.css">
LokaltI fil på eget lokalnet 'xx.css' fil
Tekstfil, der skal have .css som suffix.
<link rel="stylesheet" type="text/css" href="mystyle.css">
InternI det enkelte dokument <style>
.aaa { a:b;}
.bbb { a:b; c:d;}
</style>
InlineI den enkelte html-tag < html-tag style="a:b;c:d;">




















x
x