Of je het nu weet of niet, je profiteert bijna altijd van CSS wanneer je een webbrowser opent. Het is het sjabloonsysteem dat door bijna elke moderne website wordt gebruikt om pagina's hun lay-out en uiterlijk te geven. Sommigen van jullie denken misschien: " Ik heb eerder websites gemaakt en het was gemakkelijk, ik had nooit CSS nodig. En dat is waar. U hebt geen CSS nodig om een ​​mooie en functionele site te maken, maar de kans is groot dat uw site kleiner, schoner, consistenter en mooier is geweest als u CSS vanaf het begin had gekozen. Vandaag gaan we je de basisprincipes laten zien van wat CSS kan doen. Deze gids zal je niet van een beginner naar een bekroonde webontwerper brengen, maar het zal je helpen begrijpen hoe CSS werkt en hoe je daar heel veel tijd en moeite in kunt steken.

Snel overzicht

CSS (Cascading Style Sheet) is bedoeld om één ding te doen: de presentatie van uw site beheren. Dit klinkt misschien eenvoudig, maar houd het in gedachten terwijl we verder gaan. Een belangrijk ding om te onttrekken aan dat feit is dat presentatie NIET het werk van HTML is. HTML definieert de structuur van uw pagina (wat is een koptekst, wat is een voettekst, enzovoort). CSS neemt die structuur en doet al het werk met betrekking tot hoe die structuur wordt gepresenteerd .

De verkeerde manier

Om een ​​idee te geven van wat CSS moet oplossen, bekijk deze HTML-code:

 Mijn startpagina 
De beste website ooit is momenteel in ontwikkeling.


Aliens zijn ook binnengevallen.


Dat verschijnt in uw browser als iets als dit:

Er zijn een aantal potentiële problemen hier. Om te beginnen, is het plaatsen van lettertype en kleurinformatie elke keer dat een nieuwe kop of alinea wordt getekend. Elk nieuw item op de site zou identieke lettertype- en kleurdefinities nodig hebben, ook al zijn ze voor elke kop en alinea hetzelfde. Dit komt neer op heel veel verspilde bandbreedte als je veel inzendingen hebt.

Het volgende is het probleem van schaalbaarheid. Als u 100 items op deze nieuwspagina heeft en u besluit dat de koppen rood moeten zijn, hebt u veel werk voor de boeg om elke koptekst te wijzigen zodat de nieuwe kleur wordt weergegeven.

Ten derde, en dit is een kwestie van "juiste procedure", deze pagina bevat verschillende elementen die "presentatief" zijn, niet "structureel". De tags voor lettertype, kleur en linefrezen hebben allemaal betrekking op hoe de pagina wordt gepresenteerd en hebben niets te maken met de structuur van de pagina. HTML is slecht geschikt voor presentatie, die taak kan het best aan CSS worden overgelaten, zoals we hieronder zullen laten zien.

Ontwerpen met CSS

Dus hoe kunnen we al die extra tags verwijderen? Hoe kunnen we het paginaformaat verkleinen met behoud van onze kleuren en lay-out? Welnu, beeld dat je op één plek zou kunnen definiëren hoe ALLE koppen eruit zouden moeten zien (bijvoorbeeld grote groene tekst). Dan hoeft u de kleur voor elke unieke kop niet te definiëren. Hetzelfde geldt voor de paragrafen. Als u wilt dat alle alinea-tekst blauw is, stelt u dat in als een CSS-regel voor de tag "p". Alle volgende paragrafen hebben een blauwe tekst, zonder dat u dit elke keer hoeft op te geven.

CSS kan het best worden geleerd door een voorbeeld. Laten we beginnen met het definiëren van precies de regels die hierboven zijn beschreven - alle koppen moeten groen zijn en alle alinea's moeten blauw zijn. Start met de gewenste teksteditor een nieuw bestand met de naam style.css en voeg de volgende tekst toe:

 h1 {kleur: groen;} p {kleur: blauw;}

Hiermee worden alle h1- tags gedefinieerd als groene tekst en alle p- tags als blauwe tekst.

Het enige dat we nu hoeven te doen, is om het met de HTML-code te verbinden met de koppelingstag en vervolgens alle nutteloze lettertypemarkeringen uit de HTML te verwijderen. Als het klaar is, ziet het er ongeveer zo uit:

 Mijn startpagina 
De beste website ooit is momenteel in ontwikkeling.
Aliens zijn ook binnengevallen.

Best een beetje schoner, toch? We hebben de algehele omvang van onze site al verlaagd, en dat was met slechts 2 vermeldingen in onze "blog".

CSS voor lay-out

Natuurlijk, het kan uw lettertypen consistent maken, maar dat alleen is zeker niet genoeg om CSS de complete tool voor website-presentatie te maken. Om dat te doen, moet het de lay-out van uw site kunnen beïnvloeden, zodat u niet alleen kunt bepalen hoe dingen eruit zien, maar ook waar ze naartoe gaan. De volledige kracht van CSS over de lay-out van de site valt buiten het bestek van deze handleiding, dus we zullen het concept introduceren via één gemeenschappelijk scenario: een zijbalk aan de navigatie.

Het creëren van iets als dit is verbazingwekkend eenvoudig in CSS. Ga terug naar je style.css-bestand en voeg het volgende gedeelte toe:

 #sidebar {width: 100px; Hoogte: 200px; border-style: solid; float: left; margin-right: 15px; }

Noteer de # aan het begin van de naamzijbalk . Kort gezegd: dit vertelt CSS dat we werken met een nieuwe unieke itemnaam die we hebben bedacht, in tegenstelling tot een ingebouwde tag zoals h1 of p . De lange uitleg betreft het verschil tussen een id en een klasse en wordt hier in detail uitgelegd.

Je zou hier verschillende belangrijke dingen moeten kunnen zien. Eerst hebben we een nieuwe ID met de naam sidebar gemaakt, een specifieke hoogte en breedte gegeven, een vaste rand en opgegeven dat deze een marge van 15 px aan de rechterkant zou moeten hebben. We hebben gezegd dat het aan de linkerkant van het scherm zweeft, met andere pagina-elementen (zoals uw tekst) er omheen. Je kunt dit element activeren door een sidebar- tag aan de body van je HTML toe te voegen, iets als dit.

  • Item 1
  • Item 2
  • Item 3

En nu, wanneer u uw pagina opent, is er uw nieuwe zijbalk!

Conclusie

Het is duidelijk dat we nog maar net begonnen zijn met het krassen van de mogelijkheden van CSS, maar hopelijk moet het duidelijk zijn dat deze basisprincipes op veel meer kunnen worden toegepast dan wat we hier hebben gedaan. De tekstmanipulaties kunnen op talloze manieren worden gebruikt om tekst op te maken en door het zijbalkconcept aan te passen, kunt u oneindige variaties in de lay-out van de site maken. Voor verdere studie, beveelt deze auteur ten zeerste de CSS-sectie van W3Schools.com aan.

Afbeelding tegoed: geirarne