Sužinokite CSS per vieną valandą - nemokamas ir interaktyvus 20 dalių kursas

CSS („Cascading Style Sheet“) yra vienas iš trijų svarbiausių interneto elementų, kartu su HTML ir „JavaScript“. Tai atneša gyvenimą į svetaines per spalvas, stilių, pozicionavimą ir daug daugiau. Taigi žinoti CSS yra labai vertinga šiandieninėje darbo rinkoje!

Taigi džiaugiuosi galėdamas pranešti, kad ką tik pradėjome nemokamus CSS kursus apie „Scrimba“. Tai sukūrė mūsų puikus instruktorius Ericas Tirado, kuris taip pat atliko mūsų populiarų HTML kursų įvadą.

Mažiau nei per valandą Erikas nukels jus nuo nulio iki mokėjimo CSS!

Pažvelkime, kaip yra išdėstytas kursas.

1 dalis. Įvadas

Įvadiniame vaizdo įraše Erikas apžvelgs, kaip atrodo kursas, kokios yra būtinos sąlygos, taip pat temų, kurias jis paliečia viso kurso metu, apžvalga. Jis taip pat trumpai supažindina su savimi, kad prieš šokdami su juo susipažintumėte.

2 dalis: CSS dokumentai ir kaskada

Tada mes pereiname tiesiai į pirmąją oficialią kurso pamoką. Čia mes ieškosime būdų, kaip galime įtraukti CSS į savo HTML puslapius, ir kaip pradėti taikyti pagrindinius stilius savo elementams.

3 dalis: CSS parinkikliai, ypatybės ir vertės

Antroje pamokoje Erikas pasakoja apie kai kuriuos CSS žodynus, kurie leidžia geriau suprasti sąvokas, kurias jis išgyvena vėlesnėse paskaitose. Sužinosite, kas yra HTML elementai, kokie yra CSS parinkikliai ir kaip galite jiems pritaikyti ypatybes ir priskirti reikšmes.

CSS žodynas

Taigi, pavyzdžiui, tai yra h1elementas. Jis turi tam tikrą numatytąjį stilių, kuris rodomas, kai jį pateikiate naršyklėje. Jei norime pakeisti stilių, galime naudoti CSS:

h1 { color: 'red'; } 

Mūsų h1elemento parinkiklis yra tiesiog paties elemento pavadinimas, tada mes jam priskiriame spalvos savybę su raudonos spalvos verte. Lygiai taip pat elementus galime pasirinkti naudodami klases ir ID, o tai aptariama vėlesniuose vaizdo įrašuose.

4 dalis: klasės ir asmens tapatybės dokumentai

Šioje kurso dalyje aptariama, kaip naudoti klases ir ID CSS, norint pasirinkti HTML elementus ir pritaikyti jiems skirtingą stilių. Jame taip pat išsamiai aptariamas klasės ir ID skirtumas ir tai, kaip ir kada mes juos priskiriame HTML elementams

Pažiūrėkite į šį kodą, kad gautumėte pavyzdį:

This is the heading tag

This is a paragraph tag

Pirmiau pateiktą fragmentą sudaro žyma h1(antraštė) ir p(pastraipa). Elementui h1suteikėme klasę, headingo pelementui - IDparagraph.

Savo CSS faile mes pasirenkame antraštės klasę ir suteikiame jai spalvų savybę. Vėliau mes pasirenkame pastraipos ID ir suteikiame jam spalvų ir šrifto dydžio savybes:

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

5 dalis: Specifiškumas

5 kurso dalyje sužinosite apie specifiką, o tai reiškia, kaip naršyklė žinos, kurie stiliai ir taisyklės yra tinkamiausi elementui taikyti.

This is the heading tag

Pvz., Čia mes turime h1žymą su jai pritaikyta antraštės klase.

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

Naudodami CSS priskiriame mėlyną spalvą h1žymai, kuri pakeis kiekvieno spalvą h1. Tada taip pat priskiriame žalią spalvą klasei heading, kad kiekvieno šios klasės elemento spalva būtų pakeista į žalią. Taigi h1aukščiau apibrėžta žyma pasirodys žalia.

6 dalis. Plotis ir aukštis

Šioje pamokoje sužinosite, kaip pritaikyti plotį ir aukštį, kad būtų galima valdyti puslapio formatavimą ir srautą.

Aukščiau pateikiama skaidrė iš pamokos, kuri suteiks jums idėją, kaip mes galime sukurti skyrius ir langelius naudodami plotį ir aukštį, kad mūsų tinklalapis atrodytų tinkamai suformatuotas.

7 dalis: Ilgio vienetai

CSS galime naudoti skirtingus vienetus, kad pamatuotume skirtingus dydžius, kuriuos perduodame kaip savo HTML elementų savybes. Šioje pamokoje išsamiai aptariama, kokie yra tie skirtingi vienetai ir kuo jie skiriasi.

Yra dviejų tipų ilgio vienetai:

  1. Absoliutūs vienetai
  2. Santykiniai vienetai.

Absoliutūs vienetai yra fiksuoto ilgio vienetai, o ilgis, išreikštas bet kuriuo iš jų, pasirodys būtent tokio dydžio. Pavyzdžiui, cm, mm, in, 'px, ir tt yra absoliutūs vienetai.

Kita vertus, santykinio ilgio vienetai nurodo ilgį, palyginti su kita ilgio savybe. Pavyzdžiui, em, ex, rem, ir tt yra absoliutūs vienetai.

8 dalis: Spalvos

Šioje pamokoje išsamiai aptariama, kaip galime naudoti ir pritaikyti spalvas skirtingiems HTML elementams. Jame taip pat aptariami įvairūs būdai, kaip galime paskelbti spalvos pavadinimą savo CSS savybėse.

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

Aukščiau pateiktame pavyzdyje yra trys klasės, deklaruojamos su ta pačia spalvų savybe. Tačiau reikia atkreipti dėmesį į tai, kaip mes panaudojome skirtingus spalvų reikšmių priskyrimo būdus.

Klasė heading1kaip savybę naudoja spalvos pavadinimą (oranžinė). heading2naudojama spalvos šešiakampė reikšmė. Ir heading3naudoja spalvos RGB vertę.

9 dalis: Paminkštinimas

CSS, užpildas naudojamas erdvėms aplink elemento turinį sukurti bet kurioje apibrėžtoje sienoje. Naudodamiesi CSS, galite valdyti užpildą visoms ar bet kurioms elementų pusėms. Šio kurso 9 pamokoje kalbama apie paminkštinimą ir mokoma, kaip galite jį pritaikyti įvairiais būdais.

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

Kaip ir aukščiau pateiktame pavyzdyje, mes galime naudoti tik savybę padding, kuri taikys tarpą visoms pusėms, arba galite nurodyti atskirų krypčių paminkštinimą.

10 dalis: sienos

Šioje pamokoje sužinosite, kaip galite pritaikyti kraštines aplink savo turinį. Taip pat sužinosite apie variantus, kuriuos galite suteikti kraštams naudodami skirtingus stilius ir parinktis, galimas CSS.

Paimkite langelio pavyzdį aukščiau esančiame paveikslėlyje ir atkreipkite dėmesį, kad aplink jį yra skirtingų spalvų ir pločio kraštų.

11 dalis: paraštės

Parinktys CSS yra tarsi užpildas: jie taiko tarpus tarp elemento, bet tai daro už bet kurios apibrėžtos sienos. Šioje pamokoje kalbama apie paraštės naudojimą CSS viduje ir apie tai, kaip tuos pačius paraštus galite naudoti visomis kryptimis arba skirtingus skirtingomis kryptimis.

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

11 dalis: dėžutės modelis

CSS dėžutės modelis yra terminas, kurį naudojame apibūdindami dizainą ir išdėstymą. Mes galime galvoti apie visus HTML elementus kaip langelius, kuriuose kiekviename langelyje yra paraštių, užpildų, kraštinių ir pan. Savybės.

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

Aukščiau pateiktoje iliustracijoje paaiškinamas konceptualus langelio modelis. Šioje pamokoje Erikas paaiškins, kaip mes galime naudoti šią koncepciją, kad geriau suprojektuotume ir sutvarkytume savo elementus.

13 dalis: Matomumas

Mes taip pat galime atnaujinti bet kurio HTML elemento matomumą naudodami CSS. Pavyzdžiui, mes galime paslėpti arba parodyti bet kurį elementą naudodami ypatybę display. Ši pamoka paaiškina tris skirtingus būdus, kaip galime žaisti su elementų matomumu.

.hidden { display: none: } 

Vienas iš trijų matomumo atnaujinimo būdų yra displaynuosavybės naudojimas. Ankstesniame pavyzdyje mes nenustatėme displayypatybės jokiai, kad bet kuris elementas, kurio klasė yra hidden, apskritai nebūtų rodomas naršyklėje.

14 dalis: Šriftai

Šriftai yra viena iš svarbiausių ir naudingiausių CSS funkcijų. Mes galime žaisti su įvairiais šriftų stiliais ir šriftų grupėmis, kad mūsų tekstas atrodytų gerai. Šio kurso 14 pamoka skirta šriftų naudojimui!

Virš paveiksliuko, tekstas Sveiki Pasaulio turi tą font-familyBlack Han Sans’, arial, sans-serifir font-sizeį 30px. Tuo pačiu būdu mes galime pritaikyti įvairias savybes, kad mūsų tekstas atrodytų patraukliau ir gražiau.

15 dalis: elementų srautas

Šiame kurso skyriuje sužinosite apie tipinį elementų srautą apie tai, kaip jie pateikiami naršyklėje. Yra dviejų tipų HTML elementai: Inline ir Block elementai

Įterptieji elementai negali turėti widthir heightsavybių. Jie visada bus tokie dideli, kaip jų turinys. Tačiau blokų elementuose galite nustatyti abu widthir heightkaip norite

16 dalis: „Float & Clear“

Pamokoje sužinosite apie floatir clearsavybes. Tai labai naudinga, jei norime valdyti HTML elementų padėtį, kad jie plauktų vienas kito kairėn ar dešinėn.

17 dalis: „Float Layout Challenge“

Čia kyla šio kurso iššūkis. Joje būsite paraginti sukurti šį išdėstymą naudojant floatypatybes. Vėliau ekrano eteryje Erikas išmokys jus, kaip tai padaryti, jei susiduriate su sunkumais.

18 dalis: pozicijos savybė

Šioje pamokoje sukursime paprastą straipsnio puslapį, kuriame naudosime galimas pozicionavimo ypatybes. Dirbsime su „divs“, teksto turiniu, ilgiu ir poraštėmis.

Šios pamokos pabaigoje galėsite sukurti tokį išdėstymą:

19 dalis: pseudo klasės / elementai

Paskutinėje pamokoje sužinosime apie pseudo klases ir elementus. Mes naudojame pseudoklases tam, kad pasirinktume pažangesnio lygio HTML elementus. Tai yra labai naudinga technika, kai susiduriame su sudėtingais tinklalapiais, turinčiais kelis elementus ir sąlyginius stilius

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

Pavyzdžiui, pirmiau pateiktame kodo fragmente inkaro žymai taikome skirtingas klases pagal jos būseną, ar ji buvo aplankyta, ar ne. Yra tūkstančiai pseudoklasių naudojimo atvejų, ir ši pamoka padės suprasti pagrindinę jų naudojimo koncepciją.

20 dalis: kas toliau?

Šiame paskutiniame kurso ekrane Ericas apibendrina tai, ką išmokote viso kurso metu, ir pateikia patarimų, kaip tęsti mokymosi kelionę.

CSS yra didžiulė tema, ir jos yra daug daugiau funkcijų, kurias reikia išmokti, išskyrus tai, kas buvo aptarta šio kurso metu!

Jei padarysite tai iki galo, galite sau paglostyti nugarą. Žengėte didelį žingsnį mokydamiesi kurti ir kurti svetaines, o tai yra nepaprastai vertingas įgūdis.

Taigi eikite į priekį ir eikite į nemokamą kursą jau šiandien! Tavo būsimasis aš tau už tai padėkos :)

Ačiū, kad skaitėte! Mano vardas Peras Borgenas, esu „Scrimba“ įkūrėjas - lengviausias būdas išmokti koduoti. Jei norite išmokti kurti modernią svetainę profesionaliu lygiu, turėtumėte sužinoti mūsų interaktyvų interneto dizaino „bootcamp“.