Aflati CSS intr o ora Curs gratuit si interactiv din
Faceți clic aici pentru a ajunge la curs.

CSS (Cascading Style Sheet) este una dintre cele trei pietre de temelie ale web-ului, alături de HTML și JavaScript. Este ceea ce dă viață site-urilor web prin culori, stil, poziționare și multe altele. Astfel, cunoașterea CSS este extrem de valoroasă pe piața muncii de astăzi!

Așa că sunt fericit să vă anunț că tocmai am făcut-o a lansat un curs CSS gratuit pe Scrimba. Este creat de strălucitul nostru instructor Eric Tirado, care a făcut și popularul nostru introducere la cursul HTML.

În mai puțin de o oră, Eric vă va duce de la zero la competenți în CSS!

Să aruncăm o privire la cum cursul este așezat.

Partea # 1: Introducere

În videoclipul introductiv, Eric vă va oferi o imagine de ansamblu a aspectului cursului, a premiselor, plus o prezentare generală a subiectelor pe care le atinge de-a lungul cursului. De asemenea, vă oferă o scurtă introducere despre sine, astfel încât să vă familiarizați cu el înainte de a sări.

Partea # 2: Documente CSS și Cascada

Sărim apoi direct în prima lecție formală a cursului. În aceasta, vom căuta modalitățile prin care putem include CSS în paginile noastre HTML și cum să începem să aplicăm stiluri de bază pe elementele noastre.

1611650828 798 Aflati CSS intr o ora Curs gratuit si interactiv din

Partea # 3: Selectoare, proprietăți și valori CSS

În cea de-a doua lecție, Eric vorbește despre o parte din vocabularul CSS care te pregătește să înțelegi mai bine conceptele prin care trece prin prelegeri ulterioare. Veți afla ce sunt elementele HTML, ce sunt selectoarele CSS și cum puteți aplica proprietăți și le puteți atribui valori.

Vocabular CSS

Deci, de exemplu, acesta este un h1 element. Are un stil implicit care apare atunci când îl redați în browser. Dacă dorim să schimbăm unele stiluri, putem folosi CSS:

h1 {  
   color: 'red';  
}

Selectorul nostru h1 element este pur și simplu numele elementului în sine, iar apoi îi atribuim proprietatea culorii cu valoarea roșu. În același mod, putem selecta elemente folosind și clase și ID-uri, ceea ce este discutat în videoclipurile ulterioare.

Partea # 4: Clase și ID-uri

Această parte a cursului discută despre modul de utilizare a claselor și ID-urilor în CSS pentru a selecta elemente HTML și pentru a aplica stiluri diferite pe ele. De asemenea, discută în detaliu diferența dintre clasă și ID și cum și când le atribuim elementelor HTML

Uitați-vă la următorul cod pentru un exemplu:

<h1 class="heading">This is the heading tag</h1>

<p class="paragraph">This is a paragraph tag</p>

Fragmentul de mai sus este format dintr-un h1 (titlu) și a p (paragraf) etichetă. Am dat h1 element clasa de heading și al nostru p element ID-ul de paragraph.

În fișierul nostru CSS, selectăm clasa de titlu și îi oferim proprietatea culorii. Mai târziu, selectăm ID-ul paragrafului și îi oferim proprietățile culorii și dimensiunii fontului:

.heading {  
   color: blue  
}

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

Partea # 5: Specificitate

În partea 5 a cursului, veți afla despre specificitate, ceea ce înseamnă cum un browser ar ști ce stiluri și reguli sunt cele mai relevante pentru un element de aplicat.

<h1 class="heading">This is the heading tag</h1>

De exemplu, aici avem un h1 etichetați cu clasa de antet aplicată.

h1 {  
   color: blue;  
}

.heading {  
   color: green;  
}

Folosind CSS, atribuim culoarea albastru h1 etichetă care va schimba culoarea fiecăruia h1 . De asemenea, atribuim clasa culoarea verde heading, astfel încât fiecare element cu această clasă să aibă culoarea suprascrisă la verde. Asa ca h1 eticheta definită mai sus va apărea ca verde.

Partea # 6: Lățime și înălțime

În această lecție, veți învăța cum să aplicați lățimea și înălțimea pentru a controla formatarea și fluxul paginii.

1611650828 757 Aflati CSS intr o ora Curs gratuit si interactiv din

Mai sus este un diapozitiv din lecție, care vă va oferi o idee despre modul în care putem crea secțiuni și casete folosind lățimea și înălțimea pentru a face ca pagina noastră web să arate formatată corect.

Partea # 7: Unități de lungime

În CSS, putem utiliza diferite unități pentru a măsura diferitele dimensiuni pe care le transmitem ca proprietăți ale elementelor noastre HTML. Această lecție discută în detaliu care sunt acele unități diferite și cum diferă în ceea ce privește utilizarea.

Există două tipuri de unități de lungime:

  1. Unități absolute
  2. Unități relative.

Unitățile absolute sunt unități de lungime fixă, iar o lungime care este exprimată în oricare dintre ele va apărea exact ca dimensiunea respectivă. De exemplu, cm, mm, in, 'px, și așa mai departe sunt unități absolute.

Pe de altă parte, unitățile de lungime relativă specifică o lungime relativă la o altă proprietate de lungime. De exemplu, em, ex, rem, și așa mai departe sunt unități absolute.

Partea # 8: Culori

Această lecție discută în detaliu cum putem folosi și aplica culori la diferite elemente HTML. De asemenea, discută diferite moduri în care putem declara numele culorii în proprietățile noastre CSS.

.heading1 {  
   color: orange;  
}

.heading2 {  
   color: #ff6347;  
}

.heading3 {  
   color: RGB(255, 99, 71);  
}

Exemplul de mai sus are trei clase declarate cu aceeași proprietate de culoare atribuită lor. Dar punctul de observat este modul în care am folosit diferite moduri de a atribui valorile culorilor.

Clasă heading1 folosește numele culorii (portocaliu) ca proprietate. heading2 folosește valoarea hexagonală a culorii. Și heading3 folosește valoarea RGB a culorii.

Partea # 9: Garnitura

În CSS, umplutura este utilizată pentru a crea spații în jurul conținutului unui element în interiorul oricăror margini definite. În CSS, aveți controlul pentru a aplica umplutura tuturor sau oricărei părți a elementelor. Lecția 9 a acestui curs vorbește despre căptușeală și vă învață cum să o aplicați în diferite moduri.

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

La fel ca în exemplul de mai sus, fie putem folosi proprietatea padding, care va aplica distanța pe toate laturile sau, alternativ, puteți oferi umplutură direcțiilor individuale.

Partea # 10: Frontiere

În această lecție, veți afla cum puteți aplica margini în jurul conținutului dvs. Veți afla, de asemenea, despre variantele pe care le puteți da chenarelor folosind diferite stiluri și opțiuni disponibile în CSS.

1611650828 452 Aflati CSS intr o ora Curs gratuit si interactiv din

Luați exemplul casetei din imaginea de mai sus și observați marginile din jurul ei cu diferite culori și lățime.

Partea # 11: margini

Marginile din CSS sunt ca umplutura: aplică spațierea în jurul elementului, dar o fac în afara oricărei margini definite. Această lecție vorbește despre utilizarea marginilor în interiorul CSS și despre modul în care puteți aplica aceleași margini în toate direcțiile sau margini diferite în direcții diferite.

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

Partea # 11: Modelul cutiei

Modelul Box în CSS este un termen pe care îl folosim atunci când descriem designul și aspectul. Ne putem gândi la toate elementele HTML ca la niște casete în care fiecare casetă conține proprietăți de margini, umplutură, margini și așa mai departe.

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

Ilustrația de mai sus explică modelul conceptual al cutiei. În această lecție, Eric va explica modul în care putem folosi acest concept pentru a proiecta și aranja mai bine elementele noastre.

Partea # 13: Vizibilitate

De asemenea, putem actualiza vizibilitatea oricărui element din HTML folosind CSS. De exemplu, putem ascunde sau afișa orice element folosind proprietatea lui display. Această lecție explică trei moduri diferite în care ne putem juca cu vizibilitatea elementelor.

.hidden {  
   display: none:  
}

Una dintre cele trei modalități de actualizare a vizibilității este utilizarea display proprietate. În exemplul de mai sus, am setat display proprietate pentru nimeni, astfel încât orice element care are clasa de hidden nu va apărea deloc în browser.

Partea # 14: Fonturi

Fonturile sunt una dintre cele mai importante și utile caracteristici ale CSS. Ne putem juca cu diferite tipuri de stiluri de fonturi și familii de fonturi pentru a face textul nostru să arate bine. Lecția 14 a acestui curs este despre utilizarea fonturilor!

1611650829 811 Aflati CSS intr o ora Curs gratuit si interactiv din

În imaginea de mai sus, textul Hello World are font-family de Black Han Sans’, arial, sans-serif si font-size de 30px. În același mod, putem aplica diferite proprietăți pentru a face textul nostru să arate mai atrăgător și mai frumos.

Partea # 15: Fluxul elementului

În această secțiune a cursului, veți afla despre fluxul tipic de elemente despre modul în care acestea sunt redate în browser. Există două tipuri de elemente HTML: elemente Inline și Block

Elementele inline nu pot lua width și height proprietăți. Vor fi întotdeauna la fel de mari ca și conținutul lor. Cu toate acestea, pe elementele de bloc, puteți seta ambele width și height cum doriți

1611650829 614 Aflati CSS intr o ora Curs gratuit si interactiv din

Partea # 16: Float & Clear

În lecție, veți învăța despre float și clear proprietăți. Acestea sunt foarte utile dacă vrem să controlăm poziția elementelor HTML care să plutească la stânga sau la dreapta una de cealaltă.

1611650829 456 Aflati CSS intr o ora Curs gratuit si interactiv din

Partea # 17: Provocarea aspectului plutitor

Aici vine provocarea acestui curs. În acesta, veți fi încurajat să creați următorul aspect folosind float proprietăți. Mai târziu, în ecran, Eric vă va învăța cum să faceți acest lucru în cazul în care vă confruntați cu dificultăți.

1611650830 787 Aflati CSS intr o ora Curs gratuit si interactiv din

Partea # 18: Proprietatea poziției

În această lecție, vom proiecta o pagină simplă a articolului în care folosim proprietățile de poziționare disponibile. Vom lucra cu divsuri, conținut text, interval și subsol.

La sfârșitul acestei lecții, veți putea crea un aspect ca acesta:

1611650830 36 Aflati CSS intr o ora Curs gratuit si interactiv din

Partea # 19: Pseudo Clase / Elemente

În lecția finală, vom învăța despre pseudo clase și elemente. Folosim pseudo-clase pentru a face câteva selecții de nivel avansat ale elementelor noastre HTML. Aceasta este o tehnică foarte utilă atunci când avem de-a face cu pagini web complexe care au elemente multiple și stiluri condiționate

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

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

De exemplu, în fragmentul de cod de mai sus, aplicăm diferite clase etichetei de ancorare folosind starea sa dacă a fost vizitată sau nu. Există mii de cazuri de utilizare pentru utilizarea pseudo-claselor, iar această lecție vă va ajuta să înțelegeți conceptul de bază al utilizării acestora.

Partea # 20: Ce urmează?

În acest ultim ecran al cursului, Eric încheie ceea ce ați învățat de-a lungul cursului și vă oferă sfaturi despre continuarea călătoriei dvs. de învățare.

CSS este un subiect vast și sunt mult mai multe caracteristici de învățat, în afară de ceea ce a fost acoperit în timpul acestui curs!

1611650830 289 Aflati CSS intr o ora Curs gratuit si interactiv din

Dacă ajungi până la capăt, poți să-ți dai o palmă pe spate. Ați făcut un mare pas către învățarea cum să creați și să proiectați site-uri web, ceea ce reprezintă o abilitate extrem de valoroasă.

Deci, mergeți mai departe și ia cursul gratuit astăzi! Viitoarea ta persoană îți va mulțumi pentru asta 🙂


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.