CSS Flashcards

Kategorisponsor

CSS (Cascading Style Sheets) är ett stilmallsspråk som används för att beskriva utseendet och formateringen av ett dokument skrivet i ett märkspråk, skapat av Håkon Wium Lie. Det är en nyckelteknik för webben, designad för att separera presentationen från dokumentets struktur. CSS kännetecknas av flexibilitet och kraftfulla stylingsmöjligheter, vilket möjliggör exakt kontroll över layout, färger, typsnitt och animationer av sidobjekt. Detta språk erbjuder avancerade selektorer och egenskaper, vilket ger utvecklare verktyg för att skapa responsiva, visuellt tilltalande gränssnitt. CSS stödjer även modularitet och återanvändbarhet av stilar, och bibehåller prestanda samt möjliggör skapandet av konsekventa designer över olika webbläsare och enheter.

Vår flashcard-app innehåller noggrant utvalda CSS-intervjufrågor med omfattande svar som effektivt förbereder dig för alla intervjuer som kräver CSS-kunskap. IT Flashcards är inte bara ett verktyg för arbetssökande - det är ett utmärkt sätt att förstärka och testa din kunskap, oavsett dina nuvarande karriärplaner. Regelbunden användning av appen hjälper dig att hålla dig uppdaterad med de senaste CSS-trenderna och hålla dina färdigheter på en hög nivå.

Exempel på CSS-flashcards från vår app

Ladda ner vår app från App Store eller Google Play för att få fler gratis flashcards eller prenumerera för tillgång till alla flashcards.

Vad är skillnaderna mellan klasser och ID:n i CSS?

Klasser och identifierare är CSS-verktyg som låter dig styla specifika HTML-element. Trots att båda selektionsmetoderna är nästan identiska finns det några skillnader.

1. Unikhet: Klasser är inte unika, vilket betyder att du kan använda samma klasser på många olika element. Däremot är identifierare unika för en sida, vilket betyder att varje identifierare bara kan användas en gång per sida.

2. Specificitet: Identifierare är mer specifika jämfört med klasser. Detta innebär att om stilar är i konflikt kommer identifierares stilar att ta över klassernas stilar.

3. JavaScript-applikation: Identifierare används ofta för att manipulera HTML-element med hjälp av JavaScript, medan klasser används mindre ofta för detta syfte.

4. Skalbarhet: Klassstilar kan återanvändas av många element på sidan. Identifierare är mindre flexibla och är mer troligt att de används för att stila mycket specifika avsnitt.

Observera att en av de bästa metoderna är att använda klasser för CSS-stilar och identifierare för JavaScript.

Hur kan ett CSS-stilmall länkas till ett HTML-dokument?

Ett CSS-stylesheet kan kopplas till ett HTML-dokument på något av följande sätt:

1. **In-line stil:** Stilar ansluts direkt till HTML-element med hjälp av attributet `style`. Till exempel:

<p style="color:red;">Denna text är röd</p>

Denna metod används sällan, vanligtvis för engångsstiländringar.

2. **Intern CSS:** Stilar inkluderas inom `<style>` taggarna i `<head>`-delen av HTML-dokumentet. Exempel:

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

Denna metod är användbar för enkelsidiga HTML-dokument.

3. **Extern CSS:** Den vanligaste metoden för att koppla CSS. CSS-arket skrivs i en separat fil (vanligtvis med en .css förlängning) och kopplas till HTML-dokumentet med en länk i `<head>`-delen. Exempel:

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

Denna metod används mest eftersom den möjliggör enkel uppdatering, underhåll och delning av stylesheets över olika HTML-dokument.

Vad är pseudoklasser i CSS och ge ett exempel på hur de används.

Pseudoklasser i CSS är nyckelordsadditioner till väljare som definierar ett särskilt tillstånd för ett givet element. De tillåter stilisering av HTML-element inte bara baserat på information direkt i koden, men också på ett visst sammanhang eller tillstånd för elementet.

Till exempel, så tillåter pseudoklassen :hover visuella förändringar till ett element när det svävar över med en mus. Andra användbara pseudoklasser inkluderar :active (när elementet är aktivt eller klickat), :visited (när en länk har besökts) eller :first-child (stilar det första barnet av ett givet element).

Exempelkoden visar hur pseudoklassen :hover kan användas för att ändra bakgrundsfärgen på ett givet element när det svävas över med en mus:

button:hover {
  background-color: red;
}

I detta fall kommer knappens bakgrund att ändras till röd när användaren svävar över det med musen. En sådan interaktion skulle inte vara möjlig utan användning av en pseudoklass.

Vilka är metoderna för att positionera element i CSS och vilka begränsningar har de?

I CSS har vi flera metoder för att positionera element att välja mellan:

1. Statisk: Detta är standardinställningen där element staplas efter varandra enligt HTML-strukturen. Elementets position är irrelevant och kan inte ändras med hjälp av topp-, höger-, botten- eller vänsteregenskaperna. Begränsningen är bristen på kontroll över placeringen av elementet.

2. Relativ: Låter dig ändra positionen för ett element relativt till dess ursprungliga plats. Positionen bestäms av topp-, höger-, botten-, vänsteregenskaperna, men påverkar inte layouten av andra element. Begränsningen är att elementen helt enkelt flyttas, inte tas bort från det normala dokumentflödet.

3. Absolut: Positionen för ett element bestäms relativt till det närmaste högre strukturelementet som är positionerat annorlunda än statiskt (relativt, absolut, fast, klibbigt). Om det inte finns något sådant element, bestäms positionen relativt till själva dokumentet. Elementet tas bort från det normala dokumentflödet och påverkar inte layouten av andra element. Begränsningen är behovet av att kontrollera positioneringssammanhanget.

4. Fast: Positionen för ett element bestäms relativt till webbläsarens kanter. Ett sådant element rör sig inte ens när sidan rullas. Den tas bort från det normala dokumentflödet och påverkar inte layouten för andra element. Begränsningen är möjligheten att dölja andra element med det permanent placerade.

5. Klibbig: Detta är en kombination av relativ och fast positionering. Elementet beter sig som ett statiskt tills dess övre kant når en specifik plats (t.ex. den övre kanten av skärmen), då beter sig elementet som om det var fast positionerat. Begränsningen är nödvändigheten av webbläsarstöd.