К содержанию

Tutorial HTML și CSS pentru începători

Un tutorial simplu de creare de pagini web cu limbajele HTML și CSS pentru începători, cu teorie detaliată și probleme de rezolvat.

Bazele CSS

Bazele lucrului cu limbajul CSS

Cum să lucrezi cu CSS

Cuvinte cheie pentru culori în CSS

Orice culori în CSS

Lățimea și înălțimea elementelor în CSS

Alinierea textului în CSS

Alinierea textului la dreapta în CSS

Alinierea textului la centru în CSS

Alinierea textului la stânga în CSS

Alinierea textului simultan la dreapta și la stânga în CSS

Practică pentru alinierea textului în CSS

Grosimea textului în CSS

Cursiv în CSS

Dimensiunea fontului în CSS

Familia de fonturi în CSS

Spațiul interlinear în CSS

Valoarea line-height fără unități în CSS

Proprietatea prescurtată font în CSS

Linia roșie a textului în CSS

Efecte de text în CSS

Sublinierea textului în CSS

Sublinierea superioară a textului în CSS

Tăierea textului în CSS

Anularea efectelor pentru text în CSS

Exercițiu pe proprietățile CSS de bază

Selectoare

Relații de rudenie între tag-uri în HTML

Moștenirea proprietăților CSS

Gruparea selectorilor în CSS

Proprietăți comune la gruparea selectorilor în CSS

Selectorul de descendenți în CSS

Selectorul copil în CSS

Clasele elementelor în CSS

Tag-ul span pentru bucăți de text în HTML

Tagul div pentru grupare de tag-uri în HTML

Gruparea claselor în CSS

Tag cu clasă specificată în CSS

Selectorul de descendenți și clasele în CSS

Combinații complexe de selectori de descendenți și clase în CSS

Eroarea începătorului în selectorul de descendenți

Element cu mai multe clase CSS

Selectarea elementului după id unic în CSS

Selector după id și clase CSS

Utilizarea id în CSS

Selectarea elementelor după mai multe clase în CSS

Mai mulți selectori scriși împreună în CSS

Eroare la utilizarea mai multor selectoare CSS

Gruparea selectorilor complecși în CSS

Eroare la gruparea selectorilor CSS complecși

Practică pe combinații de selectori CSS

Prioritatea selectorilor CSS

Observație privind conflictul de proprietăți CSS

Regulile de specificitate în CSS

Prioritatea selectorilor descendenți în CSS

Selectorul adiacent în CSS

Selectorul frate în CSS

Selectorul universal în CSS

Selectoare de atribute în CSS

Stări ale linkurilor în CSS

Nuanțe ale secvenței stărilor linkurilor în CSS

Stările linkurilor link și visited în CSS

Utilizarea comună a stărilor linkurilor în CSS

Selectori complexe cu stări ale linkurilor în CSS

Link cu clasă în CSS

Selectarea elementelor terminale în CSS

Selectarea după poziția elementelor în CSS

Selectarea unui singur copil în CSS

Selectarea elementelor goale în CSS

Selectarea după poziție și tipul elementelor în CSS

Selectorul de negație în CSS

Decorare

Setarea culorii de fundal în CSS

Bazele lucrului cu borduri în CSS

Border solid în CSS

Border punctat în CSS

Border ca linie întreruptă în CSS

Bordura convexă în CSS

Bordura dublă în CSS

Proprietatea scurtă pentru bordură în CSS

Border pentru laturi individuale în CSS

Rotunjirea colțurilor blocului în CSS

Rotunjirea colțurilor fundalului în CSS

Crearea unui cerc în CSS

Rotunjiri diferite pentru colțuri diferite în CSS

Patru valori de rotunjire pentru colțuri diferite în CSS

Două valori de rotunjire pentru colțuri diferite în CSS

Trei valori de rotunjire pentru colțuri diferite în CSS

Colțuri rotunjite în procente în CSS

Crearea unui cerc cu border-radius în procente în CSS

Imagine de fundal în CSS

Repetarea imaginii de fundal în CSS

Alte proprietăți pentru fundal în CSS

Lucrul cu markeri de liste ul în CSS

Marcatori pătrați pentru liste ul în CSS

Marcatori de listă ul sub formă de cercuri în CSS

Lucrul cu markeri de listă ul în CSS

Eliminarea marcatorilor de listă ul în CSS

Lucrul cu markeri pentru liste ol în CSS

Cifre romane mici pentru liste ol în CSS

Cifre romane majuscule pentru liste ol în CSS

Litere latine mici pentru liste ol în CSS

Litere latine majuscule pentru liste ol în CSS

Litere grecești mici pentru liste ol în CSS

Numere cu zero în față pentru liste ol în CSS

Modelul de bloc

Lucrul cu marginile (margin) în CSS

Margin-uri pentru diferite laturi în CSS

Mai multe valori în proprietatea margin în CSS

Cele patru valori ale proprietății margin în CSS

Două valori în proprietatea margin în CSS

Trei valori în proprietatea margin în CSS

Lucrul cu padding-ul în CSS

Spațiile interioare padding pentru diferite laturi în CSS

Mai multe valori în proprietatea padding în CSS

Lucrul cu padding-ul în CSS

Influența bordurii asupra expansiunii elementelor în CSS

Influența padding-ului și a bordurii asupra expansiunii elementelor în CSS

Anularea extinderii elementelor în CSS

Particularitățile elementelor bloc în CSS

Lățimea și înălțimea unui element bloc în CSS

Lățimea unui element bloc în CSS

Înălțimea unui element bloc în CSS

Înălțimea unui element bloc fără conținut în CSS

Mai multe elemente bloc unul lângă altul în CSS

Particularitățile elementelor inline în CSS

Lățimea și înălțimea unui element inline în CSS

Mai multe elemente inline unul lângă altul în CSS

Spațiile dintre elementele inline în CSS

Definirea modelului de bloc al etichetelor HTML

Lucrul cu proprietatea display în CSS

Particularitățile elementelor inline-block în CSS

Lățimea și înălțimea unui element inline-block în CSS

Lățimea unui element inline-block în CSS

Înălțimea elementului inline-block în CSS

Mai multe elemente inline-block unul lângă altul în CSS

Alinierea elementelor bloc în CSS

Alinierea unui element bloc cu indentare în stânga în CSS

Alinierea unui element bloc cu margin dreapta în CSS

Alinierea elementelor inline în CSS

Centrarea elementelor inline în CSS

Centrarea mai multor elemente inline

Alinierea elementelor inline la dreapta în CSS

Alinierea elementelor inline-block în CSS

Centrarea elementelor inline-block în CSS

Alinierea elementelor inline-block pe marginea dreaptă în CSS

Elemente Flex în CSS

Înălțimea părintelui elementelor flex în CSS

Lățimea părintelui elementelor flex în CSS

Părintele inline-block al elementelor flex în CSS

Spațiile de la marginea interioară (padding) al părintelui elementelor flex în CSS

Margin-uri pentru descendenți în CSS

Alinierea elementelor flex în CSS

Alinierea elementelor flex pe centru în CSS

Alinierea elementelor flex pe părinte în CSS

Alinierea elementelor flex pe părinte cu marginii

Alinierea elementelor flex în container cu spații egale

Poziționarea

Poziționarea absolută a elementelor în CSS

Poziționarea relativă a elementelor în CSS

Poziționarea relativă la părinte în CSS

Poziționarea relativă la părintele absolut în CSS

Poziționarea absolută fără coordonate în CSS

Centrarea prin absolut în CSS

Valori negative în poziționarea CSS

Poziționarea fixă în CSS

Bloc pe toată lățimea ecranului în CSS

Suprapunerea elementelor pe axa Z în CSS

Reglarea suprapunerii elementelor pe axa Z în CSS

Nuanțe ale aplicării valorii negative z-index în CSS

Float-uri

Introducere în proprietatea float în CSS

Pătrunzerea elementelor flotante prin tag-uri în CSS

Combinația float și margin în CSS

Combinația float și padding în CSS

Elemente flotante sub etichete în CSS

Acțiunea elementelor flotante asupra părintelui în CSS

Înălțimea părintelui elementelor flotante în CSS

Text în părintele float-urilor în CSS

Flotarea în CSS

Anularea fluxului cu proprietatea clear în CSS

Div separat cu clearfix în CSS

Clearfix și înălțimea părintelui în CSS

Proprietatea float pentru blocuri în CSS

Proprietatea float și mai multe blocuri în CSS

Proprietatea float și părintele fără text în CSS

Flexbox

Plasarea elementelor flex în rând sau coloană în CSS

Poziționarea elementelor flex într-un rând inversat în CSS

Plasarea elementelor flex în coloană în CSS

Inversarea coloanei cu elemente flex în CSS

Axa principală și axa transversală în blocurile flex în CSS

Alinierea elementelor flex pe axa principală în CSS

Alinierea elementelor flex pe axa transversală în CSS

Valoarea center a proprietății align-items în CSS

Centrarea fără înălțimea blocurilor în CSS

Centrarea cu blocuri de înălțimi diferite în CSS

Semnificația valorii stretch pentru proprietatea align-items în CSS

Exercițiu practic de aliniere pe axe în CSS

Alinierea unui element individual în modelul flex din CSS

Ordinea blocurilor flex în CSS

Grile

Introducere în CSS Grid

Track-uri și linii în Grid-urile CSS

Afișarea gridurilor în instrumentul de dezvoltare al browserului

Numărul și lățimea coloanelor în grid-urile CSS

Unitatea fr în Grid-urile CSS

Unitățile fracționale fr în grid-urile CSS

Pixeli și unitățile fr în grid-urile CSS

Procente și unități fr în grid-uri CSS

Funcția repeat în grid-urile CSS

Valoarea auto în grid-urile CSS

Semnificația auto-fill în grid-urile CSS

Funcția minmax în grid-urile CSS

Semnificația auto-fit în grid-urile CSS

Numărul și lățimea rândurilor în grid-urile CSS

Prescurtare pentru rânduri și coloane în grid-urile CSS

Alinierea rândurilor în grila CSS

Combinarea coloanelor în grid-urile CSS

Combinații de întindere pe rânduri și coloane în grid-urile CSS

Suprapunerea coloanelor în grid-urile CSS

Distanța dintre coloane în grid-urile CSS

Distanța dintre rânduri în grid-urile CSS

Distanța dintre coloane și rânduri în grid-urile CSS

Grile CSS cu Layout în Mozaic

Layout-uri

Crearea meniurilor în CSS

Layout-uri simple de site cu o singură coloană în CSS

Schema de layout cu wrapper-e multiple în CSS

Blocuri structurale ale site-ului în HTML

Schema de layout cu două coloane pentru site în CSS

Schema de layout cu trei coloane pentru site în CSS

Tag-uri speciale pentru elementele de layout ale site-ului în HTML

Tag-urile principale de layout în HTML

Eticheta pentru secțiuni în HTML

Exercițiu pe layout-uri HTML și CSS