CSS introduction

Vad är CSS?

  • CSS är叠层样式表* (Cascading Style Ssheets)
  • CSS beskriverHur HTML-element visas på skärm, papper eller annat medium
  • CSS sparade mycket arbete。Det kan kontrollera layouten för flera webbsidor samtidigt
  • Externa stilar lagras i CSS-fil中

*:Också kallad kaskadstilar.

CSS-demonstration - en HTML-sida - flera stilar!

Nedan är en HTML-sida som erbjuder fyra olika stilar. Klicka på länkarna till stilar nedan för att se olika stilar:

Varför använda CSS?

CSS används för att definiera webbsidans stil, inklusive design och layout för olika enheter och skärmskal.

CSS exempel

body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}

Prova själv

CSS löste ett stort problem

HTML aldrig hade för avsikt att innehålla taggar för att formattera webbsidor!

Syftet med att skapa HTML ärBeskriv webbsidaninnehåll, till exempel:

<h1>Detta är en rubrik.</h1>
<p>Detta är en paragraf.</p>

Efter att ha lagt till etiketter som <font> och färgattribut till HTML 3.2-standarden började mardrömmen för webbutvecklare. Utvecklingen av stora webbplatser involverade att lägga till typ- och färginformation till varje sida, vilket utvecklades till en lång och dyr process.

För att lösa detta problem skapade World Wide Web Consortium (W3C) CSS.

CSS tog bort stilformat från HTML-sidor!

Om du inte vet vad HTML är, rekommenderas att du läser HTML-tutorial.

CSS sparar mycket arbete!

Stildefinitioner lagras vanligtvis i externa .css-filer.

Genom att använda externa stylesheets behöver du endast ändra en fil för att ändra hela webbplatsens utseende!