CSS grundläggande tutorial

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 Hem Besök relaterade tutorials.

CSS översikt
  • CSS står för kaskadstilar (Cascading Style Shets)
  • StildefinitionerHur man visar HTML-element
  • Stilarkiv lagras vanligtvisStilarkivI
  • Att lägga till stilarkiv i HTML 4.0 var för attLösa problemet med att separera innehåll och presentation
  • Externt stilarkKan öka effektiviteten avsevärt
  • Externa stilarkiv lagras vanligtvis CSS-filerI
  • Flera stildefinitioner kanKaskadFör att

Stil löser ett allmänt problem

HTML-taggar var ursprungligen utformade för att definiera dokumentinnehåll. Genom att använda taggar som <h1>, <p>, <table> hoppades HTML att användas för att uttrycka information som

Eftersom de två huvudsakliga webbläsarna (Netscape och Internet Explorer) ständigt lägger till nya HTML-taggar och attribut (t.ex. färg- och fontattribut) till HTML-specifikationen, har det blivit allt svårare att skapa webbplatser där dokumentinnehållet klart är oberoende av dokumentets presentationslager.

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 STYLES (stil) utöver HTML 4.0.

Alla ledande webbläsare stöder kaskadstilar

Stilarkiv ökar effektiviteten avsevärt

Stilarkiv definierar hur HTML-element visar sig, till exempel färg- och fontattribut i HTML 3.2-stilar lagras ofta i externa .css-filer. Genom att endast redigera en enkel CSS-dokument har du förmågan att förändra utseendet på layouten för alla sidor på din webbplats samtidigt.

Eftersom CSS tillåter att samtidigt kontrollera stilar och layout för flera sidor, kan CSS räknas som en branschomvälvande innovation inom WEB-design. Som webbplatsutvecklare kan du definiera stilar för varje HTML-element och tillämpa dem på hur många sidor du vill. För att genomföra globala förändringar behöver du endast ändra stilen, och alla element på webbplatsen kommer automatiskt att uppdateras.

Flera stilar kraschas till en

Stilark tillåter att definiera stilinformation på flera sätt. Stilar kan definieras i en enskild HTML-element, i huvudet av HTML-sidan, eller i en extern CSS-fil. Det är också möjligt att hänvisa till flera externa stilark inom en enda HTML-dokument.

Kraschat ordning

När samma HTML-element definieras av mer än en stil, vilken stil används då?

Generellt sett kommer alla stilar att kraschat till en ny virtuell stiltabell enligt följande regler, där numret 4 har högsta prioritet.

  1. Webbläsarens standardinställningar
  2. Externt stilark
  3. Internt stilark (placerat inuti <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: styladeklarationer i <head>-taggen, externa stilark, eller stildeklarationer i webbläsaren (standardvärde).