CSS introduktion

Nödvändiga grundläggande kunskaper

Innan du fortsätter, behöver du ha en grundläggande förståelse för följande kunskaper:

  • HTML
  • XHTML

Om du vill lära dig dessa projekt först, vänligen Förstasidan Besök relaterade tutorials.

CSS översikt

  • CSS betyder kaskadstilar (Cascading Style Shets)
  • Stildefinitionerhur de ska visas HTML-element
  • Stilar lagras vanligtvisStilmatriseri
  • Att lägga till stilar i HTML 4.0 var för attlösa problemet med att separera innehåll och presentation
  • Externt stilarkkan öka produktiviteten avsevärt
  • Externa stilmatriser lagras vanligtvis CSS-fileri
  • flera stildefinitioner kankaskadFör att

Stilar löser ett allmänt problem

HTML-taggar var ursprungligen utformade för att definiera dokumentinnehåll. Genom att använda <h1>, <p>, <table> och liknande taggar var intentionen med HTML att uttrycka information som 'detta är en rubrik', 'detta är en paragraf', 'detta är en tabell'. Dokumentlayouten skulle sedan hanteras av webbläsaren utan att använda några formateringstaggar.

Eftersom de två huvudsakliga webbläsarna (Netscape och Internet Explorer) ständigt lägger till nya HTML-taggar och attribut (t.ex. fontettikoner och färgattribut) till HTML-standarden, har det blivit allt svårare att skapa webbplatser där dokumentinnehållet är klart åtskilt från dokumentets presentationsskikt.

För att lösa detta problem tog World Wide Web Consortium (W3C), denna icke-vinstdrivna standardiseringsallians, över ansvaret för HTML-standardiseringen och skapade stilar (Style) utöver HTML 4.0.

Alla ledande webbläsare stöder kaskadstilar

Stilmatriser ökar kraftigt produktiviteten

Stilmatriser definierar hur HTML-element ska visas, på samma sätt som fонтettikoner och färgattribut gjorde i HTML 3.2. Stilar lagras vanligtvis i externa .css-filer. Genom att endast redigera en enkel CSS-dokument har du förmågan att samtidigt ändra layout och utseende för alla sidor på webbplatsen.

Eftersom CSS tillåter att samtidigt kontrollera stilen och layouten för flera sidor, kan det anses vara en branschbrytning inom WEB-design. Som webbutvecklare kan du definiera stilar för varje HTML-element och tillämpa dem på så många sidor som du vill. För att genomföra en global uppdatering, behöver du bara ändra stilen, och alla element på webbplatsen kommer automatiskt att uppdateras.

Flera stilar kaskaderas till en

Stilarken tillåter att stylinformation specificeras på flera sätt. Stilar kan specificeras i en enskild HTML-element, i huvudelementet för HTML-sidan, eller i en extern CSS-fil. Det är också möjligt att hänvisa till flera externa stilark inom samma HTML-dokument.

Kaskadordning

När samma HTML-element definieras av flera stilar, vilken stil används då?

I allmänhet läggs alla stilar enligt följande regler på en ny virtuell stiltabell, där numret 4 har högsta prioritet.

  1. Webbläsarens standardinställningar
  2. Externt stilark
  3. Intern stilark (placeras inom <head>-taggen)
  4. Inline-stilar (inuti HTML-element)

Därför har inline-stilar (inuti HTML-element) högsta prioritet, vilket innebär att de går före följande stildeklarationer: Stilar i <head>-taggen, stilar i externa stilark, eller stilar i webbläsaren (standardvärde).