CSS Flashcards

Categorie sponsor

CSS (Cascading Style Sheets) is een stijlbladtaal gebruikt om het uiterlijk en de opmaak van een document geschreven in een opmaaktaal te beschrijven, gecreëerd door Håkon Wium Lie. Het is een sleuteltechnologie van het World Wide Web, ontworpen om de presentatie te scheiden van de structuur van het document. CSS wordt gekenmerkt door flexibiliteit en krachtige stylingmogelijkheden, waardoor precieze controle over de lay-out, kleuren, lettertypen en animaties van pagina-elementen mogelijk is. Deze taal biedt geavanceerde selectoren en eigenschappen, en voorziet ontwikkelaars van tools om responsieve, visueel aantrekkelijke interfaces te creëren. CSS ondersteunt ook modulariteit en herbruikbaarheid van stijlen, met behoud van prestaties en het mogelijk maken van consistente ontwerpen over verschillende browsers en apparaten.

Onze flashcard-app bevat zorgvuldig geselecteerde CSS-interviewvragen met uitgebreide antwoorden die u effectief voorbereiden op elk interview dat CSS-kennis vereist. IT Flashcards is niet alleen een hulpmiddel voor werkzoekenden - het is een geweldige manier om uw kennis te versterken en te testen, ongeacht uw huidige carrièreplannen. Regelmatig gebruik van de app helpt u up-to-date te blijven met de nieuwste CSS-trends en uw vaardigheden op een hoog niveau te houden.

Voorbeelden van CSS-flashcards uit onze app

Download onze app uit de App Store of Google Play om meer gratis flitskaarten te krijgen of abonneer u voor toegang tot alle flitskaarten.

Wat zijn de verschillen tussen klassen en ID's in CSS?

Klassen en identifiers zijn CSS-tools waarmee je specifieke HTML-elementen kunt stijlen. Hoewel beide selectiemethoden bijna identiek zijn, zijn er enkele verschillen.

1. Uniciteit: Klassen zijn niet uniek, wat betekent dat je dezelfde klassen kunt gebruiken op veel verschillende elementen. Aan de andere kant, identifiers zijn uniek voor een pagina, wat betekent dat elke identifier slechts eenmaal per pagina kan worden gebruikt.

2. Specificiteit: Identifiers zijn specifieker in vergelijking met klassen. Dit betekent dat als stijlen conflicteren, de stijlen van identifiers die van klassen zullen overschrijven.

3. Toepassing van JavaScript: Identifiers worden vaak gebruikt om HTML-elementen te manipuleren met behulp van JavaScript, terwijl klassen minder vaak voor dit doel worden gebruikt.

4. Schaalbaarheid: Klassenstijlen kunnen hergebruikt worden door veel elementen op de pagina. Identifiers zijn minder flexibel en worden waarschijnlijk gebruikt om zeer specifieke secties te stijlen.

Houd er rekening mee dat een van de beste praktijken is om klassen te gebruiken voor CSS-stijlen en identifiers voor JavaScript.

Hoe kan een CSS-stylesheet worden gekoppeld aan een HTML-document?

Een CSS-stylesheet kan op een van de volgende manieren aan een HTML-document worden gekoppeld:

1. **In-line stijl:** Stijlen worden rechtstreeks aan HTML-elementen gekoppeld met behulp van het `style` attribuut. Bijvoorbeeld:

<p style="color:red;">Deze tekst is rood</p>

Deze methode wordt zelden gebruikt, meestal voor incidentele stijlveranderingen.

2. **Interne CSS:** Stijlen zijn opgenomen binnen de `<style>` tags in de `<head>` sectie van het HTML-document. Voorbeeld:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

Deze methode is handig voor HTML-documenten van één pagina.

3. **Externe CSS:** De meest gebruikte methode om CSS te koppelen. Het CSS-blad wordt geschreven in een apart bestand (meestal met een .css-extensie) en gekoppeld aan het HTML-document met een link in de `<head>` sectie. Voorbeeld:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

Deze methode wordt het meest gebruikt omdat het eenvoudig bijwerken, onderhouden en delen van stylesheets over verschillende HTML-documenten mogelijk maakt.

Wat zijn pseudoklassen in CSS en geef een voorbeeld van het gebruik ervan.

Pseudo-klassen in CSS zijn trefwoord toevoegingen aan selectors die een bepaalde staat van een gegeven element definiëren. Ze maken de styling van HTML elementen mogelijk, niet alleen op basis van informatie direct in de code, maar ook op een bepaalde context of staat van het element.

Bijvoorbeeld, de :hover pseudo-klasse maakt visuele veranderingen aan een element mogelijk wanneer er met een muis overheen wordt bewogen. Andere nuttige pseudo-klassen zijn :active (wanneer het element actief is of geklikt wordt), :visited (wanneer een link is bezocht), of :first-child (stijlt het eerste kind van een gegeven element).

Het voorbeeld code laat zien hoe de :hover pseudo-klasse kan worden gebruikt om de achtergrond kleur van een gegeven element te veranderen wanneer er met een muis overheen wordt bewogen:

button:hover {
  background-color: red;
}

In dit geval zal de achtergrondkleur van de knop veranderen in rood wanneer de gebruiker er met de muis overheen beweegt. Zo'n interactie zou niet mogelijk zijn zonder het gebruik van een pseudo-klasse.

Wat zijn de methoden voor het positioneren van elementen in CSS en welke beperkingen hebben ze?

In CSS hebben we verschillende methoden om elementen te positioneren om uit te kiezen:

1. Statisch: Dit is de standaardinstelling waarin elementen zich één voor één opstapelen zoals bepaald door de HTML-structuur. De positie van het element is irrelevant en kan niet worden gewijzigd met de eigenschappen top, rechts, onder, of links. De beperking is het gebrek aan controle over de plaatsing van het element.

2. Relatief: Hiermee kunt u de positie van een element ten opzichte van zijn oorspronkelijke locatie wijzigen. De positie wordt bepaald door de eigenschappen top, rechts, onder, links, maar heeft geen invloed op de lay-out van andere elementen. De beperking is dat elementen eenvoudig worden verschoven, niet verwijderd uit de normale documentstroom.

3. Absoluut: De positie van een element wordt bepaald ten opzichte van het dichtstbijzijnde hogere structuurelement dat anders is gepositioneerd dan statisch (relatief, absoluut, vast, plakkerig). Als er geen dergelijk element is, wordt de positie bepaald ten opzichte van het document zelf. Het element wordt verwijderd uit de normale documentstroom en heeft geen invloed op de lay-out van andere elementen. De beperking is de noodzaak om de positioneringscontext te regelen.

4. Vast: De positie van een element wordt bepaald ten opzichte van de randen van de browser. Een dergelijk element beweegt niet, zelfs niet bij het scrollen van de pagina. Het wordt verwijderd uit de normale documentstroom en heeft geen invloed op de lay-out van andere elementen. De beperking is de mogelijkheid om andere elementen te verbergen met het permanent geplaatste element.

5. Plakkerig: Dit is een combinatie van relatieve en vaste positionering. Het element gedraagt zich als een statisch totdat de bovenste rand een bepaalde plaats bereikt (bijv. de bovenste rand van het scherm), daarna gedraagt het element zich alsof het vast gepositioneerd was. De beperking is de noodzaak van browserondersteuning.