Tre sätt att använda css

Flertalet har med all säkerhet stött på dessa tre uttryck - inline, embedded och external. Dock är osäkerheten hög för vad detta egentligen innebär. På vilket vis dessa kan ta sitt uttryck när det handlar om css tänker jag nu beskriva.

Beträffande inline css så handlar det om att skriva in dina cssvärden direkt i htmlkoden.

  1. <p style="margin: 20px;font-size:1em; font-color:#666;font-family:arial, verdana;">här kommer texten</p>

Embedded css är inget mindre än när du infogar din css i dokumentets head.

  1. <style type="text/css"></style>
  2. p {
  3. margin: 20px;
  4. font-size:1em;
  5. font-color:#666;
  6. font-family:arial, verdana;}

External css är css vilken ligger utanför själva layouten men som kallas via en länk i head.

  1. <link href="stylel.css" rel="stylesheet" type="text/css" />

Om du då i denna använder shorthand declaration ser dina css värden ut så här.

  1. body {font: 1em arial,verdana; margin: 20px; color:#666;}

Vilket alternativ är att föredra?

Inline css styr i detta fall endast det specifika stycket vilket innebär att du för varje stycke måste infoga ditt inlineelement om du vill att texten på alla dina stycken ska se likadan ut. Det innebär också om du gör om din sida och vill ändra på texten så måste du göra det precis överallt. Det tar mycket tid och arbete i anspråk. Därför är detta alternativ endast att föredra om det är något enskilt stycke du vill lyfta fram.

Embedded css styr hela den specifika sidan - men inte mer. Det innebär att du måste infoga koden i varje sidhuvud på varenda sida. Å andra sidan kan du med detta alternativ förändra en av sidorna men inte de andra - om du vill det.

External css är det bästa alternativet eftersom det finns beläget utanför själva dokumentet. Du slipper dessutom en massa css i varje dokument och har således delat på presentation och struktur redan här. Sen slipper du ju en massa merarbete eftersom det enbart är i din stilmall du gör dina ändringar vilken sedan styr hela siten.

Skriv ut!
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...