Oavsett om du vet det eller inte, utnyttjar du CSS nästan varje gång du öppnar en webbläsare. Det är mallsystemet som används av nästan alla moderna webbplatser för att ge sidor deras layout och utseende. Vissa av er kanske tänker " Jag har gjort webbplatser tidigare och det var lätt, jag behövde aldrig någon CSS. "Och det är sant. Du behöver inte CSS för att göra en snygg och funktionell webbplats, men chansen är bra att din webbplats kunde ha varit mindre, renare, mer konsekvent och bättre om du hade valt CSS från början. Idag kommer vi att visa dig själva grunderna för vad CSS kan göra. Den här guiden kommer inte att ta dig från en nybörjare till prisbelönta webbdesigner, men det hjälper dig att förstå hur CSS fungerar och hur det kan ge dig en massa tid och ansträngning.

snabb överblick

CSS (Cascading Style Sheet) är tänkt att göra en sak: hantera presentationen av din webbplats. Det låter enkelt, men håll det i åtanke när vi fortsätter. En viktig sak att ta bort från det faktum är att presentationen är INTE jobbet för HTML. HTML definierar strukturen på din sida (vad är en rubrik, vad är en sidfot etc). CSS tar den strukturen och gör allt arbete med hur den strukturen presenteras .

Fel väg

För att ge dig en uppfattning om vad CSS är tänkt att fixa, ta en titt på denna HTML-kod:

 Min hemsida 
Största webbplatsen någonsin är under utveckling.


Utlänningar har invaderat också.


Vilket visas i din webbläsare som något liknande:

Det finns ett antal potentiella problem här. Till att börja med placerar det teckensnitts- och färginformation varje gång en ny rubrik eller punkt ritas. Varje nytt objekt på webbplatsen behöver identiska teckensnitt och färgdefinitioner, även om de är desamma för varje rubrik och stycke. Detta uppgår till massor av slösad bandbredd om du har många poster.

Nästa är problemet med skalbarhet. Om du har 100 poster på denna nyhetssida, och du bestämmer att rubrikerna ska vara röda, har du mycket arbete framför dig för att ändra varje rubrikmärke för att visa den nya färgen.

För det tredje, och det här handlar om "korrekt procedur" innehåller denna sida flera element som är "presentations", inte "strukturella". Teckensnitts-, färg- och linebreak-taggarna är alla relaterade till hur sidan presenteras och har ingenting att göra med sidans struktur. HTML är dåligt lämpad för presentation, det jobbet är bäst kvar till CSS, vilket vi visar nedan.

Designa med CSS

Så hur kan vi ta bort alla extra taggar? Hur kan vi minska sidstorleken samtidigt som vi behåller våra färger och layout? Tja, bild du kan definiera på en enda plats vad alla dina rubriker ska se ut (säg stor grön text). Då behöver du inte definiera färgen för varje unikt rubrik. Detsamma gäller för punkterna. Om du vill att alla stycken ska vara blåa, ställer du bara in den som en CSS-regel för "p" -taggen. Alla ytterligare stycken kommer att ha blå text utan att du behöver ange det varje gång.

CSS läses bäst av exempel. Låt oss börja med att definiera exakt de regler som beskrivs ovan - alla rubriker ska vara gröna och alla stycken ska vara blåa. Använd den textredigerare du vill ha, och starta en ny fil med namnet style.css och lägg till följande text:

 h1 {färg: grön;} p {färg: blå;}

Detta definierar alla h1- taggar som grön text och alla p- taggar har blå text.

Allt vi behöver göra nu kopplar det till HTML med länktaggen och tar sedan bort alla oanvändbara typsnittstaggar från HTML. När det är klart borde det se ut så här:

 Min hemsida 
Största webbplatsen någonsin är under utveckling.
Utlänningar har invaderat också.

Ganska lite renare va? Vi har redan minskat den totala storleken på vår webbplats, och det var med endast 2 poster i vår "blogg".

CSS för layout

Visst kan det göra dina teckensnitt konsekventa, men det är inte ens tillräckligt för att göra CSS till ett komplett verktyg för webbplatspresentation. För att kunna göra det måste det kunna påverka webbplatsens layout, vilket ger dig kontroll över inte bara hur sakerna ser ut men var de går. Den fullständiga kraften i CSS över platslayout ligger långt bortom omfattningen av den här guiden, så vi kommer att introducera konceptet genom ett gemensamt scenario - en navigeringspanel.

Att skapa något som detta är förvånansvärt enkelt i CSS. Gå tillbaka till din style.css-fil och lägg till följande avsnitt:

 #sidebar {width: 100px; höjd: 200px; border-style: solid; flyta till vänster; margin-höger: 15px; }

Notera # vid början av namnspanelens namn. Kort sagt - detta berättar CSS att vi arbetar med ett nytt unikt objektnamn som vi gjorde upp, till skillnad från en inbyggd tagg som h1 eller p . Den långa förklaringen innebär skillnaden mellan ett id och en klass och förklaras i detalj här.

Du borde kunna se flera viktiga bitar här. Först skapade vi ett nytt ID-namnet sidobar, gav det en specifik höjd och bredd, en solid kant och specificerade att den skulle ha en 15px-marginal på höger sida. Vi har sagt att det ska flyta på vänster sida av skärmen, med andra sidelement (som din text) som flyter runt den. Du kan aktivera det här elementet genom att lägga till en sidospårstag i din HTML-kod, något som detta.

  • Artikel 1
  • Punkt 2
  • Punkt 3

Och nu när du öppnar din sida finns det ditt nya sidofält!

Slutsats

Det är uppenbart att vi bara har börjat skrapa ytan på CSS: s kapacitet, men förhoppningsvis bör det vara klart att dessa grundläggande principer kan tillämpas på mycket mer än vad vi gjort här. Textmanipulationerna kan användas för att formatera text på otaliga sätt, och genom att ändra sidofältkonceptet kan du skapa oändliga variationer av webbplatslayout. För vidare studier rekommenderar denna författare CSS-delen av W3Schools.com.

Bildkrediter: geirarne