Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Rezultate pentru tag: spatiu




Atribute HTML

Atributele oferă informații suplimentare despre elementele HTML.
Adresa de legătură este specificată în atributul href.
Numele de fișier al sursei imaginii este specificat în atributul src.
Atributele width și height, care specifică lățimea și înălțimea imaginii.
Atributul alt specifică un text alternativ care trebuie utilizat, dacă nu poate fi afișată o imagine.
Atributul style este utilizat pentru a specifica stilul unui element.
Limbajul este declarat cu atributul lang.
Atributul title este adaugat la elementul <p>.

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.

Paragrafe HTML

Elementul HTML <p> definește un alineat.
Elementul HTML <br> definește o pauză de linie (Line Break).
Folosiți <br> dacă doriți o pauză de linie (o linie nouă) fără a începe un nou paragraf.
Eticheta <br> este o etichetă goală, ceea ce înseamnă că nu are o etichetă finală.
Elementul HTML <pre> definește textul preformatat.

Stiluri CSS în HTML

Modelarea HTML cu CSS.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi. Poate controla aspectul mai multor pagini web simultan.
Utilizați atributul HTML style pentru stilul CSS în linie (inline).
Utilizați elementul HTML <style> pentru a defini stilul CSS intern.
Utilizați elementul HTML <link> pentru a vă referi la un fișier CSS extern.
Utilizați elementul HTML <head> pentru a stoca elementele <style> și <link>.
Utilizați proprietatea CSS color pentru culorile de text.
Utilizați proprietatea CSS font-family pentru fonturile text.
Utilizați proprietatea CSS font-size pentru dimensiunile textului.
Utilizați proprietatea CSS border pentru margini.
Utilizați proprietatea CSS padding pentru spațiu în interiorul border.
Utilizați proprietatea CSS margin pentru spațiu în afara border.
Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului:
Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului:
Foile de stil externe (external style sheets ) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.

Tabele HTML

Utilizați elementul HTML <table> pentru a defini un tabel.
Utilizați elementul HTML <tr> pentru a defini un rând de tabel.
Utilizați elementul HTML <td> pentru a defini datele unui tabel.
Utilizați elementul HTML <th> pentru a defini un titlu de tabel.
Utilizați elementul HTML <caption> pentru a defini o legendă de tabel.
Utilizați proprietatea CSS border pentru a defini o bordură.
Utilizați proprietatea CSS border-collapse pentru a restrânge marginile celulelor.
Utilizați proprietatea CSS padding pentru a adăuga umplutură la celule.
Utilizați proprietatea CSS text-align pentru a alinia textul celulelor.
Utilizați proprietatea CSS border-spacing pentru a seta distanța dintre celule.
Utilizați atributul colspan pentru a crea o celulă cu mai multe coloane.
Utilizați atributul linespan pentru a face ca o celulă să aibă mai multe rânduri.
Utilizați atributul id pentru a defini în mod unic o tabelă.
<colgroup> Specifică un grup de una sau mai multe coloane dintr-un tabel pentru formatare.
<col> Specifică proprietățile coloanei pentru fiecare coloană dintr-un element <colgroup>.
<thead> Grupează conținutul antetului într-un tabel.
<tbody> Grupează conținutul corpului într-un tabel.
<tfoot> Grupează conținutul subsolului într-un tabel.

Atributul HTML class

Atributul HTML class este folosit pentru a defini stiluri egale pentru elemente cu același nume de clasă.
Atributul HTML class poate fi folosit și pe elementele inline.
În CSS, pentru a selecta elemente cu o anumită clasă, scrieți un caracter (.), urmat de numele clasei.
Atributul class poate fi folosit pe orice element HTML.
Numele clasei este sensibil la litere mari și mici!
Elementele HTML pot avea mai mult de un nume de clasă, fiecare nume de clasă trebuie separat printr-un spațiu.
Etichetele diferite pot împărtăși aceeași clasă.
Etichetele diferite, cum ar fi <h2> și <p>, pot avea același nume de clasă și, prin urmare, au același stil.
Utilizarea atributului class în JavaScript.
JavaScript poate accesa elemente cu un nume de clasă specificat folosind metoda getElementsByClassName ().

Atributul HTML id

Atributul id specifică un id unic pentru un element HTML (valoarea trebuie să fie unică în documentul HTML).
Valoarea id poate fi folosită de CSS și JavaScript pentru a efectua anumite sarcini pentru elementul cu valoarea specifică de id.
În CSS, pentru a selecta un element cu un id specific, scrieți un caracter hash (#), urmat de id-ul elementului.
Valoarea id este sensibilă la litere mari și mici.
Atributul id poate fi utilizat pe orice element HTML.
Un element HTML poate avea un singur id unic care aparține acelui element singular, în timp ce un nume de clasă poate fi utilizat de mai multe elemente.
Marcajele (bookmarks) HTML sunt utilizate pentru a permite cititorilor să sară la anumite părți ale unei pagini Web.
Marcajele (bookmarks) pot fi utile dacă pagina dvs. web este foarte lungă.
Utilizarea atributului id în JavaScript.
JavaScript poate accesa un element cu un id specificat folosind metoda getElementById ().

Elemente de cod HTML pentru computer

Elementele de cod HTML pentru computer sunt:
<code> Defineste codul de programare.
<kbd> Definește introducerea tastaturii.
<samp> Definește ieșirea computerului.
<var> Definește o variabilă.
<pre>Definește un text preformatat.

Entități HTML

Caracterele rezervate în HTML trebuie înlocuite cu entități de caractere.
Caracterele care nu sunt prezente pe tastatură pot fi, de asemenea, înlocuite de entități.

HTML Uniform Resource Locators (URL)

Un URL este un alt cuvânt pentru o adresă web.
O adresă URL poate fi compusă din cuvinte (lectii-virtuale.ro) sau o adresă IP (Internet Protocol) (192.68.21.51).
Majoritatea oamenilor introduc numele când navighează, deoarece numele sunt mai ușor de reținut decât numerele.
scheme - definește tipul serviciului de internet (cel mai frecvent este http sau https)
prefix - definește un prefix de domeniu (implicit pentru http este www)
domain - definește numele domeniului Internet (cum ar fi lectii-virtuale.ro)
port - definește numărul de port la gazdă (implicit pentru http este 80)
path - definește o cale pe server (Dacă este omis: directorul rădăcină al site-ului)
filename - definește numele unui document sau resursă
Scheme URL comune: HyperText Transfer Protocol (http), Secure HyperText Transfer Protocol (https), File Transfer Protocol (ftp).
Codificare URL.
Adresele URL pot fi trimise doar pe Internet folosind setul de caractere ASCII. Dacă o adresă URL conține caractere în afara setului ASCII, adresa URL trebuie convertită.
Codarea URL transformă caracterele care nu sunt ASCII într-un format care poate fi transmis pe internet.
Codarea URL înlocuiește caracterele care nu sunt ASCII cu un „%” urmat de cifre hexadecimale.
Adresele URL nu pot conține spații. Codarea URL înlocuiește în mod normal un spațiu cu un semn plus (+) sau% 20.
Setul de caractere implicit în HTML5 este UTF-8.

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."

Cum să adăugați CSS

Când un browser citește o foaie de stil, acesta va format documentul HTML în conformitate cu informațiile din foaia de stil.
Trei modalități de a insera CSS.
Există trei moduri de inserare a unei foi de stil:
CSS extern
CSS intern
CSS inline
CSS extern
Cu o foaie de stil extern, puteți schimba aspectul unui întreg site web schimbând doar un singur fișier!
Fiecare pagină HTML trebuie să includă o trimitere la fișierul de stil extern din interiorul elementului <link>, în secțiunea head.
Stilurile externe sunt definite în elementul <link>, în secțiunea <head> a unei pagini HTML.
O foaie de stil extern poate fi scrisă în orice editor de text și trebuie salvată cu o extensie .css.
Fișierul .css extern nu trebuie să conțină nicio etichetă HTML.
Nu adăugați un spațiu între valoarea proprietății și unitate (cum ar fi margin-left: 20 px;). Modul corect este: margin-left: 20px;
CSS intern
Poate fi utilizată o foaie de stil internă (internal style sheet) dacă o singură pagină HTML are un stil unic.
Stilul intern este definit în elementul <style>, în interiorul secțiunii head.
CSS inline
Se poate folosi un stil inline pentru a aplica un stil unic pentru un singur element.
Pentru a utiliza stiluri în linie, adăugați atributul stylela elementul relevant. Atributul de stil poate conține orice proprietate CSS.
Stilurile în linie sunt definite în atributul „style ” al elementului relevant.
Fișe de stil multiple (Multiple Style Sheets)
Dacă unele proprietăți au fost definite pentru același selector (element) în foi de stil diferite, se va utiliza valoarea din ultima foaie de stil citită.
Comandă în cascadă
Toate stilurile dintr-o pagină se vor „încadra” într-o nouă foaie de stil „virtuală” după următoarele reguli, unde numărul unu are cea mai mare prioritate:
Stil în linie (în interiorul unui element HTML).
Fișe de stil externe și interne (în secțiunea cap).
Setare implicită a browserului.
Deci, un stil inline are cea mai mare prioritate și va înlocui stilurile externe și interne și valorile implicite ale browserului.

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 Box Model

Toate elementele HTML pot fi considerate casete (boxes). În CSS, termenul „model de cutie”(box model) este utilizat atunci când vorbim despre design și aspect.
Modelul CSS box este în esență o cutie care se înfășoară în jurul fiecărui element HTML. Este format din: margini, borders, padding și conținutul real.
Content - Conținutul căsuței, unde apar text și imagini.
Padding - Șterge o zonă din jurul conținutului. Padding este transparent.
Border - O graniță care se întinde pe padding și content.
Margin - Șterge o zonă în afara graniței. Marginea este transparentă
.Modelul casetei (box model) ne permite să adăugăm un chenar în jurul elementelor și să definim spațiul dintre elemente.
Lățimea și înălțimea unui element (Width and Height of an Element).
Pentru a seta corect lățimea și înălțimea (width și height) unui element în toate browserele, trebuie să știți cum funcționează modelul casetei (box model).

CSS Outline

Un outline este o linie care este desenată în jurul elementelor, în afara granițelor (borders), pentru a face ca elementul să „iasă în evidență”.
CSS are următoarele proprietăți outline (contur): outline-style, outline-color, outline-width, outline-offset, outline.
Conturul (outline) diferă de granițe (borders)! Spre deosebire de graniță (border), conturul (outline) este tras în afara graniței elementului și poate suprapune alt conținut. De asemenea, conturul (outline) NU este o parte din dimensiunile elementului; lățimea și înălțimea (height și weight) totală a elementului nu este afectată de lățimea conturului.
CSS Outline Style.
Proprietatea outlyne style specifică stilul conturului și poate avea una dintre următoarele valori:
dotted (punctat) - Definește un contur punctat.
dashed (marcat) - Definește un contur discret.
solid - Definește un contur solid.
double (dublu) - Definește un contur dublu.
groove (canelură) - Definește un contur în canelură 3D.
ridge - Definește un contur 3D ridged.
inset - Definește un contur de inserție 3D.
outset - Definește un contur de declanșare 3D.
none - Nu definește contur.
hidden (ascuns) - Definește un contur ascuns.
Niciuna dintre celelalte proprietăți outline nu va avea niciun efect, cu excepția cazului în care proprietatea în stil outline este setată!
CSS Outline Color.
Proprietatea CSS outline-color este utilizată pentru a seta culoarea conturului.
Culoarea poate fi setată de:
name - Specificați un nume de culoare, cum ar fi „red”.
RGB - Specificați o valoare RGB, cum ar fi „rgb (255,0,0)”.
Hex - Specificați o valoare hexagonală, cum ar fi „# ff0000”.
invert - Realizează o inversare a culorii (care asigură că conturul este vizibil, indiferent de fundalul culorii).
CSS Outline Width.
Proprietatea outline-width specifică lățimea conturului și poate avea una dintre următoarele valori:
thin (subțire) - de obicei 1px.
medium (mediu) - de obicei 3px.
thick (gros) - de obicei 5px.
O dimensiune specifică (în px, pt, cm, em, etc).
CSS Outline - Proprietatea Shorthand
Proprietatea outline este o proprietate shorthand pentru setarea următoarelor proprietăți outline individuale: outline-width, outline-style (required), outline-color.
CSS Outline Offset
Proprietatea outline-offset adaugă spațiu între un outline și edge/ border unui element. Spațiul dintre un element și conturul său este transparent.
Proprietățiile CSS Outline: outline, outline-color, outline-offset, outline-style, outline-width.
outline - O proprietate shorthand pentru setarea contur-lățime, stil contur și contur-culoare într-o singură declarație.
outline-color - Setează culoarea unui contur.
outline-offset - Specifică spațiul dintre un contur și marginea sau marginea unui element.
outline-style - Setează stilul unui contur.
outline-width - Setează lățimea unui contur.

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 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 Combinatoare

Un combinator este ceva care explică relația dintre selectori.
Un selector CSS poate conține mai mult de un simplu selector. Între selectoarele simple, putem include un combinator.
Există patru combinatoare diferite în CSS:
selector descendent (spațiu)
selector child (>)
selector sibling adiacent (+)
selector sibling general (~)
Selector descendent
Selectorul descendent se potrivește cu toate elementele care sunt descendenți ai unui element specificat.
Selectorul Child
Selectorul child selectează toate elementele care sunt copiii unui element specificat.
Selectorul sibling adiacent
Selectorul sibling adiacent selectează toate elementele care sunt frații adiacenți ai unui element specificat.
Elementele sibling trebuie să aibă același element părinte, iar „adiacent” înseamnă „urmărirea imediată”.
Selectorul sibling general
Selectorul sibling general selectează toate elementele care sunt frații unui element specificat.
Toți selectorii combinatori CSS. 
element element div p -  Selectează toate elementele <p> din interiorul elementelor <div>
element> element div> p - Selectează toate elementele <p> în care părintele este un element <div>
element + element div + p - Selectează toate elementele <p> care sunt plasate imediat după elementele <div>
element1 ~ element2 p ~ ul  - Selectează fiecare element <ul> care este precedat de un element <p>

 

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 Selectori de atribute

Selectori de atribute CSS.
Elemente de stil HTML cu atribute specifice.
Este posibil să stilăm elemente HTML care au atribute specifice sau valori de atribut.
Selector CSS [atribute].
Selectorul [atribute] este utilizat pentru a selecta elemente cu un atribut specificat.
Selectarea tuturor elementelor <a> cu atributul target.
Selector CSS [attribute="value"]
Selectorul [attribute="value"] este utilizat pentru a selecta elemente cu un atribut și o valoare specificate.
Selectarea tuturor elementelor  <a> cu atributul target = "_ blank".
Selector CSS [attribute~="value"]
Selectorul [attribute~="value"] este utilizat pentru a selecta elemente cu o valoare de atribut care conține un cuvânt specificat.
Selectarea tuturor elementelor cu un atribut title care conține o listă de cuvinte separată de spațiu, dintre care unul „flower”.
Selector CSS [attribute|="value"]
Selectorul [attribute|="value"] este utilizat pentru a selecta elementele cu atributul specificat începând cu valoarea specificată.
Selectarea tuturor elementelor cu o valoare de atribut class care începe cu "top".
Valoarea trebuie să fie un cuvânt întreg, fie singur, cum ar fi class = "top", sau urmat de o cratimă (-), cum ar fi class = "top-text"!
Selector CSS [attribute^="value"]
Selectorul [attribute^="value"] este utilizat pentru a selecta elemente a căror valoare de atribut începe cu o valoare specificată.
Selectarea tuturor elementelor cu o valoare de atribut class care începe cu "top".
Valoarea nu trebuie să fie un cuvânt întreg!
Selector CSS [attribute$="value"]
Selectorul [attribute$="value"] este utilizat pentru a selecta elementele a căror valoare de atribut se termină cu o valoare specificată.
Selectarea tuturor elementelor cu valoarea de atribut class care se încheie cu "test".
Valoarea nu trebuie să fie un cuvânt întreg!
Selector CSS [attribute*="value"]
Selectorul [attribute*="value"] este utilizat pentru a selecta elementele a căror valoare de atribut conține o valoare specificată.
Selectarea tuturor elementelor cu valoarea de atribut class care conține "te".
Valoarea nu trebuie să fie un cuvânt întreg!
Styling Forms
Selectoarele de atribute pot fi utile pentru stilul formularelor fără clasă sau ID.
Toți selectorii de atribute CSS
[attribute]    [target]  -  Selectează toate elementele cu un atribut țintă (target)
[attribute=value]    [target=_blank]  -  Selectează toate elementele cu target = "_ blank"
[attribute~=value]    [title~=flower]   - Selectează toate elementele cu un atribut titlu care conține cuvântul "flower"
[attribute|=value]    [lang|=en]  -  Selectează toate elementele cu o valoare a atributului lang care începe cu "en"
[attribute^=value]    a[href^="https"]  -  Selectează fiecare element <a> a cărui valoare a atributului href începe cu "https"
[attribute$=value]    a[href$=".pdf"]   -  Selectează fiecare element <a> a cărui valoare a atributului href se încheie cu ".pdf"
[attribute*=value]    a[href*="w3schools"]  -  Selectează fiecare element <a> a cărui valoare a atributului href conține substratul "w3schools"

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 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 Transformări 3D

CSS Transformări 3D
CSS acceptă, de asemenea, transformări 3D.
În acest capitol veți afla despre următoarele proprietăți CSS: transform
Asistență browser (Browser Support)
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-webkit-) pentru a înțelege proprietățiile de transformare 3D.
CSS Metode de transformare 3D
Cu proprietatea de transformare CSS puteți utiliza următoarele metode de transformare 3D: rotateX(), rotateY(), rotateZ()
Metoda rotateX() roteste un element in jurul axei X la un anumit grad.
Metoda rotateY() roteste un element in jurul axei sale Y la un anumit grad.
Metoda rotateZ() roteste un element in jurul axei Z la un anumit grad.
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
transform-style - Specifică modul în care sunt redate elementele nested în spațiul 3D
perspective - Specifică perspectiva asupra modului în care sunt vizualizate elementele 3D
perspective-origin - Specifică poziția de jos a elementelor 3D
backface-visibility - Vizualizează dacă un element trebuie să fie vizibil atunci când nu este orientat către ecran
CSS Metode de transformare 3D
matrix3d
(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) - Definește o transformare 3D, folosind o matrice 4x4 cu 16 valori
translate3d(x, y, z) - Definește o traducere 3D
translateX(x) - Definește o traducere 3D, folosind doar valoarea pentru axa X
translateY(y) - Definește o traducere 3D, folosind doar valoarea pentru axa Y
translateZ(z) - Definește o traducere 3D, folosind doar valoarea pentru axa Z
scale3d(x, y, z) - Definește o transformare la scară 3D
scaleX(x) - Definește o transformare a scării 3D dând o valoare pentru axa X
scaleY(y) - Definește o transformare a scării 3D dând o valoare pentru axa Y
scaleZ(z) - Definește o transformare a scării 3D dând o valoare pentru axa Z
rotate3d(x, y, z, angle) - Definește o rotație 3D
rotateX(angle) - Definește o rotație 3D de-a lungul axei X
rotateY(angle) - Definește o rotație 3D de-a lungul axei Y
rotateZ(angle) - Definește o rotație 3D de-a lungul axei Z
perspective(n) - Definește o vedere în perspectivă pentru un element transformat 3D

CSS object-fit

Proprietatea CSS object-fit
Proprietatea CSS object-fit este utilizată pentru a specifica modul în care un <img> sau <video> trebuie redimensionat pentru a se potrivi cu containerul său.
Această proprietate spune conținutului să umple containerul într-o varietate de moduri; cum ar fi „păstrați acel raport de aspect” sau „întindeți-vă și ocupați cât mai mult spațiu”.
Asistență browser (Browser Support)
Avem două imagini și dorim ca acestea să umple lățimea de 50% a ferestrei browserului și 100% din înălțime.
Nu folosim object-fit, așa că atunci când redimensionăm fereastra browserului, raportul de aspect al imaginilor va fi distrus.
Folosim object-fit: cover; astfel, când redimensionăm fereastra browserului, raportul de aspect al imaginilor este păstrat.
Toate valorile proprietății CSS object-fit
Proprietatea CSS object-fit poate avea următoarele valori:
fill - Aceasta este implicită. Conținutul înlocuit este dimensionat pentru a completa content box a elementului. Dacă este necesar, obiectul va fi stretched sau squished pentru a se potrivi
contain - Conținutul înlocuit este scalat pentru a-și menține raportul de aspect (aspect ratio) în timp ce se încadrează în content box a elementului
cover - Conținutul înlocuit este dimensionat pentru a-și păstra raportul de aspect (aspect ratio) în timp ce umpleți întreaga content box a elementului. Obiectul va fi tăiat (clipped ) pentru a se potrivi
none - Conținutul înlocuit nu este redimensionat
scale-down - Conținutul este dimensionat ca și cum nici un conținut nu a fost specificat (ar avea ca rezultat o dimensiune mai mică a obiectului concret).

CSS Paginare

CSS Paginare
Aflați cum puteți crea o paginare responsive folosind CSS.
Paginare simplă
Dacă aveți un site web cu o mulțime de pagini, poate doriți să adăugați un fel de paginare la fiecare pagină.
Paginarea activă și hoverable
Evidențiați pagina curentă cu o clasă .active și folosiți selectorul :hover pentru a schimba culoarea fiecărei linii de pagină atunci când deplasați mouse-ul peste ele.
Butoane rotunjite active și hoverable
Dacă doriți un buton rotund „active” și „hover” adăugați proprietatea border-radius.
Efect de tranziție hoverable (Hoverable Transition Effect)
Adăugați proprietatea transition la link-urile paginii pentru a crea un efect de tranziție în timpul trecerii (hover).
Paginare mărginită (Bordered Pagination)
Utilizați proprietatea border pentru a adăuga borduri la paginație.
Margini rotunjite (Rounded Borders)
Adăugați rounded borders la prima și ultima dvs. legătură (link) din paginare.
Spațiu între legături (Space Between Links)
Adăugați proprietatea margin dacă nu doriți să grupați linkurile paginii.
Mărimea paginării (Pagination Size)
Modificați dimensiunea paginării cu proprietatea font-size.
Paginarea centrată (Centered Pagination)
Pentru a centra paginarea, wrap un element de tip container (cum ar fi <div>) în jurul lui cu text-align:center
Paginare Breadcrumbs
O altă variantă a paginării este așa-numita "breadcrumbs"

CSS Interfață utilizator

CSS Interfață utilizator
În acest capitol veți afla despre următoarele proprietăți ale interfeței de utilizator CSS: resize, outline-offset
Asistență browser
Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.
Redimensionare CSS (CSS Resizing)
Proprietatea resize specifică dacă (și cum) un element trebuie redimensionat de către utilizator.
Internet Explorer și Edge nu acceptă proprietatea resize.
Permite utilizatorului să redimensioneze doar lățimea unui element <div>.
Permite utilizatorului să redimensioneze doar înălțimea unui element <div>.
Permite utilizatorului redimensionarea atât a înălțimii, cât și a lățimii unui element <div>.
În multe browsere, <textarea> poate fi redimensionată în mod implicit. Aici, am folosit proprietatea resize pentru a dezactiva redimensionarea.
CSS Outline Offset
Proprietatea outline-offset adaugă spațiu între un contur (outline) și margine (edge) sau un border unui element.
Conturul (Outline) diferă de granițe (borders)! Spre deosebire de graniță (border), conturul (outline) este tras în afara graniței (border) elementului și poate suprapune alt conținut. De asemenea, conturul (outline) NU este o parte din dimensiunile elementului; lățimea și înălțimea (width și height) totală a elementului nu este afectată de lățimea conturului (outline).
Următorul exemplu utilizează proprietatea outline-offset pentru a adăuga spațiu între graniță (borders) și contur (outline)
Proprietăți CSS interfață utilizator
outline-offset - Adăugă spațiu între un contur (outline) și margine (edge) sau marginea (border) unui element
resize - Specifică dacă un element poate fi redimensionat de către utilizator

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

CSS Responsive Web Design - Videoclipuri

Responsive Web Design - Videoclipuri
Utilizarea proprietății width
Dacă proprietatea lățimii (width) este setată la 100%, playerul video va răspunde și va scala în sus și în jos.
Rețineți că, playerul video poate fi amplificat pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă (max-width).
Utilizarea proprietății lățime maximă (max-width)
Dacă proprietatea lățime maximă (max-width) este setată la 100%, playerul video va scădea în jos dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială.
Adăugați un videoclip la pagina web de exemplu
Vrem să adăugăm un videoclip în pagina noastră web de exemplu. Videoclipul va fi redimensionat pentru a ocupa întotdeauna tot spațiul disponibil.

CSS Grid Item

CSS Grid Item
Child Elements (Items)
Un container grid conține elemente grid.
În mod implicit, un container are un articol grid pentru fiecare coloană, în fiecare rând, dar puteți stila elementele gridului astfel încât acestea să se întindă pe mai multe coloane și / sau rânduri.
Proprietatea grid-column:
Proprietatea grid-column definește pe ce coloane (ele) să plaseze un articol.
Definiți unde va începe elementul și unde se va termina.
Proprietatea grid-column este o proprietate shorthand pentru proprietățiile grid-column-start și grid-column-end.
Pentru a plasa un articol, vă puteți referi la numere de linie sau puteți utiliza cuvântul cheie „span” pentru a defini câte coloane va cuprinde.
Proprietatea grid-row
Proprietatea grid-row definește pe ce rând să plaseze un element.
Definiți unde va începe elementul și unde se va termina.
Proprietatea grid-row este o proprietate shorthand pentru proprietățiile grid-row-start și grid-row-end.
Pentru a plasa un articol, vă puteți referi la numere de linie sau puteți utiliza cuvântul cheie „span” pentru a defini câte rânduri va cuprinde elementul.
Proprietatea grid-area
Proprietatea grid-area poate fi utilizată ca proprietate de tip shorthand pentru proprietățiile grid-row-start, grid-column-start, grid-row-end și the grid-column-end.
Denumirea elementelor grid
Proprietatea grid-area poate fi, de asemenea, utilizată pentru a atribui nume elementelor grid.
Elementele grid denumite (Named grid items) pot fi menționate de proprietatea grid-template-areas ale containerului grid.
Fiecare rând este definit prin apostroafe ('')
Coloanele din fiecare rând sunt definite în interiorul apostrofelor, separate de un spațiu.
Un semn de perioadă reprezintă un element grid fără nume.
Pentru a defini două rânduri, definiți coloana celui de-al doilea rând în interiorul unui alt set de apostroafe.
The Order of the Items
Aspectul gridului (Grid Layout) ne permite să poziționăm articolele oriunde ne-ar plăcea.
Primul articol din codul HTML nu trebuie să apară ca prim element din grid.

PHP Validare formular

Validare formular PHP
Acesta și capitolele următoare arată cum să folosești PHP pentru a valida datele formularului.
Validare formular PHP
Gândiți-vă la SECURITATE când prelucrați formularele PHP!
Aceste pagini vor arăta cum să procesați formularele PHP din punct de vedere al securitatii. Validarea corectă a datelor din formular este importantă pentru a vă proteja formularul de hackeri și spameri!
Formularul HTML la care vom lucra în aceste capitole, conține diferite câmpuri de introducere: câmpuri de text obligatorii și opționale, butoane radio și un buton de trimitere (required and optional text fields, radio buttons, and a submit button):
Name - Obligatoriu. + Trebuie să conțină doar litere și spațiu alb
E-mail - Obligatoriu. + Trebuie să conțină o adresă de e-mail validă (cu @ și.)
Website - Obligatoriu. Dacă este prezent, trebuie să conțină o adresă URL validă
Comment - Opțional. Câmp de introducere pe mai multe linii (textarea)
Sex - Obligatoriu. Trebuie să selectați una
Mai întâi vom analiza codul HTML simplu pentru formular:
Câmpuri text (Text Fields)
Câmpurile nume, e-mail și website sunt elemente de introducere ale textului (input elements), iar câmpul de comentarii este textarea. Codul HTML arată astfel:
Nume: <input type="text" name="name">
E-mail: <input type="text" name="email">
Website: <input type="text" name="website">
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
Butoane radio (Radio Buttons)
Câmpurile gen (gender fields) sunt butoane radio, iar codul HTML arată astfel:
Gen:
<input type="radio" name="gender" value="female">Femeie
<input type="radio" name="gender" value="male">Bărbat
<input type="radio" name="gender" value="other">Altele
Elementul form (The Form Element)
Codul HTML al formularului arată astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Când formularul este trimis, datele formularului sunt trimise cu method = "post".
Ce este variabila $_SERVER["PHP_SELF"] ?
$_SERVER["PHP_SELF"] este o variabilă super globală care returnează numele de fișier al scriptului care se execută în prezent.
Așadar, $_SERVER["PHP_SELF"] trimite datele formularului (submitted form data) trimis către pagina în sine, în loc să sară pe o altă pagină. În acest fel, utilizatorul va primi mesaje de eroare pe aceeași pagină ca și formularul.
Ce este funcția htmlspecialchars()?
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Aceasta înseamnă că va înlocui caractere HTML precum <and> cu &lt; și &gt;. Acest lucru împiedică atacatorii să exploateze codul prin injectarea codului HTML sau a javascriptului (Cross-site Scripting attacks) în formulare.
Notă imporantă privind securitatea formularului PHP
Variabila $_SERVER["PHP_SELF"] poate fi utilizată de hackeri!
Dacă PHP_SELF este utilizat în pagina dvs., un utilizator poate introduce un slash (/) și apoi unele comenzi de Cross Site Scripting (XSS) pentru a executa.
Scripturi încrucișate (Cross-site scripting) (XSS) este un tip de vulnerabilitate a securității computerului care se găsește de obicei în aplicațiile Web. XSS le permite atacatorilor să injecteze scripturi din partea clientului în paginile Web vizualizate de alți utilizatori.
Presupunem că avem următorul formular într-o pagină numită "test_form.php":
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
Acum, dacă un utilizator introduce URL-ul normal în bara de adrese precum "http://www.example.com/test_form.php", codul de mai sus va fi tradus în:
<form method="post" action="test_form.php">
Până acum, bine.
Cu toate acestea, considerați că un utilizator introduce următoarea adresă URL în bara de adrese:
http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert('hacked')%3C/script%3E
În acest caz, codul de mai sus va fi tradus în:
<form method="post" action="test_form.php/"><script>alert('hacked')</script>
Acest cod adaugă o etichetă script (script tag) și o comandă de alertă (alert command). Și atunci când pagina se încarcă, codul JavaScript va fi executat (utilizatorul va vedea o casetă de alertă (alert box)). Acesta este doar un exemplu simplu și inofensiv cum poate fi exploatată variabila PHP_SELF.
Fiți conștienți de faptul că orice cod JavaScript poate fi adăugat în eticheta <script>! Un hacker poate redirecționa utilizatorul către un fișier de pe alt server, iar respectivul fișier poate conține cod rău intenționat care poate modifica variabilele globale sau poate trimite formularul la o altă adresă pentru a salva datele utilizatorului, de exemplu.
Cum să evitați exploatările $_SERVER["PHP_SELF"]?
Exploatările $_SERVER["PHP_SELF"] pot fi evitate folosind funcția htmlspecialchars().
Codul formularului ar trebui să arate astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Acum, dacă utilizatorul încearcă să exploateze variabila PHP_SELF, va rezulta următoarea ieșire (output):
<form method="post" action="test_form.php/&quot;&gt;&lt;script&gt;alert('hacked')&lt;/script&gt;">
Validați datele formularului cu PHP
Primul lucru pe care îl vom face este să trecem toate variabilele prin funcția PHP htmlspecialchars().
Când folosim funcția htmlspecialchars(); atunci dacă un utilizator încearcă să trimită următoarele într-un câmp text:
<script>location.href('http://www.hacked.com')</script>
- acest lucru nu ar fi executat, deoarece va fi salvat ca și cod HTML scăpat, astfel:
&lt;script&gt;location.href('http://www.hacked.com')&lt;/script&gt;
Codul este acum sigur pentru a fi afișat pe o pagină sau în interiorul unui e-mail.
De asemenea, vom face alte două lucruri atunci când utilizatorul va trimite formularul:
Scoateți caracterele inutile (spațiu suplimentar, filă, linie nouă (extra space, tab, newline)) din datele de intrare ale utilizatorului (cu funcția PHP trim() )
Eliminați backslashes (\) din datele de intrare ale utilizatorului (cu funcția PHP stripslashes())Următorul pas este să creem o funcție care să facă toate verificările pentru noi (ceea ce este mult mai convenabil decât scrierea aceluiași cod încă o dată).
Vom numi funcția test_input().
Acum, putem verifica fiecare variabilă $_POST cu funcția test_input(), iar scriptul va arata astfel:
<?php
// definiți variabilele și setați valorile goale
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $email = test_input($_POST["email"]);
  $website = test_input($_POST["website"]);
  $comment = test_input($_POST["comment"]);
  $gender = test_input($_POST["gender"]);
}
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>
Observați că la începutul scriptului, verificăm dacă formularul a fost trimis folosind $_SERVER ["REQUEST_METHOD"]. Dacă REQUEST_METHOD este POST, atunci formularul a fost trimis - și ar trebui validat. Dacă nu a fost trimis, săriți validarea și afișați un formular necompletat.
Cu toate acestea, în exemplul de mai sus, toate câmpurile de introducere sunt opționale. Scriptul funcționează bine chiar dacă utilizatorul nu introduce date.
Următorul pas este de a face necesare câmpurile de intrare și de a crea mesaje de eroare, dacă este nevoie.

PHP Formular Obligatoriu

Formulare PHP - Câmpuri obligatorii (PHP Forms - Required Fields)
Acest capitol arată cum se pot face câmpurile de intrare necesare (input fields required) și se pot crea mesaje de eroare (error messages), dacă este nevoie.
PHP - Câmpuri obligatorii (PHP - Required Fields)
Din tabelul cu regulile de validare din pagina anterioară, vedem că sunt obligatorii câmpurile „Nume”, „E-mail” și „Gen”. Aceste câmpuri nu pot fi goale și trebuie completate în formularul HTML.
Nume- Obligatoriu. Trebuie să conțină doar litere și spațiu alb.
E-mail - Obligatoriu. Trebuie să conțină o adresă de e-mail validă (cu @ și.).
Website - Opțional. Dacă este prezent, trebuie să conțină o adresă URL validă.
Comentariu - Opțional. Câmp de introducere pe mai multe linii (textarea).
Gen - Obligatoriu. Trebuie să selectați unul.
În capitolul precedent, toate câmpurile de intrare (input fields) au fost opționale.
În codul următor, am adăugat câteva variabile noi: $nameErr, $emailErr, $genderErr și $websiteErr $. Aceste variabile de eroare (error variables) vor conține mesaje de eroare (error messages) pentru câmpurile necesare (required fields). Am adăugat, de asemenea, o instrucțiune if else pentru fiecare variabilă $_POST. Se verifică dacă variabila $_POST este goală (cu funcția PHP empty()). Dacă este gol, un mesaj de eroare (error message) este stocat în diferite variabile de eroare (error variables)  și, dacă nu este gol, trimite datele de intrare (input data) ale utilizatorului prin funcția test_input():
<?php
// definiți variabilele și setați valorile goale
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
  }
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
  }
  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
  }
  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
  if (empty($_POST["gender"])) {
    $genderErr = "Gender is required";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
?>
PHP - Afișează mesajele de eroare (PHP - Display The Error Messages)
Apoi, în formularul HTML, adăugăm putin de script după fiecare câmp necesar (required field), care generează mesajul de eroare (error message) corect dacă este necesar (adică dacă utilizatorul încearcă să trimită formularul fără a completa câmpurile necesare (required fields)):
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Nume: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Coment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gen:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
Următorul pas este validarea datelor de intrare (input data), adică „Conține câmpul Nume doar litere și spațiu alb?”, iar „Conține câmpul E-mail o sintaxă a adresei de e-mail validă?”, iar dacă este completat, ”Conține câmpul Website o adresă URL validă? ".

PHP Formular - E-mail/URL

Formulare PHP - Validați e-mailul și adresa URL
Acest capitol arată cum se pot valida numele, e-mailurile și adresele URL.
PHP - Validare nume
Codul de mai jos arată o modalitate simplă de a verifica dacă câmpul de nume conține doar litere și spațiu alb. Dacă valoarea câmpului nume nu este validă, atunci stocați un mesaj de eroare:
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
  $nameErr = "Sunt permise doar litere și spațiu alb";
}
Funcția preg_match() caută un șir de șablon (string for pattern), returnând adevărat (true) dacă modelul (pattern) există și fals (false) altfel.
PHP - Validare e-mail
Cel mai simplu și mai sigur mod de a verifica dacă o adresă de e-mail este bine formulată este să folosești funcția PHP filter_var().
În codul de mai jos, dacă adresa de e-mail nu este bine formulată, atunci stocați un mesaj de eroare (error message):
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $emailErr = "Format de e-mail invalid";
}
PHP - Validare URL
Codul de mai jos arată o modalitate de a verifica dacă o sintaxă a adresei URL este validă (această expresie obișnuită permite și liniuțe în adresa URL). Dacă sintaxa adresei URL nu este validă, atunci stocați un mesaj de eroare (error message):
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  $websiteErr = "URL invalid";
}
PHP - Validați numele, e-mailul și adresa URL
Scriptul acum arată așa:
<?php
// definiți variabilele și setați valorile goale
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Numele este necesar";
  } else {
    $name = test_input($_POST["name"]);
    // verificați dacă numele conține doar litere și spațiu alb
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Sunt permise doar litere și spațiu alb";
    }
  }
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // verificați dacă adresa de e-mail este bine formulată
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Format de e-mail nevalid";
    }
  }
 if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
    // verificați dacă sintaxa adresei URL este validă (această expresie obișnuită permite și liniuțe în URL)
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
      $websiteErr = "URL nevalid";
    }
  }
 if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
  if (empty($_POST["gender"])) {
    $genderErr = "Genul este necesar";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
?>
Următorul pas este să arătați cum să împiedicați formularul să golească toate câmpurile de intrare (input fields) atunci când utilizatorul trimite formularul.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale Scoala365 partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2024 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri