Lær CSS på EN time - Gratis og interaktivt 20-delt kursus

CSS (Cascading Style Sheet) er en af ​​de tre hjørnesten på nettet sammen med HTML og JavaScript. Det er det, der bringer liv til websteder gennem farver, styling, positionering og meget mere. Således er det enormt værdifuldt at kende CSS på dagens arbejdsmarked!

Så jeg er glad for at meddele, at vi lige har lanceret et gratis CSS-kursus på Scrimba. Det er skabt af vores strålende instruktør Eric Tirado, som også lavede vores populære introduktion til HTML-kursus.

På mindre end en time tager Eric dig fra nul til dygtig CSS!

Lad os se på, hvordan kurset er lagt ud.

Del # 1: Introduktion

I introduktionsvideoen giver Eric dig et overblik over, hvordan kurset ser ud, hvad forudsætningerne er plus et overblik over de emner, han berører i løbet af kurset. Han giver dig også en kort introduktion om sig selv, så du bliver fortrolig med ham, før du hopper ud.

Del # 2: CSS-dokumenter & kaskaden

Vi hopper derefter direkte ind i kursets første formelle lektion. I denne vil vi se på, hvordan vi kan inkludere CSS i vores HTML-sider, og hvordan man begynder at anvende grundlæggende stylinger på vores elementer.

Del # 3: CSS-vælgere, egenskaber og værdier

I den anden lektion taler Eric om nogle af CSS-ordforrådet, som sætter dig i stand til bedre at forstå begreber, han gennemgår i senere forelæsninger. Du lærer, hvad HTML-elementer er, hvad CSS-vælgere er, og hvordan du kan anvende egenskaber og tildele værdier til dem.

CSS-ordforråd

Så for eksempel er dette et h1element. Det har en vis standard styling, der vises, når du gengiver det i browseren. Hvis vi vil ændre nogle styling, kan vi bruge CSS:

h1 { color: 'red'; } 

Vælgeren til vores h1element er simpelthen navnet på selve elementet, og så tildeler vi det egenskaben af ​​farve med værdien rød. På samme måde kan vi også vælge elementer ved hjælp af klasser og id'er, som diskuteres i senere videoer.

Del # 4: Klasser og ID'er

Denne del af kurset diskuterer, hvordan man bruger klasser og ID'er i CSS til at vælge HTML-elementer og anvende forskellige styling på dem. Den diskuterer også detaljeret forskellen mellem klasse og ID, og ​​hvordan og hvornår vi tildeler dem på HTML-elementer

Se på følgende kode for et eksempel:

This is the heading tag

This is a paragraph tag

Ovenstående uddrag består af et tag h1(overskrift) og et p(afsnit). Vi har givet h1elementet klassen af headingog vores pelement ID'et forparagraph.

I vores CSS-fil vælger vi overskriftsklassen og giver den egenskaben farve. Senere vælger vi afsnit ID og giver det egenskaberne for farve og skriftstørrelse:

.heading { color: blue } #paragraph { color: green; font-size: 14px; } 

Del # 5: Specificitet

I del 5 af kurset lærer du om specificitet, hvilket betyder, hvordan en browser ville vide, hvilke stilarter og regler der er mest relevante for et element at anvende.

This is the heading tag

For eksempel har vi her et h1mærke med klassen overskrift anvendt på det.

h1 { color: blue; } .heading { color: green; } 

Ved hjælp af CSS tildeler vi farven på blå til h1tag, som vil ændre farven på hver h1. Vi tildeler derefter også farven på grøn til klasse heading, så hvert element i denne klasse får sin farve tilsidesat til grøn. Så det h1mærke, vi definerede ovenfor, vises som grønt.

Del # 6: Bredde og højde

I denne lektion lærer du, hvordan du anvender bredde og højde for at kontrollere sidens formatering og flow.

Ovenfor er et dias fra lektionen, som giver dig en idé om, hvordan vi kan oprette sektioner og kasser ved hjælp af bredde og højde for at få vores webside til at se korrekt formateret ud.

Del # 7: Længdenheder

I CSS kan vi bruge forskellige enheder til at måle de forskellige størrelser, vi sender ind som egenskaber for vores HTML-elementer. Denne lektion diskuterer detaljeret, hvad disse forskellige enheder er, og hvordan de adskiller sig i brug.

Der er to typer længdeenheder:

  1. Absolutte enheder
  2. Relative enheder.

Absolutte enheder er enheder med fast længde, og en længde, der udtrykkes i en hvilken som helst af dem, vises som nøjagtig den størrelse. For eksempel cm, mm, in, 'px, og så videre er absolutte enheder.

På den anden side angiver enheder med relativ længde en længde i forhold til en anden længdeegenskab. For eksempel em, ex, rem, og så videre er absolutte enheder.

Del # 8: Farver

Denne lektion diskuterer detaljeret, hvordan vi kan bruge og anvende farver på forskellige HTML-elementer. Det diskuterer også forskellige måder, hvorpå vi kan erklære farvenavnet i vores CSS-egenskaber.

.heading1 { color: orange; } .heading2 { color: #ff6347; } .heading3 { color: RGB(255, 99, 71); } 

Eksemplet ovenfor har tre klasser erklæret med den samme egenskab af farve, der er tildelt dem. Men pointen at bemærke er, hvordan vi har brugt forskellige måder til at tildele farvernes værdier.

Klassen heading1bruger navnet på farven (orange) som egenskab. heading2bruger den hex-værdi af farven. Og heading3bruger RGB-værdien for farven.

Del # 9: Polstring

I CSS bruges polstring til at skabe mellemrum omkring et elements indhold inden for alle definerede grænser. I CSS har du kontrol til at anvende polstring på alle eller enhver side af elementerne. Lektion 9 på dette kursus taler om polstring og lærer dig, hvordan du kan anvende det på forskellige måder.

.container { padding: 10px; /* padding-left: 10px; */ /* padding-right: 10px; */ /* padding-top: 5px; */ /* padding-bottom: 5px; */ } 

Som i eksemplet ovenfor kan vi enten bare bruge egenskaben padding, som anvender afstanden på alle siderne, eller alternativt kan du give polstring til individuelle retninger.

Del # 10: Grænser

I denne lektion lærer du, hvordan du kan anvende grænser omkring dit indhold. Du lærer også om de variationer, du kan give til grænserne ved hjælp af forskellige stilarter og muligheder, der er tilgængelige i CSS.

Tag eksemplet med boksen i ovenstående billede og læg mærke til kanterne omkring den med forskellige farver og bredde.

Del # 11: Margener

Margener i CSS er som polstring: de anvender afstand mellem elementet, men de gør det uden for enhver defineret grænse. Denne lektion taler om at bruge margener i din CSS, og hvordan du kan anvende de samme margener i alle retninger eller forskellige margener i forskellige retninger.

.container { margin: 10px; /* margin-left: 10px; */ /* margin-right: 10px; */ /* margin-top: 5px; */ /* margin-bottom: 5px; */ } 

Del # 11: Kassemodellen

Boxmodellen i CSS er et udtryk, vi bruger, når vi beskriver design og layout. Vi kan tænke på alle HTML-elementerne som felter, hvor hver boks indeholder egenskaber for margener, polstring, kanter osv.

//www.w3schools.com/css/css_boxmodel.asp

Ovenstående illustration forklarer boksens konceptuelle model. I denne lektion vil Eric forklare, hvordan vi kan bruge dette koncept til bedre at designe og arrangere vores elementer.

Del # 13: Synlighed

Vi kan også opdatere synligheden af ​​ethvert element i HTML ved hjælp af CSS. Vi kan for eksempel skjule eller vise ethvert element ved hjælp af egenskaben display. Denne lektion forklarer tre forskellige måder, hvorpå vi kan lege med elementernes synlighed.

.hidden { display: none: } 

En af de tre måder at opdatere synligheden på er at bruge displayejendommen. I eksemplet ovenfor har vi indstillet displayegenskaben til ingen, så ethvert element, der har klassen hidden, slet ikke vises i browseren.

Del # 14: Skrifttyper

Skrifttyper er en af ​​de vigtigste og nyttige funktioner i CSS. Vi kan lege med forskellige slags skrifttypestile og skrifttypefamilier for at få vores tekst til at se godt ud. Lektion 14 på dette kursus handler om brug af skrifttyper!

På billedet ovenfor har teksten Hello World et font-familyaf Black Han Sans’, arial, sans-serifog font-sizeaf 30px. På samme måde kan vi anvende forskellige egenskaber for at få vores tekst til at se mere tiltalende og smuk ud.

Del # 15: Elementflow

I dette afsnit af kurset lærer du om den typiske strøm af elementer om, hvordan de gengives inde i browseren. Der er to typer HTML-elementer: Inline og Block-elementer

Inline elementer kan ikke tage den widthog heightegenskaber. De vil altid være lige så store som deres indhold. På blokelementer kan du dog indstille begge, widthog heightsom du vil

Del # 16: Float & Clear

I lektionen, vil du lære om floatog clearegenskaber. Disse er meget nyttige, hvis vi vil kontrollere placeringen af ​​HTML-elementer til at flyde til venstre eller højre for hinanden.

Del nr. 17: Float Layout Challenge

Her kommer udfordringen med dette kursus. I det opfordres du til at oprette følgende layout ved hjælp af floategenskaberne. Senere i screencast lærer Eric dig, hvordan du gør det, hvis du har problemer.

Del # 18: Positionsejendom

I denne lektion designer vi en enkel artikelside, hvor vi bruger de tilgængelige positioneringsegenskaber. Vi arbejder med divs, tekstindhold, span og footer.

I slutningen af ​​denne lektion kan du oprette et layout som dette:

Del # 19: Pseudoklasser / -elementer

I den sidste lektion lærer vi om pseudoklasser og -elementer. Vi bruger pseudoklasser til at foretage nogle avancerede niveauvalg af vores HTML-elementer. Dette er en meget nyttig teknik, når vi har at gøre med komplekse websider, der har flere elementer og betingede stylinger

/* unvisited link */ a:link { color: aqua; } /* visited link */ a:visited { color: orange; } 

For eksempel anvender vi i ovenstående kodestykke forskellige klasser på ankertagget ved hjælp af dets tilstand, om det er blevet besøgt eller ej. Der er tusindvis af brugssager til brug af pseudoklasser, og denne lektion hjælper dig med at forstå det grundlæggende koncept for at bruge dem.

Del nr. 20: Hvad er det næste?

I denne sidste screencast af kurset afslutter Eric det, du har lært i løbet af kurset, og giver dig tip til at fortsætte din læringsrejse.

CSS er et stort emne, og de er mange flere funktioner at lære bortset fra hvad der blev dækket under dette kursus!

Hvis du gør det til slutningen, kan du give dig selv et klapp på ryggen. Du har taget et stort skridt i retning af at lære at opbygge og designe websteder, hvilket er en meget værdifuld færdighed.

Så gå videre og tag det gratis kursus i dag! Dit fremtidige selv vil takke dig for det :)

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.