CSS introduktion

Nødvendige grundlæggende viden

Før du fortsætter med at lære, skal du have en grundlæggende forståelse af følgende viden:

  • HTML
  • XHTML

Hvis du ønsker at lære disse projekter først, så Forside Besøg relaterede tutorials.

CSS oversigt

  • CSS står for kaskadestilblade (Cascading Style Sheets)
  • StildefinitionerHvordan de vises HTML-elementer
  • Stiler gemmes normalt iStilbladeI
  • At tilføje stiler til HTML 4.0 var for atLøse problemet med adskillelse af indhold og præsentation
  • Eksternt stilarkKan betydeligt øge arbejds effektiviteten
  • Eksterne stilblade gemmes normalt i CSS-filerI
  • Flere stildefinitioner kanKaskaderFor at

Stilene løser et almindeligt problem

HTML tags blev oprindeligt designet til at definere dokumentindhold. Ved at bruge <h1>, <p>, <table> og lignende tags var intentionen med HTML at udtrykke information som 'dette er en titel', 'dette er en afsnit', 'dette er en tabel'. Samtidig blev dokumentlayoutet udført af browseren uden brug af nogen formateringstag.

På grund af at de to vigtigste browsere (Netscape og Internet Explorer) løbende tilføjer nye HTML tags og egenskaber (f.eks. fontetag og farveegenskaber) til HTML-specifikationen, bliver det sværere at skabe et websted, hvor dokumentindholdet er klart adskilt fra dokumentets præsentationsskik.

For at løse dette problem tagged World Wide Web Consortium (W3C), denne ikke-kommercielle standardiseringsalliance, ansvaret for HTML-standardiseringen og skabte (Style) uden for HTML 4.0.

Alle de førende browsere understøtter kaskadestilblade.

Stilblade øger betydeligt arbejds effektiviteten

Stilblade definerer, hvordan HTML-elementer vises, på samme måde som HTML 3.2's fontetag og farveegenskaber fungerer. Stiler gemmes normalt i eksterne .css-filer. Ved kun at redigere en simpel CSS-dokument, får du mulighed for at ændre layout og udseende for alle sider på dit websted samtidig.

Takket være muligheten til samtidig å kontrollere stilen og layouten på flere sider, kan CSS anses som en bruddskikkelse inden for WEB-design. Som webudvikler kan du definere stiler for hver HTML-element og anvende dem på så mange sider som du ønsker. Hvis du vil opdatere globalt, skal du kun ændre stilen, og alle elementer på websiden vil automatisk opdateres.

Flere stiler vil lagde sig over i en

Stilark tillader at specificere stilinformation på flere måder. Stiler kan specificeres i en enkelt HTML element, i HTML-dokumentets hovedelement eller i en ekstern CSS-fil. Det er endda muligt at referere til flere eksterne stilark inden for samme HTML-dokument.

Lagde rækkefølge

Hvilken stil vil blive brugt, når den samme HTML element defineres af flere stiler?

Generelt vil alle stiler efterfølgende lægges lagt over en ny virtuel stiltablet, hvor tallet 4 har højeste prioritet.

  1. Browser standardindstilling
  2. Eksternt stilark
  3. Intern stilark (placeret inde i <head>-etiketten)
  4. Inline styling (inde i HTML elementer)

Derfor har inline styling (inde i HTML elementer) højeste prioritet, hvilket betyder, at det vil have fortrins over følgende stildeklarationer: Stileklarationer i <head>-etiketten, i eksterne stilark eller i browserens stil (standardværdi).