De afkorting CSS staat voor "cascading style sheets". CSS wordt gebruikt om websites en applicaties te stylen die op alle apparaten worden gebruikt. De stylesheet wordt vaak gebruikt naast HTML en een front-end programmeertaal zoals JavaScript.

CSS kan op drie manieren worden geïmplementeerd: inline, intern of extern. Hoewel externe CSS de aanbevolen aanpak is, zijn er gevallen waarin de twee resterende implementatiemethoden praktischer kunnen zijn.

In dit zelfstudieartikel leert u alle basisprincipes van CSS om vandaag nog te beginnen met het bouwen van applicaties.

Wanneer de verschillende CSS-implementatiemethoden gebruiken?

Inline CSS is de ideale implementatiemethode wanneer het de bedoeling is om slechts een of twee stijlvoorkeuren op een webpagina op te nemen, samen met een paar andere nichegevallen. De inline CSS-methode maakt gebruik van de stijl trefwoord samen met een CSS-eigenschap om een ​​specifiek resultaat te bereiken.

Als je van plan bent om de kleur van een enkele kop in rood te veranderen, dan is inline CSS een goede optie. Een nichegeval, zoals hierboven vermeld, zou zijn bij het maken van HTML-lay-outs die voornamelijk uit tabellen bestaan ​​(een verouderde praktijk).

Inline CSS-voorbeeld gebruiken

Hoofdkop

De coderegel hierboven geeft de tekst "Hoofdkop" weer in de kleur rood. Dit is mogelijk een van de weinige praktische redenen om inline CSS te gebruiken, omdat er meestal maar één is h1 element op een bepaalde webpagina.

Als u van plan bent om alles te coaten h2 elementen op een webpagina met de kleur geel. Je moet de CSS gebruiken stijl trefwoord, samen met de kleur eigenschap en de waarde (geel) op elk element. Een efficiëntere manier om deze taak uit te voeren, is echter om interne CSS te gebruiken.

Intern CSS-voorbeeld gebruiken

De bovenstaande code in de plaatsen tag van uw HTML-bestand zorgt ervoor dat alle h2 elementen in dat bestand zijn geel gecoat. Interne CSS is gescheiden van de HTML-code en dit maakt de methode efficiënter omdat het de targeting op verschillende elementgroepen vergemakkelijkt.

Dus waarom is de externe CSS-implementatiemethode nog steeds de meest aanbevolen aanpak? Scheiding van zorgen. Met externe CSS is uw CSS-code volledig gescheiden van uw HTML-code, wat zorgt voor schaalbaarheid voor grote projecten en het testproces efficiënter maakt.

Extern CSS-voorbeeld gebruiken

De regel code hierboven invoegen in de tag van uw HTML-bestand zal de styling van uw webpagina vergemakkelijken met behulp van de externe CSS-methode. Het enige aspect van de bovenstaande code dat zal veranderen, is de waarde die is toegewezen aan de href eigenschap, die altijd de naam van het CSS-bestand moet zijn (inclusief de .css-extensie).

Verwant: Wat zijn Cascading Style Sheets en waarvoor wordt CSS gebruikt? Met uw CSS-bestand gekoppeld aan uw HTML-document, kunt u nu beginnen met het schrijven van CSS-code in uw CSS-bestand. Op dit moment is het enige verschil tussen het interne CSS-voorbeeld hierboven en de externe CSS de stijl label. Daarom zal het invoegen van de volgende code in een CSS-bestand hetzelfde resultaat opleveren als het interne CSS-voorbeeld hierboven.

h2{
kleur geel;
}

De basisstructuur van CSS verkennen

De basis CSS-declaratie bevat zeven essentiële elementen, zoals u kunt zien in het onderstaande voorbeeld. Ze werken allemaal samen om een ​​specifieke set stijlvoorkeuren te bereiken.

De kiezer

In een CSS-declaratie kan een selector ofwel een ID kaart, een klas, een element of in sommige speciale gevallen een pseudo-selector. In de CSS-structuur boven de een element wordt gebruikt als selector, wat betekent dat alle links op een webpagina rood worden weergegeven. In wezen is het doel van de selector om de elementen te identificeren die moeten worden gestyled.

Aangifte begin en einde

Het begin en einde van de declaratie zijn belangrijk omdat ze alle stijlvoorkeuren bevatten die van toepassing zijn op een specifieke selector. Beide elementen worden weergegeven door een paar open en gesloten accolades. Een goede manier om te onthouden dat u een declaratiebegin of -einddeclaratie moet gebruiken, is te onthouden dat als u een open accolade hebt, er ook een bijbehorende gesloten accolade moet zijn en vice versa.

Het eigendom

De CSS-eigenschap in een declaratiestructuur kan een van de meer dan honderd verschillende eigenschapstypen zijn. Het eigenschapstype dat in de bovenstaande CSS-structuur wordt gebruikt, is: kleur en deze eigenschap is gericht op tekst op een webpagina. Als je meer wilt weten, bekijk dan onze uitgebreide lijst van CSS-eigenschappen en hun gebruik.

De eigenschap/waarde-scheidingsteken

Hoewel het misschien klein en onbeduidend lijkt, is het scheidingsteken voor eigenschap/waarde net zo belangrijk als alle andere elementen in de CSS-structuur. Als er ooit een instantie is waarin dit element wordt vergeten, wordt de volledige CSS-declaratie niet uitgevoerd.

De waarde

De waarde van de CSS-eigenschap vertegenwoordigt de exacte stijl die u op een bepaalde eigenschap wilt toepassen. De waarden die beschikbaar zijn voor gebruik zijn afhankelijk van het type eigenschap. De eigenschap die in de bovenstaande structuur wordt gebruikt, is bijvoorbeeld: kleur, wat betekent dat er slechts één type waarde kan worden toegepast op deze eigenschap, een kleurnaam. EEN kleur waarde kan in vier vormen worden weergegeven: een woordwaarde (zoals in het bovenstaande voorbeeld), een hexadecimale waarde, een HSL-waarde (tint, verzadiging, lichtheid) of een RGB-waarde (rood, groen, blauw).

De verklaring scheidingsteken

Het declaratiescheidingsteken geeft aan dat u aan het einde van een specifieke stijlverklaring bent. In de bovenstaande structuur is er slechts één declaratiescheidingsteken, maar er kunnen er meer zijn. Het hangt allemaal af van het aantal CSS-eigenschappen dat u voor een specifieke wilt gebruiken klas, ID kaart, of onderdeel.

Wat zijn ID's en klassen?

ID's en klassen een fundamentele rol spelen in het CSS-stylingproces. Net als HTML-elementen, CSS ID's en klassen worden gebruikt als selectors in een CSS-declaratie. Echter, klassen en ID's voorrang hebben op een HTML-element.

De algemene regel in CSS is dat de laatste stijldeclaratie die u aan een bestand toevoegt, de vorige overschrijft. Als er dus twee aangiften zijn met een h2 selector in een CSS-bestand, overschrijft de declaratie die het laatst is toegevoegd de declaraties die er eerder waren.

Als dit echter h2 element heeft een ID kaart die wordt gebruikt als selector in een CSS-declaratie, ongeacht de positie (voor of na) naar een CSS-declaratie die de h2 element als selector, de stijlvoorkeur in de ID kaart declaratie heeft altijd voorrang op het element. Kortom, een ID kaart zal andere stijlkiezers overschrijven.

Het is belangrijk om te onthouden dat in een CSS-declaratie, ID's beginnen met een hekje en lessen beginnen met een punt. Het belangrijkste verschil tussen een ID kaart en een klas is dat een ID kaart is uniek, terwijl a klas kan worden gedupliceerd. Bijvoorbeeld een verzameling van soortgelijke tags kunnen hetzelfde worden gegeven klas naam; echter, de ID kaart van elke tag moet uniek zijn.

De verschillende soorten selectors verkennen

Er zijn drie basistypen selectors: enkelvoudig, meervoudig en genest. Tot dusverre heeft dit artikel uitgebreid aandacht besteed aan enkele selectors.

Wanneer u CSS gebruikt, zullen er gevallen zijn waarin u verschillende elementen op verschillende posities op een webpagina om een ​​vergelijkbare stijl te hebben die afwijkt van de algemene stijl die op de hele webpagina wordt toegepast. In deze gevallen is het handig om te weten hoe u meerdere selectors moet gebruiken.

Basis HTML-sjabloonvoorbeeld

Welkom

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  architect
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Wat betreft

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  architect
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Titel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Bij ad laborum illo inventory quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
belemmeren hic maxime? Eius modi optio ad, nisi tempora sapiente?







Titel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? Bij ad laborum illo inventory quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
belemmeren hic maxime? Eius modi optio ad, nisi tempora sapiente?

Als je goed kijkt naar het HTML-bestand hierboven, zie je de dynamiek die bestaat tussen ID's en klassen. Met verwijzing naar het bestand hierboven, als u dezelfde stijl wilt toepassen op de wat betreft sectie en de artikelen alleen op de webpagina, de volgende CSS-code zal dit bereiken.

Voorbeeld van meerdere selectors gebruiken

#Over, .inhoud{
kleur wit;
achtergrondkleur: donkercyaan;
}

Als u meerdere selectors gebruikt, moet u elke selector altijd scheiden met een komma. Het bovenstaande voorbeeld heeft twee selectors, een ID kaart en een klas. Als de komma die volgt op de wat betreftID kaart ontbreekt, wordt de CSS-declaratie niet uitgevoerd.

Om terug te gaan naar het basisvoorbeeld van HTML-sjabloon hierboven, zijn er twee: tags aanwezig: één in het welkomstgedeelte en de andere in het gedeelte Info. Als het uw doel is om slechts één van deze te targeten tags, een geneste selector zou uw go-to-methode moeten zijn.

Voorbeelden van geneste selectors gebruiken

#Welkom p span{
kleur rood;
}

De geneste selector hierboven bevat een ID kaart en twee HTML-elementen. Zoals u in het bovenstaande voorbeeld kunt zien, biedt een geneste selector u de mogelijkheid om een ​​specifiek element binnen een groep te targeten.

Daarom alleen de span sectie in de tag van de div met de welkom id wordt gecoat in de kleur rood.

Of je nu een stijltaal zoals CSS of een programmeertaal gebruikt, je moet absoluut weten hoe je een opmerking moet schrijven. Opmerkingen zijn essentieel in projecten op ondernemingsniveau waar meerdere ontwikkelaars samenwerken, en het is ook handig bij kleinschalige ontwikkeling.

Een CSS-opmerking bevat twee schuine strepen naar voren, twee sterretjes en een commentaargedeelte.

/* Zo schrijf je een enkele regel commentaar in CSS */

/*
Zo schrijf je
een commentaar van meerdere regels
in CSS
*/

Wat is het volgende?

Dit artikel geeft je de basiscomponenten van CSS. U kunt nu een identificatie gebruiken:

• Een van de drie CSS-implementatiemethoden
• Alle elementen in een CSS-declaratie
• De drie basistypen selectors
• Een CSS-opmerking

Toch is dit nog maar het begin. CSS heeft verschillende kaders die u zullen helpen een beter begrip van de taal te ontwikkelen. De enige uitdaging is om te beslissen welke het beste voor u is.

Tailwind CSS vs. Bootstrap: wat is een beter framework?

Bij het kiezen van een CSS-framework is het belangrijk om degene te vinden die aan uw eisen voldoet.

Lees volgende

Over de auteur