Bazele aspectului conținutului - curs 3.900 RUB. din Hexlet, antrenament 18 ore, Data: 1 decembrie 2023.
Miscelaneu / / December 04, 2023
Astăzi, foile de stil oferă oportunități excelente pentru stilarea textului și a blocurilor pe o pagină: fundal, culoare, utilizarea audio și video. Toate aceste elemente vă permit să creați site-uri colorate și accesibile pentru utilizatori. S-a petrecut mult timp învățând noi selectoare, pseudo-clase și pseudo-elemente. Ele vă permit să stilizați conținutul într-un mod extraordinar.
Teste
Acestea sunt sarcini practice pe care vă recomandăm să le finalizați după finalizarea cursului. Misiunile vă vor ajuta să obțineți experiență suplimentară în programare și să vă consolidați abilitățile dobândite. De obicei, vă recomandăm să completați 3-5 teste. Dar dacă nu merge, nu dispera. Doar reveniți la ei mai târziu.
1. Introducere
Lucrul cu conținutul este o parte de bază atunci când creați un proiect. Există conținut ascuns în spatele animațiilor, blocurilor și imaginilor frumoase. Utilizatorul vine pe site sau deschide o aplicație pentru acesta. În această lecție ne vom uita pe scurt la subiectele care vor fi studiate pe parcursul cursului.
teorie
2. Box Model și CSS
Ce proprietăți CSS afectează dimensiunea elementelor atunci când sunt afișate pe pagină? Să ne amintim conceptul de model de casetă și să studiem cum funcționează proprietățile de margine, de umplutură și de chenar pentru a seta căptușeala externă/internă și marginile vizibile ale unui element. Să facem cunoștință cu proprietatea de dimensionare a cutiei, care schimbă comportamentul standard al modelului de cutie
teorie
3. Stiluri de text
Crearea unei pagini înseamnă, în primul rând, lucrul cu text. Oricât de frumos este designul, dacă informația este dificil sau imposibil de citit, utilizatorul va părăsi rapid pagina. În această lecție ne vom familiariza cu proprietățile de bază ale stilului textului.
teorie
teste
exercițiu
4. Fonturi și lucrul cu ele
Ați auzit expresia „joacă-te cu fonturile”? E timpul să faci asta. Învățăm să conectăm fonturi folosind CSS, să controlăm dimensiunea textului, designul și să setăm spațierea între linii. La sfârșitul lecției, vom studia proprietatea fontului generalizat, cu care puteți seta 6 stiluri diferite de text simultan
teorie
teste
exercițiu
5. Liste
Listele sunt parte integrantă a textului. Ele vă permit să grupați fragmente înrudite, unindu-le în funcție de semnificația lor. În această lecție, vom explora tipurile disponibile de liste în HTML, vom exersa listele de imbricare și vom atinge subiectul marcatorilor de liste de stil
teorie
teste
exercițiu
6. Coloane
Crearea unui aspect de reviste cu mai multe coloane a fost problematică folosind CSS. Odată cu apariția standardului CSS3, a apărut un nou modul - CSS Multi-column Layout, care a făcut posibilă crearea coloanelor cu transfer automat de conținut. Să studiem capacitățile modulului Coloane CSS și limitările care sunt impuse cu această metodă de stilare a textului
teorie
teste
exercițiu
7. Unități
La fel ca în lumea reală, lumea aspectului folosește unități de măsură pentru a indica dimensiunile elementelor, umplutura, dimensiunea textului și așa mai departe. În această lecție ne vom familiariza cu unitățile de măsură de bază și relația lor cu elementele de pe site. Să studiem conceptul de unități relative și absolute și să identificăm diferența dintre unitățile em și rem
teorie
teste
exercițiu
8. Elemente media
Vizitatorilor site-ului nu le place doar să citească text, ci și să perceapă informații prin elemente media: imagini, video, audio. Cum să le adăugați corect și să țineți cont de diferențele dintre browser? De ce imaginea de pe site are o mică liniuță în partea de jos? Să explorăm asta și puțin mai mult în lecție.
teorie
teste
exercițiu
9. Mese
Mesele sunt coșmarul unui designer de layout. Pentru a le crea sunt folosite o mulțime de etichete, iar micile greșeli pot distruge starea de spirit. În această lecție, pas cu pas, vom studia crearea de tabele simple și complexe, vom înțelege de unde pot apărea erorile și cum să le prevenim. Până la sfârșitul lecției, vei putea să creezi cu încredere tabele și să nu-ți mai fie frică de ele.
teorie
teste
exercițiu
10. Forme
Formularele sunt un element interactiv important al unei pagini web. La fel ca linkurile, formularele oferă interacțiune între utilizator și pagină, permițându-vă să trimiteți date. Să învățăm cum să creăm formulare, să adăugăm câmpuri de text, câmpuri de selecție, liste și butoane. Să atingem tema accesibilității formularelor pentru persoanele cu dizabilități
teorie
teste
exercițiu
11. Selectoare
Pentru această lecție, am învățat și am testat selectoare simple care ne-au permis să selectăm elemente după clasă, identificator sau etichetă. Cum altfel poți selecta un element de pe pagină? În această lecție vom analiza selectoarele înrudite și învecinate, vom învăța cum să folosim selectoarele după atribut
teorie
teste
exercițiu
12. Pseudo-clase
Să continuăm subiectul selectorilor în CSS și să ne familiarizăm cu conceptul de pseudo-clasă. Să învățăm cum să le folosim pentru a selecta elemente pare sau impare, cum să adăugați noi stiluri de hover mouse-ul pe un element și de ce chiar și elementele vor fi așa atunci când folosiți doar un anumit pseudo-clasă. Să înțelegem stările elementului și pseudoclasele structurale
teorie
teste
exercițiu
13. Pseudo-elemente
Lipsesc elemente de pe pagină? Pseudo-elemente vin în ajutor - elemente create folosind CSS. În această lecție ne vom uita la modul în care sunt create pseudoelementele, de ce sunt necesare și ce caracteristici au. Să vedem cum sunt stilați marcatorii de listă în CSS
teorie
teste
14. Revărsare
Overflow este o situație în care conținutul din interiorul unui container este mai mare decât dimensiunea containerului în sine. Această situație poate strica aspectul chiar și pentru un designer de layout cu experiență. Vom învăța ce să facem cu aceasta și cum să gestionăm ascunderea conținutului folosind proprietatea de overflow în această lecție. Să ne uităm la proprietatea text-overflow și să învățăm cum să adăugați puncte de suspensie în texte dacă nu există suficient spațiu pentru aceasta
teorie
teste
exercițiu
15. Variabile CSS
Imaginează-ți că pe un site web există o duzină de blocuri cu un fundal de aceeași culoare. Trebuie să schimbați toate aceste culori. Cum să faceți acest lucru fără a înlocui constant culoarea în fiecare selector și cum vă pot ajuta variabilele vom învăța în această lecție. Să vedem cum sunt create și utilizate variabilele, să aflăm despre domeniul de aplicare și de ce variabilele globale sunt mai bune decât variabilele per-selector
teorie
teste
16. fundal
Un designer de layout se confruntă adesea cu nevoia de a stila nu numai elemente specifice, cum ar fi tabele, liste, text, elemente media și formulare. Uneori trebuie să stilizați și blocurile în care se află în interior. Pentru a face acest lucru, puteți seta fundalul blocului cu conținut și vom învăța cum să facem acest lucru folosind proprietatea de fundal în această lecție. Să studiem proprietățile pentru setarea culorii, imaginii, să învățăm cum să poziționăm fundalul și să îi setăm dimensiunea
teorie
teste
17. Gradiente
Un fundal sau o imagine cu o singură culoare nu este singura modalitate de a stila un bloc. Artiștii și designerii folosesc adesea gradienți pentru a crea fundaluri - tranziții ușoare de la o culoare la alta. În acest tutorial vom învăța cum să creăm gradienți liniari și radiali. Folosind degrade și trucuri, vom studia crearea de tranziții clare între culori și, de asemenea, vom afla despre roata culorilor și cum, cu ajutorul ei, să găsim combinații de culori pentru degrade.
teorie
exercițiu
18. Muncă independentă
Sarcini suplimentare care vă permit să consolidați teoria dobândită
19. Materiale suplimentare
Articole și videoclipuri organizate de echipa Hexlet. Te va ajuta să aprofundezi subiectul cursului