Rezultate pentru tag: dreapta

Proiecții ortogonale pe un plan

Proiecția unui punct pe un plan. Proiecția unui segment pe un plan. Lungimea proiecției unui segment pe un plan. Proiecția unei drepte pe un plan.

Teorema celor trei perpendiculare

Distanța de la un punct la o dreaptă în spațiu. Teorema celor trei perpendiculare. Enunțul și demonstrația teoremei celor trei perpendiculare. 

Unghiul a două plane

Unghi diedru. Unghi plan al unui diedru. Determinarea măsurii unghiului format de două plane

Propagarea luminii. Reflexia si refracţia.

Propagarea luminii în medii omogene: constanţa vitezei şi conceptul de rază de lumină. Legile reflexiei şi refracţiei. Reflexia totală: definiţie, aplicaţii.

Prisma. Oglinzi plane şi sferice.

Prisma optică. Formarea imaginilor. Oglinda plană. Oglinzi sferice: proprietăţi, construcţia imaginilor.

Aproximaţiile lentilei. Lentila convergentă.

Aproximaţiile lentilei: lentila subţire, stigmatismul. Lentila convergentă: proprietăţi, construcţia imaginilor.

Lentile divergente. Convergenţa lentilelor.

Lentile divergente: proprietăţi, construcţia imaginilor. Convergenţa lentilelor: definiţie, ecuaţie.

Formulele lentilelor: Newton şi Descartes.

Explicarea convenţiei de semn pentru lentile. Deducerea formulelor Newton şi Descartes pentru imagini în lentile.

Microscopul. Ochiul uman.

Exemple de instrumente optice cu sisteme centrate de lentile: microscopul (parametri, exemple) şi ochiul uman (componente, acomodarea).

Noţiuni de cinematică.

Introducem noţiunile şi mărimile de bază ale cinematicii. Discutăm ecuaţia de mişcare. Prezentăm definiţia şi proprietăţile vectorilor.

Mişcarea rectilinie uniform variată.

Definiţie, legea vitezei, ecuaţia mişcării, relaţia Galilei.

Acţiunea şi reacţiunea. Problemă de dinamică.

Principiul III, al acţiunii şi reacţiunii. Exemplu de problemă dinamică rezolvată.

Momentul forţei. Cuplul de forţe.

Efectul forţelor la rotaţia unui solid rigid. Momentul forţei şi cuplul de forţe. Convenţii de semn.

Procese izobare. Procese izocore.

Procese izobare: legea Gay-Lussac. Procese izocore: legea Charles. Temperatura zero absolut.

Tabelul periodic – grupe şi perioade

Tabelul periodic. Grupe, perioade. Legea periodicității. Grupe principale, Grupe secundare. Electron distinctiv. Metale alcaline. Metale alcalino-pământoase. Halogeni.

Poziţia elementelor în tabelul periodic şi proprietăţile periodice

Tabelul periodic. Poziţia elementelor în tabelul periodic. Proprietăţile periodice. Raza atomică, volumul atomic. Ion, cation, anion.

Variaţia energiei de ionizare

Ion, cation, anion. Proprietăți periodice. Energie de ionizare - definiție, variație în tabelul periodic.

Variaţia proprietăţilor periodice chimice

Proprietățile periodice chimice. Electronegativitate, caracter metalic, caracter nemetalic, valență. Scara electronegativităţii. Elemente electronegative şi elemente electropozitive. Proprietăţile fizice ale metalelor şi nemetalelor. Caracterul bazic şi caracterul acid al oxizilor metalici. 

Echilibre chimice – legea acţiunii maselor

Reacţia directă, reacţia inversă. Procedeul Haber, obţinerea amoniacului. Starea de echilibru chimic. Variaţia în timp a concetraţiilor şi a vitezelor de reacţie. Reacţii reversibile. Legea acţiunii maselor. Constanta de echilibru. Aplicaţii – legea acţiunii maselor. 

Echilibre chimice – aplicaţie

Viteza reacţiei directe, viteza reacţiei inverse. Starea de echilibru chimic. Constanta de echilibru. Aplicaţii. 

Factorii care influenţează echilibrele chimice

Principiul lui LeChatelier. Influenţa concentraţiei, a presiunii şi a temperaturii asupra echilibrelor chimice. Reacţii endoterme şi reacţii exoterme. Procedeul Haber-Bosch, obţinerea amoniacului la scală industrială. Reacţii reversibile şi reacţii ireversibile. 

Operații cu numere naturale. Ordinea efectuării operațiilor

Ordinea efectuării operaţiilor. Adunarea, scăderea, înmulțirea și împărțirea, ridicarea la putere

Sisteme de numerație

Sistemul de numerație zecimal (baza 10). Sistemul de numerație binar (baza 2). Sistemul de numerație hexazecimal (baza 16). Conversia unui număr dintr-un sistem de numerație în altul.

Ordonarea numerelor întregi

Compararea numerelor întregi. Ordonarea numerelor întregi.

Transformarea fracţiilor ordinare cu numitorul putere a lui 10 în fracţii zecimale

Transformarea fracțiilor ordinare în fracții zecimale. Metode de transformare a fracţiilor ordinare în fracții zecimale.

Ecuații de gradul întâi cu două necunoscute

Ecuația de gradul I cu două necunoscute. Reprezentarea geometrică a mulțimii soluțiilor unei ecuații de gradul întâi cu două necunoscute.

Intervale de numere reale

Noțiunea de interval. Intervale mărginite de numere reale, intervale nemărginite.  Interval deschis, interval închis. Legătura dintre intervale și modul.  Determinarea soluțiilor unor inecuații (în mulțimea numerelor reale) care au necunoscuta în modul.

Rotunjirea şi aproximarea unui număr real

Aproximări, rotunjiri. Aproximarea unui număr real. Rotunjirea unui număr real.

Secțiuni axiale în corpurile care admit axă de simetrie

Exemple de secțiuni axiale în corpurile geometrice care admit axă de simetrie.

Funcţii liniare

Funcție liniară. Trasarea graficului unei funcții liniare. Intersecția dintre graficul unei funcții și axele de coordonate.

Punct, dreaptă, semidreaptă, segment, plan, semiplan

Noţiuni elementare în geometrie. Punct, dreaptă, semidreaptă, segment, plan, semiplan.

Pozițiile relative ale unui punct față de o dreaptă. Puncte coliniare

Poziţiile relative ale unui punct faţă de o dreaptă. Puncte coliniare. Puncte necoliniare.

Unghiuri adiacente. Bisectoarea unui unghi

Unghiuri adiacente. Bisectoarea unui unghi. Unghiuri congruente.

Triunghiul

Definiţia unui triunghi. Elementele unui triunghi. Noțiunea de perimetru triunghi, semiperimetru. Suma măsurilor unghiurilor unui triunghi. Unghi exterior unui triunghi.

Drepte perpendiculare. Distanţa de la un punct la o dreaptă

Drepte perpendiculare. Distanţa de la un punct la o dreaptă. Două drepte concurente care formează un unghi drept se numesc drepte perpendiculare.

Bisectoarea unui unghi. Concurența bisectoarelor unghiurilor unui triunghi

Linii importante în triunghi: bisectoarea, concurența bisectoarelor. Proprietatea punctelor situate pe bisectoarea unui unghi. Centrul cercului înscris în triunghi.

Drepte paralele. Criterii de paralelism

Drepte paralele tăiate de o secantă. Unghiuri alterne interne. Unghiuri alterne externe. Unghiuri corespondente. Unghiuri interne de aceeaşi parte a secantei. Unghiuri externe de aceeaşi parte a secantei. Axioma lui Euclid. Distanța dintre două drepte paralele.

Centrul de simetrie şi axe de simetrie pentru patrulaterele studiate

Centru de simetrie şi axe de simetrie pentru patrulaterele studiate.

Teorema reciprocă a Teoremei lui Thales

Folosim reciproca Teoremei lui Thales pentru a demonstra că două drepte sunt paralele.

Proiecţii ortogonale pe o dreaptă

Proiecţia ortogonală a unui punct pe o dreaptă, proiecția ortogonală a unui segment pe o dreaptă

Teorema lui Pitagora

Într-un triunghi dreptunghic, suma pătratelor lungimilor catetelor este egală cu pătratul lungimii ipotenuzei.

Cercul- definiție, elemente

Definiția cercului. Elementele unui cerc: rază, diametru, coardă. Centrul cercului. Arc de cerc. Semicerc. Puncte diametral opuse. Definiția unui disc.

Pozitiile relative ale unei drepte faţă de un cerc

Dreaptă exterioară cercului. Tangenta la cerc. Punct de tangență. Dreaptă secantă față de cerc. Tangenta dintr-un punct exterior la un cerc. Triunghi circumscris unui cerc.

Introducere în geometria în spaţiu

Noțiunile de bază ale geometriei în spațiu și relațiile care se stabilesc între ele.

Paralelipipedul dreptunghic

Descrierea unui paralelipiped dreptunghic. Elementele unui paralelipiped dreptunghic. Diagonala paralelipipedului. Desfășurarea paralelipipedului.

Teoreme de paralelism

Enunțarea unor teoreme importante de paralelism în spațiu. Modalități de a demonstra că două plane sunt paralele.

Dreaptă perpendiculară pe plan

Modalități de a demonstra că o dreaptă este perpendiculară pe un plan. Definiția unei drepte perpendiculare pe un plan.

Teoreme de perpendicularitate

Enunțarea unor teoreme de perpendicularitate. Cum arătăm că o dreaptă este perpendiculară pe un plan

Distanţe în spațiu. Perpendiculare și oblice.

Distanța dintre două puncte. Distanța dintre un punct și o dreaptă. Distanța dintre un punct și un plan. Distanța dintre două plane. Oblică la plan.

Relația de paralelism

Relația de paralelism. Teorema de tranzitivitate a relației de paralelism în spațiu.

Poziții relative ale unei drepte față de un plan

Dreaptă inclusă în plan, dreaptă secantă unui plan, dreaptă paralelă cu un plan. Cum demonstrăm că o dreaptă este paralelă cu un plan

Poziții relative a două plane

Plane confundate, plane secante, plane paralele. Cum demonstrăm că două plane sunt confundate sau secante sau paralele

Unghiul unei drepte cu un plan

Unghiul dintre o dreaptă și un plan. Măsura unghiului format de o dreaptă cu un plan.

Prisma

Descrierea prismei. Elementele unei prisme. Înălțimea prismei. Prisma dreaptă. Prisma oblică. Desfășurarea prismei.

Cubul

Descrierea cubului. Elementele unui cub. Diagonala cubului. Desfășurarea cubului.

Configuraţia enantiomerilor. Formule de perspectivă, formule Fischer

Formule de perspectivă. Formule de proiecţie Fischer. Configuraţia enantiomerilor. Sistemul R, S. Denumirea enantiomerilor reprezentaţi prin formule de perspectivă. Denumirea enantiomerilor reprezentaţi prin formule de proiecţie Fischer. 

Zaharide - Glucoza

Compuşi organici cu acţiune biologică. Compuşi cu mai multe grupe funcţionale. Zaharide – polihidroxialdehide şi polihidroxicetone. Monozaharide. Zaharide de policondensare. Glucoza. Structura zaharidelor. Proiecţii Fischer – notaţii D şi L. Atom de carbon asimetric. Importanţa biologică a glucozei. Aplicaţiile practice ale glucozei.

Enantiomeri - proprietăţi, importanţă. Diastereoizomeri

Interacţiunea enantiomerilor cu lumina polarizată. Activitate optică. Substanţe optic active - izomeri optici, antipozi optici. Polarimetru. Dextrogir, levogir, amestec racemic. Compuşi cu două centre de chiralitate. Diastereoizomeri. Proprietăţi fizice şi chimice ale enantiomerilor. Acţiunea fiziologică a enantiomerilor. (R) - talidomidă, (S) - talidomidă.

Aminoacizi

Proteine, peptide, aminoacizi. Legătură peptidică, rest de aminoacid. Cei 20 de aminoacizi naturali. Structura aminoacizilor. Sistemul D, L. Aminoacizii - seria sterică L. Reacţii stereospecifice. Proprietăţi chimice ale aminoacizilor. Amfion (formă dipolară). Clasificarea aminoacizilor în funcţie de polaritatea radicalului hidrocarbonat. Caracterul amfoter al aminoacizilor. Soluţii tampon. 

Mulțimea numerelor întregi. Axa numerelor

Mulțimea numerelor întregi. Numere întregi pozitive și negative. Reprezentarea pe axă a numerelor întregi.

Simetria față de o dreaptă

Simetricul unui punct față de un punct. Simetricul unui punct față de o dreaptă. Axa de simetrie. Simetrica unei figuri față de o axă 

Mulțimea numerelor reale

Număr real. Mulțimea numerelor reale. Definiția unui număr irațional. Numere iraționale. Relația de incluziune dintre mulțimile N, Z, Q, R.

Axa numerelor reale. Ordonare

Reprezentarea numerelor reale pe axa numerelor. Ordonarea numerelor reale. Partea întreagă a unui număr real. Partea fracționară a unui număr real.

Ordonarea numerelor raționale

Compararea fracțiilor ordinare având același numitor sau numitori diferiți. Compararea a două fracții cu același semn sau cu semne diferite. Ordonarea numerelor raționale. Partea întreagă și partea fracționară a unui număr rațional.

Punct, dreaptă, plan.

Noțiuni primare de geometrie plană. Punct, dreaptă, semidreaptă, segment. Plan, semiplan.

Patrulatere

Pătrat, dreptunghi, romb, paralelogram, trapez. Prezentare prin descriere și desen. 

Construcții geometrice. Simetria și translația.

Construcția unui segment congruent cu un segment dat. Construcția perpendicularei dintr-un punct pe o dreaptă. Construcția dreptelor paralele. Simetria și translația.

Corpuri geometrice

Cubul, paralelipipedul dreptunghic, piramida, cilindrul, conul, sfera. Recunoașterea elementelor: muchii, fețe, vârfuri.

Numere naturale scrise în formă arabă și romană

Scrierea unui număr cu cifre arabe sau cifre romane. Reguli de scriere folosind cifrele romane

Numere (fracții) zecimale

Numere zecimale. Citirea numerelor zecimale. Partea întreagă, partea zecimală (fracționară).

Ecuații de gradul I

Forma generală e ecuațiilor de gradul I. Modalitatea teoretică de rezolvare a unei ecuații de gradul întâi. Interpretarea geometrică pentru ecuația de gradul I. Ecuații cu parametru real- exerciții.

Sisteme formate dintr-o ecuație de gradul I și o ecuație de gradul II

Rezolvarea unor tipuri de sisteme de ecuații cu coeficienți reali: sisteme formate dintr-o ecuație de gradul I și o ecuație de gradul II. Interpretarea geometrică a acestora

Înmulțirea fracțiilor zecimale

Înmulțirea fracțiilor zecimale care au un număr finit de zecimale nenule

Funcții definite pe intervale

Trasarea graficului unor funcții care au ca domeniu de definiție un interval.

Axiomele geometriei în spațiu

Sunt prezentate 6 axiome de bază ale geometriei în spațiu și se demonstrează și o teoremă pe baza axiomelor.

Determinarea dreptei și a planului

Modalități de a determina o dreaptă și un plan cu ajutorul unor axiome și a unor teoreme

Plane perpendiculare

Plane perpendiculare. Demonstrarea perpendicularității a două plane.

Funcții periodice

Noțiunea de funcție periodică, noțiunea de perioadă, perioadă principală. Exemple de funcții periodice. Proprietăți ale funcțiilor periodice. Graficul unei funcții periodice - proprietate. Periodicitatea funcțiilor - exerciții. 

Vectori

Direcția unei drepte. Segmente cu aceeași direcție. Segmente orientate. Segmente echipolente. Noțiunea de vector. Vector nul. Vector unitate. Vectori egali. Vectori opuși.

Echilibre acido-bazice. Tăria acizilor. Exponentul de aciditate.

Protonul și ionul de hidrogen. Ionul hidroniu și ionul hidroxil. Teoria protolitică Brønsted-Lowry. Cuplu acid-bază conjugată. Echilibru acido-bazic. Constanta de aciditate. Disocierea în apă a acizilor tari. Disocierea în apă a acizilor slabi. Exemple de acizi tari. Exemple de acizi slabi. 

Funcția de gradul I

Funcția de gradul întâi. Graficul funcției de gradul I, intersecția cu axele. Monotonia unei funcții de gradul I. Reprezentarea grafică a funcției de gradul I, funcții definite pe ramuri.

Ecuația dreptei determinată de două puncte distincte

Funcția arctangentă

Funcția arctangentă: definiție, grafic, proprietăți, exemple.

Funcția arccotangentă

Funcția arccotangentă: definiție, grafic, proprietăți, exemple.

Mulţimi nemărginite

Marginile  unei mulţimi nemărginite. Dreapta reală încheiată. Operaţiile aritmetice în .

Limite laterale

Limitele la stânga şi la dreapta ale unei funcţii într-un punct. Limite laterale. Criteriul de existenţă a limitei unei funcţii într-un punct folosind limitele laterale.

Continuitatea laterală

Funcţie continuă la stânga într-un punct, funcţie continuă la dreapta. 

Derivate laterale

Derivata la stânga şi derivata la dreapta a unei funcţii într-un punct. Existenţa derivatei unei funcţii într-un punct folosind derivatele laterale.

Rolul derivatei întâi în studiul funcţiilor

Rolul derivatei întâi în studiul funcţiilor. Determinarea intervalelor de monotonie ale unei funcţii. Determinarea punctelor de extrem.

Asimptote orizontale

Noţiunea de asimptotă orizontală.

Asimptote oblice

Noţiunea de asimptotă oblică.

Asimptote verticale

Noţiunea de asimptotă verticală.

Reguli de calcul într-un grup

Reguli de calcul într-un grup: puterea unui element, legi de simplificare.

Reguli de calcul într-un inel

Divizori ai lui zero într-un inel. Noţiunea de inel integru (domeniu de integritate). Regula semnelor într-un inel. Legi de simplificare.

Ecuaţia dreptei determinată de un punct şi o directie dată

Ecuaţia dreptei care trece printr-un punct şi are panta m.

Distanţa de la un punct la o dreaptă

Formula distanţei de la un punct la o dreaptă.

Introducere în HTML

HTML este limbajul marcant standard pentru crearea de pagini Web.
HTML reprezintă un început pentru realizarea site-urilor profesionale.
Declarația <! DOCTYPE html> definește acest document ca fiind HTML5.
Elementul <html> este elementul rădăcină al unei pagini HTML.
Elementul <head> conține meta informații despre document.
Elementul <titlu> specifică un titlu pentru document.
Elementul <body> conține conținutul paginii vizibile.
Elementul <h1> definește o rubrică mare.
Elementul <p> definește un alineat.

Titluri HTML

Titlurile (headings) sunt definite cu etichete de la <h1> la <h6>.
Fiecare titlu (heading) HTML are o dimensiune implicită. Cu toate acestea, puteți specifica dimensiunea pentru orice titlu (heading) cu atributul style, folosind proprietatea CSS font-size.
Eticheta <hr> definește o pauză tematică într-o pagină HTML.
Elementul HTML <head> este un container pentru metadate.
Metadatele HTML sunt date despre documentul HTML.
Elementul <head> este plasat între eticheta <html> și eticheta <body>.
Vizualizarea codului sursă HTML se face cu View Page Source.
Inspectarea unui element HTML se face cu Inspect Element.

Elemente de citare și citate în HTML

Elementele de citare folosite în HTML sunt:
<q> definește un citat scurt.
<blockquote> definește o secțiune care este citată dintr-o altă sursă.
<abbr> definește o prescurtare sau un acronim.
<address> definește informațiile de contact (autor / proprietar) ale unui document sau ale unui articol.
<cite> definește titlul unei lucrări.
<bdo> definește înlocuirea bidirecțională.

Imagini în HTML

Imaginile pot îmbunătăți designul și aspectul unei pagini web.
Utilizați elementul HTML <img> pentru a defini o imagine.
Utilizați atributul HTML src pentru a defini adresa URL a imaginii.
Utilizați atributul HTML alt pentru a defini un text alternativ pentru o imagine, dacă nu poate fi afișat.
Utilizați atributele HTML lățime și înălțime (width and height) pentru a defini dimensiunea imaginii.
Utilizați proprietățile CSS pentru lățime și înălțime (width and height) pentru a defini dimensiunea imaginii (alternativ).
Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească.
Utilizați elementul HTML <map> pentru a defini o imagine-hartă (image-map).
Utilizați elementul HTML <area> pentru a defini zonele în care se poate face click pe imaginea hartă (image-map).
Utilizați atributul usemap al elementului HTML <img> pentru a indica o hartă-imagine(image-map).
Utilizați elementul HTML <picture> pentru a afișa imagini diferite pentru diferite dispozitive.

Elementele HTML Block și Inline

Fiecare element HTML are o valoare de afișare implicită în funcție de tipul de element.Cele două valori afișate sunt: block și inlinie.
Un element la nivel de block (block-level element) pornește întotdeauna pe o linie nouă și ocupă toată lățimea disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Elementul <div> este un element la nivel de block.
Un element inline nu pornește de pe o linie nouă ci ocupă doar lățimea necesară.
Acesta este un element inline <span> din interiorul unui paragraf.
Elementul <div> este adesea folosit ca și container pentru alte elemente HTML.
Elementul <div> nu are atribute necesare, dar stilul (style), clasa (class) și id-ul (id) sunt comune.
Când este utilizat împreună cu CSS, elementul <div> poate fi utilizat pentru a aplica stiluri blocurilor de conținut.
Elementul <span> este adesea folosit ca un container pentru un text.
Elementul <span> nu are atribute necesare, stilul (style), clasa (class) și id-ul (id) sunt comune.
Când este utilizat împreună cu CSS, elementul <span> poate fi utilizat pentru a aplica stiluri blocurilor de conținut.

Simboluri HTML

Multe simboluri matematice, tehnice și simboluri valutare nu sunt prezente pe o tastatură normală.
Pentru a adăuga astfel de simboluri la o pagină HTML, puteți utiliza un nume de entitate HTML.
Simboluri matematice acceptate de HTML: forall, part, exist, empty, nabla, isin, notin, ni, prod, sum.
Câteva litere grecești acceptate de HTML:Alpha, Beta, Gamma, Delta, Epsilon, Zeta.
Câteva entități acceptate de HTML:copy, euro, trade, larr, uarr, rarr, darr, clubs, diams.

Ghid de stil în HTML5

O utilizare constantă a stilului face mai ușor pentru alții să înțeleagă HTML-ul.
În viitor, programe precum cititorii XML ar putea dori să citească HTML-ul.
Utilizarea unei sintaxe bine formate - „aproape de XHTML” poate fi inteligentă.
Vă recomandăm să folosiți numele elementelor scrise cu litere mici, deoarece:
În HTML5, nu trebuie să închideți toate elementele (de exemplu elementul <p>).
Vă recomandăm să închideți toate elementele HTML.
Închideți elementele HTML goale
În HTML5, este opțional să închideți elementele goale.
HTML5 permite amestecarea literelor mari și a literelor mici în nume de atribute.
Vă recomandăm să folosiți nume de atribute scrise culitere mici.
HTML5 permite ca valorile atributelor să fie scrise fără ghilimele.
Vă recomandăm să puneți între ghilimele valorile atributului.
Adăugați întotdeauna atributul alt la imagini. Acest atribut este important atunci când imaginea din anumite motive nu poate fi afișată. De asemenea, definiți întotdeauna lățimea și înălțimea (width și height) imaginii. Reduce pâlpâirea, deoarece browserul poate rezerva spațiu pentru imagine înainte de încărcare.
HTML5 permite spații în jurul semnelor egale. Dar fără spațiu este mai ușor de citit și grupează entitățile mai bine împreună.
Când utilizați un editor HTML, este incomod să derulați la dreapta și la stânga pentru a citi codul HTML.
Încercați să evitați liniile de cod mai lungi de 80 de caractere.
Nu adăugați linii necompletate fără un motiv.
Pentru lizibilitate, adăugați linii goale pentru a separa blocuri de coduri mari sau logice.
Pentru lizibilitate, adăugați două spații de indentare. Nu folosiți tasta tab.
Nu folosiți linii necompletate și indentate. Nu este necesar să indentizați fiecare elemen
În HTML5, eticheta <html> și eticheta <body> pot fi omise.
Nu vă recomandăm să omiteți etichetele <html> și <body>.
Elementul <html> este rădăcina documentului. Este locul recomandat pentru specificarea limbii paginii.
Omiterea <html> sau <body> poate bloca software-ul DOM și XML.
Omiterea <body> poate produce erori în browserele mai vechi (IE9).
În HTML5, eticheta <head> poate fi omisă.
În mod implicit, browserele vor adăuga toate elementele înainte de <body> la un element implicit <head>.
Puteți reduce complexitatea HTML prin omiterea etichetei <head>
Elementul <title> este necesar în HTML5. Faceți titlul cât mai semnificativ posibil
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin eticheta <meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web. Acesta variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe ecranul computerului.
Lățimea (width) = partea lățimii dispozitivului (width=device-width part) - stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (screen-width) (care va varia în funcție de dispozitiv).
Partea inițială = 1,0 setează nivelul de zoom inițial atunci când pagina este încărcată prima dată de browser
Comentariile scurte trebuie scrise pe o singură linie
Comentariile lungi sunt mai ușor de observat dacă sunt indentate în două spații.
Utilizați sintaxa simplă pentru a face legătura cu foile de stil (atributul tip nu este necesar)
Regulile scurte pot fi comprimate
Regulile lungi trebuie scrise pe mai multe rânduri
Puneți suportul de deschidere (opening bracket) pe aceeași linie cu selectorul.
Utilizați un spațiu înainte de suportul de deschidere (opening bracket).
Folosiți două spații de indentare.
Utilizați punct și virgulă după fiecare pereche proprietate-valoare, inclusiv ultima.
Utilizați ghilimele în jurul valorilor numai dacă valoarea conține spații.
Plasați suportul de închidere (opening bracket) pe o linie nouă, fără spații de conducere.
Evitați liniile de peste 80 de caractere.
Se încarcă JavaScript în HTML
Accesarea elementelor HTML cu JavaScript
Utilizați numele de fișiere scrise cu litere mici
Fișierele HTML ar trebui să aibă o extensie .html sau .htm.
Fișierele CSS ar trebui să aibă o extensie .css.
Fișierele JavaScript ar trebui să aibă o extensie .js.
Nu există nicio diferență între extensiile .htm și .html. Ambele vor fi tratate ca HTML de orice browser web sau server web.
Când o adresă URL nu specifică un nume de fișier (cum ar fi https://www.lectii-virtuale.ro/css/), serverul returnează un nume de fișier implicit. Numele de fișiere implicite obișnuite sunt index.html, index.htm, default.html și default.htm.
Dacă serverul dvs. este configurat doar cu "index.html" ca nume de fișier implicit, fișierul dvs. trebuie numit "index.html", nu "index.htm."

CSS Fundaluri

Proprietățile de fundal CSS sunt utilizate pentru a defini efectele de fundal pentru elemente.
Proprietăți de fundal CSS: culoare de fundal, imagine de fundal, fundal repetare, background-attachment, background-position.
Culoare de fundal CSS ( CSS background-color).
Proprietatea de culoare de fundal specifică culoarea de fundal a unui element.
Cu CSS, o culoare este cel mai des specificată de: un nume de culoare valid - precum „roșu”, o valoare HEX - ca „# ff0000”, o valoare RGB - ca „rgb (255,0,0)”.
Imagine de fundal CSS (CSS background-image)
Proprietatea de fundal imagine specifică o imagine pe care să o folosească ca fundal al unui element.
În mod implicit, imaginea este repetată, astfel încât acoperă întregul element.
Când utilizați o imagine de fundal, utilizați o imagine care nu perturba textul.
Repetare de fundal CSS (CSS background-repeat)
În mod implicit, proprietatea imaginii de fundal repetă o imagine atât pe orizontală cât și pe verticală.
Unele imagini trebuie repetate doar pe orizontală sau vertical sau vor arăta ciudat, astfel:
Pentru a repeta o imagine pe verticală, setați background-repeat: repeat-y;
Fundal CSS-repetare: nu se repetă (CSS background-repeat: no-repeat)
Afișarea imaginii de fundal o singură dată este, de asemenea, specificată de proprietatea background-repeat.
În exemplul de mai sus, imaginea de fundal este plasată în același loc cu textul. Vrem să schimbăm poziția imaginii, astfel încât să nu deranjeze prea mult textul.
Poziția de fundal CSS (CSS background-position).
Proprietatea poziție fundal este utilizată pentru a specifica poziția imaginii de fundal.
Atasament de fundal CSS (CSS background-attachment).
Proprietatea de atașare de fundal specifică dacă imaginea de fundal trebuie să se deruleze sau să fie fixată (nu va defila cu restul paginii).
Fundal CSS - proprietatea shorthand
Pentru a scurta codul, este de asemenea posibil să specificați toate proprietățile de fundal într-o singură proprietate. Aceasta se numește o proprietate shorthand.
Proprietatea shorthand pentru fundal este fundal.
Când folosiți proprietatea shorthand ordinea valorilor proprietății este:
background-color
background-image
background-repeat
background-attachment
background-position
Nu contează dacă lipsește una din valorile proprietății, atât timp cât celelalte sunt în această ordine.
background - Setează toate proprietățile fundalului într-o singură declarație
background-attachment - Setează dacă o imagine de fundal este fixă sau defilează cu restul paginii
background-clip - Specifică zona de pictură a fundalului
background-color - Setează culoarea de fundal a unui element
background-image - Setează imaginea de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-position - Setează poziția de pornire a unei imagini de fundal
background-repeat - Setează modul în care se va repeta o imagine de fundal
background-size - Specifică dimensiunea imaginii de fundal

CSS Borders

Proprietăți CSS Borders.
Proprietățiile CSS Borders vă permit să specificați stilul, lățimea și culoarea chenarului unui element.
CSS Border Style.
Proprietatea CSS Border Style specifică ce fel de chenar trebuie afișat.
Sunt permise următoarele valori:
dotted (punctat) - Definește un chenar (border) punctat.
dashed - Definește o bordură (border) punctată.
solid - Definește o bordură (border) solidă.
double (dublu) - Definește o bordură (border) dublă.
groove - Definește un chenar cu caneluri 3D. Efectul depinde de valoarea culorii bordurii (border-color).
ridge - Definește un chenar (border) ridicat 3D. Efectul depinde de valoarea culorii bordurii (border-color).
inset - Definește un chenar (border) de inserție 3D. Efectul depinde de valoarea culorii bordurii (border-color).
outset - Definește un chenar (border) de declanșare 3D. Efectul depinde de valoarea culorii bordurii (border-color).
none - Nu definește nici o frontieră (border).
hidden (ascuns) - definește un chenar (border) ascuns.
Proprietatea border-style poate avea de la una până la patru valori (pentru top border, right border, bottom border, left border).
Niciuna dintre celelalte proprietăți CSS border descrise mai jos nu va avea NICIUN efect, decât dacă este setată proprietatea border-style!
Lățimea marginilor CSS (CSS Border Width)
Proprietatea border-width specifică lățimea celor patru chenare.
Lățimea poate fi setată ca o dimensiune specifică (în px, pt, cm, em, etc.) sau folosind una dintre cele trei valori predefinite: subțire, medie sau groasă (thin, medium, thick.).
Proprietatea border-width poate avea de la una până la patru valori (pentru marginea superioară, granița dreaptă, limita de jos și marginea din stânga/ top border, right border, bottom border, left border).
CSS Border Color
Proprietatea border-color este utilizată pentru a seta culoarea celor patru chenare.
Culoarea poate fi setată de:
name - Specificați un nume de culoare, cum ar fi „red”.
Hex - Specificați o valoare hexagonală, cum ar fi „# ff0000”.
RGB - Specificați o valoare RGB, cum ar fi „rgb (255,0,0)”.
transparent.
Proprietatea border-color poate avea de la una până la patru valori (pentru marginea de sus, marginea dreaptă, limita de jos și marginea din stânga/top border, right border, bottom border, left border).Dacă border-color nu este setată, moștenește culoarea elementului.
CSS Border - Individual Sides
Din exemplele de mai sus, ați văzut că este posibil să specificați o frontieră diferită pentru fiecare parte.
În CSS, există, de asemenea, proprietăți pentru specificarea fiecărui chenar (sus, dreapta, jos și stânga/top, right, bottom, left).
Dacă proprietatea border-style are patru valori:
border-style: punctat dublu punctat solid.
top border este punctat.
right border este solid.
bottom border este dublu.
left border este punctat.
Dacă proprietatea border-style are trei valori:border-style: dublu solid punctat.
top border este punctat.
right și left borders sunt solide.
bottom border este dublu.
Dacă proprietatea border-style are două valori:
border-style: solid punctat.
top și bottom borders sunt punctate.
right și left borders sunt solide.
Dacă proprietatea border-style are o valoare:
border-style: punctat.
toate cele patru granițe sunt punctate.
Proprietatea border-style este folosită în exemplul de mai sus. Cu toate acestea, funcționează, de asemenea, cu border-width și border-color.
CSS Border - Proprietatea Shorthand
După cum puteți vedea din exemplele de mai sus, există multe proprietăți de luat în considerare atunci când aveți de-a face cu frontierele.
Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile de frontieră individuale într-o singură proprietate.
Proprietatea de frontieră (border) este o proprietate shorthand pentru următoarele proprietăți individuale de frontieră:
border-width
border-style (required)
border-color
Frontierele rotunjite CSS (CSS Rounded Borders).
Proprietatea border-radius este utilizată pentru a adăuga borduri rotunjite la un element.
Toate proprietățile top border într-o singură declarație.
Acest exemplu demonstrează o proprietate shorthand pentru setarea tuturor proprietăților pentru top border într-o singură declarație.
Setați stilul marginii de jos (bottom border).
Acest exemplu demonstrează cum să setați stilul marginii de jos (bottom border).
Setați lățimea marginii din stânga (left border).
Acest exemplu demonstrează modul de setare a lățimii marginii din stânga (left border).
Setați culoarea celor patru chenare (borders).
Acest exemplu demonstrează cum să setați culoarea celor patru chenare. Poate avea de la una la patru culori.
Setați culoarea marginii drepte (right border).
Acest exemplu demonstrează cum să setați culoarea marginii drepte (right border).
border Setează toate proprietățile de frontieră într-o singură declarație
border-bottom Setează toate proprietățile frontierei de jos într-o singură declarație
border-bottom-color Setează culoarea marginii de jos
border-bottom-style Setează stilul marginii de jos
border-bottom-width Setează lățimea marginii de jos
border-color Setează culoarea celor patru chenare
border-left Stabilește toate proprietățile frontierei din stânga într-o singură declarație
border-left-color Setează culoarea marginii din stânga
border-left-style Setează stilul chenarului din stânga
border-left-width Setează lățimea marginii din stânga
border-radius Setează toate cele patru chenare - * - proprietăți ale razei pentru colțurile rotunjite
border-right Setează toate proprietățile de frontieră dreaptă într-o singură declarație
border-right-color Setează culoarea marginii drepte
border-right-style Setează stilul chenarului drept
border-right-width Setează lățimea marginii drepte
border-style Setează stilul celor patru chenare
border-top Setează toate proprietățile de frontieră de sus într-o singură declarație
border-top-color Setează culoarea marginii superioare
border-top-style Setează stilul chenarului superior
border-top-width Setează lățimea marginii superioare
border-width Setează lățimea celor patru chenare

CSS Margini

Proprietățiile CSS margin sunt utilizate pentru a crea spațiu în jurul elementelor, în afara oricărui chenar definit.
Cu CSS, aveți control complet asupra marginilor. Există proprietăți pentru setarea marginii pentru fiecare parte a unui element (sus, dreapta, jos și stânga/top, right, bottom, left).
Margin - Individual Sides
CSS are proprietăți pentru specificarea marginii pentru fiecare parte a unui element: margin-top, margin-right, margin-bottom, margin-left.
Toate proprietățile marginii pot avea următoarele valori:
auto - browserul calculează marginea.
length  - specifică o margine în px, pt, cm etc.
% - specifică o margine în% din lățimea elementului care conține.
inherit- specifică faptul că marginea ar trebui să fie moștenită de la elementul părinte. Valorile negative sunt permise.
Setați margini diferite pentru toate cele patru laturi ale unui element <p>.
Pentru a scurta codul, este posibil să specificați toate proprietățile marginii într-o singură proprietate.
Proprietatea margin este o proprietate shorthand pentru următoarele proprietăți margin individuale: margin-top, margin-right, margin-bottom, margin-left.
Dacă proprietatea marjei are patru valori:
margin: 25px 50px 75px 100px;
top margin este 25px
right margin este 50px
bottom margin este 75px
left margin este 100px
Dacă proprietatea margin are trei valori:
margin: 25px 50px 75px;
top margin este de 25px.
right și  left margins sunt de 50px.
bottom margin este de 75px.
Dacă proprietatea margin are două valori:
margin: 25px 50px;
top și bottom margins sunt de 25px
right și left margins sunt de 50px
Dacă proprietatea margin are o valoare:
margin: 25px;
toate cele patru margini sunt de 25px
Valoarea auto (The auto Value)
Puteți seta proprietatea marginii ca automat (auto) să centreze orizontal elementul din containerul său.
Elementul va prelua apoi lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între marginile din stânga și cea din dreapta.
Folosiți margin: auto.
Valoarea inherit (The inherit Value).
Acest exemplu permite ca marginea stângă a elementului <p class = "ex1"> să fie moștenită de la elementul părinte (<div>).
Margin Collapse
Marginile superioare și inferioare ale elementelor sunt uneori prăbușite într-o singură margine care este egală cu cea mai mare dintre cele două margini.
Acest lucru nu se întâmplă pe marginile din stânga și din dreapta! Doar marginile de sus și de jos!
Elementul <h1> are marginea de jos de 50px iar elementul <h2> are marginea de sus setată la 20px.
Simțul comun pare să sugereze că marginea verticală dintre <h1> și <h2> ar fi în total 70px (50px + 20px). Dar din cauza colapsului marginii, marginea reală ajunge să fie de 50px.
margin - Proprietate shorthand pentru setarea proprietăților marginii într-o singură declarație.
margin-bottom - Setează marginea de jos a unui element.
margin-left - Setează marginea stângă a unui element.
margin-right - Setează marginea dreaptă a unui element.
margin-top - Setează marginea superioară a unui element.

CSS Padding

Proprietățiile CSS padding sunt utilizate pentru a genera spațiu în jurul conținutului unui element, în interiorul oricărui chenar definit.
Cu CSS, aveți un control complet asupra padding- ului. Există proprietăți pentru setarea padding-ului pentru fiecare parte a unui element (sus, dreapta, jos și stânga/top, right, bottom, left).
Padding - Individual Sides
CSS are proprietăți pentru specificarea padding- ului pentru fiecare parte a unui element: padding-top, padding-right, padding-bottom, padding-left .
Toate proprietățile padding pot avea următoarele valori:
length - Specifică o căptușire în px, pt, cm etc.
% - Specifică un padding în % din lățimea elementului care îl conține.
inherit - Specifică faptul că padding-ul ar trebui să fie moștenit de la elementul părinte.
Valorile negative nu sunt permise.
Padding - Proprietatea Shorthand
Pentru a scurta codul, este posibil să specificați toate proprietățiile padding într-o singură proprietate.
Proprietatea padding este o proprietate shorthand pentru următoarele proprietăți individuale padding: padding-top, padding-right, padding-bottom, padding-left
Dacă proprietatea padding are patru valori:
padding: 25px 50px 75px 100px;
top padding este de 25px
right padding este de 50px
bottom padding este de 75px
left padding este de 100px
Dacă proprietatea padding are trei valori:
padding: 25px 50px 75px;
top padding este de 25px
right și left paddings sunt de 50px
bottom padding este de 75px
Dacă proprietatea padding are două valori:
padding: 25px 50px;
top și bottom paddings sunt de 25px
right și left paddings sunt de 50px
Dacă proprietatea padding are o valoare:
padding: 25px;
toate cele patru garnituri sunt de 25px
Padding și elementul width
Proprietatea CSS width specifică lățimea zonei de conținut a elementului. Zona de conținut este porțiunea din interiorul padding-ului, border și marginea unui element (modelul box).
Deci, dacă un element are o lățime specificată, padding-ul adăugat la acel element va fi adăugat la lățimea totală a elementului. Acesta este adesea un rezultat nedorit.
Pentru a menține lățimea la 300px, indiferent de cantitatea de padding, puteți utiliza proprietatea box-sizing. Acest lucru face ca elementul să-și mențină lățimea; dacă măriți padding-ul, spațiul de conținut disponibil va scădea.
Utilizați proprietatea box-sizing pentru a păstra lățimea la 300px, indiferent de cantitatea de padding.
Setați left padding
Acest exemplu demonstrează modul de setare a left padding-ului unui element <p>.
Setați right padding
Acest exemplu demonstrează cum să setați right padding-ul unui element <p>.
Setați top padding
Acest exemplu demonstrează modul de setare a top padding-ului unui element <p>.
Setați bottom padding
Acest exemplu demonstrează modul de setare a bottom padding-ului unui element <p>.
padding - O proprietate shorthand pentru setarea tuturor proprietăților de umplere într-o singură declarație.
padding-bottom - Setează bottom padding-ul unui element.
padding-left - Stabilește left padding-ul unui element.
padding-right - Setează right padding-ul unui element.
padding-top - Setează top padding-ul unui element.

CSS Text

Proprietatea de culoare este utilizată pentru a seta culoarea textului. Culoarea este specificată de:
un nume de culoare - ca „roșu”
o valoare HEX - ca „# ff0000”
o valoare RGB - ca „rgb (255,0,0)”
Consultați CSS Color Values pentru o listă completă a valorilor de culoare posibile.
Culoarea implicită a textului pentru o pagină este definită în selectorul body.
Aliniere text (Text Alignment).
Proprietatea text-align este utilizată pentru a seta alinierea orizontală a unui text.
Un text poate fi aliniat la stânga sau la dreapta, centrat sau justificat (left sau right, centered sau justified).
Când proprietatea de aliniere a textului este „justify”, fiecare linie este întinsă astfel încât fiecare linie să aibă lățimea egală, iar marginile stânga și dreapta sunt drepte (ca în reviste și ziare).
Decorarea textului (Text Decoration).
Proprietatea text-decoration este utilizată pentru a seta sau elimina decorațiunile din text.
Valoarea text-decoration: none; este adesea folosit pentru a elimina sublinierile din link-uri.
Nu este recomandat să subliniați textul care nu este o legătură, deoarece acest lucru încurcă cititorul.
Transformarea textului.
Proprietatea text-transform este utilizată pentru a specifica litere mari și minuscule (uppercase sau lowercase) într-un text.
Poate fi folosit pentru a transforma totul în litere mari sau minuscule (uppercase sau lowercase) sau pentru a valorifica prima literă a fiecărui cuvânt.
Indentare text (Text Indentation).
Proprietatea text-indent este utilizată pentru a specifica indentarea primei linii a unui text.
Spațiul dintre litere (Letter Spacing)
Proprietatea de spațiere a literelor (letter-spacing) este utilizată pentru a specifica spațiul dintre caracterele unui text.
Înălţimea liniei (Line Height).
Proprietatea line-height este utilizată pentru a specifica spațiul dintre linii.
Direcția textului (Text Direction).
Proprietatea direction este utilizată pentru a schimba direcția textului unui element.
Distanțarea cuvintelor (Word Spacing)
Proprietatea word-spacing a cuvintelor este utilizată pentru a specifica spațiul dintre cuvintele dintr-un text.
color - Setează culoarea textului.
direction -  Specifică direcția textului / direcția de scriere.
letter-spacing - Crește sau scade spațiul dintre caractere dintr-un text.
line-height - Setează înălțimea liniei.
text-align - Specifică alinierea orizontală a textului.
text-decoration - Specifică decorația adăugată la text.
text-indent - Specifică indentarea primei linii dintr-un bloc de text.
text-shadow - Specifică efectul umbre adăugat textului.
text-transform - Controlează capitalizarea textului.
text-overflow - Specifică modul în care conținutul revărsat care nu este afișat trebuie semnalat utilizatorului.
unicode-bidi - Se folosește împreună cu proprietatea de direcție pentru a seta sau returna dacă textul ar trebui să fie anulat pentru a accepta mai multe limbi din același document.
vertical-align - Setează alinierea verticală a unui element.
white-space - Specifică modul în care este gestionat spațiul alb din interiorul unui element.
word-spacing - Crește sau scade spațiul dintre cuvinte dintr-un text.

CSS Tabele

Aspectul unui tabel HTML poate fi îmbunătățit mult cu CSS.
Bordurile tabelelor
Pentru a specifica bordurile tabelelor în CSS, utilizați proprietatea border.
Reduceți marginile tabelului (Collapse Table Borders)
Proprietatea border-collapse stabilește dacă bordurile tabelului trebuie să fie prăbușite într-un singur chenar:
Dacă doriți doar un chenar în jurul tabelului, specificați numai proprietatea border pentru <tabel>.
Lățimea și înălțimea tabelului (Table Width and Height)
Lățimea și înălțimea (width și height) unui tabel sunt definite prin proprietățiile de lățime și înălțime.
Aliniere orizontală (Horizontal Alignment)
Proprietatea de aliniere text stabilește alinierea orizontală (cum ar fi stânga, dreapta sau centrul) conținutului în <th> sau <td>.
În mod implicit, conținutul elementelor <th> sunt aliniate în centru și conținutul elementelor <td> sunt aliniate la stânga.
Aliniere verticală (Vertical Alignment)
Proprietatea vertical-align stabilește alinierea verticală (cum ar fi partea superioară, inferioară sau mijlocie) a conținutului în <th> sau <td>.
În mod implicit, alinierea verticală a conținutului dintr-un tabel este mijlocie (atât pentru elementele <th> cât și pentru <td>).
Table Padding
Pentru a controla spațiul dintre graniță și conținutul dintr-un tabel, utilizați proprietatea padding pentru elementele <td> și <th>.
Horizontal Dividers
Adăugați proprietatea border-bottom la <th> și <td> pentru horizontal dividers.
Hoverable Table
Utilizați selectorul :hover pe <tr> pentru a evidenția rândurile de tabel cu mouse over.
Striped Tables
Pentru tabele cu dungi zebră (zebra-striped tables), utilizați selecția nth-child() și adăugați o culoare de fundal la toate rândurile de tabele uniforme (sau impare).
Culoarea tabelului (Table Color)
Tabel responsiv (Responsive Table)
Un tabel responsiv va afișa o bară de defilare orizontală dacă ecranul este prea mic pentru a afișa întregul conținut.
Adăugați un element de container (cum ar fi <div>) cu overflow-x: auto în jurul elementului <table> pentru a face să răspundă.
În OS X Lion (pe Mac), barele de defilare sunt ascunse în mod implicit și sunt afișate doar atunci când sunt utilizate (chiar dacă „overflow: scroll” este setat).
Proprietățiile tabelului CSS:
border - Setează toate proprietățile de frontieră într-o singură declarație
border-collapse - Specifică dacă granițele tabelelor trebuie sau nu prăbușite
border-spacing - Specifică distanța dintre marginile celulelor adiacente
caption-side- Specifică amplasarea unei legi de tabel
empty-cells - Specifică dacă se afișează sau nu margini și fundal pe celulele goale dintr-un tabel
table-layout - Setează algoritmul de dispunere care va fi utilizat pentru o tabelă

CSS Display

Layout CSS - Proprietatea display
Proprietatea display este cea mai importantă proprietate CSS pentru controlul aspectului.
Proprietatea display
Proprietatea display specifică dacă / cum este afișat un element.
Fiecare element HTML are o valoare de afișare implicită în funcție de tipul de element. Valoarea implicită a afișajului pentru majoritatea elementelor este block sau inline.
Elemente la nivel de block (Block-level Elements)
Un element la nivel de block (block-level element) pornește întotdeauna pe o nouă linie și ocupă toată lățimea disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Exemple de elemente la nivel de block (block-level element): <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>.
Elemente în linie (Inline Elements)Un element inline nu pornește de pe o nouă linie și ocupă doar lățimea necesară.
Acesta este un element <span> inline din interiorul unui paragraf.
Exemple de elemente inlinie: <span>, <a>, <img>.
Display: none;
Display: none; este utilizat în mod obișnuit cu JavaScript pentru a ascunde și a arăta elementele fără a le șterge și recrea.
Elementul <script> folosește display: none; ca implicit.
Înlocuire Valoare implicită a afișajului
După cum am menționat, fiecare element are o valoare de afișare implicită. Cu toate acestea, puteți trece peste acest lucru.
Modificarea unui element inline într-un element de block, sau invers, poate fi utilă pentru ca pagina să arate într-un mod specific și să respecte în continuare standardele web.
Un exemplu obișnuit este crearea de elemente inline <li> pentru meniurile orizontale.
Setarea proprietății de afișare (display) a unui element modifică doar modul în care este afișat elementul, NU ce fel de element este. Deci, un element inline cu display: block; nu este permis să aibă alte elemente de block în interiorul său.
crearea de elemente inline <li> pentru meniurile orizontale.
afișare elemente <span> ca elemente de block.
afișare elemente <a> ca elemente de block.
Ascunde un element - display:none sau visibility:hidden?
Ascunderea unui element se poate face prin setarea proprietății dispaly la none. Elementul va fi ascuns, iar pagina va fi afișată ca și cum elementul nu este acolo.
visibility:hidden; ascunde de asemenea un element.
Cu toate acestea, elementul va ocupa totuși același spațiu ca înainte. Elementul va fi ascuns, dar afectează în continuare aspectul.
Proprietăți CSS de afișare / vizibilitate:
display - Specifică modul în care trebuie afișat un element.
visibility - Specifică dacă un element trebuie să fie vizibil sau nu.

CSS max-width

CSS Layout - width și max-width. 
Utilizarea width, max-width și margin: auto;
Așa cum am menționat în capitolul precedent; un element la nivel de block (block-level element) ocupă întotdeauna întreaga lățime disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Setarea lățimii (width) unui element la nivel de bloc (block-level element)  va împiedica întinderea sa până la marginile containerului său. Apoi, puteți seta marginile la auto, pentru a centra orizontal elementul în containerul său. Elementul va prelua lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două margini.
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului. Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici. Acest lucru este important atunci când faceți un site utilizabil pe dispozitive mici.

CSS Position

CSS Layout -  Proprietatea position
Proprietatea position specifică tipul metodei de poziționare utilizate pentru un element (static, relativ, fix, absolut sau lipicios/static, relative, fixed, absolute sau sticky).
Elementele sunt apoi poziționate folosind proprietățiile de sus, de jos, de stânga și de dreapta (top, bottom, left, și right). Cu toate acestea, aceste proprietăți nu vor funcționa decât dacă proprietatea position este setată prima. De asemenea, funcționează diferit în funcție de valoarea poziției.
position: static; (poziție: static)
Elementele HTML sunt poziționate static în mod implicit.
Elementele poziționate static nu sunt afectate de proprietățile de sus, de jos, de stânga și de dreapta.
Un element cu position: static; (poziție: static) nu este poziționat într-un mod special; este poziționat întotdeauna în funcție de fluxul normal al paginii.
Element cu position: relative; (poziție: relativă;)
Un element cu position: relative; (poziție: relativă;) este poziționat în raport cu poziția normală.
Setarea proprietățiilor de sus, dreapta, jos și stânga a unui element relativ poziționat (relatively-positioned element) va face ca acesta să fie ajustat departe de poziția normală. Alt conținut nu va fi ajustat pentru a se încadra în niciun spațiu lăsat de element.
Elementul cu position: fixed; (poziție: fix;)
Un element cu position: fixed; (poziție: fix;) este poziționat în raport cu afișajul, ceea ce înseamnă că acesta rămâne întotdeauna în același loc, chiar dacă pagina este defilată. Proprietățile de sus, dreapta, jos și stânga sunt utilizate pentru poziționarea elementului.
Un element fix nu lasă un gol în pagina în care ar fi fost localizat în mod normal.
Elementul cu position: absolute; (poziție: absolută;)
Un element cu position: absolute; (poziție: absolută;) este poziționat în raport cu strămoșul cel mai apropiat poziționat (în loc de poziționat în raport cu vitrina, ca fix).
In orice caz; dacă un element poziționat absolut nu are strămoși poziționați, acesta folosește corpul documentului și se deplasează împreună cu derularea paginii.
Un element „poziționat” este unul a cărui poziție este orice, cu excepția staticii.
Elementul cu position: sticky; (poziție: lipicios;)
Un element cu position: sticky; (poziție: lipicios;) este poziționat în funcție de poziția de derulare a utilizatorului.
Un element lipicios (sticky) trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție de offset dată este întâlnită în vitrină - apoi se „lipeste” în loc (ca poziția: fix).
Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai jos). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
În acest exemplu, elementul sticky se lipește în partea de sus a paginii (sus: 0), când atingeți poziția de defilare.
Elemente suprapuse (Overlapping Elements)
Când elementele sunt poziționate, se pot suprapune altor elemente.
Proprietatea indexului z specifică ordinea stivei unui element (care element trebuie plasat în fața sau în spatele celorlalte).
Un element poate avea o comandă a stivei pozitivă sau negativă.
Un element cu o ordine de stivă mai mare este întotdeauna în fața unui element cu o ordine de stivă mai mică.
Dacă două elemente poziționate se suprapun fără z - index specificat, elementul poziționat ultimul în codul HTML va fi afișat în partea de sus.
Poziționarea textului într-o imagine
Cum să poziționați textul peste o imagine.
Toate proprietățiile de poziționare CSS: bottom, clip, left, position, top, right, z-index. 
bottom - Setează marginea inferioară a marginii pentru o casetă poziționată
clip - Clipsează un element absolut poziționat
left - Setează marginea din stânga pentru o cutie poziționată
position - Specifică tipul de poziționare pentru un element
right - Setează marginea din dreapta pentru o cutie poziționată
top - Setează marginea superioară a marginii pentru o casetă poziționată
z-index - Setează ordinea stivei unui element

CSS Overflow

Proprietatea CSS overflow controlează ce se întâmplă cu conținutul prea mare pentru a se încadra într-o zonă.
CSS Overflow
Proprietatea de overflow specifică dacă trebuie să decupați conținutul sau să adăugați bare de defilare atunci când conținutul unui element este prea mare pentru a se încadra în zona specificată.
Proprietatea de overflow are următoarele valori:
visible (vizibil) - implicit. Depășirea nu este tăiată. Conținutul este redat în afara casetei elementului.
hidden (ascuns) - preaplinul este tăiat, iar restul conținutului va fi invizibil.
scroll (defilare) - overflow-ul este tăiat și este adăugată o bară de defilare pentru a vedea restul conținutului.
auto - Similar cu defilarea, dar adaugă bare de defilare doar atunci când este necesar.
Elementul overflow: visible (revărsat: vizibil)
În mod implicit, revărsarea este vizibilă (overflow: visible), ceea ce înseamnă că nu este tăiată și se redă în afara casetei elementului.
Elementul overflow: hidden (revărsat: ascuns)
Odată cu valoarea ascunsă (overflow: hidden), preluarea este tăiată, iar restul conținutului este ascuns.
Elementul overflow: scroll (revărsat: defilare)
Setând valoarea pentru a derula (overflow: scroll), revărsarea este decupată și este adăugată o bară de defilare pentru a derula în interiorul casetei. Rețineți că aceasta va adăuga o bară de defilare atât pe orizontală cât și pe verticală (chiar dacă nu aveți nevoie de ea).
Elementele overflow-x și overflow-y
Proprietățiile de overflow-x și overflow specifică dacă trebuie să schimbe overflow-ul de conținut doar orizontal sau și vertical (sau ambele):
overflow-x specifică ce trebuie făcut cu marginile stânga / dreapta ale conținutului.
overflow-y specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului.
Toate proprietățiile CSS  de overflow:
overflow - Specifică ce se întâmplă dacă conținutul revărsă caseta unui element.
overflow-x - Specifică ce se poate face cu marginile stânga / dreapta ale conținutului dacă acesta revărsă zona de conținut a elementului.
overflow-y - Specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului dacă acesta revărsă zona de conținut a elementului.

CSS Float

Proprietatea CSS float  specifică modul în care un element ar trebui să plutească (float).
Proprietatea CSS clear specifică ce elemente pot pluti  (float) lângă elementul șters și pe ce parte.
Proprietatea float
Proprietatea float este utilizată pentru poziționarea și formatarea conținutului, de ex. lăsați o imagine să plutească stânga spre text într-un container.
Proprietatea float poate avea una dintre următoarele valori:
left (stânga) - Elementul plutește în stânga containerului său.
right (dreapta) - Elementul plutește în dreapta containerului său.
none - Elementul nu plutește (va fi afișat acolo unde apare în text). Aceasta este implicită.
inherit (mostenire) - elementul moștenește valoarea float a părintelui său.
În cea mai simplă utilizare, proprietatea float poate fi utilizată pentru a înfășura text în jurul imaginilor.
Elementul float: right; (float: dreapta;).
Elementul float: left; (float: stânga;).
Elementul float: none;. 
Proprietatea clear
Proprietatea clear specifică ce elemente pot pluti (float) lângă elementul șters și pe ce parte.
Proprietatea clear poate avea una dintre următoarele valori:
none - Permite elemente plutitoare de ambele părți. Aceasta este implicită.
left (stânga) - Nu sunt permise elemente plutitoare în partea stângă.
right (dreapta) - Nu sunt permise elemente plutitoare în partea dreaptă.
both (ambele) - Nu sunt permise elemente plutitoare nici pe partea stângă, fie pe partea dreaptă.
inherit (mostenirea) - Elementul mosteneste valoarea clara a parintelui său.
Cel mai obișnuit mod de a utiliza proprietatea clear este după ce ați utilizat o proprietate float pe un element.
Când ștergeți floats, ar trebui să potriviți clear cu float: Dacă un element este float la stânga, atunci ar trebui să ștergeți la stânga. Elementul float va continua să plutească, dar elementul șters va apărea sub el pe pagina web.
The clearfix Hack
Dacă un element este mai înalt decât elementul care îl conține și este float, acesta se va „overflow” în afara containerului său.
overflow: auto clearfix  funcționează bine atâta timp cât sunteți în stare să păstrați controlul asupra margin-ului și a padding-ului (altfel puteți vedea bare de defilare). Totuși, noul clearfix hack however este mai sigur de utilizat și următorul cod este folosit pentru majoritatea paginilor web.
Grid of Boxes / Equal Width Boxes
Ce este box-sizing?
Puteți crea cu ușurință trei cutii plutitoare (floating boxes) una lângă alta. Cu toate acestea, când adăugați ceva care mărește lățimea fiecărei cutii (de exemplu, padding sau borders), caseta se va rupe. Proprietatea de dimensionare a cutiei ne permite să includem padding și border în lățimea totală (și înălțimea) a cutiei, asigurându-ne că padding rămâne în interiorul cutiei și că nu se rupe.
Grila casetelor poate fi de asemenea folosită pentru a afișa imagini side by side:
Cutii de înălțime egală (Equal Height Boxes)
Este bine dacă puteți garanta că casetele vor avea întotdeauna aceeași cantitate de conținut în ele. Dar de multe ori, conținutul nu este același. Dacă încercați exemplul de mai sus pe un telefon mobil, veți vedea că conținutul celei de-a doua cutii va fi afișat în afara casetei. Acesta este locul în care CSS3 Flexbox vine la îndemână - deoarece poate întinde automat cutiile pentru a fi la fel de lungă ca cea mai lungă casetă:
Flexbox nu este acceptat în Internet Explorer 10 sau în versiunile anterioare.
Meniu de navigatie (Navigation Menu)
Utilizați float cu o listă de hyperlinkuri pentru a crea un meniu orizontal.
Exemplu de dispunere web (Web Layout Example)
Este, de asemenea, obișnuit să faceți web layouts folosind proprietatea float.
Toate proprietățiile CSS float.
box-sizing Defineste modul în care se calculează lățimea și înălțimea unui element: trebuie să includă sau nu borduri
clear Specifica ce elemente pot pluti lângă elementul șters și pe ce parte
float Specifică modul în care un element trebuie să plutească
overflow Specifică ce se întâmplă dacă conținutul revărsă caseta unui element
overflow-x Specifică ce se poate face cu marginile stânga / dreapta ale conținutului dacă acesta revărsă zona de conținut a elementului
overflow-y Specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului dacă acesta revărsă zona de conținut a elementului

CSS Align

CSS Layout - Aliniere orizontală și verticală
Elemente de aliniere de centru
Pentru a centra orizontal un element de block (cum ar fi <div>), utilizați margin: auto;
Setarea lățimii elementului îl va împiedica să se întindă până la marginile containerului său.
Elementul va prelua apoi lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două margini.
Notă: Alinierea la centru nu are efect dacă proprietatea lățimii nu este setată (sau setată la 100%).
Centrare aliniere text (Center Align Text)
Pentru a centra doar textul în interiorul unui element, utilizați text-align: center;
Centrați o imagine
Pentru a centra o imagine, setați marginea stângă și dreaptă pe auto și transformați-o într-un element block.
Aliniere stânga și dreapta - Folosire position
O metodă de aliniere a elementelor este utilizarea position: absolut ;:
Aliniere stânga și dreapta - Folosire float
O altă metodă pentru alinierea elementelor este utilizarea proprietății float.
Dacă un element este mai înalt decât elementul care îl conține și este float, acesta se va revărsa (overflow) în afara containerului său. Puteți utiliza hackul „clearfix” pentru a remedia acest lucru (a se vedea exemplul de mai jos).
The clearfix Hack
Putem adăuga overflow: auto; la elementul conținut pentru a remedia această problemă.
Centrare vertical - Folosire padding
Există multe moduri de a centra un element pe verticală în CSS. O soluție simplă este utilizarea paddingu-ului de sus și de jos.
Centru vertical - Folosire line-height
Un alt truc este să folosiți proprietatea line-height cu o valoare egală cu proprietatea height.
Centru vertical - Folosire position și transform
Dacă padding și line-height nu sunt opțiuni, o a treia soluție este utilizarea poziționării și a proprietății de transformare.

CSS Bară de navigare

Bare de navigare
Navigarea ușor de utilizat este importantă pentru orice site web.
Cu CSS puteți transforma meniuri HTML plictisitoare în bare de navigare cu aspect bun.
Bară de navigare = Lista de legături
O bară de navigare are nevoie de HTML standard ca bază.
Bară de navigare dintr-o listă HTML standard.
O bară de navigare este practic o listă de legături, astfel încât utilizarea elementelor <ul> și <li> are sens perfect.
Link de navigare activ / curent
Adăugați o clasă „activă” la link-ul curent pentru a anunța utilizatorul pe ce pagină se află.
Link-uri centrate & adăugare borders
Adăugați text-align: center la <li> sau <a> pentru a centra legăturile.
Adăugați proprietatea border la <ul> Adăugați un border în jurul barei de navigare. Dacă doriți, de asemenea, borders în interiorul barei de navigare, adăugați un border-bottom la toate elementele <li>, cu excepția ultimului.
Full-height Fixed Vertical Navbar
Bară de navigare orizontală
Există două moduri de a crea o bară de navigare orizontală. Utilizarea elementelor din linie interioară sau flotantă.
Articole de listă inline
O modalitate de a construi o bară de navigare orizontală este de a specifica elementele <li> ca inline, pe lângă codul „standard” de mai sus.
display: inline; - În mod implicit, elementele <li> sunt elemente de tip block. Aici, eliminăm pauzele de linie înainte și după fiecare articol din listă, pentru a le afișa pe o singură linie.
Floating List Items
Un alt mod de a crea o bară de navigare orizontală este să float elementele <li> și să specifici un layout pentru link-urile de navigare.
Link de navigare activ / curent
Adăugați o clasă „active” la link-ul curent pentru a anunța utilizatorul pe ce pagină se află.
Link-uri aliniere dreapta (Right-align links)
Aliniați legăturile din dreapta, plutind elementele din listă spre dreapta (float: right;):
Border Dividers
Adăugați proprietatea border-right la <li> pentru a crea divizori de legături.
Fixed Navigation Bar
Faceți ca bara de navigare să rămână în partea de sus sau de jos a paginii, chiar și atunci când utilizatorul derulează pagina.
Fixed Top
Fixed Bottom
Bară orizontală gri
Sticky Navbar
Adăugați position: sticky; la <ul> pentru a crea sticky navbar.
Un element sticky trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție dată de offset este întâlnită în viewport - apoi se „lipeste”la loc (ca position:fixed).
Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai sus). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
Responsive Topnav
Cum să utilizați interogări media CSS pentru a crea o navigare de sus.
Responsive Sidenav
Cum să utilizați interogări media CSS pentru a crea o navigare receptivă.
Dropdown Navbar
Cum să adăugați un meniu derulant într-o bară de navigare.

CSS Dropdowns

Basic Dropdown
Creați un dropdown box care apare când utilizatorul mută mouse-ul peste un element.
HTML) Utilizați orice element pentru a deschide conținutul dropdown, de ex. un element <span> sau un <button>.
Utilizați un element de container (cum ar fi <div>) pentru a crea conținut dropdown și adăugați orice doriți în interiorul acestuia.
Înfășurați un element <div> în jurul elementelor pentru a poziționa corect conținutul dropdown cu CSS.
CSS) Clasa .dropdown folosește position:relative, care este necesară atunci când dorim ca conținutul dropdown să fie plasat chiar sub butonul dropdown (folosind position:absolute).
Clasa .dropdown-content conține conținutul dropdown real. Este ascunsă în mod implicit și va fi afișată pe hover (vezi mai jos). Rețineți că min-width este setată la 160px. Simte-te liber să schimbi asta.
Dacă doriți ca lățimea conținutului dropdown să fie la fel de largă ca butonul dropdown, setați lățimea (width) la 100% (și overflow:auto pentru a activa defilarea pe ecrane mici).
În loc să folosim un border, am folosit proprietatea CSS box-shadow pentru a face ca meniul dropdown să arate ca un „card”.
Selectorul :hover este folosit pentru a afișa meniul dropdown atunci când utilizatorul mută mouse-ul peste butonul dropdown.
Dropdown Menu
Meniu dropdown care permite utilizatorului să aleagă o opțiune dintr-o listă.
Conținut dropdown aliniat la dreapta (Right-aligned Dropdown Content)
Dacă doriți ca meniul dropdown să meargă de la dreapta la stânga, în loc de la stânga la dreapta, adăugați right: 0;.
Imagine Dropdown
Cum să adăugați o imagine și alt conținut în dropdown box.
Dropdown Navbar
Cum să adăugați un meniu dropdown într-o bară de navigare.

CSS Image Sprites

Image Sprites
Un image sprite este o colecție de imagini puse într-o singură imagine.
O pagină web cu multe imagini poate dura mult timp pentru a se încărca și generează mai multe solicitări de server.
Utilizarea image sprite-urilor va reduce numărul de solicitări de server și va economisi lățimea de bandă.
Cu CSS, putem afișa doar partea din imagine de care avem nevoie.
<img id = "home" src = "img_trans.gif"> - Definește doar o imagine transparentă mică, deoarece atributul src nu poate fi gol. Imaginea afișată va fi imaginea de fundal pe care o specificăm în CSS.
width: 46px; height: 44px; - Definește portiunea imaginii pe care dorim sa o folosim.
background: url(img_navsprites.gif) 0 0; - Definește imaginea de fundal și poziția acesteia (left 0px, top 0px).
Acesta este cel mai simplu mod de a utiliza image sprites, acum dorim să-l extindem folosind link-uri și efectele hover.
Image Sprites - Creați o listă de navigare
Imaginea sprite ("img_navsprites.gif") pentru a crea o listă de navigare.
Listă HTML, deoarece poate fi o legătură și acceptă și o imagine de fundal.
#navlist {position: relative;} - poziția este setată pe relativ pentru a permite poziționarea absolută în interiorul ei.
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin și padding sunt setate la 0, stilul listei este eliminat și toate elementele din listă sunt poziționate în mod absolut.
#navlist li, #navlist a {height:44px;display:block;} - înălțimea tuturor imaginilor este 44px.

Acum începe să poziționezi și stilul pentru fiecare parte specifică:

#home {left:0px;width:46px;} - poziționat până la stânga, iar lățimea imaginii este 46px.
#home {background:url(img_navsprites.gif) 0 0;} - definește imaginea de fundal și poziția acesteia (left 0px, top 0px)
#prev {left:63px;width:43px;} - poziționat 63px la dreapta (#home width 46px + puțin spațiu suplimentar între elemente), iar width este de 43px.
#prev {background:url('img_navsprites.gif') -47px 0;} - defineste imaginea de fundal 47px la dreapta (#home width 46px + 1px divisor de linie)
#next {left:129px;width:43px;} - poziționat 129px la dreapta (începutul #prev este 63px + #prev lățime 43px + spațiu suplimentar), iar lățimea este 43px.
#next {background:url('img_navsprites.gif') -91px 0;} - defineste imaginea de fundal 91px la dreapta (#home width 46px + 1px line diviser + #prev width 43px + 1px divisor line).
Image Sprites - Hover Effect
Adăugăm un efect hover în lista noastră de navigare.
Selectorul :hover poate fi utilizat pe toate elementele, nu numai pe linkuri.
("img_navsprites_hover.gif") conține trei imagini de navigare și trei imagini pe care să le utilizăm pentru efectele hover.
Deoarece este vorba de o singură imagine și nu de șase fișiere separate, nu va exista nicio întârziere de încărcare atunci când un utilizator trece peste imagine.
Adăugăm doar trei linii de cod pentru a adăuga efectul de hover.
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Pentru toate cele trei imagini pasive, specificăm aceeași poziție de fundal, doar 45px mai jos.

CSS Formulare

Formulare CSS
Aspectul unui formular HTML poate fi îmbunătățit mult cu CSS.
Stilizarea câmpurilor de intrare (Styling Input Fields)
Utilizați proprietatea width pentru a determina lățimea câmpului de intrare (input field).
Dacă doriți să stilați un tip de intrare specific, puteți utiliza selectori de atribute:
input [type=text] - va selecta doar câmpurile de tip text
input [type=password] - va selecta doar câmpuri de tip parolă
input [type=number] - va selecta doar câmpuri numerice
Padded Inputs
Utilizați proprietatea padding pentru a adăuga spațiu în câmpul text.
Când aveți multe intrări una după cealaltă, este posibil să doriți să adăugați și o anumită marjă (margin), pentru a adăuga mai mult spațiu în afara lor.
Bordered Inputs
Utilizați proprietatea border pentru a modifica dimensiunea și culoarea border-ului și utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite(corners rounded).
Dacă doriți doar un bottom border, utilizați proprietatea border-bottom.
Colored Inputs
Utilizați proprietatea background-color pentru a adăuga o culoare de fundal la intrare și proprietatea color pentru a schimba culoarea textului.
Focused Inputs
În mod implicit, unele browsere vor adăuga un contur (outline) albastru în jurul intrării atunci când va fi focalizat (faceți click pe). Puteți elimina acest comportament adăugând outline: none; la intrare.
Utilizați selectorul :focus pentru a face ceva cu câmpul de introducere atunci când este focalizat.
Intrare cu pictogramă / imagine(Input with icon/image)
Dacă doriți o pictogramă (icon) în interiorul intrării, utilizați proprietatea background-image și poziționați-o cu proprietatea background-position. Rețineți, de asemenea, că adăugăm un left padding mare pentru a rezerva spațiul pictogramei (icon).
Intrare de căutare animată(Animated Search Input)
În acest exemplu, utilizăm proprietatea CSS transition pentru a anima lățimea (width) intrării de căutare atunci când devine focus. 
Styling Textareas
Utilizați proprietatea resize pentru a împiedica redimensionarea textului (dezactivați „grabber” din colțul din dreapta jos):
Styling Select Menus
Stilizarea butoanelor de intrare(Styling Input Buttons)
Formular responsiv(Responsive Form)
Redimensionați fereastra browserului pentru a vedea efectul. Când ecranul are o lățime mai mică de 600px, faceți ca cele două coloane să se stivească una peste alta, în loc de una lângă alta.
Interogări media pentru a crea un formular cu răspuns.

CSS Website Layout

Website Layout
Un site web este adesea împărțit în anteturi, meniuri, conținut și un subsol(headers, menus, content și footer).
Antet (Header)
Un antet este de obicei situat în partea de sus a site-ului web (sau chiar sub un meniu de navigare de sus). Adesea conține un logo sau numele site-ului.
Bară de navigare (Navigation Bar)
O bară de navigare conține o listă de link-uri pentru a ajuta vizitatorii care navighează pe site-ul dvs. web.
Conţinut (Content)
Aspectul din această secțiune depinde adesea de utilizatorii vizați. Cea mai comună dispunere este una (sau combinarea lor) dintre următoarele:
1-column - (adesea folosit pentru browserele mobile)
2-column - (adesea folosit pentru tablete și laptopuri)
3-column layout  - (utilizată doar pentru desktopuri)
Coloane inegale (Unequal Columns)
Conținutul principal este cea mai mare și cea mai importantă parte a site-ului dvs.
Este comună cu lățimile inegale ale coloanei, astfel încât cea mai mare parte a spațiului este rezervată conținutului principal. Conținutul lateral (dacă există) este adesea folosit ca o navigare alternativă sau pentru a specifica informații relevante pentru conținutul principal. Modificați lățimile după cum doriți, amintiți-vă doar că ar trebui să adauge până la 100% în total.
Subsol (Footer)
Subsolul este plasat în partea de jos a paginii. Adesea conține informații precum copyright și informații de contact.
Responsive Website Layout
Folosind o parte din codul CSS de mai sus, putem crea un site web responsiv, care variază între două coloane și coloane cu lățime completă, în funcție de lățimea ecranului.

CSS Colțuri rotunjite

CSS Colțuri rotunjite
Cu proprietatea CSS border-radius, puteți da oricărui element "colțuri rotunjite" (rounded corners).
Proprietate CSS border-radius
Proprietatea CSS border-radius definește raza colțurilor unui element.
Această proprietate vă permite să adăugați colțuri rotunjite la elemente!
Colțuri rotunjite (rounded corners) pentru un element cu o culoare de fundal specificată.
Colțuri rotunjite (rounded corners) pentru un element cu bordură.
Colțuri rotunjite (rounded corners) pentru un element cu o imagine de fundal.
Proprietatea „border-radius” este de fapt o proprietate de tip shorthand pentru proprietățiile border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.
CSS border-radius - Specificați fiecare colț
Proprietatea border-radius poate avea de la una până la patru valori.
Patru valori - border-radius: 15px 50px 30px 5px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțului din dreapta sus(top-right corner), a treia valoare se aplică colțului din dreapta jos(bottom-right corner) și a patra valoare se aplică colțului din stânga jos(bottom-left corner)).
Trei valori - border-radius: 15px 50px 30px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners) și a treia valoare se aplică colțului din dreapta jos(bottom-right corner)).
Două valori - border-radius: 15px 50px; (prima valoare se aplică colțurilor din stânga sus și din dreapta jos(top-left și bottom-right corners), iar a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners)).
O valoare - border-radius: 15px; (valoarea se aplică la toate cele patru colțuri, care sunt rotunjite în mod egal).
Proprietăți CSS Rounded Corners
border-radius O proprietate shorthand pentru setarea tuturor celor patru chenare - * - * - proprietăți radius.
border-top-left-radius Definește forma marginii din colțul din stânga sus.
border-top-right-radius Definește forma marginii din colțul din dreapta sus.
border-bottom-right-radius Definește forma marginii din colțul din dreapta jos.
border-bottom-left-radius Definește forma marginii din colțul din stânga jos.

CSS Fundaluri multiple

În acest capitol veți învăța cum să adăugați mai multe imagini de fundal la un element.
Proprietățiile background-size, background-origin, background-clip.
CSS vă permite să adăugați mai multe imagini de fundal pentru un element, prin proprietatea background-image.
Diferitele imagini de fundal sunt separate prin virgule, iar imaginile sunt stivuite una peste alta, unde prima imagine este cea mai apropiată de privitor.
Mai multe imagini de fundal pot fi specificate utilizând fie proprietățiile de fundal individuale (ca mai sus), fie proprietatea background shorthand.
CSS Background Size
Proprietatea CSS background-size vă permite să specificați dimensiunea imaginilor de fundal.
Mărimea poate fi specificată în lungimi, procente (lengths, percentages) sau utilizând unul dintre cele două cuvinte cheie: conține sau acoperire(contain sau cover).
Redimensionare background image la o dimensiune mult mai mică decât imaginea originală (folosind pixeli).
Celelalte două valori posibile pentru background-size sunt contain și cover.
Cuvântul cheie contain scalează imaginea de fundal (scales the background image) pentru a fi cât mai mare (dar atât lățimea cât și înălțimea sa trebuie să se încadreze în zona conținutului). Ca atare, în funcție de proporțiile imaginii de fundal (background image) și de zona de poziționare a fundalului, pot exista anumite zone ale fundalului care nu sunt acoperite de imaginea de fundal (background image).
Cuvântul cheie cover scalează imaginea de fundal (scales the background image) astfel încât zona de conținut să fie acoperită complet de imaginea de fundal (background image) (atât lățimea cât și înălțimea acesteia sunt egale sau depășesc aria conținutului). Ca atare, este posibil ca unele părți ale imaginii de fundal (background image) să nu fie vizibile în zona de poziționare a fundalului.
Definirea dimensiunilor mai multor imagini de fundal (Define Sizes of Multiple Background Images)
Proprietatea background-size acceptă, de asemenea, mai multe valori pentru dimensiunea fundalului (folosind o listă separată de virgule), atunci când lucrați cu mai multe fundaluri.
Full Size Background Image
Acum vrem să avem o imagine de fundal (background image) pe un site web care să acopere întreaga fereastră a browserului în orice moment.
Cerințele sunt următoarele:
Completează întreaga pagină cu imaginea (fără spațiu alb).
Scalați imaginea după caz.
Centrați imaginea pe pagina.
Nu provocați bare de defilare (scrollbars).
Hero Image
De asemenea, puteți utiliza diferite proprietăți de fundal (background) pe un <div> pentru a crea hero image (o imagine mare cu text) și să o plasați acolo unde doriți.
Proprietatea CSS background-origin
Proprietatea CSS background-origin specifică unde este poziționată imaginea de fundal.
Proprietatea are trei valori diferite:
border-box - imaginea de fundal pornește din colțul din stânga sus al border-ului.
padding-box - (implicit) imaginea de fundal pornește din colțul din stânga sus al marginii padding-ului.
content-box - imaginea de fundal pornește din colțul din stânga sus al conținutului.
Proprietatea CSS background-clip
Proprietatea CSS background-clip specifică zona de pictură a fundalului.
Proprietatea are trei valori diferite:
border-box - (implicit) fundalul este pictat pe marginea exterioară a border-ului.
padding-box - fundalul este vopsit până la marginea exterioară a padding-ului.
content-box - fundalul este pictat în caseta de conținut.
Proprietăți CSS background avansate:
background - O proprietate shorthand pentru setarea tuturor proprietăților de fundal într-o singură declarație
background-clip - Specifică zona de pictură a fundalului
background-image - Specifică una sau mai multe imagini de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-size - Specifică dimensiunea imaginii de fundal

CSS Gradienți

Gradienți CSS
Gradienții CSS vă permit să afișați tranziții netede între două sau mai multe culori specificate.
CSS definește două tipuri de gradienți:
Gradienți liniari/Linear Gradients (coboară / în sus / stânga / dreapta / în diagonală)
Gradienți radiali/Radial Gradients (definiți de centrul lor)
Gradienți liniari CSS
Pentru a crea un gradient liniar trebuie să definiți cel puțin două opriri de culoare (color stops). Oprirea culorilor (color stops) se referă la culorile dintre care doriți să faceți tranziții netede. Puteți seta, de asemenea, un punct de plecare și o direcție (sau un unghi) împreună cu efectul de gradient.
Gradient liniar - de sus în jos (aceasta este implicit)
Gradient liniar care începe de sus. Începe roșu, iar trecerea se face la galben
Gradient liniar - de la stânga la dreapta (Linear Gradient - Left to Right)
Gradient liniar care pornește de la stânga. Începe roșu, trecerea se face la galben.
Gradient liniar - diagonală (Linear Gradient - Diagonal)
Puteți face un gradient în diagonală specificând atât pozițiile de pornire orizontale, cât și cele verticale.
Gradient liniar care începe în stânga sus (și merge spre dreapta jos). Începe roșu, trecerea se face la galben.
Utilizarea unghiurilor (Using Angles)
Dacă doriți un control mai mare asupra direcției gradientului, puteți defini un unghi, în loc de direcțiile predefinite (în jos, în sus, în dreapta, în stânga, în dreapta jos etc.).
Unghiul este specificat ca un unghi între o linie orizontală și linia de gradient.
Modul de utilizare a unghiurilor pe gradienți liniari.
Folosirea mai multor opriri de culori (Using Multiple Color Stops)
Un gradient liniar (de sus în jos) cu mai multe opriri de culoare(multiple color stops).
Un gradient liniar (de la stânga la dreapta) cu culoarea curcubeului și cu un text.
Utilizarea transparenței (Using Transparency)
De asemenea, gradienții CSS acceptă transparența, care poate fi utilizată pentru a crea efecte de decolorare.
Pentru a adăuga transparență, folosim funcția rgba() pentru a defini oprirea culorii (color stops). Ultimul parametru din funcția rgba () poate fi o valoare de la 0 la 1 și definește transparența culorii: 0 indică transparență completă, 1 indică culoarea completă (fără transparență).
Un gradient liniar care pornește de la stânga. Începe complet transparent, trecând la roșu complet.
Repetarea unui gradient liniar (Repeating a linear-gradient)
Funcția repeating-linear-gradient() este utilizată pentru a repeta gradienți liniari:
Gradienți radiali CSS (CSS Radial Gradients)
Un gradient radial este definit de centrul său.
Pentru a crea un gradient radial trebuie să definiți, de asemenea, cel puțin două opriri de culoare (color stops).
În mod implicit, forma este de elipsă, dimensiunea este cea mai îndepărtată de colț, iar poziția este centrală.
Gradient radial - Opriri uniforme ale culorilor/ Radial Gradient - Evenly Spaced Color Stops  (aceasta este implicită)
Un gradient radial cu opriri uniforme de culoare distanțate.
Gradient radial - Opriri de culori distanțate diferit / Radial Gradient - Differently Spaced Color Stops
Un gradient radial cu opriri de culoare distanțate diferit.
Setați forma (Set Shape)
Parametrul shape definește forma. Poate lua cercul de valori sau elipsa. Valoarea implicită este elipsa.
Un gradient radial sub forma unui cerc.
Utilizarea cuvintelor cheie de dimensiuni diferite (Use of Different Size Keywords)
Parametrul size definește dimensiunea gradientului. Poate lua patru valori: closest-side, farthest-side, closest-corner, farthest-corner.
Un gradient radial cu cuvinte cheie de dimensiuni diferite.
Repetarea unui gradient radial (Repeating a radial-gradient)
Funcția repeating-radial-gradient() este utilizată pentru a repeta gradienți radiali.
Proprietăți CSS pentru gradient
background-image - Setează una sau mai multe imagini de fundal pentru un element.

CSS Transformări 2D

Transformări 2D CSS
Transformările CSS vă permit să vă deplasați, să rotiți, să scalați și să înlăturați elemente.
Proprietăți CSS: transform.
Asistență browser (Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-ms- sau -webkit-) pentru a înțelege proprietățile de transformare 2D.
CSS Metode de transformare 2D
Cu proprietatea de transformare CSS puteți utiliza următoarele metode de transformare 2D: translate(), rotate(), scaleX(), scaleY(), scale(), skewX(), skewY(), skew(), matrix()
Metoda translate() mută un element din poziția sa curentă (în funcție de parametrii indicați pentru axa X și axa Y).
Metoda rotate() roteste un element în sensul acelor de ceasornic sau în sens contrar acelor de ceasornic, în conformitate cu un anumit grad.
Utilizarea valorilor negative va roti elementul în sensul acelor de ceasornic.
Metoda scale() crește sau scade dimensiunea unui element (în funcție de parametrii dați pentru lățime și înălțime).
Metoda scaleX() crește sau scade lățimea unui element.
Metoda scaleY() crește sau scade înălțimea unui element.
Metoda skewX() frânează un element de-a lungul axei X cu unghiul dat.
Metoda skewY() frânează un element de-a lungul axei Y de unghiul dat.
Metoda skew() frânează un element de-a lungul axelor X și Y de unghiurile date.
Metoda matrix() combină toate metodele de transformare 2D într-una.
Metoda matrix() ia șase parametri, care conțin funcții matematice, ceea ce vă permite să rotiți, să scalați, să mutați (să translați) și să înlăturați elemente.
Parametrii sunt următorii: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Proprietăți de transformare CSS
transform - Aplică o transformare 2D sau 3D la un element.
transform-origin - Vă permite să schimbați poziția asupra elementelor transformate.
CSS Metode de transformare 2D
matrix(n, n, n, n, n, n) - Definește o transformare 2D, folosind o matrice de șase valori
translate(x, y) -  Definește o transformare 2D, mutând elementul de-a lungul axei X și Y
translateX(n) - Definește o transformare 2D, mutând elementul de-a lungul axei X
translateY(n) - Definește o transformare 2D, mutând elementul de-a lungul axei Y
scale(x, y) - Definește o transformare la scară 2D, modificând lățimea și înălțimea elementelor
scaleX(n) - Definește o transformare la scară 2D, modificând lățimea elementului
scaleY(n) - Definește o transformare la scară 2D, schimbând înălțimea elementului
rotate(angle) - Definește o rotație 2D, unghiul este specificat în parametru
skew(angle x, angle y) - Definește o transformare în 2D de-a lungul axei X și Y
skewX(angle) - Definește o transformare în 2D de-a lungul axei X
skewY(angle) - Definește o transformare în 2D de-a lungul axei Y

CSS Tooltip

CSS Tooltip
Creați tooltips cu CSS.
Un tooltip este adesea folosit pentru a specifica informații suplimentare despre ceva când utilizatorul mută indicatorul mouse-ului peste un element.
Basic Tooltip
Creați un tooltip care apare când utilizatorul mută mouse-ul peste un element.
HTML: Utilizați un element container (cum ar fi <div>) și adăugați-i clasa „tooltip”. Când utilizatorul trece cu mouse-ul peste acest <div>, va afișa textul de tip tooltip.
Textul de tip tooltip este plasat în interiorul unui element inline (cum ar fi <span>) cu class = "tooltiptext".
CSS: Clasa tooltip folosește position:relative, care este necesară pentru poziționarea textului tooltip (position:absolute).
Consultați exemplele de mai jos despre cum să poziționați indicatorul.
Clasa tooltiptext conține textul actual de tip tooltip. Este ascunsă în mod implicit și va fi vizibilă în hover (vezi mai jos). De asemenea, i-am adăugat câteva stiluri de bază: 120px lățime (width), culoare de fundal neagră, culoare text alb, text centrat (black background color, white text color, centered text) și 5px top și bottom padding.
Proprietatea CSS border-radius este utilizată pentru a adăuga colțuri rotunjite (rounded corners) tooltip text.
Selectorul :hover este utilizat pentru a afișa textul de tip tooltip atunci când utilizatorul mută mouse-ul peste <div> cu class="tooltip".
Positioning Tooltips
tooltip-ul este plasat la dreapta (left: 105%) a textului „hoverable” (<div>). De asemenea, rețineți că partea de sus:-5px (top:-5px) este utilizată pentru a-l plasa în mijlocul elementului container. Folosim numărul 5 deoarece textul de tip tooltip are o acoperire de 5px în partea de sus și de jos (top and bottom padding). Dacă măriți padding, creșteți și valoarea proprietății de top pentru a vă asigura că aceasta rămâne la mijloc (dacă este ceea ce doriți). Același lucru este valabil dacă doriți ca tooltip să fie plasat la stânga.
Dacă doriți ca tooltip să apară în partea de sus sau de jos ( top sau bottom), consultați exemplele de mai jos. Rețineți că folosim proprietatea margin-left cu o valoare de minus 60 pixeli. Acest lucru este pentru a centra tooltip deasupra/sub (above/below ) textul hoverable. Este setat la jumătatea lățimii tooltip-ului (120/2 = 60).
Instrumente săgeți (Tooltip Arrows)
Pentru a crea o săgeată (arrow) care ar trebui să apară dintr-o parte specifică a tooltip-ului, adăugați conținut „empty” după tooltip, cu pseudo-element class ::after împreună cu proprietatea content. Săgeata în sine este creată folosind borders. Acest lucru va face ca tooltip-ul să pară un speech bubble.
Adăugare săgeată la partea de jos a tooltip-ului.
Poziționarea săgeții în interiorul tooltip: top: 100% va așeza săgeata în partea de jos a tooltip. left: 50% va centra săgeata.
Proprietatea border-width specifică dimensiunea săgeții. Dacă schimbați acest lucru, modificați, de asemenea, valoarea margin-left. Aceasta va menține săgeata centrată.
Border-color este utilizată pentru a transforma conținutul într-o săgeată. Am stabilit top border la negru, iar restul la transparent. Dacă toate părțile ar fi negre, s-ar termina cu o black square box.
Adăugați o săgeată în partea de sus a tooltip.
Adăugați o săgeată la stânga tooltip-ului.
Adăugați o săgeată la dreapta tooltip-ului.
Fade In Tooltips (Animation)
Dacă doriți să aplicați fade în tooltip text când urmează să fie vizibil, puteți utiliza proprietatea CSS transition împreună cu proprietatea opacity și puteți trece de la a fi complet invizibil la 100% vizibil, într-un număr de secunde specificate (1 secundă în exemplul nostru).

CSS Stilizarea imaginilor

CSS Stilizarea imaginilor (CSS Styling Images)
Imagini rotunjite (Rounded Images)
Utilizați proprietatea border-radius pentru a crea imagini rotunjite (rounded images).
Imagini în miniatură (Thumbnail Images)
Utilizați proprietatea border pentru a crea imagini în miniatură (thumbnail images).
Imagine in miniatură (thumbnail image).
Imagine în miniatură ca link (Thumbnail Image as Link).
Imagini responsive (Responsive Images)
Imaginile responsive se vor regla automat pentru a se potrivi cu dimensiunea ecranului.
Redimensionați fereastra browserului pentru a vedea efectul.
Centrați o imagine (Center an Image)
Pentru a centra o imagine, setați marginea stângă și dreapta pe auto și transformați-o într-un element block.
Imagini / Carduri Polaroid (Polaroid Images / Cards)
Imagine transparentă
Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât este mai transparentă:
IE8 și versiunile anterioare folosesc filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.
Image Text
Cum se poziționează textul într-o imagine.
Filtre de imagine (Image Filters)
Proprietatea CSS filter adaugă efecte vizuale (precum estomparea și saturația/(blur and saturation) unui element.
Proprietatea CSS filter nu este acceptată în Internet Explorer, Edge 12 sau Safari 5.1 și nici în versiunile anterioare.
Image Hover Overlay
Creați un efect de suprapunere asupra hover.
Rotiți o imagine
Mutați mouse-ul peste imagine.
Galerie de imagini responsive
CSS poate fi utilizat pentru a crea galerii de imagini. Acest exemplu utilizează interogări media pentru a reorganiza imaginile pe dimensiuni de ecran diferite. Redimensionați fereastra browserului pentru a vedea efectul.
Image Modal (Advanced)
Modul în care CSS și JavaScript pot lucra împreună.
În primul rând, utilizați CSS pentru a crea o fereastră modală (dialog box) și ascundeți-o în mod implicit.
Apoi, utilizați un JavaScript pentru a afișa fereastra modală și pentru a afișa imaginea în interiorul modalului, atunci când un utilizator face click pe imagine.

CSS Flexbox

CSS Flexbox
CSS Modulul Flexbox Layout (CSS Flexbox Layout Module)
Înainte de modulul Layout Flexbox, existau patru moduri de aspect:
Block, pentru secțiunile dintr-o pagină web
Inline, pentru text
Table, pentru date în două dimensiuni ale tabelului
Positioned, pentru poziția explicită a unui element
Flexible Box Layout Module, face mai ușoară proiectarea unei structuri flexibile layout responsive fără a folosi float sau poziționare (positioning).
Asistență browser(Browser Support)
Proprietățilie flexbox sunt acceptate în toate browserele moderne.
Elemente Flexbox (Flexbox Elements)
Pentru a începe să utilizați modelul Flexbox, trebuie să definiți mai întâi un recipient flex (flex container).
Elementul de mai sus reprezintă un recipient flex (flex container) (zona albastră) cu trei elemente flexibile.
Un container flex cu trei articole flexibile.
O dispunere flexibilă (Flexible Layout) trebuie să aibă un element părinte cu proprietatea de afișare setată la flex.
Elementele directe ale copilului ale containerului flexibil devin automat elemente flexibile.
Proprietățiile containerului flex sunt: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.
Proprietatea flex-direction
Proprietatea flex-direction definește în ce direcție containerul dorește să stiveze elementele flex.
 "flex-direction: column;" stivuiește elementele flexate vertical (de sus în jos).
Valoarea coloanei (column) stochează vertical elementele flex (de sus în jos).
Valoarea coloană-inversă (column-reverse) stochează vertical elementele flex (dar de jos în sus).
Valoarea row-reverse stochează elementele flexate pe orizontală (dar de la dreapta la stânga).
Proprietatea flex-wrap specifică dacă elementele flex trebuie să fie wrap sau nu.
Valoarea wrap specifică faptul că elementele flex se vor wrap dacă este necesar.
Valoarea nowrap specifică faptul că elementele flex nu se vor wrap (aceasta este implicită).
Valoarea wrap-reverse specifică faptul că elementele flexibile se vor wrap dacă este necesar, în ordine inversă.
Proprietatea flex-flow este o proprietate shorthand pentru setarea proprietăților flex-direction și flex-wrap.
Proprietatea justify-content este utilizată pentru alinierea elementelor flex
Valoarea center aliniază elementele flex în centrul containerului
Valoarea flex-start aliniază elementele flex la începutul containerului (implicit)
Valoarea flex-end aliniază elementele flex la sfârșitul containerului
Valoarea space-around afișează elementele flex cu spațiu înainte, între și după linii (before, between și after)
Valoarea space-between afișează elementele flexibile cu spațiu între linii
Proprietatea align-items este utilizată pentru alinierea elementelor flexate pe verticală.
Utilizăm un container înalt de 200 de pixeli, pentru a demonstra mai bine proprietatea align-items.
Valoarea center aliniază elementele flex din mijlocul containerului.
Valoarea flex-start aliniază elementele flex din partea de sus a containerului.
Valoarea flex-end aliniază elementele flex din partea de jos a containerului.
Valoarea stretch întinde elementele flex pentru a umple containerul (aceasta este implicit).
Valoarea baseline aliniază elementele flex, cum ar fi alinierea lor de bază.
Proprietatea align-content este utilizată pentru a alinia liniile flex.
În aceste exemple, utilizăm un container înalt de 600 de pixeli, cu proprietatea flex-wrap setată pentru a wrapa, pentru a demonstra mai bine proprietatea align-content.
Valoarea space-between afișează liniile flexate cu spațiu egal între ele.
Valoarea space-around afișează liniile flexate cu spațiu înainte, între și după ele.
Valoarea stretch întinde liniile flex pentru a ocupa spațiul rămas (acesta este implicit).
Valoarea center afișează liniile de flexare din mijlocul containerului.
Valoarea flex-start afișează liniile flex la începutul containerului.
Valoarea flex-end afișează liniile de flex la sfârșitul containerului.
Centrare perfectă
În următorul exemplu, vom rezolva o problemă de stil foarte comună: centrarea perfectă (perfect centering).
Setați atât proprietățiile justify-content, cât și align-items in centru, iar elementul flex va fi perfect centrat.
Child Elements (Items)
Elementele child directe ale unui recipient flex devin automat elemente flexibile (flexibile).
Proprietățiile elementului flex: order, flex-grow, flex-shrink, flex-basis, flex, align-self.
Proprietatea order specifică ordinea elementelor flex.
Primul element flex din cod nu trebuie să apară ca primul element din layout.
Valoarea order trebuie să fie un număr, valoarea implicită este 0.
Proprietatea order poate modifica ordinea articolelor flex.
Proprietatea flex-grow specifică cât de mult va crește un element flex în raport cu restul elementelor flex.
Valoarea flex-grow trebuie să fie un număr, valoarea implicită este 0.
Faceți ca cel de-al treilea element flex să crească de opt ori mai rapid decât celelalte elemente flex.
Proprietatea flex-shrink specifică cât de mult se va micsora un element flex în raport cu restul elementelor flex.
Valoarea flex-shrink trebuie să fie un număr, valoarea implicită este 1.
Nu lăsați al treilea element flex să se micșoreze la fel de mult decât celelalte elemente flex.
Proprietatea flex-basis specifică lungimea inițială a unui element flex.
Proprietatea flex este o proprietate shorthand pentru proprietățiile flex-grow, flex-shrink și flex-basis.
Proprietatea align-self specifică alinierea pentru elementul selectat în interiorul containerului flexibil.
Proprietatea align-self înlocuiește alinierea setată implicit de proprietatea align-items a containerului.
Galerie de imagini responsive folosind Flexbox
Utilizați flexbox pentru a crea o galerie de imagini responsive care variază între patru, două sau imagini cu lățime completă, în funcție de dimensiunea ecranului.
Website responsive folosind Flexbox
Utilizați flexbox pentru a crea un responsive website, care conține o bară de navigare flexibilă și conținut flexibil.
Proprietăți CSS Flexbox
display - Specifică tipul de box folosit pentru un element HTML
flex-direction - Specifică direcția articolelor flexibile din interiorul unui recipient flex
justify-content - Aliniază orizontal elementele flex atunci când elementele nu folosesc tot spațiul disponibil pe axa principală
align-items - Aliniază vertical elementele flex atunci când elementele nu folosesc tot spațiul disponibil pe axa transversală
flex-wrap - Specifică dacă elementele flexate trebuie să se înfășoare (wrap) sau nu, dacă nu există suficient loc pentru ele pe o singură linie flex
align-content - Modifică comportamentul proprietății flex-wrap. Este similar cu align-items, dar în loc să alinieze elementele flex, aliniază liniile flex
flex-flow - O proprietate shorthand pentru flex-direction și flex-wrap
order - Specifică ordinea unui articol flexibil în raport cu restul elementelor flexibile din interiorul aceluiași recipient
align-self - Folosit pe articolele flex. Înlocuiește proprietatea align-items
flex - O proprietate shorthand pentru proprietățile flex-grow, flex-shrink și flex-basis

SQL JOIN

SQL JOIN
O clauză JOIN este utilizată pentru a combina rânduri din două sau mai multe tabele, pe baza unei coloane înrudite între ele.
Selecție din tabelul „Orders”:
Selecție din tabelul „Customers”:
Coloana „CustomerID” din tabelul „Orders” se referă la „CustomerID” din tabelul „Customers”. Relația dintre cele două tabele de mai sus este coloana „CustomerID”.
Putem crea următoarea instrucțiune SQL (care conține un INNER JOIN), care selectează înregistrările care au valori potrivite în ambele tabele:
SELECT Orders.OrderID, Customers.CustomerName, Orders.OrderDate
FROM Orders
INNER JOIN Customers ON Orders.CustomerID=Customers.CustomerID;
Diferite tipuri de SQL JOINs
Iată diferitele tipuri de JOINs în SQL:
(INNER) JOIN: returnează înregistrările care au valori potrivite în ambele tabele
LEFT (OUTER) JOIN: returnează toate înregistrările din tabelul din stânga și înregistrările potrivite din tabelul din dreapta
RIGHT (OUTER) JOIN: returnează toate înregistrările din tabelul din dreapta și înregistrările potrivite din tabelul din stânga
FULL (OUTER) JOIN: returnează toate înregistrările atunci când există o potrivire în tabelul din stânga sau din dreapta

SQL LEFT JOIN

SQL LEFT JOIN
Cuvântul cheie SQL LEFT JOIN
Cuvântul cheie LEFT JOIN returnează toate înregistrările din tabelul din stânga (table1), si înregistrările potrivite din tabelul din dreapta (table2). Dacă nu există nicio potrivire din partea dreaptă rezultatul este NULL.
LEFT JOIN Syntax
SELECT column_name(s)
FROM table1
LEFT JOIN table2
ON table1.column_name = table2.column_name;
În unele baze de date LEFT JOIN se numește LEFT OUTER JOIN.
Exemplu SQL LEFT JOIN
Următoarea instrucțiune SQL va selecta toți clienții (customers) și orice comenzi (orders) ar putea avea:
SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
LEFT JOIN Orders ON Customers.CustomerID = Orders.CustomerID
ORDER BY Customers.CustomerName;
Cuvântul cheie LEFT JOIN returnează toate înregistrările din tabelul din stânga (Clienți/Customers), chiar dacă nu există potriviri în tabelul din dreapta (Comenzi/Orders).

SQL RIGHT JOIN

SQL RIGHT JOIN
Cuvântul cheie SQL RIGHT JOIN
Cuvântul cheie RIGHT JOIN returnează toate înregistrările din tabelul din dreapta (table2), si înregistrările potrivite din tabelul din stânga (table1). Când nu există nici o potrivire rezultatul este NULL din partea stângă.
RIGHT JOIN Syntax
SELECT column_name(s)
FROM table1
RIGHT JOIN table2
ON table1.column_name = table2.column_name;
În unele baze de date, RIGHT JOIN se numește RIGHT OUTER JOIN.
Exemplu SQL RIGHT JOIN
Următoarea instrucțiune SQL va returna toți angajații și orice comenzi ar fi făcut:
Cuvântul cheie RIGHT JOIN returnează toate înregistrările din tabelul din dreapta (Angajați/Employees), chiar dacă nu există meciuri în tabelul din stânga (Comenzi/Orders).

SQL FULL OUTER JOIN

SQL FULL OUTER JOIN
Cuvântul cheie SQL FULL OUTER JOIN
Cuvântul cheie FULL OUTER JOIN returnează toate înregistrările atunci când există o potrivire în înregistrările tabelului stânga (tabel1) sau dreapta (tabel2).
FULL OUTER JOIN poate returna seturi de rezultate foarte mari!
FULL OUTER JOIN și FULL JOIN sunt aceleași.
FULL OUTER JOIN Syntax
SELECT column_name(s)
FROM table1
FULL OUTER JOIN table2
ON table1.column_name = table2.column_name
WHERE condition;
Exemplu SQL FULL OUTER JOIN
Următoarea instrucțiune SQL selectează toți clienții și toate comenzile:
SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
FULL OUTER JOIN Orders ON Customers.CustomerID=Orders.CustomerID
ORDER BY Customers.CustomerName;
Cuvântul cheie FULL OUTER JOIN returnează toate înregistrările de potrivire din ambele tabele, indiferent dacă celălalt tabel se potrivește sau nu. Așadar, dacă există „rânduri” (rows) în „Clienți” (Customers) care nu au potriviri în „Comenzi” (Orders) sau dacă există „rânduri” (rows) în „Comenzi” (Orders)  care nu au potriviri în „Clienți” (Customers), aceste rânduri vor fi listate și ele.

PHP Operatori

Operatori PHP
Operatorii sunt folosiți pentru a efectua operații cu variabile și valori.
PHP împarte operatorii în următoarele grupuri:
Operatori de aritmetică
Operatori de atribuire
Operatori de comparație
Operatori de creștere / descreștere
Operatori logici
Operatori cu șiruri (string)
Operatori de matrice (array)
Operatori de atribuire condiționată
Operatori Aritmetici PHP
Operatorii aritmetici PHP sunt folosiți cu valori numerice pentru a efectua operațiuni aritmetice comune, cum ar fi adunarea, scăderea, înmulțirea etc.
Operatori PHP de atribuire
Operatorii PHP de atribuire sunt folosiți cu valori numerice pentru a scrie o valoare a unei variabile.
Operatorul de atribuire de bază în PHP este "=". Înseamnă că operandul stâng este setat la valoarea expresiei de atribuire din dreapta.
Operatori PHP de comparație
Operatorii PHP de comparație sunt folosiți pentru a compara două valori (număr sau șir/number or string)
Operatori PHP de creștere / descreștere
Operatorii PHP de incrementare sunt folosiți pentru a crește valoarea unei variabile.
Operatorii PHP de descreștere sunt folosiți pentru a descrește valoarea unei variabile.
Operatori logici PHP
Operatorii logici PHP sunt folosiți pentru a combina instrucțiuni condiționale.
Operatori PHP String
PHP are doi operatori special conceputi pentru string-uri.
Operatori Array PHP
Operatorii Array PHP sunt folosiți pentru a compara matricile.
Operatori PHP de atribuire condiționată
Operatorii PHP de alocare condiționată sunt folosiți pentru a seta o valoare în funcție de condiții.

Acizi

Definirea acizilor conform teoriei disociației electrolitice și a teoriei protolitice; hidracizi și oxoacizi; radicali acizi; formula generală și nomenclatura acizilor; proprietățile și reacțiile chimice specifice acizilor; ionizarea acizilor; metode generale de obținere a acizilor. 

Baze

Definirea bazelor conform teoriei disociației electrolitice și teoriei protolitice; formula generală și nomenclatura bazelor; proprietățile și reacțiile chimice specifice bazelor; ionizarea bazelor; metode generale de obținere a bazelor. 

Grupa 17 sau grupa a VII-a principală

Grupa a VII-a principală, numerotată VII A sau 17, numită și grupa halogenilor, conține următoarele elemente: fluor, F, clor, Cl, brom, Br, iod, I, astatin, At.
 

Grupa 14 sau grupa a IV-a principală

Grupa a IV-a principală a sistemului periodic, numerotată IV A sau 14, cuprinde elementele carbon, C, siliciu, Si, germaniu, Ge, staniu, Sn, și plumb, Pb. 

Grupa 6 sau grupa a VI-a secundară

Grupa a VI-a secundară a tabelului periodic, numerotată VI B sau 6, cuprinde elementele crom, Cr, molibden, Mo, și wolfram, W.

Grupa 8 sau grupa a VIII-a secundară

Grupa 8 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare, alături de grupele 9 și 10, cuprinde elementele fier, Fe, ruteniu, Ru, și osmiu, Os. 

Grupa 10 sau grupa a VIII-a secundară

Grupa 10 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare, alături de grupele 8 și 9, cuprinde elementele nichel, Ni, paladiu, Pd, și platină, Pt.