CSS Flashcards
Vad står CSS för?
Cascading Style Sheets
Vad gör CSS?
Beskriver hur HTML-element ska visas på skräm, papper eller i annan media. Detta genom att man skapar ”regler” som specificerar hur element ska se ut
Hur ”behandlar” CSS HTML-element?
CSS behandlar HTML-element som ifall de lever inuti egna boxar. Både ”inline”-element och ”block”-element
Vad består en CSS-regel av?
En CSS-regel innehåller två delar; en ”selector” (väljare) och en ”declaration” (deklaration).
Selectorn indikerar vilket element som regeln gäller för.
Declarationen indikerar hur elementet ska stylas
Vad består en CSS-declaration av?
Property (egendom) och value (värde), som separeras av ett kolontecken.
Alla deklarationer avslutas med ett semikolon och omfamnas av klammerparentes (curly brackets)
Hur använder man sig av ett CSS-dokument med sitt HTML-dokument?
Man länkar till det externa CSS-dokumentet genom elementet <link></link>, där man berättar för webbläsaren med hjälp av ”href”-attributet var filen finns, man berättar vad för typ av dokument det är med ”type”-attributet , och man specificerar relationen mellan HTML-sidan och filen som länkas med hjälp av ”rel”-attributet
Måste man länka till en extern CSS-fil?
Nej, man kan skriva in CSS-kod direkt i HTML-dokumentet, detta genom att skriva den inom <style>-elementet, som vanligtvis skrivs inuti <head>-elementet.
Man bör skriva med ”type”-attributet i detta element för att indikera att det är CSS-kod.
Man kan också skriva i linje med texten genom att lägga till ”style”-attributet direkt i elementet.</style>
Hur applicerar man CSS-värden till specifika element?
Genom selectors, som väljer vilka element som CSS-koden ska appliceras på.
Det finns många olika typer av selectors, som kan vara:
- typen av element
- class-attributet på ett element
- id-attributet på ett element
- barn-element av ett element
- ättling-element av ett element
Etc etc
Man skriver då helt enkelt antingen namnet på elementet, klassens namn, eller id:ts namn som en selector, och de namnen är skiftlägeskänsliga, alltså att de måste skrivas exakt likadant som de heter.
Kan element har fler än en CSS-regel?
Ja, element kan ha flera CSS-regler, och då har vissa regler företräde:
- I en regel med två identiska selectors, så gäller den sist skrivna
- Om en selector är mer specifik än andra, så gäller den före andra
- Om ett värde markeras som ”!important” gäller det före andra likadana värden
Element som ”ärver” CSS-regler
Element kan ärva CSS-regler från andra element som är deras ”förälder”- eller ”förfader”-element. Exempelvis så tillämpas regler som skrivs i <body>-elementet på resten av elementen på sidan (förutom bakgrundsfärg och gränsegenskaper)
Fördel med att använda en extern CSS-fil
- Alla webbsidor kan dela på samma CSS-fil
- Man behöver inte upprepa samma kod på varje sida
- Mindre text och mindre HTML-sidor
- Snabbare sidladdning när webbläsaren väl har laddat ner CSS-filen
- Man behöver bara ändra på en fil för att ändra på utseendet på alla sidor
- Enklare att läsa
Vilken selector väljer alla element i ett HTML-dokument?
*
Hur skriver man kommentarer i CSS?
/* kommentar */
