Limbajul CSS

CSS - Introducere. Ce este CSS? De ce să folosești CSS? CSS salvează multă muncă!

Vezi videoclipul: CSS - Introducere. Ce este CSS? De ce... Vezi toată lecția: CSS Introducere Citește teoria: CSS - Introducere. Ce este CSS? De ce...

Ce este CSS?

CSS reprezintă Cascading Style Sheets.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi.
CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan.
Fișele de stil externe (external stylesheets) sunt stocate în fișiere CSS.

De ce să folosești CSS?

CSS este utilizat pentru a defini stiluri pentru paginile dvs. web, inclusiv designul, aspectul și variațiile de afișare pentru diferite dispozitive și dimensiuni de ecran.

CSS a rezolvat o mare problemă

HTML nu a fost niciodată destinat să conțină etichete pentru formatarea unei pagini web!
HTML a fost creat pentru a descrie conținutul unei pagini web, cum ar fi:

<h1> Acesta este un titlu </h1>

<p> Acesta este un paragraf. </p>

Când etichete ca <font> și atribute de culoare au fost adăugate la specificația HTML 3.2, a început un coșmar pentru dezvoltatorii web. Dezvoltarea de site-uri web mari, unde fonturile și informațiile despre culoare erau adăugate la fiecare pagină, a devenit un proces lung și scump.
Pentru a rezolva această problemă, World Wide Web Consortium (W3C) a creat CSS.

CSS a eliminat formatarea stilului de pe pagina HTML!

CSS salvează multă muncă!

Definițiile de stil sunt salvate în mod normal în fișiere .css externe.
Cu un fișier de foi de stil externe (external stylesheet file), puteți schimba aspectul unui întreg site web schimbând doar un singur fișier!

Sintaxa CSS. Comentarii în CSS.

Vezi videoclipul: Sintaxa CSS. Comentarii în CSS. Vezi toată lecția: CSS Sintaxă Citește teoria: Sintaxa CSS. Comentarii în CSS.

Sintaxa CSS

Un set de reguli CSS constă dintr-un selector și un bloc de declarații:

Selectorul indică elementul HTML pe care doriți să-l creeze în stil.
Blocul de declarație conține una sau mai multe declarații separate prin punct și virgulă.
Fiecare declarație include un nume de proprietate CSS și o valoare, separate de două puncte.
O declarație CSS se încheie întotdeauna cu punct și virgulă, iar blocurile de declarație sunt înconjurate de acolade.

Exemplu:

În acest exemplu toate elementele <p> vor fi aliniate în centru, cu o culoare roșie a textului:

p {
  color: red;
  text-align: center;
}

Comentarii CSS

Comentariile sunt utilizate pentru a explica codul și pot fi utile atunci când editați codul sursă la o dată ulterioară.
Comentariile sunt ignorate de browsere.

Exemplu:

Un comentariu CSS începe cu / * și se termină cu * /. De asemenea, comentariile pot cuprinde mai multe linii:

p {
  color: red;
  /* This is a single-line comment */
  text-align: center;
}

/* This is
a multi-line
comment */

Selectori CSS. Selectorul de grupare CSS. Selectori simpli CSS.

Vezi videoclipul: Selectori CSS. Selectorul de grupare C... Vezi toată lecția: CSS Selectori Citește teoria: Selectori CSS. Selectorul de grupare C...

Selectorul de grupare CSS

Selectorul de grupare selectează toate elementele HTML cu aceleași definiții de stil.

Uitați-vă la următorul cod CSS (elementele h1, h2 și p au aceleași definiții de stil):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Va fi mai bine să grupați selectoarele, pentru a minimiza codul.
Pentru a grupa selectori, separați fiecare selector cu o virgulă.

Exemplu:

În acest exemplu am grupat selectoarele din codul de mai sus:

h1, h2, p {
  text-align: center;
  color: red;
}

Toți selectorii simplii CSS:

Selector	Exemplu	Exemplu descriere
.class	.intro	Selectează toate elementele cu class = "intro"
#id	#firstname	Selectează elementul cu id = "firstname"
*	*	Selectează toate elementele
element	p	Selectează toate elementele p
element,element,..	div, p	Selectează toate elementele div și toate elementele p

Selectori CSS. Selectorul CSS class. Selectorul universal CSS.

Vezi videoclipul: Selectori CSS. Selectorul CSS class. S... Vezi toată lecția: CSS Selectori Citește teoria: Selectori CSS. Selectorul CSS class. S...

Selectorul CSS class

Selectorul de clase (class) selectează elemente HTML cu un atribut de clasă specific.
Pentru a selecta elemente cu o anumită clasă, scrieți un caracter (.), urmat de numele clasei.

Exemplu:

În acest exemplu, toate elementele HTML cu class = "center" vor fi roșii și sunt aliniate la centru (center-aligned):

.center {
  text-align: center;
  color: red;
}

Puteți specifica, de asemenea, că numai anumite elemente HTML ar trebui să fie afectate de o clasă.

Exemplu:

În acest exemplu, numai elementele <p> cu class = "center" vor fi aliniate la centru (center-aligned):

p.center {
  text-align: center;
  color: red;
}

Elementele HTML se pot referi, de asemenea, la mai multe clase.

Exemplu:

În acest exemplu elementul <p> va fi stilat în funcție de class = "center" și de class = "large":

<p class = "center large"> Acest alineat se referă la două clase. </p>

Notă: Un nume de clasă nu poate începe cu un număr!

Selectorul universal CSS

Selectorul universal (*) selectează toate elementele HTML din pagină.

Exemplu:

Regula CSS de mai jos va afecta fiecare element HTML din pagină:

* {
  text-align: center;
  color: blue;
}

Selectori CSS. Selectorul de elemente CSS. Selectorul CSS id.

Vezi videoclipul: Selectori CSS. Selectorul de elemente... Vezi toată lecția: CSS Selectori Citește teoria: Selectori CSS. Selectorul de elemente...

Selectori CSS

Selectoarele CSS sunt utilizate pentru a „găsi” (sau a selecta) elementele HTML pe care doriți să le modelați.

Putem împărți selectorii CSS în cinci categorii:

Selectoare simple (selectează elemente bazate pe nume, id, clasă).
Selectoare combinate (elemente selectate bazate pe o relație specifică între ele).
Selectori de clasă pseudo (elemente selectate bazate pe o anumită stare).
Selectoare pseudo-elemente (selectează și stilează o parte dintr-un element).
Selectori de atribute (elemente selectate bazate pe un atribut sau o valoare de atribut).

Această pagină va explica cei mai de bază selectori CSS.

Selectorul de elemente CSS

Selectorul de elemente selectează elemente HTML pe baza numelui elementului.

Exemplu:

Aici, toate elementele <p> din pagină vor fi aliniate în centru, cu o culoare roșie a textului:

p {
  text-align: center;
  color: red;
}

Selectorul CSS id

Selectorul id utilizează atributul id al unui element HTML pentru a selecta un anumit element.
ID-ul unui element este unic într-o pagină, astfel încât selectorul de id este utilizat pentru a selecta un element unic!
Pentru a selecta un element cu un anumit id, scrieți un caracter hash (#), urmat de id-ul elementului.

Exemplu:

Regula CSS de mai jos va fi aplicată elementului HTML cu id = "para1":

#para1 {
  text-align: center;
  color: red;
}

Notă: Un nume id nu poate începe cu un număr!

Cum să adăugați CSS. CSS extern. Elementul link. Secțiunea head. Proprietatea margin-left.

Vezi videoclipul: Cum să adăugați CSS. CSS extern. Eleme... Vezi toată lecția: Cum să adăugați CSS Citește teoria: Cum să adăugați CSS. CSS extern. Eleme...

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.

Exemplu:

Stilurile externe sunt definite în elementul <link>, în secțiunea <head> a unei pagini HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</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.
Iată cum arată fișierul "mystyle.css":

"mystyle.css"
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Notă: 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;

Cum să adăugați CSS. CSS intern. CSS inline. Elementul style.

Vezi videoclipul: Cum să adăugați CSS. CSS intern. CSS i... Vezi toată lecția: Cum să adăugați CSS Citește teoria: Cum să adăugați CSS. CSS intern. CSS i...

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.

Exemplu:

Stilurile interne sunt definite în elementul <style>, în secțiunea <head> a unei pagini HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>Acesta este un titlu </h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

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 style la elementul relevant. Atributul de stil poate conține orice proprietate CSS.

Exemplu:

Stilurile în linie sunt definite în atributul „style” al elementului relevant:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Acesta este un titlu</h1>
<p style="color:red;">Acesta este un paragraf.</p>

</body>
</html>

Sfat: un stil inline pierde multe dintre avantajele unei foi de stil (prin amestecarea conținutului cu prezentarea). Folosiți cu ușurință această metodă.

Cum să adăugați CSS. Fișe de stil multiple. Comandă în cascadă.

Vezi videoclipul: Cum să adăugați CSS. Fișe de stil mult... Vezi toată lecția: Cum să adăugați CSS Citește teoria: Cum să adăugați CSS. Fișe de stil mult...

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

Presupunem că o foaie de stil extern (external style sheet) are următorul stil pentru elementul <h1>:

h1 {
   color: navy;
}

Apoi, presupunem că o foaie de stil intern (internal style sheet) are, de asemenea, următorul stil pentru elementul <h1>:

h1 {
  color: orange;   
}

Exemplu

Dacă stilul intern este definit după legătura cu foaia de stil extern, elementele <h1> vor fi "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Exemplu:

Cu toate acestea, dacă stilul intern este definit înainte de legătura cu foaia de stil extern, elementele <h1> vor fi "navy":

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Comandă în cascadă

Ce stil va fi utilizat atunci când este specificat mai mult de un stil pentru un element HTML?

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.

Culori CSS. Culoarea marginilor în CSS (CSS Border Color). Valori de culoare CSS (CSS Color Values): RGB, HEX, HSL, RGBA și HSLA.

Vezi videoclipul: Culori CSS. Culoarea marginilor în CSS... Vezi toată lecția: Culori CSS Citește teoria: Culori CSS. Culoarea marginilor în CSS...

Culoarea marginilor în CSS (CSS Border Color)

Puteți seta culoarea marginilor:

Exemplu:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Valori de culoare CSS (CSS Color Values)

În CSS, culorile pot fi de asemenea specificate folosind valori RGB, valori HEX, valori HSL, valori RGBA și valori HSLA:

La fel cu numele de culoare "Tomato":

La fel cu numele de culoare "Tomato", dar transparent 50%:

Exemplu:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Culori CSS. Valoarea CSS HEX.

Vezi videoclipul: Culori CSS. Valoarea CSS HEX. Vezi toată lecția: Culori CSS Citește teoria: Culori CSS. Valoarea CSS HEX.

Valoarea CSS HEX

În CSS, o culoare poate fi specificată folosind o valoare hexadecimală sub forma:

#rrggbb

În cazul în care rr (roșu), gg (verde) și bb (albastru) sunt valori hexadecimale între 00 și ff (la fel ca zecimale 0-255).

De exemplu, # ff0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (ff), iar celelalte sunt setate la cea mai mică valoare (00).

Exemplu:

Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:

Exemplu:

Culori CSS. Valoarea RGBA. Valoarea HSLA. Parametrul alpha.

Vezi videoclipul: Culori CSS. Valoarea RGBA. Valoarea HS... Vezi toată lecția: Culori CSS Citește teoria: Culori CSS. Valoarea RGBA. Valoarea HS...

Valoarea RGBA

Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu:

rgba (roșu, verde, albastru, alfa) / rgba(red, green, blue, alpha)

Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent):

Exemplu:

Valoarea HSLA

Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare HSLA este specificată cu:

hsla (nuanță, saturație, luminozitate, alfa) / hsla (hue, saturation, lightness, alpha)

Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent):

Exemplu:

Culori CSS. Nume de culoare CSS. Culoare de fundal CSS. Culoare text CSS.

Vezi videoclipul: Culori CSS. Nume de culoare CSS. Culoa... Vezi toată lecția: Culori CSS Citește teoria: Culori CSS. Nume de culoare CSS. Culoa...

Culori CSS

Culorile sunt specificate folosind nume de culori predefinite sau valori RGB, HEX, HSL, RGBA, HSLA.

Nume de culoare CSS

În CSS, o culoare poate fi specificată folosind un nume de culoare:

CSS / HTML acceptă 140 de nume standard de culori.

Culoare de fundal CSS (CSS Background Color)

Puteți seta culoarea de fundal pentru elementele HTML:

Exemplu:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Culoare text CSS (CSS Text Color)

Puteți seta culoarea textului:

Exemplu:

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Culori CSS. Valoarea CSS RGB.

Vezi videoclipul: Culori CSS. Valoarea CSS RGB. Vezi toată lecția: Culori CSS Citește teoria: Culori CSS. Valoarea CSS RGB.

Valoarea CSS RGB

În CSS, o culoare poate fi specificată ca valoare RGB, folosind această formulă:

rgb (roșu, verde, albastru) / rgb(red, green, blue)

Fiecare parametru (roșu, verde și albastru)/rgb(red, green, blue) definește intensitatea culorii între 0 și 255.
De exemplu, rgb (255, 0, 0) este afișat ca roșu, deoarece roșul este setat la valoarea cea mai mare (255), iar celelalte sunt setate pe 0.
Pentru a afișa culoarea neagră, toți parametrii de culoare trebuie să fie setați la 0, astfel: rgb (0, 0, 0).
Pentru a afișa culoarea albă, toți parametrii de culoare trebuie să fie setați la 255, astfel: rgb (255, 255, 255).

Experimentați amestecând valorile RGB de mai jos:

Exemplu:

Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:

Exemplu:

Culori CSS. Valoarea CSS HSL. Hue. Saturația (Saturation). Luminozitate (Lightness).

Vezi videoclipul: Culori CSS. Valoarea CSS HSL. Hue. Sat... Vezi toată lecția: Culori CSS Citește teoria: Culori CSS. Valoarea CSS HSL. Hue. Sat...

Valoarea CSS HSL

În CSS, o culoare poate fi specificată folosind nuanță, saturație și ușurință (HSL) sub forma:

hsl (nuanță, saturație, luminozitate)/ hsl (hue, saturation, lightness)

Hue este un grad pe roata de culoare de la 0 la 360. 0 este roșu, 120 este verde și 240 albastru.
Saturația este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
De asemenea, lumina este procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% alb

Exemplu:

Saturația (saturation)

Saturația poate fi descrisă ca intensitatea unei culori.
100% este de culoare pură, fără nuanțe de gri
50% este 50% gri, dar puteți vedea în continuare culoarea.
0% este complet gri, nu mai puteți vedea culoarea.

Exemplu:

Luminozitate (Lightness)

Luminozitatea unei culori poate fi descrisă cât de multă lumină doriți să dați culorii, unde 0% nu înseamnă lumină (negru), 50% înseamnă 50% lumină (nici întuneric, nici lumină) 100% înseamnă lumină completă (alb).

Exemplu:

Nuanțele de gri sunt adesea definite prin setarea nuanței și a saturației la 0 și reglați luminozitatea de la 0% la 100% pentru a obține nuanțe mai închise / mai deschise:

Exemplu:

Fundaluri CSS. Culoare de fundal CSS.

Vezi videoclipul: Fundaluri CSS. Culoare de fundal CSS. Vezi toată lecția: CSS Fundaluri Citește teoria: Fundaluri CSS. Culoare de fundal CSS.

Fundaluri CSS (CSS Backgrounds)

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.

Exemplu:

Culoarea de fundal a unei pagini este setată astfel:

body {
  background-color: lightblue;
}

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)”

Exemplu:

Aici, elementele <h1>, <p> și <div> vor avea culori de fundal diferite:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Fundaluri CSS. Imagine de fundal CSS. Repetare de fundal CSS.

Vezi videoclipul: Fundaluri CSS. Imagine de fundal CSS.... Vezi toată lecția: CSS Fundaluri Citește teoria: Fundaluri CSS. Imagine de fundal CSS....

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.

Exemplu:

Imaginea de fundal pentru o pagină poate fi setată astfel:

body {
  background-image: url("paper.gif");
}

Exemplu:

Acest exemplu arată o combinație necorespunzătoare de text și imagine de fundal. Textul este greu de citit:

body {
  background-image: url("bgdesert.jpg");
}

Notă: 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:

Exemplu:

body {
  background-image: url("gradient_bg.png");
}

Dacă imaginea de mai sus se repetă doar pe orizontală (background-repeat: repeat-x;), fundalul va arăta mai bine:

Exemplu:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Sfat: Pentru a repeta o imagine pe verticală, setați background-repeat: repeat-y;

Fundaluri CSS. CSS background-repeat: no-repeat. Poziția de fundal CSS. Atasament de fundal CSS.

Vezi videoclipul: Fundaluri CSS. CSS background-repeat:... Vezi toată lecția: CSS Fundaluri Citește teoria: Fundaluri CSS. CSS background-repeat:...

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:

Exemplu:

Afișează imaginea de fundal o singură dată:

body {
  background-image: url("img_tree.png");
  background-repeat: no-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.

Exemplu:

Poziționează imaginea de fundal în colțul din dreapta sus:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

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):

Exemplu:

Specificați că imaginea de fundal trebuie să fie fixată:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Exemplu:

Specificați că imaginea de fundal trebuie să se deruleze cu restul paginii:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

Fundaluri CSS. Fundal CSS - Proprietatea Shorthand. Proprietățiile de fundal CSS.

Vezi videoclipul: Fundaluri CSS. Fundal CSS - Proprietat... Vezi toată lecția: CSS Fundaluri Citește teoria: Fundaluri CSS. Fundal CSS - Proprietat...

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.

Exemplu:

Utilizați proprietatea shorthand pentru a seta toate proprietățile de fundal într-o singură declarație:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

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.

Toate proprietățiile de fundal CSS

Proprietate	Descriere
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. CSS Border - Proprietatea Shorthand. Proprietăți border individuale: border-width, border-style, border-color.

Vezi videoclipul: CSS Borders. CSS Border - Proprietatea... Vezi toată lecția: CSS Borders Citește teoria: CSS Borders. CSS Border - Proprietatea...

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

Exemplu:

p {
  border: 5px solid red;
}

Rezultat:

De asemenea, puteți specifica toate proprietățile border individuale pentru o singură parte:

Left Border

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

Rezultat:

Bottom Border

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

Rezultat:

CSS Borders. CSS Rounded Borders. Proprietatea border-radius.

Vezi videoclipul: CSS Borders. CSS Rounded Borders. Prop... Vezi toată lecția: CSS Borders Citește teoria: CSS Borders. CSS Rounded Borders. Prop...

Frontierele rotunjite CSS (CSS Rounded Borders)

Proprietatea border-radius este utilizată pentru a adăuga borduri rotunjite la un element:

Exemplu:

p {
  border: 2px solid red;
  border-radius: 5px;
}

Notă: Proprietatea border-radius nu este acceptată în versiunile IE8 și anterioare.

Mai multe exemple:

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

CSS Borders. Proprietăți CSS Borders. CSS Border Style.

Vezi videoclipul: CSS Borders. Proprietăți CSS Borders.... Vezi toată lecția: CSS Borders Citește teoria: CSS Borders. Proprietăți 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).

Exemplu:

Demonstrarea diferitelor stiluri de frontieră (border styles):

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Rezultat:

Notă: Niciuna dintre celelalte proprietăți CSS border descrise mai jos nu va avea NICIUN efect, decât dacă este setată proprietatea border-style!

CSS Borders. Lățimea marginilor CSS (CSS Border Width). CSS Border Color.

Vezi videoclipul: CSS Borders. Lățimea marginilor CSS (C... Vezi toată lecția: CSS Borders Citește teoria: CSS Borders. Lățimea marginilor CSS (C...

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

Exemplu:

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}

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.

Exemplu:

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: solid;
  border-color: red green blue yellow;
}

CSS Borders. CSS Border - Individual Sides. Proprietatea border-style.

Vezi videoclipul: CSS Borders. CSS Border - Individual S... Vezi toată lecția: CSS Borders Citește teoria: CSS Borders. CSS Border - Individual S...

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):

Exemplu:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Exemplul de mai sus dă același rezultat ca acesta:

Exemplu:

p {
  border-style: dotted solid;
}

Iată, deci, cum funcționează:

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 Borders. Toate proprietățiile CSS Border.

Vezi videoclipul: CSS Borders. Toate proprietățiile CSS... Vezi toată lecția: CSS Borders Citește teoria: CSS Borders. Toate proprietățiile CSS...

Toate proprietățile CSS Border

Proprietate	Descriere
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

Margini CSS. Margin - Proprietatea shorthand.

Vezi videoclipul: Margini CSS. Margin - Proprietatea sho... Vezi toată lecția: CSS Margini Citește teoria: Margini CSS. Margin - Proprietatea sho...

Margin - Proprietatea shorthand

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

Iată, deci, cum funcționează:

Dacă proprietatea margin are patru valori:

margin: 25px 50px 75px 100px;

top margin este de 25px
right margin este de 50px
bottom margin este de 75px
left margin este de 100px

Exemplu:

Utilizați proprietatea shorthand margin cu patru valori:

p {
  margin: 25px 50px 75px 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.

Exemplu:

Utilizați proprietatea shorthand margin cu trei valori:

p {
  margin: 25px 50px 75px;
}

Dacă proprietatea margin are două valori:

margin: 25px 50px;

top și bottom margins sunt de 25px
right și left margins sunt de 50px

Exemplu:

Utilizați proprietatea shorthand margin cu două valori:

p {
  margin: 25px 50px;
}

Dacă proprietatea margin are o valoare:

margin: 25px;

toate cele patru margini sunt de 25px

Exemplu:

Utilizați proprietatea shorthand margin cu o valoare:

p {
  margin: 25px;
}

Margini CSS. Margin - Individual Sides. Proprietățiile CSS margin: margin-top, margin-right, margin-bottom, margin-left.

Vezi videoclipul: Margini CSS. Margin - Individual Sides... Vezi toată lecția: CSS Margini Citește teoria: Margini CSS. Margin - Individual Sides...

Margini CSS

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.

Sfat: Valorile negative sunt permise.

Exemplu:

Setați margini diferite pentru toate cele patru laturi ale unui element <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margini CSS. Valoarea auto. Valoarea inherit. Margin Collapse. Toate proprietățiile CSS margin.

Vezi videoclipul: Margini CSS. Valoarea auto. Valoarea i... Vezi toată lecția: CSS Margini Citește teoria: Margini CSS. Valoarea auto. Valoarea i...

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.

Exemplu:

Folosiți margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

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>):

Exemplu:

Utilizarea valorii inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

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!

Priviți următorul exemplu:

Exemplu:

Demonstrarea colapsului marginii:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

În exemplul de mai sus, 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.

Toate proprietățile CSS margin

Proprietate	Descriere
margin	Proprietatea 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. Padding și elementul width. Proprietatea box-sizing.

Vezi videoclipul: CSS Padding. Padding și elementul widt... Vezi toată lecția: CSS Padding Citește teoria: CSS Padding. Padding și elementul widt...

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.

Exemplu:

Aici, elementului <div> i se oferă o lățime de 300px. Cu toate acestea, lățimea reală a elementului <div> va fi de 350px (300px + 25px left padding + 25px de right padding):

div {
  width: 300px;
  padding: 25px;
}

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.

Exemplu:

Utilizați proprietatea box-sizing pentru a păstra lățimea la 300px, indiferent de cantitatea de padding:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

CSS Padding. Exemple de padding: left padding, right padding, top padding, bottom padding.

Vezi videoclipul: CSS Padding. Exemple de padding: left... Vezi toată lecția: CSS Padding Citește teoria: CSS Padding. Exemple de padding: left...

Mai multe exemple:

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

Toate proprietățiile de padding CSS

Proprietate	Descriere
padding	O proprietate shorthand pentru setarea tuturor proprietățiilor 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ă righht padding-ul unui element
padding-top	Setează top padding-ul unui element

CSS Padding. Padding - Proprietatea Shorthand. Proprietățiile individuale padding: padding-top, padding-right, padding-bottom, padding-left.

Vezi videoclipul: CSS Padding. Padding - Proprietatea Sh... Vezi toată lecția: CSS Padding Citește teoria: CSS Padding. Padding - Proprietatea Sh...

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

Iată, deci, cum funcționează:

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

Exemplu:

Utilizați proprietatea padding cu patru valori:

div {
  padding: 25px 50px 75px 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

Exemplu:

Utilizați proprietatea padding cu trei valori:

div {
  padding: 25px 50px 75px;
}

Dacă proprietatea padding are două valori:

padding: 25px 50px;

top și bottom paddings sunt de 25px
right și left paddings sunt de 50px

Exemplu:

Folosiți proprietatea padding cu două valori:

div {
  padding: 25px 50px;
}

Dacă proprietatea padding are o valoare:

padding: 25px;

toate cele patru paddings sunt de 25px

Exemplu:

Utilizați proprietatea padding cu o valoare:

div {
  padding: 25px;
}

CSS Padding. Padding - Individual Sides. Proprietățiile padding: padding-top, padding-right, padding-bottom, padding-left.

Vezi videoclipul: CSS Padding. Padding - Individual Side... Vezi toată lecția: CSS Padding Citește teoria: CSS Padding. Padding - Individual Side...

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ățiile padding pot avea următoarele valori:

length - Specifică un padding î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.

Notă: Valorile negative nu sunt permise.

Exemplu:

Setați un padding diferită pentru toate cele patru laturi ale unui element <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

CSS Height și Width. Valori CSS height/width: auto, lenght, %, initial, inherit.

Vezi videoclipul: CSS Height și Width. Valori CSS height... Vezi toată lecția: CSS Height și Width Citește teoria: CSS Height și Width. Valori CSS height...

CSS Height și Width

Proprietățiile height și width sunt utilizate pentru a seta înălțimea și lățimea unui element.
Proprietățiile height și width nu includ padding, borders sau margins. Stabilește înălțimea / lățimea (height/width) zonei din interiorul padding-ului, border-ului și marginii elementului.

Valori CSS înălțime / lățime (height/width)

Proprietățiile de înălțime și lățime (height/width) pot avea următoarele valori:

auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea (height/width).
lenght - Definește înălțimea / lățimea (height/width) în px, cm etc.
% - Definește înălțimea / lățimea (height/width) în procente din blocul conținut.
inițial - Setează înălțimea / lățimea (height/width) la valoarea implicită.
inherit - Înălțimea / lățimea (height/width) vor fi moștenite de la valoarea sa parentală.

Exemplu:

Setați înălțimea și lățimea (height/width) unui element <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Rezultat:

Exemplu:

Setați înălțimea și lățimea (height/width) unui alt element <div>:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Rezultat:

Notă: Nu uitați că proprietățiile de înălțime și lățime (height/width) nu includ padding, borders sau margins! Ei setează înălțimea / lățimea zonei din interiorul paddingu-ului, border-ului și marginii elementului!

CSS Height și Width. Setarea lățimii maxime.

Vezi videoclipul: CSS Height și Width. Setarea lățimii... Vezi toată lecția: CSS Height și Width Citește teoria: CSS Height și Width. Setarea lățimii...

Setarea lățimii maxime (max-width)

Proprietatea max-width este utilizată pentru a seta lățimea maximă a unui element.
Lățimea maximă (max-width) poate fi specificată în valori de lungime, cum ar fi px, cm, etc., sau în procente (%) din blocul conținut sau setat pe niciunul (acesta este implicit. Înseamnă că nu există o lățime maximă).
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului (500px). 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.

Sfat: Trageți fereastra browserului la o lățime mai mică de 500px, pentru a vedea diferența dintre cele două div-uri!
Notă: Valoarea proprietății max-width înlocuiește lățimea.

Exemplu:

Acest element <div> are o înălțime de 100 de pixeli și o lățime maximă de 500 de pixeli:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Rezultat:

CSS Height și Width. Proprietățiile de dimensiune CSS.

Vezi videoclipul: CSS Height și Width. Proprietățiile de... Vezi toată lecția: CSS Height și Width Citește teoria: CSS Height și Width. Proprietățiile de...

Încercați singuri - Exemple

Setați înălțimea și lățimea (height și width) elementelor.
Acest exemplu demonstrează modul de setare a înălțimii și lățimii (height și width) diferitelor elemente.

Setați înălțimea și lățimea (height și width) unei imagini folosind procente.
Acest exemplu demonstrează modul de setare a înălțimii și lățimii (height și width) unei imagini folosind o valoare procentuală.

Setați lățimea minimă și lățimea maximă (min-width și max-width) a unui element.
Acest exemplu demonstrează cum să setați o lățime minimă și o lățime maximă (min-width și max-width) a unui element folosind o valoare de pixel.

Setați înălțimea mină și înălțimea maximă (min-width și max-width) a unui element.
Acest exemplu demonstrează modul de setare a unei înălțimi minime și a unei înălțimi maxime (min-width și max-width) a unui element folosind o valoare de pixel.

Toate proprietățiile de dimensiune CSS

Proprietate	Descriere
height	Setează înălțimea unui element
max-height	Setează înălțimea maximă a unui element
max-width	Setează lățimea maximă a unui element
min-height	Setează înălțimea minimă a unui element
min-width	Setează lățimea minimă a unui element
width	Setează lățimea unui element

CSS Box Model. Explicația diferitelor părți: content, padding, border, margin.

Vezi videoclipul: CSS Box Model. Explicația diferitelor... Vezi toată lecția: CSS Box Model Citește teoria: CSS Box Model. Explicația diferitelor...

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.
Imaginea de mai jos ilustrează modelul casetei (box model):

Explicația diferitelor părți:

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.

Exemplu:

Demonstrația modelului cutiei (box model):

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

CSS Box Model. Lățimea și înălțimea unui element.

Vezi videoclipul: CSS Box Model. Lățimea și înălțimea un... Vezi toată lecția: CSS Box Model Citește teoria: CSS Box Model. Lățimea și înălțimea un...

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

Exemplu:

Acest element <div> va avea o lățime totală de 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Iată calculul:

Lățimea totală a unui element trebuie calculată astfel:

Lățimea totală a elementului = width + left padding + right padding + left border + right border + left margin + right margin

Înălțimea totală a unui element trebuie calculată astfel:

Înălțimea totală a elementului = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Outline. CSS Outline Style.

Vezi videoclipul: CSS Outline. CSS Outline Style. Vezi toată lecția: CSS Outline Citește teoria: CSS Outline. CSS Outline Style.

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.

Următorul exemplu arată diferitele valori ale stilului contur (outline):

Exemplu:

Demonstrarea diferitelor stiluri outline:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Notă: 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. CSS Outline Width. Proprietatea outline-width. Valori: thin, medium, thick, o dimensiune specifică.

Vezi videoclipul: CSS Outline. CSS Outline Width. Propr... Vezi toată lecția: CSS Outline Citește teoria: CSS Outline. CSS Outline Width. Propr...

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

Următorul exemplu prezintă câteva schițe cu lățimi diferite:

Exemplu:

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

CSS Outline. CSS Outline Offset. Proprietatea outline-offset. Proprietățiile CSS Outline: outline, outline-color, outline-offset, outline-style, outline-width.

Vezi videoclipul: CSS Outline. CSS Outline Offset. Propr... Vezi toată lecția: CSS Outline Citește teoria: CSS Outline. CSS Outline Offset. Propr...

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.

Următorul exemplu specifică un contur (outline) de 15px în afara marginii de frontieră (border edge):

Exemplu:

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Următorul exemplu arată că spațiul dintre un element și conturul său este transparent:

Exemplu:

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Toate proprietățiile CSS Outline:

Proprietate	Descriere
outline	O proprietate shorthand pentru setarea outline-width, outline-style și outline-color într-o singură declarație
outline-color	Setează culoarea unui contur (outline)
outline-offset	Specifică spațiul dintre un outline și edge sau border unui element
outline-style	Setează stilul unui contur (outline)
outline-width	Setează lățimea unui contur (outline)

CSS Outline. Proprietăți outline: outline-style, outline-color, outline-width, outline-offset, outline.

Vezi videoclipul: CSS Outline. Proprietăți outline: outl... Vezi toată lecția: CSS Outline Citește teoria: CSS Outline. Proprietăți outline: outl...

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 contur (outline):

outline-style
outline-color
outline-width
outline-offset
outline

Notă: 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. CSS Outline Color. Proprietatea CSS outline-color: name, RGB, Hex,invert.

Vezi videoclipul: CSS Outline. CSS Outline Color. Propri... Vezi toată lecția: CSS Outline Citește teoria: CSS Outline. CSS Outline Color. Propri...

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

Următorul exemplu arată câteva contururi diferite cu culori diferite. De asemenea, observați că aceste elemente au și o bordură neagră subțire în interiorul conturului:

Exemplu:

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 1px solid black;
  outline-style: double;
  outline-color: green;
}

p.ex3 {
  border: 1px solid black;
  outline-style: outset;
  outline-color: yellow;
}

Următorul exemplu folosește outline-color: invert, care realizează o inversare a culorii. Acest lucru asigură că outline-ul este vizibil, indiferent de fundalul culorii:

Exemplu:

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

CSS Outline. Proprietatea Shorthand. Proprietăți outline individuale: outline-width, outline-style (obligatoriu), outline-color.

Vezi videoclipul: CSS Outline. Proprietatea Shorthand. P... Vezi toată lecția: CSS Outline Citește teoria: CSS Outline. Proprietatea Shorthand. P...

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

Proprietatea outline este specificată ca una, două sau trei valori din lista de mai sus. Ordinea valorilor nu contează.

Următorul exemplu arată câteva schițe specificate cu proprietatea shorthand outline:

Exemplu:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

Text CSS. Aliniere text. Proprietatea text-align.

Vezi videoclipul: Text CSS. Aliniere text. Proprietatea... Vezi toată lecția: CSS Text Citește teoria: Text CSS. Aliniere text. Proprietatea...

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

Următorul exemplu arată textul aliniat la centru și aliniat la stânga și la dreapta (alinierea la stânga este implicită dacă direcția textului este de la stânga la dreapta, iar alinierea la dreapta este implicită dacă direcția textului este de la dreapta la stânga):

Exemplu:

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

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):

Exemplu:

div {
  text-align: justify;
}

Text CSS. Indentare text. Proprietatea text-indent. Spațiul dintre litere. Proprietatea letter-spacing. Înălţimea liniei. Proprietatea line-height.

Vezi videoclipul: Text CSS. Indentare text. Proprietatea... Vezi toată lecția: CSS Text Citește teoria: Text CSS. Indentare text. Proprietatea...

Indentare text (Text Indentation)

Proprietatea text-indent este utilizată pentru a specifica indentarea primei linii a unui text:

Exemplu:

p {
  text-indent: 50px;
}

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.

Următorul exemplu arată cum să crești sau să micșorezi spațiul dintre caractere:

Exemplu:

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

Înălţimea liniei (Line Height)

Proprietatea line-height este utilizată pentru a specifica spațiul dintre linii:

Exemplu:

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

Text CSS. Toate proprietățiile de text CSS.

Vezi videoclipul: Text CSS. Toate proprietățiile de text... Vezi toată lecția: CSS Text Citește teoria: Text CSS. Toate proprietățiile de text...

Toate proprietățile de text CSS

Proprietate	Descriere
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țiepentru 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

Text CSS. Culoarea textului. Proprietatea color.

Vezi videoclipul: Text CSS. Culoarea textului. Proprieta... Vezi toată lecția: CSS Text Citește teoria: Text CSS. Culoarea textului. Proprieta...

Text CSS

Culoarea textului (Text Color)

Proprietatea color 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.

Exemplu:

body {
  color: blue;
}

h1 {
  color: green;
}

Notă: Pentru CSS compatibil cu W3C: Dacă definiți proprietatea culorii, trebuie să definiți și culoarea de fundal.

Text CSS. Decorarea textului. Proprietatea text-decoration. Valoarea text-decoration: none;. Transformarea textului. Proprietatea text-transform.

Vezi videoclipul: Text CSS. Decorarea textului. Propriet... Vezi toată lecția: CSS Text Citește teoria: Text CSS. Decorarea textului. Propriet...

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:

Exemplu:

a {
  text-decoration: none;
}

Celelalte valori text-decoration sunt utilizate pentru decorarea textului:

Exemplu:

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

Notă: 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:

Exemplu:

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

Text CSS. Direcția textului. Distanțarea cuvintelor. Proprietatea word-spacing. Umbra textului. Proprietatea text-shadow.

Vezi videoclipul: Text CSS. Direcția textului. Distanțar... Vezi toată lecția: CSS Text Citește teoria: Text CSS. Direcția textului. Distanțar...

Direcția textului (Text Direction)

Proprietatea direction este utilizată pentru a schimba direcția textului unui element:

Exemplu:

p {
  direction: rtl;
}

Distanțarea cuvintelor (Word Spacing)

Proprietatea word-spacing a cuvintelor este utilizată pentru a specifica spațiul dintre cuvintele dintr-un text.

Următorul exemplu demonstrează cum să crești sau să micșorezi spațiul dintre cuvinte:

Exemplu:

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

Umbra textului (Text Shadow)

Proprietatea text-shadow adaugă umbre textului.

Următorul exemplu specifică poziția umbrei orizontale (3px), poziția umbrei verticale (2px) și culoarea umbrei (roșu):

Exemplu:

h1 {
  text-shadow: 3px 2px red;
}

Fonturi CSS. Familii de fonturi CSS. Tipuri de nume de fonturi: font family, generic family.

Vezi videoclipul: Fonturi CSS. Familii de fonturi CSS. T... Vezi toată lecția: CSS Fonturi Citește teoria: Fonturi CSS. Familii de fonturi CSS. T...

Fonturi CSS

Proprietățiile fontului CSS definesc: font family, boldness, size și stilul unui text.

Familii de fonturi CSS (CSS Font Families)

În CSS, există două tipuri de nume de fonturi:

generic family - un grup de familii de fonturi cu aspect similar (cum ar fi „Serif” sau „Monospace”)
font family - o familie de fonturi specifică (cum ar fi „Times New Roman” sau „Arial”)

Generic family	Font family	Descriere
Serif	Times New Roman Georgia	Fonturile Serif au linii mici la capete pe unele caractere
Sans-serif	Arial Verdana	"Sans" înseamnă fără - aceste fonturi nu au liniile la capetele caracterelor
Monospace	Courier New Lucida Console	Toate caracterele monospace au aceeași lățime

Notă: Pe ecranele computerului, fonturile sans-serif sunt considerate mai ușor de citit decât fonturile serif.

Fonturi CSS. Proprietatea font-family. Proprietatea font-style. Valori: normal, italic, oblique.

Vezi videoclipul: Fonturi CSS. Proprietatea font-family.... Vezi toată lecția: CSS Fonturi Citește teoria: Fonturi CSS. Proprietatea font-family....

Font Family

Familia de fonturi a unui text este setată cu proprietatea font-family.

Proprietatea font-family ar trebui să dețină mai multe nume de font ca sistem „fallback”. Dacă browserul nu acceptă primul font, încearcă următorul font și așa mai departe.
Începeți cu fontul dorit și terminați cu o familie generică (generic family), pentru a permite browserului să aleagă un font similar în familia generică (generic family), dacă nu sunt disponibile alte fonturi.

Notă: Dacă numele unei familii de fonturi este mai mult de un cuvânt, acesta trebuie să fie între ghilimele, cum ar fi: „Times New Roman”.

Mai multe familii de fonturi sunt specificate într-o listă separată de virgule:

Exemplu:

p {
  font-family: "Times New Roman", Times, serif;
}

Stilul fontului (Font Style)

Proprietatea font-style este utilizată mai ales pentru a specifica textul italic.

Această proprietate are trei valori:

normal - Textul este afișat normal.
italic - Textul este afișat cu caractere italice.
oblique - Textul este „aplecat” (oblic este foarte similar cu italic, dar mai puțin susținut).

Exemplu:

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Fonturi CSS. Mărimea fontului. Proprietatea font-size. Valoarea font-size: absolută sau relativă. Setarea dimensiunii fontului cu pixeli.

Vezi videoclipul: Fonturi CSS. Mărimea fontului. Proprie... Vezi toată lecția: CSS Fonturi Citește teoria: Fonturi CSS. Mărimea fontului. Proprie...

Marimea fontului (Font Size)

Proprietatea font-size stabilește dimensiunea textului.

Posibilitatea de a gestiona dimensiunea textului este importantă în proiectarea web. Cu toate acestea, nu ar trebui să utilizați ajustări de dimensiune a fontului pentru a face ca paragrafele să arate ca titluri sau rubricile să pară paragrafe.
Utilizați întotdeauna etichetele HTML adecvate, cum ar fi <h1> - <h6> pentru titluri și <p> pentru paragrafe.
Valoarea font-size poate fi o dimensiune absolută sau relativă.

Dimensiune absolută:

Setează textul la o dimensiune specificată.
Nu permite utilizatorului să modifice dimensiunea textului în toate browserele (greșit din motive de accesibilitate).
Dimensiunea absolută este utilă atunci când dimensiunea fizică a ieșirii este cunoscută.

Mărime relativă:

Setează dimensiunea în raport cu elementele din jur.
Permite unui utilizator să modifice dimensiunea textului în browsere.

Notă: Dacă nu specificați o dimensiune a fontului, dimensiunea implicită pentru textul normal, cum ar fi alineatele, este 16px (16px = 1em).

Setarea dimensiunii fontului cu pixeli

Setarea dimensiunii textului cu pixeli vă oferă un control complet asupra dimensiunii textului:

Exemplu:

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Sfat: Dacă utilizați pixeli, puteți utiliza în continuare zoom tool pentru a redimensiona întreaga pagină.

Fonturi CSS. Grosimea fontului. Proprietatea font-weight. Dimensiune responsivă a fontului.

Vezi videoclipul: Fonturi CSS. Grosimea fontului. Propri... Vezi toată lecția: CSS Fonturi Citește teoria: Fonturi CSS. Grosimea fontului. Propri...

Font Weight

Proprietatea font-weight specifică greutatea unui font:

Exemplu:

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Responsive Font Size

Mărimea textului poate fi setată cu o unitate vw, ceea ce înseamnă „viewport width”.
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:

Exemplu:

<h1 style="font-size:10vw">Hello World</h1>

Viewport este dimensiunea ferestrei browserului. 1vw = 1% din lățimea afișajului. Dacă viewport are 50 cm lățime, 1vw este 0,5 cm.

Fonturi CSS. Varianta fontului. Proprietatea font-variant. Toate proprietățiile fontului CSS: font, font-family, font-size, font-style, font-variant, font-weight.

Vezi videoclipul: Fonturi CSS. Varianta fontului. Propri... Vezi toată lecția: CSS Fonturi Citește teoria: Fonturi CSS. Varianta fontului. Propri...

Font Variant

Proprietatea font-variant specifică dacă un text ar trebui să fie afișat sau nu într-un font cu caractere mici.
Într-un font cu caractere mici, toate literele mici sunt convertite în litere mari. Cu toate acestea, literele majuscule convertite apar cu o dimensiune de font mai mică decât literele majuscule originale din text.

Exemplu:

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Toate proprietățiile fontului CSS:

Proprietate	Descriere
font	Setează toate proprietățile fontului într-o singură declarație
font-family	Specifică familia de fonturi pentru text
font-size	Specifică dimensiunea fontului textului
font-style	Specifică stilul de font pentru text
font-variant	Specifică dacă un text trebuie să fie afișat sau nu într-un font cu caractere mici
font-weight	Specifică greutatea unui font

Fonturi CSS. Setarea dimensiunii fontului cu Em. Folosirea unei combinații de procente și Em.

Vezi videoclipul: Fonturi CSS. Setarea dimensiunii fontu... Vezi toată lecția: CSS Fonturi Citește teoria: Fonturi CSS. Setarea dimensiunii fontu...

Setați dimensiunea fontului cu Em

Pentru a permite utilizatorilor să redimensioneze textul (în meniul browserului), mulți dezvoltatori folosesc em în loc de pixeli.
Unitatea de dimensiuni em este recomandată de W3C.
1em este egal cu dimensiunea curentă a fontului. Dimensiunea implicită a textului în browsere este 16px. Deci, dimensiunea implicită de 1em este 16px.
Mărimea poate fi calculată de la pixeli la em folosind această formulă: pixeli / 16 = em.

Exemplu:

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

În exemplul de mai sus, dimensiunea textului în em este aceeași cu exemplul precedent în pixeli. Cu toate acestea, cu dimensiunea em, este posibil să ajustați dimensiunea textului în toate browserele.
Din păcate, există încă o problemă cu versiunile mai vechi de IE. Textul devine mai mare decât ar trebui atunci când este făcut mai mare și mai mic decât ar trebui când este făcut mai mic.

Folosiți o combinație de procente și Em

Soluția care funcționează în toate browserele este să setați o dimensiune de font implicită în procent pentru elementul <body>:

Exemplu:

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Codul de mai sus arată aceeași dimensiune a textului în toate browserele și permite tuturor browserelor să mărească sau să redimensioneze textul!

Icoane CSS. Cum se adaugă icoane. Font Awesome Icons.

Vezi videoclipul: Icoane CSS. Cum se adaugă icoane. Font... Vezi toată lecția: CSS Icons Citește teoria: Icoane CSS. Cum se adaugă icoane. Font...

Icoane CSS (CSS Icons)

Cum se adaugă icoane

Cel mai simplu mod de a adăuga o pictogramă pe pagina dvs. HTML, este cu o bibliotecă de pictograme, cum ar fi Font Awesome.
Adăugați numele clasei de pictograme specificate la orice element HTML inline (cum ar fi <i> sau <span>).
Toate pictogramele din bibliotecile cu pictograme de mai jos, sunt vectori scalabili care pot fi personalizați cu CSS (dimensiune, culoare, umbră etc.)

Font Awesome Icons

Pentru a utiliza pictogramele Font Awesome, accesați fontawesome.com, conectați-vă și obțineți un cod pe care să îl adăugați în secțiunea <head> a paginii dvs. HTML:

<script src = "https://kit.fontawesome.com/yourcode.js"> </script>

Exemplu:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

Rezultat:

Icoane CSS. Icoane Bootstrap. Icoane Google.

Vezi videoclipul: Icoane CSS. Icoane Bootstrap. Icoane G... Vezi toată lecția: CSS Icons Citește teoria: Icoane CSS. Icoane Bootstrap. Icoane G...

Bootstrap Icons

Pentru a utiliza glificile Bootstrap, adăugați următoarea linie în secțiunea <head> a paginii dvs. HTML:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Notă: Nu este necesară descărcarea sau instalarea!

Exemplu:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Rezultat:

Google Icons

Pentru a utiliza pictogramele Google, adăugați următoarea linie în secțiunea <head> a paginii dvs. HTML:

<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">

Notă: Nu este necesară descărcarea sau instalarea!

Exemplu:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Rezultat:

Link-uri CSS. Link-uri stilate. Proprietăţi CSS: color, font-family, background. Links states: a: link, a:visited, a: hover, a: active.

Vezi videoclipul: Link-uri CSS. Link-uri stilate. Propri... Vezi toată lecția: CSS Link-uri Citește teoria: Link-uri CSS. Link-uri stilate. Propri...

CSS Links

Cu CSS, linkurile pot fi proiectate în moduri diferite.

Styling Links

Linkurile pot fi realizate cu orice proprietate CSS (de exemplu, culoare, familie de fonturi, fundal etc / color, font-family, background).

Exemplu:

a {
  color: hotpink;
}

În plus, legăturile (linkurile) pot fi proiectate diferit în funcție de starea în care se află.

Cele patru stări de legături (linkuri) sunt:

a: link - o legătură normală, nevăzută.
a:visited - un link pe care l-a vizitat utilizatorul.
a: hover - o legătură atunci când utilizatorul dă peste ea.
a: active - un link în momentul în care este dat click.

Exemplu:

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

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

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

Când setați stilul pentru mai multe stări de legătură, există câteva reguli de comandă:

a: hover - TREBUIE să vină după a:link și a:visited.
a: active - TREBUIE să vină după a:hover.

Link-uri CSS. Decorarea textului. Culoare de fundal.

Vezi videoclipul: Link-uri CSS. Decorarea textului. Culo... Vezi toată lecția: CSS Link-uri Citește teoria: Link-uri CSS. Decorarea textului. Culo...

Decorarea textului (Text Decoration)

Proprietatea text-decoration este utilizată mai ales pentru a elimina sublinierile din link-uri:

Exemplu:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

Culoare de fundal (Background Color)

Proprietatea background-color poate fi utilizată pentru a specifica o culoare de fundal pentru link-uri:

Exemplu:

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

Link-uri CSS. Butoane link avansate.

Vezi videoclipul: Link-uri CSS. Butoane link avansate. Vezi toată lecția: CSS Link-uri Citește teoria: Link-uri CSS. Butoane link avansate.

Advanced - Link Buttons

Acest exemplu demonstrează un exemplu mai avansat în care combinăm mai multe proprietăți CSS pentru afișarea legăturilor ca oxes/buttons:

Exemplu:

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

Liste CSS. O imagine ca marcator de element de listă. Proprietatea list-style-image. Poziționare marcatori de elemente de listă. Proprietatea list-style-position: "list-style-position: outside;", "list-style-position: inside;".

Vezi videoclipul: Liste CSS. O imagine ca marcator de e... Vezi toată lecția: CSS Liste Citește teoria: Liste CSS. O imagine ca marcator de e...

O imagine ca marker element de listă

Proprietatea list-style-image specifică o imagine ca marker al elementului de listă:

Exemplu:

ul {
  list-style-image: url('sqpurple.gif');
}

Poziționează marcatorii de elemente de listă (Position The List Item Markers)

Proprietatea list-style-position specifică poziția marcatorilor de elemente de listă (puncte glonț).

"list-style-position: outside;" - înseamnă că punctele glonț se vor afla în afara articolului din listă. Începutul fiecărei linii a unui element de listă va fi aliniat vertical. Aceasta este implicită:

"list-style-position: inside;" - înseamnă că punctele glonț vor fi în interiorul articolului din listă. Deoarece face parte din elementul listei, acesta va face parte din text și va împinge textul la început:

Exemplu:

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Liste CSS. Eliminare setări implicite. Proprietatea list-style-type:none. Listă - Proprietatea Shorthand. Proprietatea list-style: list-style-type, list-style-position , list-style-image.

Vezi videoclipul: Liste CSS. Eliminare setări implicite.... Vezi toată lecția: CSS Liste Citește teoria: Liste CSS. Eliminare setări implicite....

Eliminați setările implicite

Proprietatea list-style-type:none poate fi utilizată pentru a elimina markerele / gloanțele. Rețineți că lista are, de asemenea, margin și padding implicite. Pentru a elimina acest lucru, adăugați margin: 0 și padding: 0 până la <ul> sau <ol>:

Exemplu:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Listă - Proprietatea Shorthand

Proprietatea list-style este o proprietate de tip shorthand. Este utilizat pentru a seta toate proprietățile listei într-o singură declarație:

Exemplu:

ul {
  list-style: square inside url("sqpurple.gif");
}

Când utilizați proprietatea shorthand, ordinea valorilor proprietății este:

list-style-type - (dacă este specificată o list-style-image, valoarea acestei proprietăți va fi afișată dacă imaginea din anumite motive nu poate fi afișată).
list-style-position - (specifică dacă markerii elementelor de listă trebuie să apară în interiorul sau în afara fluxului de conținut).
list-style-image - (specifică o imagine ca marker pentru elementele de listă).

Dacă una din valorile proprietățiilor de mai sus lipsește, valoarea implicită pentru proprietatea lipsă va fi introdusă, dacă există.

Liste CSS. Lista HTML și proprietățiile listelor CSS. Tipuri principale de liste: liste neordonate(ul), liste ordonate(ol). Diferiți marcatori de elemente de listă. Proprietatea list-style-type.

Vezi videoclipul: Liste CSS. Lista HTML și proprietățiil... Vezi toată lecția: CSS Liste Citește teoria: Liste CSS. Lista HTML și proprietățiil...

Liste CSS

Lista HTML și proprietățiile listelor CSS:

În HTML, există două tipuri principale de liste:

liste neordonate (<ul>) - articolele din listă sunt marcate cu buline.
liste ordonate (<ol>) - elementele din listă sunt marcate cu numere sau litere.

Proprietățiile listei CSS vă permit să:

Setați markeri de articole de listă diferite pentru liste ordonate.
Setați markeri de articole de listă diferite pentru liste neordonate.
Setați o imagine ca marker a elementelor din listă.
Adăugați culori de fundal la liste și elemente de listă.

Different List Item Markers

Proprietatea list-style-type specifică tipul markerului de element de listă.

Următorul exemplu arată unii dintre marcatorii de elemente de listă disponibili:

Exemplu:

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Notă: Unele dintre valori sunt pentru liste neordonate, iar altele pentru liste ordonate.

Liste CSS. Stilizarea listei cu culori. Etichete: ol, ul, li. Toate proprietățiile listei CSS

Vezi videoclipul: Liste CSS. Stilizarea listei cu culori... Vezi toată lecția: CSS Liste Citește teoria: Liste CSS. Stilizarea listei cu culori...

Stilizarea listei cu culori (Styling List With Colors)

Putem, de asemenea, stiliza listele cu culori, pentru a le face să pară ceva mai interesante.

Orice lucru adăugat la eticheta <ol> sau <ul>, afectează întreaga listă, în timp ce proprietățile adăugate la eticheta <li> vor afecta elementele listei individuale:

Exemplu:

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

Rezultat:

Toate proprietățiile listei CSS:

Proprietate	Descriere
list-style	Setează toate proprietățile pentru o listă într-o singură declarație
list-style-image	Specifică o imagine ca marker de listă
list-style-position	Specifică poziția markerilor elementelor din listă (puncte glont)
list-style-type	Specifică tipul markerului de listă

Tabele CSS. Bordurile tabelelor. Elementele tabel, th și td. Reducere margini tabel.

Vezi videoclipul: Tabele CSS. Bordurile tabelelor. Eleme... Vezi toată lecția: CSS Tabele Citește teoria: Tabele CSS. Bordurile tabelelor. Eleme...

Tabele CSS

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.

Exemplul de mai jos specifică o bordură neagră pentru elementele <tabel>, <th> și <td>:

Exemplu:

table, th, td {
  border: 1px solid black;
}

Observați că tabelul din exemplul de mai sus are margini duble. Acest lucru se datorează faptului că atât tabelul, cât și elementele <th> și <td> au chenare separate.

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:

Exemplu:

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

Dacă doriți doar un chenar în jurul tabelului, specificați numai proprietatea border pentru <tabel>:

Exemplu:

table {
  border: 1px solid black;
}

Tabele CSS. Aliniere verticală. Proprietatea vertical-align. Tabel Padding. Proprietatea padding. Elementele td și th.

Vezi videoclipul: Tabele CSS. Aliniere verticală. Propri... Vezi toată lecția: CSS Tabele Citește teoria: Tabele CSS. Aliniere verticală. Propri...

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

Următorul exemplu stabilește alinierea textului vertical la partea de jos pentru elementele <td>:

Exemplu:

td {
  height: 50px;
  vertical-align: bottom;
}

Table Padding

Pentru a controla spațiul dintre graniță și conținutul dintr-un tabel, utilizați proprietatea padding pentru elementele <td> și <th>:

Exemplu:

th, td {
  padding: 15px;
  text-align: left;
}

Tabele CSS. Tabele cu dungi. Culoarea tabelului. Elementul th.

Vezi videoclipul: Tabele CSS. Tabele cu dungi. Culoarea... Vezi toată lecția: CSS Tabele Citește teoria: Tabele CSS. Tabele cu dungi. Culoarea...

Tabele cu dungi (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):

Exemplu:

tr:nth-child(even) {background-color: #f2f2f2;}

Culoarea tabelului (Table Color)

Exemplul de mai jos specifică culoarea de fundal și culoarea textului elementelor <th>:

Tabele CSS. Lățimea și înălțimea tabelului. Proprietățiile width și height. Aliniere orizontală. Proprietatea text-align.

Vezi videoclipul: Tabele CSS. Lățimea și înălțimea tabel... Vezi toată lecția: CSS Tabele Citește teoria: Tabele CSS. Lățimea și înălțimea 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 (width și height).

Exemplul de mai jos stabilește lățimea (width) tabelului la 100%, iar înălțimea elementelor (height) <th> la 50px:

Exemplu:

table {
  width: 100%;
}

th {
  height: 50px;
}

Aliniere orizontală (Horizontal Alignment)

Proprietatea text-align stabilește alinierea orizontală (cum ar fi stânga, dreapta sau centrul) a 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.

Următorul exemplu aliniază textul la stânga (left-aligns) în elementele <th>:

Exemplu:

th {
  text-align: left;
}

Tabele CSS. Divizoare orizontale. Proprietatea border-bottom. Tabel Hoverable. Selectorul :hover. Elementele th, td și tr.

Vezi videoclipul: Tabele CSS. Divizoare orizontale. Prop... Vezi toată lecția: CSS Tabele Citește teoria: Tabele CSS. Divizoare orizontale. Prop...

Divizoare orizontale (Horizontal Dividers)

Adăugați proprietatea border-bottom la <th> și <td> pentru horizontal dividers:

Exemplu:

th, td {
  border-bottom: 1px solid #ddd;
}

Hoverable Table

Utilizați selectorul :hover pe <tr> pentru a evidenția rândurile de tabel cu mouse over:

Exemplu:

tr:hover {background-color: #f5f5f5;}

Tabele CSS. Tabel responsiv. Elementul div și overflow-x: auto. Proprietățiile tabelului CSS: border, border-collapse, border-spacing, caption-side, empty-cells, table-layout.

Vezi videoclipul: Tabele CSS. Tabel responsiv. Elementul... Vezi toată lecția: CSS Tabele Citește teoria: Tabele CSS. Tabel responsiv. Elementul...

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ă:

Notă: Î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:

Proprietate	Descriere
border	Setează toate proprietățiile 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 legende 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. Elementele block și inline. Elemente la nivel de block: div, h1 - h6, p, form, header, footer, section. Elemente în linie: span, a, img.

Vezi videoclipul: CSS Display. Layout CSS - Proprietatea... Vezi toată lecția: CSS Display Citește teoria: CSS Display. Layout CSS - Proprietatea...

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>

CSS Display. Display: none;. Înlocuirea valorii implicite a afișajului. Proprietatea display. Elementele inline si block. Elementele li, span, a.

Vezi videoclipul: CSS Display. Display: none;. Înlocuire... Vezi toată lecția: CSS Display Citește teoria: CSS Display. Display: none;. Înlocuire...

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. Aruncați o privire la ultimul nostru exemplu din această pagină dacă doriți să știți cum se poate realiza acest lucru.
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:

Exemplu:

li {
  display: inline;
}

Notă: 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.

Următorul exemplu afișează elementele <span> ca elemente de block:

Exemplu:

span {
  display: block;
}

Următorul exemplu afișează elementele <a> ca elemente de block:

Exemplu:

a {
  display: block;
}

CSS Display. Ascunde un element - display:none sau visibility:hidden? Proprietăți CSS de afișare / vizibilitate: display, visibility.

Vezi videoclipul: CSS Display. Ascunde un element - disp... Vezi toată lecția: CSS Display Citește teoria: CSS Display. Ascunde un element - disp...

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:

Exemplu:

h1.hidden {
  display: none;
}

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:

Exemplu:

h1.hidden {
  visibility: hidden;
}

Proprietăți CSS de afișare / vizibilitate

Proprietatey	Descriere
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.

Vezi videoclipul: CSS max-width. CSS Layout - width și m... Vezi toată lecția: CSS max-width Citește teoria: CSS max-width. CSS Layout - width și m...

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:

Notă: 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:

Sfat: Trageți fereastra browserului la o dimensiune mai mică de 500px pentru a vedea diferența dintre cele două div-uri!

Iată un exemplu al celor două div-uri de mai sus:

Exemplu:

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

CSS Poziţie. Poziționarea textului într-o imagine.

Vezi videoclipul: CSS Poziţie. Poziționarea textului înt... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. Poziționarea textului înt...

Poziționarea textului într-o imagine

Cum să poziționați textul peste o imagine:

CSS Poziţie. Elementul cu position: relative;. Elementul cu position: fixed;.

Vezi videoclipul: CSS Poziţie. Elementul cu position: re... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. Elementul cu position: re...

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.

Iată CSS-ul folosit:

Exemplu:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

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.

Observați elementul fix din colțul din dreapta jos al paginii.

Iată CSS-ul folosit:

Exemplu:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

CSS Poziţie. Elementul cu position: absolute;.

Vezi videoclipul: CSS Poziţie. Elementul cu position: ab... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. Elementul cu position: ab...

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.

Notă: Un element „poziționat” este unul a cărui poziție este orice, cu excepția staticii.

Iată un exemplu simplu:

Iată CSS-ul folosit:

Exemplu:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

CSS Poziţie. Elementul cu position: sticky;.

Vezi videoclipul: CSS Poziţie. Elementul cu position: st... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. Elementul cu position: st...

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

Notă: 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.

Exemplu:

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

CSS Poziţie. CSS Layout - Proprietatea position. Valori de poziție: static, relative, fixed, absolute sau sticky. Element cu position: static;

Vezi videoclipul: CSS Poziţie. CSS Layout - Proprietate... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. CSS Layout - Proprietate...

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

Proprietatea position

Proprietatea position specifică tipul metodei de poziționare utilizate pentru un element.
Există cinci valori de poziție diferite:

static
relative
fixed
absolute
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:

Iată CSS-ul folosit:

Exemplu:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

CSS Poziţie. Elemente suprapuse. Proprietatea z-index.

Vezi videoclipul: CSS Poziţie. Elemente suprapuse. Propr... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. Elemente suprapuse. Propr...

Elemente suprapuse (Overlapping Elements)

Când elementele sunt poziționate, se pot suprapune altor elemente.
Proprietatea z-index 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ă:

Exemplu:

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Un element cu o ordine de stivă mai mare este întotdeauna în fața unui element cu o ordine de stivă mai mică.

Notă: 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.

CSS Poziţie. Toate proprietățiile de poziționare CSS: bottom, clip, left, position, top, right, z-index.

Vezi videoclipul: CSS Poziţie. Toate proprietățiile de p... Vezi toată lecția: CSS Position Citește teoria: CSS Poziţie. Toate proprietățiile de p...

Toate proprietățiile de poziționare CSS

Proprietate	Descriere
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. CSS Layout - Overflow. Proprietatea overflow.

Vezi videoclipul: CSS Overflow. CSS Layout - Overflow. P... Vezi toată lecția: CSS Overflow Citește teoria: CSS Overflow. CSS Layout - Overflow. P...

CSS Layout - 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.

Notă: Proprietatea de overflow funcționează numai pentru elementele de block cu o înălțime specificată.

Notă: Î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).

CSS Overflow. Elementul overflow: visible. Elementul overflow: hidden.

Vezi videoclipul: CSS Overflow. Elementul overflow: visi... Vezi toată lecția: CSS Overflow Citește teoria: CSS Overflow. Elementul overflow: visi...

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:

Exemplu:

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Elementul overflow: hidden (revărsat: ascuns)

Odată cu valoarea ascunsă (overflow: hidden), preluarea este tăiată, iar restul conținutului este ascuns:

Exemplu:

div {
  overflow: hidden;
}

CSS Overflow. Elementul overflow: scroll. Elementul overflow: auto.

Vezi videoclipul: CSS Overflow. Elementul overflow: scro... Vezi toată lecția: CSS Overflow Citește teoria: CSS Overflow. Elementul overflow: scro...

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):

Exemplu:

div {
  overflow: scroll;
}

Elementul overflow: auto (revărsare: auto)

Valoarea automată (overflow: auto) este similară cu cea a defilării, dar adaugă bare de defilare doar atunci când este necesar:

Exemplu:

div {
  overflow: auto;
}

CSS Overflow. Elementele overflow-x și overflow-y. Toate proprietățiile CSS de overflow.

Vezi videoclipul: CSS Overflow. Elementele overflow-x și... Vezi toată lecția: CSS Overflow Citește teoria: CSS Overflow. Elementele overflow-x și...

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.

Exemplu:

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Toate proprietățiile CSS de overflow:

Proprietate	Descriere
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. CSS Layout - float and clear. Proprietatea CSS float. Valori float: left, right, none, inherit. Elementul float: right;. Proprietatea CSS clear.

Vezi videoclipul: CSS Float. CSS Layout - float and clea... Vezi toată lecția: CSS Float Citește teoria: CSS Float. CSS Layout - float and clea...

CSS Layout - float and clear

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.

Exemplu - float: right; (float: dreapta;)

Următorul exemplu specifică faptul că o imagine trebuie să plutească spre dreapta într-un text:

Exemplu:

img {
  float: right;
}

CSS Float. Elementul float: left;. Elementul float: none;.

Vezi videoclipul: CSS Float. Elementul float: left;. Ele... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Elementul float: left;. Ele...

Elementul float: left; (float: stânga;)

Exemplu - float: left; (float: stânga;)

Următorul exemplu specifică faptul că o imagine ar trebui să plutească la stânga într-un text:

Exemplu:

img {
  float: left;
}

Elementul float: none;

Exemplu - No float (Fără plutire)

În următorul exemplu, imaginea va fi afișată exact acolo unde apare în text (float: none;):

Exemplu:

img {
  float: none;
}

CSS Float. Proprietatea clear. Valori clear: none, left, right, both, inherit.

Vezi videoclipul: CSS Float. Proprietatea clear. Valori... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Proprietatea clear. Valori...

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.

Următorul exemplu șterge float spre stânga. Înseamnă că nu sunt permise elemente flotante pe partea stângă (din div):

Exemplu:

div {
  clear: left;
}

Rezultat:

CSS Float. Grilă de Boxes / Boxes de lățime egală. Imagini împreună.

Vezi videoclipul: CSS Float. Grilă de Boxes / Boxes de l... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Grilă de Boxes / Boxes de l...

Grid of Boxes / Equal Width Boxes

Exemplu:

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; / * trei cutii (utilizați 25% pentru patru și 50% pentru două, etc.) * /
  padding: 50px; / * dacă doriți spațiu între imagini * /
}

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.

Imagini Impreuna (Images Side By Side)

Grila casetelor poate fi de asemenea folosită pentru a afișa imagini side by side:

Exemplu:

.img-container {
  float: left;
  width: 33.33%; / * trei recipiente (utilizați 25% pentru patru, și 50% pentru două, etc) * /
  padding: 5px;  / * dacă doriți spațiu între imagini * /
}

CSS Float. Boxes de înălțime egală. Flexbox.

Vezi videoclipul: CSS Float. Boxes de înălțime egală. Fl... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Boxes de înălțime egală. Fl...

Cutii de înălțime egală (Equal Height Boxes)

În exemplul precedent, ai învățat cum să plutești cutiile una lângă alta cu o lățime egală. Cu toate acestea, nu este ușor să creezi cutii plutitoare la înălțimi egale. O soluție rapidă este însă să setați o înălțime fixă, ca în exemplul de mai jos:

Acest exemplu nu este foarte flexibil. Este bine să folosiți înălțimea CSS dacă puteți garanta că casetele vor avea întotdeauna aceeași cantitate de conținut în ele, dar nu este întotdeauna așa. Dacă încercați exemplul de mai sus pe un telefon mobil (sau redimensionați fereastra browserului), veți vedea că conținutul celei de-a doua casete va fi afișat în afara casetei.

Exemplu:

.box {
  height: 500px;
}

Totuși, acest lucru nu este foarte flexibil. 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ă:

Exemplu:

Folosiți Flexbox pentru a crea cutii flexibile:

Notă: Flexbox nu este acceptat în Internet Explorer 10 sau în versiunile anterioare.

CSS Float. Toate proprietățiile CSS float.

Vezi videoclipul: CSS Float. Toate proprietățiile CSS fl... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Toate proprietățiile CSS fl...

Toate proprietățiile CSS float:

Proprietate	Descriere
box-sizing	Defineste modul în care se calculează lățimea și înălțimea unui element: trebuie să includă sau nu borduri
clear	Specifică ce elemente pot pluti (float) 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 revarsă (overflow) 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. Hack-ul clarifix. Elementul overflow: auto.

Vezi videoclipul: CSS Float. Hack-ul clarifix. Elementul... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Hack-ul clarifix. Elementul...

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:

Apoi putem adăuga overflow: auto; la elementul care conține pentru a remedia această problemă:

Exemplu:

.clearfix {
  overflow: auto;
}

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:

Exemplu:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

CSS Float. Meniu de navigatie. Exemplu de dispunere web.

Vezi videoclipul: CSS Float. Meniu de navigatie. Exempl... Vezi toată lecția: CSS Float Citește teoria: CSS Float. Meniu de navigatie. Exempl...

Meniu de navigatie (Navigation Menu)

Utilizați float cu o listă de hyperlinkuri pentru a crea un meniu orizontal:

Exemplu:

Exemplu de dispunere web (Web Layout Example)

Este, de asemenea, obișnuit să faceți web layouts folosind proprietatea float:

Exemplu:

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

CSS inline-block. Afișajul: Valoarea inline-block. display: inline, display: inline-block și display: block.

Vezi videoclipul: CSS inline-block. Afișajul: Valoarea i... Vezi toată lecția: CSS inline-block Citește teoria: CSS inline-block. Afișajul: Valoarea i...

The display: inline-block Value

În comparație cu display: inline, diferența majoră este aceea că display: inline-block permite să stabilească o lățime și o înălțime pe element.
De asemenea, cu display: inline-block, marginile de sus și de jos sunt respectate, dar cu display: inline nu sunt.
Față de display: block, diferența majoră este aceea că display: inline-block nu adaugă o pauză de linie după element, astfel încât elementul să poată sta lângă alte elemente.

Următorul exemplu arată comportamentul diferit al display: inlinee, display: inline-block și display: block:

Exemplu:

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

CSS inline-block. Utilizarea inline-block pentru a crea legături de navigare.

Vezi videoclipul: CSS inline-block. Utilizarea inline-bl... Vezi toată lecția: CSS inline-block Citește teoria: CSS inline-block. Utilizarea inline-bl...

Utilizarea inline-block pentru a crea legături de navigare

O utilizare obișnuită pentru display: inline-block este de a afișa elemente de listă pe orizontală în loc de vertical. Următorul exemplu creează legături de navigație orizontale:

Exemplu:

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Aliniere CSS. Centrare vertical - Folosire padding. Folosire text-align: center.

Vezi videoclipul: Aliniere CSS. Centrare vertical - Folo... Vezi toată lecția: CSS Align Citește teoria: Aliniere CSS. Centrare vertical - Folo...

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:

Exemplu:

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Pentru a centra atât pe verticală cât și pe orizontală, utilizați padding și text-align: center:

Exemplu:

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Aliniere CSS. CSS Layout - Aliniere orizontală și verticală. Elementul margin: auto;. Aliniere text Centru. Elementul text-align: center.

Vezi videoclipul: Aliniere CSS. CSS Layout - Aliniere or... Vezi toată lecția: CSS Align Citește teoria: Aliniere CSS. CSS Layout - Aliniere or...

CSS Layout - Aliniere orizontală și verticală

Elemente de aliniere la 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.

Exemplu:

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

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;

Exemplu:

.center {
  text-align: center;
  border: 3px solid green;
}

Aliniere CSS. Centru vertical - Folosire line-height. Centru vertical - Folosire position și transform.

Vezi videoclipul: Aliniere CSS. Centru vertical - Folos... Vezi toată lecția: CSS Align Citește teoria: Aliniere CSS. Centru vertical - Folos...

Centru vertical - Folosire line-height

Un alt truc este să folosiți proprietatea line-height cu o valoare egală cu proprietatea height.

Exemplu:

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* Dacă textul are mai multe linii, adăugați următoarele: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

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:

Notă: Proprietatea trasform nu este acceptată în versiunile IE8 și anterioare.

Exemplu:

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Aliniere CSS. Centrare imagine. Element block. Aliniere stânga și dreapta - Folosire position.

Vezi videoclipul: Aliniere CSS. Centrare imagine. Elemen... Vezi toată lecția: CSS Align Citește teoria: Aliniere CSS. Centrare imagine. Elemen...

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:

Exemplu:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Aliniere stânga și dreapta - Folosire position

O metodă de aliniere a elementelor este utilizarea position: absolut ;:

Notă: Elementele poziționate absolute sunt eliminate din debitul normal și pot suprapune elemente.

Exemplu:

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Aliniere CSS. Aliniere stânga și dreapta - Folosire float. Hack-ul clarifix.

Vezi videoclipul: Aliniere CSS. Aliniere stânga și dreap... Vezi toată lecția: CSS Align Citește teoria: Aliniere CSS. Aliniere stânga și dreap...

Aliniere stânga și dreapta - Folosire float

O altă metodă pentru alinierea elementelor este utilizarea proprietății float:

Exemplu:

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Notă: 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

Apoi putem adăuga overflow: auto; la elementul conținut pentru a remedia această problemă:

Exemplu:

.clearfix {
  overflow: auto;
}

Combinatoare CSS. Selectorul descendent. Elementele p și div. Selectorul child.

Vezi videoclipul: Combinatoare CSS. Selectorul descenden... Vezi toată lecția: CSS Combinatoare Citește teoria: Combinatoare CSS. Selectorul descenden...

CSS Combinators

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.

Următorul exemplu selectează toate elementele <p> din elementele <div>:

Exemplu:

div p {
  background-color: yellow;
}

Selectorul Child

Selectorul child selectează toate elementele care sunt copiii unui element specificat.

Următorul exemplu selectează toate elementele <p> care sunt copiii unui element <div>:

Exemplu:

div > p {
  background-color: yellow;
}

Combinatoare CSS. Selectorul sibling adiacent. Selectorul sibling general.

Vezi videoclipul: Combinatoare CSS. Selectorul sibling a... Vezi toată lecția: CSS Combinatoare Citește teoria: Combinatoare CSS. Selectorul sibling a...

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ă”.

Următorul exemplu selectează toate elementele <p> care sunt plasate imediat după elementele <div>:

Exemplu:

div + p {
  background-color: yellow;
}

Selectorul sibling general

Selectorul sibling general selectează toate elementele care sunt frații unui element specificat.

Următorul exemplu selectează toate elementele <p> care sunt frați ai elementelor <div>:

Exemplu:

div ~ p {
  background-color: yellow;
}

Combinatoare CSS. Toți selectorii combinatori CSS.

Vezi videoclipul: Combinatoare CSS. Toți selectorii comb... Vezi toată lecția: CSS Combinatoare Citește teoria: Combinatoare CSS. Toți selectorii comb...

Toți selectorii combinatori CSS

Selector	Exemplu	descriere exemplu
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 Pseudo-clase. Pseudo-clase și clase CSS. Hover pe div. Simple Tooltip Hover.

Vezi videoclipul: CSS Pseudo-clase. Pseudo-clase și clas... Vezi toată lecția: CSS Pseudo-clase Citește teoria: CSS Pseudo-clase. Pseudo-clase și clas...

Pseudo-clase și clase CSS

Pseudo-clasele pot fi combinate cu clase CSS:

Când treceți peste linkul din exemplu, acesta își va schimba culoarea:

Exemplu:

a.highlight:hover {
  color: #ff0000;
}

Hover pe <div>

Un exemplu de utilizare a pseudo-clasei „hover” pe un element <div>:

Exemplu:

div:hover {
  background-color: blue;
}

Simple Tooltip Hover

Hover peste un element <div> pentru a afișa un element <p> (cum ar fi un tooltip):

Exemplu:

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS Pseudo-clase. Pseudo-clasa CSS - :lang.

Vezi videoclipul: CSS Pseudo-clase. Pseudo-clasa CSS - :... Vezi toată lecția: CSS Pseudo-clase Citește teoria: CSS Pseudo-clase. Pseudo-clasa CSS - :...

Pseudo-clasa CSS - :lang

Pseudo-clasa CSS - :lang vă permite să definiți reguli speciale pentru diferite limbi.

În exemplul de mai jos,: lang definește ghilimele pentru elementele <q> cu lang = "no":

Exemplu:

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Ceva text <q lang="no">Un citat dintr-un paragraf</q> Ceva text.</p>

</body>
</html>

CSS Pseudo-clase. Pseudo-clasa CSS - :first-child. Potriviți primul element <i> din toate elementele <p>. Potriviți toate elementele <i> din toate elementele primului copil <p>.

Vezi videoclipul: CSS Pseudo-clase. Pseudo-clasa CSS - :... Vezi toată lecția: CSS Pseudo-clase Citește teoria: CSS Pseudo-clase. Pseudo-clasa CSS - :...

Pseudo-clasa CSS - :first-child

Pseudo-clasa :first-child se potrivește cu un element specificat care este primul copil al unui alt element.
Potriviți primul element <p>.

În următorul exemplu, selectorul se potrivește cu orice element <p> care este primul copil al oricărui element:

Exemplu:

p:first-child {
  color: blue;
}

Potriviți primul element <i> din toate elementele <p>

În următorul exemplu, selectorul se potrivește cu primul element <i> din toate elementele <p>:

Exemplu:

p i:first-child {
  color: blue;
}

Potriviți toate elementele <i> din toate elementele primului copil <p>

În următorul exemplu, selectorul se potrivește cu toate elementele <i> din elementele <p> care sunt primul copil al unui alt element:

Exemplu:

p:first-child i {
  color: blue;
}

CSS Pseudo-clase. Ce sunt Pseudo-clasele? Pseudo-clase ancora.

Vezi videoclipul: CSS Pseudo-clase. Ce sunt Pseudo-clase... Vezi toată lecția: CSS Pseudo-clase Citește teoria: CSS Pseudo-clase. Ce sunt Pseudo-clase...

Ce sunt Pseudo-clasele?

O pseudo-clasă este utilizată pentru a defini o stare specială a unui element.
De exemplu, poate fi folosit pentru:

Stilează un element atunci când un utilizator trece cu mouseul peste el.
Stileaza linkurile vizitate și nevizitate diferit.
Stilează un element când se focusează.

Sintaxă

Sintaxa pseudo-claselor:

selector:pseudo-class {
  property:value;
}

Pseudo-clase ancora

Linkurile pot fi afișate în diferite moduri:

Exemplu:

/ * link nevizitat * /
a:link {
  color: #FF0000;
}

/ * link vizitat * /
a:visited {
  color: #00FF00;
}

/ * mouse peste link * /
a:hover {
  color: #FF00FF;
}

/ * linkul selectat * /
a:active {
  color: #0000FF;
}

Notă: a: hover TREBUIE să vină după a:link și a:visited în definiția CSS pentru a fi eficiente! a: active TREBUIE să vină după a:hover în definiția CSS pentru a fi eficient! Numele pseudo-class nu sunt case-sensitive.

CSS Pseudo-clase. Toate clasele CSS Pseudo. Toate elementele CSS Pseudo.

Vezi videoclipul: CSS Pseudo-clase. Toate clasele CSS Ps... Vezi toată lecția: CSS Pseudo-clase Citește teoria: CSS Pseudo-clase. Toate clasele CSS Ps...

Toate clasele CSS Pseudo

Selector	Exemplu	Descriere exemplu
:active	a:active	Selectează legătura activă
:checked	input:checked	Selectează fiecare element input bifat
:disabled	input:disabled	Selectează fiecare element dezactivat input
:empty	p:empty	Selectează fiecare element p care nu are copii
:enabled	input:enabled	Selectează fiecare element activat input
:first-child	p:first-child	Selectează toate elementele p care este primul copil al părintelui său
:first-of-type	p:first-of-type	Selectează fiecare element p care este primul element p al părintelui său
:focus	input:focus	Selectează elementul input care are focus
:hover	a:hover	Selectează linkurile cu mouse over
:in-range	input:in-range	Selectează elementele input cu o valoare dintr-un interval specificat
:invalid	input:invalid	Selectează toate elementele input cu o valoare nevalidă
:lang(language)	p:lang(it)	Selectează fiecare element p cu o valoare a atributului lang începând cu „it”
:last-child	p:last-child	Selectează toate elementele p, care este ultimul copil p al părintelui său
:last-of-type	p:last-of-type	Selectează fiecare element p care este ultimul element p al părintelui său
:link	a:link	Selectează toate linkurile nevizitate
:not(selector)	:not(p)	Selectează fiecare element care nu este un element p
:nth-child(n)	p:nth-child(2)	Selectează fiecare element p care este al doilea copil al părintelui său
:nth-last-child(n)	p:nth-last-child(2)	Selectează fiecare element p care este al doilea copil al părintelui său, numărând de la ultimul copil
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selectează fiecare element p care este al doilea element p al părintelui său, numărând de la ultimul copil
:nth-of-type(n)	p:nth-of-type(2)	Selectează fiecare element p care este al doilea element p al părintelui său
:only-of-type	p:only-of-type	Selectează fiecare element p care este singurul element p al părintelui său
:only-child	p:only-child	Selectează fiecare element p care este singurul copil al părintelui său
:optional	input:optional	Selectează elementele input fără atribut "necesar"
:out-of-range	input:out-of-range	Selectează elementele input cu o valoare în afara unui interval specificat
:read-only	input:read-only	Selectează elementele input cu atributul „readonly” specificat
:read-write	input:read-write	Selectează elementele input fără atribut "readonly"
:required	input:required	Selectează elementele input cu atributul „necesar” specificat
:root	root	Selectează elementul rădăcină al documentului
:target	#news:target	Selectează elementul news activ curent (faceți click pe o adresă URL care conține numele ancorării)
:valid	input:valid	Selectează toate elementele input cu o valoare valabilă
:visited	a:visited	Selectează toate linkurile vizitate

Toate elementele CSS Pseudo

Selector	Exemplu	Descriere exemplu
::after	p::after	Inserarea conținutului după fiecare element p
::before	p::before	Introduceți conținut înainte de fiecare element p
::first-letter	p::first-letter	Selectează prima literă a fiecărui element p
::first-line	p::first-line	Selectează prima linie a fiecărui element p
::selection	p::selection	Selectează porțiunea unui element selectat de un utilizator

CSS Pseudo-elemente. Pseudo-elemente și clase CSS. Pseudo-elemente multiple

Vezi videoclipul: CSS Pseudo-elemente. Pseudo-elemente ș... Vezi toată lecția: CSS Pseudo-elemente Citește teoria: CSS Pseudo-elemente. Pseudo-elemente ș...

Pseudo-elemente și clase CSS

Pseudo-elementele pot fi combinate cu clase CSS:

Exemplu:

p.intro::first-letter {
  color: #ff0000;
  font-size:200%;
}

Exemplul de mai sus va afișa prima literă din paragrafe cu class = "intro", cu roșu și cu o dimensiune mai mare.

Pseudo-elemente multiple

Mai multe pseudo-elemente pot fi, de asemenea, combinate.

În exemplul următor, prima literă a unui paragraf va fi roșie, cu o dimensiune xx-large. Restul primei linii va fi albastru, și small-caps. Restul paragrafului va fi dimensiunea și culoarea implicită a fontului:

Exemplu:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS Pseudo-elemente. CSS - Pseudo-elementul ::before. CSS - Pseudo-elementul :: selection. CSS - Pseudo-elementul ::after. CSS - Pseudo-elementul ::selection. Proprietăți: color, background, cursor, și outline.

Vezi videoclipul: CSS Pseudo-elemente. CSS - Pseudo-elem... Vezi toată lecția: CSS Pseudo-elemente Citește teoria: CSS Pseudo-elemente. CSS - Pseudo-elem...

CSS - Pseudo-elementul ::before

Pseudo-elementul ::before poate fi utilizat pentru a insera un anumit conținut înainte de conținutul unui element.

Următorul exemplu introduce o imagine înainte de conținutul fiecărui element <h1>:

Exemplu:

h1::before {
  content: url(smiley.gif);
}

CSS - Pseudo-elementul ::after

Pseudo-elementul ::after poate fi utilizat pentru a insera un anumit conținut după conținutul unui element.

Următorul exemplu inserează o imagine după conținutul fiecărui element <h1>:

Exemplu:

h1::after {
  content: url(smiley.gif);
}

CSS - Pseudo-elementul ::selection

Pseudo-element ::selection se potrivește cu porțiunea unui element selectat de un utilizator.

Următoarele proprietăți CSS pot fi aplicate la ::selection: culoare, fundal, cursor și contur (color, background, cursor, și outline).

Următorul exemplu face ca textul selectat să fie roșu pe un fundal galben:

Exemplu:

::selection {
  color: red;
  background: yellow;
}

CSS Pseudo-elemente. Pseudo-element :: first-line. Proprietățiile : font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.

Vezi videoclipul: CSS Pseudo-elemente. Pseudo-element ::... Vezi toată lecția: CSS Pseudo-elemente Citește teoria: CSS Pseudo-elemente. Pseudo-element ::...

Pseudo-element :: first-line

Pseudo-element :: first-line este utilizat pentru a adăuga un stil special la prima linie a unui text.

Următorul exemplu formatează prima linie a textului în toate elementele <p>:

Exemplu:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Notă: pseudo-elementul :: first-line poate fi aplicat numai elementelor la nivel de block.

Următoarele proprietăți se aplică pentru pseudo-element :: first-line:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

CSS Pseudo-elemente. Pseudo-element :: first-letter. Proprietățiile: :: first-letter: font properties, color properties, background properties, margin properties, padding properties, border properties, text-decoration, vertical-align.

Vezi videoclipul: CSS Pseudo-elemente. Pseudo-element ::... Vezi toată lecția: CSS Pseudo-elemente Citește teoria: CSS Pseudo-elemente. Pseudo-element ::...

Pseudo-element :: first-letter

Pseudo-elementul :: first-letter este utilizat pentru a adăuga un stil special la prima literă a unui text.

Următorul exemplu formatează prima literă a textului în toate elementele <p>:

Exemplu:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Notă: Pseudo-elementul :: first-letter poate fi aplicat numai elementelor la nivel de block.

Următoarele proprietăți se aplică pentru pseudo-elementul :: first-letter:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

CSS Pseudo-elemente. Toate Pseudo-elementele CSS. Toate Pseudo-clasele CSS.

Vezi videoclipul: CSS Pseudo-elemente. Toate Pseudo-elem... Vezi toată lecția: CSS Pseudo-elemente Citește teoria: CSS Pseudo-elemente. Toate Pseudo-elem...

Toate Pseudo-elementele CSS

Selector	Exemplu	Descriere exemplu
::after	p::after	Inserați ceva după conținutul fiecărui element p
::before	p::before	Introduceți ceva înainte de conținutul fiecărui element p
::first-letter	p::first-letter	Selectează prima literă a fiecărui element p
::first-line	p::first-line	Selectează prima linie a fiecărui element p
::selection	p::selection	Selectează porțiunea unui element selectat de un utilizator

Toate Pseudo-clasele CSS

Selector	Exemplu	Descriere exemplu
:active	a:active	Selectează legătura activă
:checked	input:checked	Selectează fiecare element input bifat
:disabled	input:disabled	Selectează fiecare element dezactivat input
:empty	p:empty	Selectează fiecare element p care nu are copii
:enabled	input:enabled	Selectează fiecare element activat input
:first-child	p:first-child	Selectează toate elementele p care este primul copil al părintelui său
:first-of-type	p:first-of-type	Selectează fiecare element p care este primul element p al părintelui său
:focus	input:focus	Selectează elementul input care are focus
:hover	a:hover	Selectează linkurile cu mouse over
:in-range	input:in-range	Selectează elementele input cu o valoare dintr-un interval specificat
:invalid	input:invalid	Selectează toate elementele input cu o valoare nevalidă
:lang(language)	p:lang(it)	Selectează fiecare element p cu o valoare a atributului lang începând cu „it”
:last-child	p:last-child	Selectează toate elementele p care este ultimul copil al părintelui său
:last-of-type	p:last-of-type	Selectează fiecare element p care este ultimul element p al părintelui său
:link	a:link	Selectează toate linkurile nevizitate
:not(selector)	:not(p)	Selectează fiecare element care nu este un element p
:nth-child(n)	p:nth-child(2)	Selectează fiecare element p care este al doilea copil al părintelui său
:nth-last-child(n)	p:nth-last-child(2)	Selectează fiecare element p care este al doilea copil al părintelui său, numărând de la ultimul copil
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selectează fiecare element p care este al doilea element p al părintelui său, numărând de la ultimul copil
:nth-of-type(n)	p:nth-of-type(2)	Selectează fiecare element p care este al doilea element p al părintelui său
:only-of-type	p:only-of-type	Selectează fiecare element p care este singurul element p al părintelui său
:only-child	p:only-child	Selectează fiecare element p care este singurul copil al părintelui său
:optional	input:optional	Selectează elementele input fără atribut "necesar"
:out-of-range	input:out-of-range	Selectează elementele input cu o valoare în afara unui interval specificat
:read-only	input:read-only	Selectează elementele input cu atributul „readonly” specificat
:read-write	input:read-write	Selectează elementele input fără atribut "readonly"
:required	input:required	Selectează elementele input cu atributul „necesar” specificat
:root	root	Selectează elementul rădăcină al documentului
:target	#news:target	Selectează elementul news activ curent (faceți click pe o adresă URL care conține numele ancorării)
:valid	input:valid	Selectează toate elementele input cu o valoare valabilă
:visited	a:visited	Selectează toate linkurile vizitate

CSS Pseudo-elemente. Ce sunt Pseudo-elementele? Notația dublu colon - :: first-line versus :first-line.

Vezi videoclipul: CSS Pseudo-elemente. Ce sunt Pseudo-el... Vezi toată lecția: CSS Pseudo-elemente Citește teoria: CSS Pseudo-elemente. Ce sunt Pseudo-el...

CSS Pseudo-elemente

Ce sunt Pseudo-elementele?

Un pseudo-element CSS este utilizat pentru a stabili părțile specificate ale unui element.

De exemplu, poate fi folosit pentru:

Stilizarea primei litere sau liniei unui element.
Inserarea de conținut înainte sau după, conținutul unui element.

Sintaxă

Sintaxa pseudo-elementelor:

selector::pseudo-element {
  property:value;
}

Observați notația dublu colon - :: first-line versus :first-line

Dublul colon a înlocuit notația cu un singur colon pentru pseudo-elemente în CSS3. Aceasta a fost o încercare din partea W3C de a distinge pseudo-clasele și pseudo-elementele.
Sintaxa cu un singur colon a fost folosită atât pentru pseudo-clase, cât și pentru pseudo-elemente în CSS2 și CSS1.
Pentru compatibilitate înapoi (backward), sintaxa cu un singur colon este acceptabilă pentru pseudo-elementele CSS2 și CSS1.

CSS Opacitate / Transparență. Efectul Hover transparent. Proprietatea opacity. :hover selector.

Vezi videoclipul: CSS Opacitate / Transparență. Efectul... Vezi toată lecția: CSS Opacitate / Transparență Citește teoria: CSS Opacitate / Transparență. Efectul...

Efectul Hover transparent

Proprietatea opacity este adesea folosită împreună cu :hover selector pentru a modifica opacitatea cu mouse-over:

Exemplu:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

Exemplu explicat:

Primul block CSS este similar cu codul din Exemplul 1. În plus, am adăugat ce ar trebui să se întâmple atunci când un utilizator trece peste una dintre imagini. În acest caz, dorim ca imaginea să nu fie transparentă atunci când utilizatorul trece peste ea. CSS- ul pentru aceasta este opacity:1;.

Când indicatorul mouse-ului se îndepărtează de imagine, imaginea va fi din nou transparentă.

Un exemplu de efect reversed hover:

Exemplu:

img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Pentru IE8 și versiunile anterioare */
}

CSS Opacitate / Transparență. Box Transparent. Transparență folosind RGBA.

Vezi videoclipul: CSS Opacitate / Transparență. Box Tran... Vezi toată lecția: CSS Opacitate / Transparență Citește teoria: CSS Opacitate / Transparență. Box Tran...

Box Transparent

Când se utilizează proprietatea opacity pentru a adăuga transparență pe fundalul unui element, toate elementele sale copil moștenesc aceeași transparență. Acest lucru poate face textul într-un element complet transparent, greu de citit:

Exemplu:

div {
  opacity: 0.3;
  filter: alpha(opacity=30); /* Pentru IE8 și versiunile anterioare */
}

Transparență folosind RGBA

Dacă nu doriți să aplicați opacitate elementelor copil, cum ar fi în exemplul nostru de mai sus, folosiți valorile de culoare RGBA. Următorul exemplu stabilește opacitatea culorii de fundal și nu a textului:

Ați aflat de la capitolul nostru de culori CSS, că puteți utiliza RGB ca valoare a culorii. În plus față de RGB, puteți utiliza o valoare a culorii RGB cu un canal alfa (RGBA) - care specifică opacitatea unei culori.

O valoare de culoare RGBA este specificată cu: rgba (roșu, verde, albastru, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).

Exemplu:

div {
  background: rgba(76, 175, 80, 0.3) /* Fundal verde cu opacitate de 30% */
}

CSS Opacitate / Transparență. Text în Box Transparent.

Vezi videoclipul: CSS Opacitate / Transparență. Text în ... Vezi toată lecția: CSS Opacitate / Transparență Citește teoria: CSS Opacitate / Transparență. Text în ...

Text în Box Transparent

Exemplu:

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Acesta este un text care este plasat în caseta transparentă.</p>
  </div>
</div>

</body>
</html>

Mai întâi, creăm un element <div> (class = "background") cu o imagine de fundal și un chenar. Apoi, creăm un alt <div> (class = "transbox") în interiorul primului <div>. <div class = "transbox"> au o culoare de fundal, iar o margine - div este transparentă. În interiorul <div> transparent, adăugăm text în interiorul unui element <p>.

CSS Opacitate / Transparență. Proprietatea opacity. Imagine transparentă.

Vezi videoclipul: CSS Opacitate / Transparență. Propriet... Vezi toată lecția: CSS Opacitate / Transparență Citește teoria: CSS Opacitate / Transparență. Propriet...

CSS Opacitate / Transparență

Proprietatea opacity specifică opacitatea / transparența unui element.

Imagine transparentă

Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât mai transparentă.

Notă: IE8 și utilizarea anterioară 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.

Exemplu:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

CSS Bară de navigare. Topnav Responsiv. Sidenav Responsiv. Bară de navigare Dropdown.

Vezi videoclipul: CSS Bară de navigare. Topnav Responsiv... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Topnav Responsiv...

Mai multe exemple

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 Bară de navigare. Listă de legături.

Vezi videoclipul: CSS Bară de navigare. Listă de legătur... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Listă de legătur...

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 = Listă de legături

O bara de navigare are nevoie de HTML standard ca bază.
În exemplele noastre vom construi bara de navigare dintr-o listă HTML standard.
O bara de navigare este practic o listă de legături, astfel încât utilizarea elementelor <ul> și <li> au sens perfect:

Exemplu:

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">Știri</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">Despre</a></li>
</ul>

Acum, să eliminăm bullets și margins și padding din listă:

Exemplu:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Exemplu explicat:

list-style-type: none; - Îndepărtează bullets. O bară de navigare nu are nevoie de markeri de listă
Setați margin: 0; padding: 0; pentru a elimina setările implicite ale browserului
Codul din exemplul de mai sus este codul standard utilizat atât în barele de navigație verticale, cât și în cele orizontale.

CSS Bară de navigare. Bară de navigare verticală completă de înălțime completă.

Vezi videoclipul: CSS Bară de navigare. Bară de navigare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Bară de navigare...

Bară de navigare verticală completă de înălțime completă (Full-height Fixed Vertical Navbar)

Creați o navigare laterală full-height, "înaltă".

Exemplu:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Inălțime maxima  */
  position: fixed; /*  Faceți-l să se lipească, chiar și pe defilare */
  overflow: auto; /* Activați derularea dacă sidenav are prea mult conținut */
}

CSS Bară de navigare. Exemple de bare de navigare orizontale.

Vezi videoclipul: CSS Bară de navigare. Exemple de bare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Exemple de bare...

Exemple de bare de navigare orizontale

Creați o bară de navigare orizontală de bază cu o culoare de fundal închisă și schimbați culoarea de fundal a linkurilor atunci când utilizatorul mută mouse-ul peste ele:

Exemplu:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Schimbați culoarea legăturii pe numărul 111 (negru) de la hover */
li a:hover {
  background-color: #111;
}

CSS Bară de navigare. Link de navigare activ / curent. Link-uri aliniere dreapta.

Vezi videoclipul: CSS Bară de navigare. Link de navigare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Link 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ă:

Exemplu:

.active {
  background-color: #4CAF50;
}

Link-uri aliniere dreapta (Right-align links)

Aliniați legăturile din dreapta, plutind elementele din listă spre dreapta (float: right;):

Exemplu:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Știri</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">Despre</a></li>
</ul>

CSS Bară de navigare. Bară orizontală gri. Bară de navigare sticky.

Vezi videoclipul: CSS Bară de navigare. Bară orizontală... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Bară orizontală...

Bară orizontală gri

Un exemplu de bară de navigare orizontală gri, cu un border subțire gri:

Exemplu:

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

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

Exemplu:

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Notă: 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.

CSS Bară de navigare. Bară de navigare verticală.

Vezi videoclipul: CSS Bară de navigare. Bară de navigare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Bară de navigare...

Bară de navigare verticală

Pentru a construi o bară de navigare verticală, puteți stila elementele <a> din listă, pe lângă codul de mai sus:

Exemplu:

li a {
  display: block;
  width: 60px;
}

Exemplu explicat:

display: block; - Afișarea linkurilor ca elemente de block face ca întreaga zonă de legătură să fie clickable (nu doar textul) și ne permite să specificăm width (și padding, margin, height, dacă doriți)
width: 60px; - Elementele de block acceptă în mod implicit întreaga lățime disponibilă. Vrem să specificăm o lățime de 60 de pixeli
Puteți, de asemenea, să setați lățimea <ul> și să eliminați lățimea <a>, deoarece acestea vor prelua lățimea completă disponibilă atunci când sunt afișate ca elemente de block. Acest lucru va produce același rezultat ca exemplul nostru anterior:

Exemplu:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

li a {
  display: block;
}

CSS Bară de navigare. Exemple de bare de navigare verticală.

Vezi videoclipul: CSS Bară de navigare. Exemple de bare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Exemple de bare...

Exemple de bare de navigare verticală

Creați o bară verticală de navigare verticală cu o culoare de fundal gri și schimbați culoarea de fundal a linkurilor atunci când utilizatorul mută mouse-ul peste ele:

Exemplu:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Schimbați culoarea linkului la hover */
li a:hover {
  background-color: #555;
  color: white;
}

CSS Bară de navigare. Link de navigare activ / curent. Link-uri centrate & adăugare borders.

Vezi videoclipul: CSS Bară de navigare. Link de navigare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Link de navigare...

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ă:

Exemplu:

.active {
  background-color: #4CAF50;
  color: white;
}

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:

Exemplu:

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

CSS Bară de navigare. Bară de navigare orizontală. Articole de listă inline. Articole de listă floating. Elementele li.

Vezi videoclipul: CSS Bară de navigare. Bară de navigare... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Bară de navigare...

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:

Exemplu:

li {
  display: inline;
}

Exemplu explicat:

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:

Exemplu:

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Exemplu explicat:

float: left; - Utilizați float-ul pentru ca elementele blocului să alunece unul lângă altul.
display: block; - Afișarea legăturilor ca elemente de tip block face ca întreaga zonă de legătură să poată fi făcută clickable (nu doar textul) și ne permite să specificăm padding-ul (și height, width, margins, etc., dacă doriți).
padding: 8px; - Deoarece elementele blocului ocupă toată lățimea disponibilă, ele nu pot pluti unul lângă celălalt. Prin urmare, specificați niște padding pentru a le face să arate bine.
background-color: #dddddd; - Adăugați o culoare de fundal gri la fiecare element.

Sfat: Adăugați background-color la <ul> în loc de fiecare element <a> dacă doriți un background-color cu lățime completă:

Exemplu:

ul {
  background-color: #dddddd;
}

CSS Bară de navigare. Divizori de border. Proprietatea border-right. Bară de navigare fixă. Partea de sus fixă. Partea de jos fixă.

Vezi videoclipul: CSS Bară de navigare. Divizori de bord... Vezi toată lecția: CSS Bară de navigare Citește teoria: CSS Bară de navigare. Divizori de bord...

Divizori de border (Border Dividers)

Adăugați proprietatea border-right la <li> pentru a crea divizori de legături:

Exemplu:

/* Adăugați un border drept la toate articolele din listă, cu excepția ultimului articol (ultimul copil) * */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

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:

Exemplu:

Fixed Top

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Fixed Bottom

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

CSS Dropdowns. Meniu Dropdown.

Vezi videoclipul: CSS Dropdowns. Meniu Dropdown. Vezi toată lecția: CSS Dropdowns Citește teoria: CSS Dropdowns. Meniu Dropdown.

Meniu Dropdown

Creați un meniu dropdown care permite utilizatorului să aleagă o opțiune dintr-o listă:

Acest exemplu este similar cu cel precedent, cu excepția faptului că adăugăm legături în dropdown box și le stilăm pentru a se potrivi cu un buton dropdown:

Exemplu:

<style>
/* Stilizare Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Containerul <div> - necesar pentru poziționarea conținutului dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Conținut Dropdown (ascuns implicit) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Link-uri din interiorul dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Schimbați culoarea linkurilor dropdown pe hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Afișați meniul dropdown pe hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Schimbați background color a dropdown vertical când este afișat conținutul dropdown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CSS Dropdowns. Basic Dropdown.

Vezi videoclipul: CSS Dropdowns. Basic Dropdown. Vezi toată lecția: CSS Dropdowns Citește teoria: CSS Dropdowns. Basic Dropdown.

CSS Dropdowns

Basic Dropdown

Creați un dropdown box care apare când utilizatorul mută mouse-ul peste un element.

Exemplu:

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

CSS Dropdowns. Conținut dropdown. Elementele span, button. Clasa .dropdown cu position:relative, position:absolute. Clasa .dropdown-content. Proprietatea CSS box-shadow. Selectorul :hover.

Vezi videoclipul: CSS Dropdowns. Conținut dropdown. Elem... Vezi toată lecția: CSS Dropdowns Citește teoria: CSS Dropdowns. Conținut dropdown. Elem...

Exemplu explicat

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.

Sfat: 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.

CSS Dropdowns. Conținut dropdown aliniat la dreapta. Imagine Dropdown. Dropdown Navbar.

Vezi videoclipul: CSS Dropdowns. Conținut dropdown alini... Vezi toată lecția: CSS Dropdowns Citește teoria: CSS Dropdowns. Conținut dropdown alini...

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

Exemplu:

.dropdown-content {
  right: 0;
}

Mai multe exemple

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 Galerie de imagini

Vezi videoclipul: CSS Galerie de imagini Vezi toată lecția: CSS Galerie de imagini Citește teoria: CSS Galerie de imagini

CSS Galerie de imagini (CSS Image Gallery)

CSS poate fi utilizat pentru a crea o galerie de imagini.

Galerie de imagini

Următoarea galerie de imagini este creată cu CSS:

Exemplu:

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Adăugați aici o descriere a imaginii</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Adăugați aici o descriere a imaginii</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Adăugați aici o descriere a imaginii</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Adăugați aici o descriere a imaginii</div>
</div>

</body>
</html>

CSS Image Sprites. Exemplu explicat.

Vezi videoclipul: CSS Image Sprites. Exemplu explicat. Vezi toată lecția: CSS Image Sprites Citește teoria: CSS Image Sprites. Exemplu explicat.

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

Image Sprites - Exemplu simplu

În loc să folosim trei imagini separate, folosim această singură imagine („img_navsprites.gif”):

Cu CSS, putem afișa doar partea din imagine de care avem nevoie.

În exemplul următor, CSS specifică ce parte a imaginii "img_navsprites.gif" să arate:

Exemplu:

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Exemplu explicat:

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

CSS Image Sprites. Image Sprites - Creați o listă de navigare.

Vezi videoclipul: CSS Image Sprites. Image Sprites - Cre... Vezi toată lecția: CSS Image Sprites Citește teoria: CSS Image Sprites. Image Sprites - Cre...

Image Sprites - Creați o listă de navigare

Vrem să folosim imaginea sprite ("img_navsprites.gif") pentru a crea o listă de navigare.
Vom folosi o listă HTML, deoarece poate fi o legătură și acceptă și o imagine de fundal:

Exemplu:

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

CSS Image Sprites. Exemplu explicat: navlist, position: relative;, position:absolute;.

Vezi videoclipul: CSS Image Sprites. Exemplu explicat: n... Vezi toată lecția: CSS Image Sprites Citește teoria: CSS Image Sprites. Exemplu explicat: n...

Exemplu explicat:

#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).

CSS Image Sprites. Image Sprites - Efectul Hover. Selectorul :hover.

Vezi videoclipul: CSS Image Sprites. Image Sprites - Efe... Vezi toată lecția: CSS Image Sprites Citește teoria: CSS Image Sprites. Image Sprites - Efe...

Image Sprites - Efectul Hover

Acum dorim să adăugăm un efect hover în lista noastră de navigare.

Sfat: Selectorul :hover poate fi utilizat pe toate elementele, nu numai pe linkuri.

Noua noastră imagine ("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:

Exemplu:

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Exemplu explicat:

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

Selectori de atribute CSS. Toți selectorii de atribute CSS.

Vezi videoclipul: Selectori de atribute CSS. Toți select... Vezi toată lecția: CSS Selectori de atribute Citește teoria: Selectori de atribute CSS. Toți select...

Toți selectorii de atribute CSS

Selector	Exemplu	Descriere exemplu
[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 title 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"

Selectori de atribute CSS. Selector CSS [attribute~="value"]. Selector CSS [attribute|="value"].

Vezi videoclipul: Selectori de atribute CSS. Selector CS... Vezi toată lecția: CSS Selectori de atribute Citește teoria: Selectori de atribute CSS. Selector CS...

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.

Următorul exemplu selectează toate elementele cu un atribut title care conține o listă de cuvinte separată de spațiu, dintre care unul „flower”:

Exemplu:

[title~="flower"] {
  border: 5px solid yellow;
}

Exemplul de mai sus va potrivi elementele cu title = "flower", title = "summer flower", și title = "flower new", dar nu title = ""my-flower" sau title = "flowers".

Selector CSS [attribute|="value"]

Selectorul [attribute|="value"] este utilizat pentru a selecta elementele cu atributul specificat începând cu valoarea specificată.

Următorul exemplu selectează toate elementele cu o valoare de atribut class care începe cu "top":

Notă: 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"!

Exemplu:

[class|="top"] {
  background: yellow;
}

Selectori de atribute CSS. Selector CSS [attribute*="value"]. Formulare stilizate.

Vezi videoclipul: Selectori de atribute CSS. Selector CS... Vezi toată lecția: CSS Selectori de atribute Citește teoria: Selectori de atribute CSS. Selector CS...

Selector CSS [attribute*="value"]

Selectorul [attribute*="value"] este utilizat pentru a selecta elementele a căror valoare de atribut conține o valoare specificată.

Următorul exemplu selectează toate elementele cu valoarea de atribut class care conține "te":

Notă: Valoarea nu trebuie să fie un cuvânt întreg!

Exemplu:

[class*="te"] {
  background: yellow;
}

Formulare stilizate (Styling Forms)

Selectoarele de atribute pot fi utile pentru stilul formularelor fără clasă sau ID:

Exemplu:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Selectori de atribute CSS. Selector CSS [atribute]. Atributul target. Selector CSS [attribute="value"]. Selector CSS [attribute="value"]. Atributul target = "_ blank".

Vezi videoclipul: Selectori de atribute CSS. Selector CS... Vezi toată lecția: CSS Selectori de atribute Citește teoria: Selectori de atribute CSS. Selector CS...

Selectori de atribute CSS (CSS Attribute Selectors)

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.

Următorul exemplu selectează toate elementele <a> cu atributul target:

Exemplu:

a[target] {
  background-color: yellow;
}

Selector CSS [attribute="value"]

Selectorul [attribute="value"] este utilizat pentru a selecta elemente cu un atribut și o valoare specificate.

Următorul exemplu selectează toate elementele <a> cu atributul target = "_ blank":

Exemplu:

a[target="_blank"] {
  background-color: yellow;
}

Selectori de atribute CSS. Selector CSS [attribute^="value"]. Selector CSS [attribute$="value"].

Vezi videoclipul: Selectori de atribute CSS. Selector CS... Vezi toată lecția: CSS Selectori de atribute Citește teoria: Selectori de atribute CSS. Selector CS...

Selector CSS [attribute^="value"]

Selectorul [attribute^="value"] este utilizat pentru a selecta elemente a căror valoare de atribut începe cu o valoare specificată.

Următorul exemplu selectează toate elementele cu o valoare de atribut class care începe cu "top":

Notă: Valoarea nu trebuie să fie un cuvânt întreg!

Exemplu:

[class^="top"] {
  background: yellow;
}

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

Următorul exemplu selectează toate elementele cu valoarea de atribut class care se încheie cu "test":

Notă: Valoarea nu trebuie să fie un cuvânt întreg!

Exemplu:

[class$="test"] {
  background: yellow;
}

Formulare CSS. Stilizarea câmpurilor de intrare. Proprietatea width. Elementul input.

Vezi videoclipul: Formulare CSS. Stilizarea câmpurilor d... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Stilizarea câmpurilor d...

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):

Exemplu:

input {
  width: 100%;
}

Exemplul de mai sus se aplică tuturor elementelor <input>. 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
etc ..

Formulare CSS. Intrări Padded. Proprietatea padding. Proprietatea box-sizing. Proprietatea border-box.

Vezi videoclipul: Formulare CSS. Intrări Padded. Proprie... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Intrări Padded. Proprie...

Intrări Padded (Padded Inputs)

Utilizați proprietatea padding pentru a adăuga spațiu în câmpul text.

Sfat: 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:

Exemplu:

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Rețineți că am setat proprietatea box-sizing la border-box. Acest lucru asigură că padding-ul și eventual border-urile sunt incluse în lățimea totală și înălțimea elementelor.

Formulare CSS. Intrare cu pictogramă / imagine. Proprietatea background-image. Proprietatea background-position. Intrare de căutare animată.

Vezi videoclipul: Formulare CSS. Intrare cu pictogramă /... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Intrare cu pictogramă /...

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):

Exemplu:

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

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.

Exemplu:

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

Formulare CSS. Stilizarea butoanelor de intrare. Formular responsiv.

Vezi videoclipul: Formulare CSS. Stilizarea butoanelor d... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Stilizarea butoanelor d...

Stilizarea butoanelor de intrare (Styling Input Buttons)

Exemplu:

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* Sfat: utilizați width: 100% pentru butoanele full-width */

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.

Advanced: Următorul exemplu utilizează interogări media pentru a crea un formular cu răspuns.

Formulare CSS. Intrări mărginite. Proprietatea border. Proprietatea border-radius.

Vezi videoclipul: Formulare CSS. Intrări mărginite. Prop... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Intrări mărginite. Prop...

Intrări mărginite (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):

Exemplu:

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Dacă doriți doar un bottom border, utilizați proprietatea border-bottom:

Exemplu:

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Formulare CSS. Intrări colorate. Proprietatea background-color. Proprietatea color. Intrări focalizate.

Vezi videoclipul: Formulare CSS. Intrări colorate. Propr... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Intrări colorate. Propr...

Intrări colorate (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:

Exemplu:

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Intrări focalizate (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:

Exemplu:

input[type=text]:focus {
  background-color: lightblue;
}

Exemplu:

input[type=text]:focus {
  border: 3px solid #555;
}

Rețineți că am adăugat proprietatea de tranziție CSS pentru a anima culoarea bordurii (durează 0,5 secunde pentru a schimba culoarea pe focalizare).

Formulare CSS. Stilizarea Textareas. Proprietatea resize. Stilizarea Meniurilor Select.

Vezi videoclipul: Formulare CSS. Stilizarea Textareas. P... Vezi toată lecția: CSS Formulare Citește teoria: Formulare CSS. Stilizarea Textareas. P...

Stilizarea Textareas (Styling Textareas)

Sfat: Utilizați proprietatea resize pentru a împiedica redimensionarea textului (dezactivați „grabber” din colțul din dreapta jos):

Exemplu:

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Stilizarea Meniurilor Select (Styling Select Menus)

Exemplu:

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Contoare CSS. Numerotare automată cu contoare. Proprietățiile counter-reset, counter-increment, content, counter() sau funcția counters().

Vezi videoclipul: Contoare CSS. Numerotare automată cu c... Vezi toată lecția: CSS Contoare Citește teoria: Contoare CSS. Numerotare automată cu c...

Contoare CSS

Contoarele CSS sunt „variabile” menținute de CSS ale căror valori pot fi incrementate prin reguli CSS (pentru a urmări de câte ori sunt utilizate). Contoarele vă permit să ajustați aspectul conținutului în funcție de plasarea acestuia în document.

Numerotare automată cu contoare

Contoarele CSS sunt ca „variabile”. Valorile variabilei pot fi incrementate prin reguli CSS (care vor urmări de câte ori sunt utilizate).
Pentru a lucra cu contoarele CSS vom folosi următoarele proprietăți:

counter-reset - Creează sau resetează un contor
counter-increment - Crește o valoare a contorului
content - Inserează conținut generat
counter() or counters() function - Adăugă valoarea unui contor la un element

Pentru a utiliza un contor CSS, acesta trebuie mai întâi creat cu counter-reset.

Următorul exemplu creează un contor pentru pagină (în selectorul body), apoi crește valoarea contorului pentru fiecare element <h2> și adaugă "Secțiunea <valoarea contorului>:" la începutul fiecărui element <h2>:

Exemplu:

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Contoare CSS. Proprietăți ale contorului CSS.

Vezi videoclipul: Contoare CSS. Proprietăți ale contorul... Vezi toată lecția: CSS Contoare Citește teoria: Contoare CSS. Proprietăți ale contorul...

Proprietăți ale contorului CSS

Proprietate	Descriere
content	Folosit cu pseudo-elementele ::before și ::after, pentru a insera conținut generat
counter-increment	Crește una sau mai multe valori ale contorului
counter-reset	Creează sau resetează unul sau mai multe contoare

Contoare CSS. Nesting Counters. Funcția counters().

Vezi videoclipul: Contoare CSS. Nesting Counters. Funcți... Vezi toată lecția: CSS Contoare Citește teoria: Contoare CSS. Nesting Counters. Funcți...

Nesting Counters

Următorul exemplu creează un contor pentru pagină (section) și un contor pentru fiecare element <h1> (subsection). Contorul „section” va fi contorizat pentru fiecare element <h1> cu „secțiunea <valoarea secțiunii contorului>.”, Iar contorul „subsection” va fi contorizat pentru fiecare element <h2> cu „<valoarea contorului de secțiuni >. <valoarea contorului de subsecțiuni> ":

Exemplu:

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Un contor poate fi de asemenea util pentru a crea liste conturate, deoarece o nouă instanță a unui contor este creată automat în elementele copil. Aici folosim funcția counters() pentru a insera o șir între diferitele niveluri de nested counters:

Exemplu:

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

CSS Website Layout. Website Layout: headers, menus, content și footer.

Vezi videoclipul: CSS Website Layout. Website Layout: he... Vezi toată lecția: CSS Website Layout Citește teoria: CSS Website Layout. Website Layout: he...

Website Layout

Un site web este adesea împărțit în anteturi, meniuri, conținut și un subsol(headers, menus, content și footer):

Există tone de modele de aspect diferite din care să alegeți. Cu toate acestea, structura de mai sus este una dintre cele mai frecvente și vom analiza mai atent în acest tutorial.

CSS Website Layout. Antet.

Vezi videoclipul: CSS Website Layout. Antet. Vezi toată lecția: CSS Website Layout Citește teoria: CSS Website Layout. Antet.

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:

Exemplu:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Rezultat:

CSS Website Layout. Subsol. Website Layout Responsiv.

Vezi videoclipul: CSS Website Layout. Subsol. Website La... Vezi toată lecția: CSS Website Layout Citește teoria: CSS Website Layout. Subsol. Website La...

Subsol (Footer)

Subsolul este plasat în partea de jos a paginii. Adesea conține informații precum copyright și informații de contact:

Exemplu:

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Rezultat:

Website Layout Responsiv

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 Website Layout. Bară de navigare.

Vezi videoclipul: CSS Website Layout. Bară de navigare. Vezi toată lecția: CSS Website Layout Citește teoria: CSS Website Layout. Bară de navigare.

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:

Exemplu:

/* Containerul navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Link-uri Navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Link-uri - schimbați culoarea la hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Rezultat:

CSS Website Layout. Conţinut.

Vezi videoclipul: CSS Website Layout. Conţinut. Vezi toată lecția: CSS Website Layout Citește teoria: CSS Website Layout. Conţinut.

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)

Vom crea un 3-column layout și îl vom schimba într-un 1-column layout pe ecrane mai mici:

Exemplu:

/* Creați trei coloane egale care plutesc (float) unul lângă celălalt  */
.column {
  float: left;
  width: 33.33%;
}

/* Șterge floats după coloane  */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - face ca cele trei coloane să se stivească una peste alta, în loc să fie una lângă alta pe ecrane mai mici (600px lățime sau mai puțin) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Rezultat:

Sfat: Pentru a crea un aspect cu două coloane, schimbați lățimea la 50%. Pentru a crea un aspect cu 4 coloane, utilizați 25% etc.
Sfat: Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox. Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats (după cum se arată mai sus).

CSS Website Layout. Coloane inegale.

Vezi videoclipul: CSS Website Layout. Coloane inegale. Vezi toată lecția: CSS Website Layout Citește teoria: CSS Website Layout. Coloane inegale.

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:

Exemplu:

.column {
  float: left;
}

/* Coloana stânga și dreapta */
.column.side {
  width: 25%;
}

/* Coloana de mijloc */
.column.middle {
  width: 50%;
}

/* Responsive layout - face ca cele trei coloane să se stivească una peste alta în loc de una lângă alta */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Rezultat:

Unități CSS. Lungimi relative. Proprietatea lenght. Unitățile de lungime relativă: em, ex, ch, rem, vw, vh, vmin, vmax, %.

Vezi videoclipul: Unități CSS. Lungimi relative. Proprie... Vezi toată lecția: CSS Unități Citește teoria: Unități CSS. Lungimi relative. Proprie...

Lungimi relative (Relative Lengths)

Unitățile de lungime relativă specifică o lungime relativă la o altă proprietate lungime (length). Unitățile de lungime relativă scalează mai bine între diferite medii de redare.

Unitate	Descriere
em	În raport cu dimensiunea fontului elementului (2em înseamnă de 2 ori dimensiunea fontului curent)	Încercă-l
ex	În raport cu înălțimea x a fontului curent (rar folosit)	Încercă-l
ch	În raport cu lățimea "0" (zero)	Încercă-l
rem	Relativ la dimensiunea fontului elementului rădăcină	Încercă-l
vw	În raport cu 1% din lățimea afișajului *	Încercă-l
vh	În raport cu 1% din înălțimea viewport *	Încercă-l
vmin	În raport cu 1% din dimensiunea mai mică a portofoliului *	Încercă-l
vmax	În raport cu 1% din dimensiunea mai mare a portofoliului *	Încercă-l
%	În raport cu elementul părinte	Încercă-l

Sfat: Unitățile em și rem sunt practice în crearea unui aspect scalabil perfect!
* Viewport = dimensiunea ferestrei browserului. Dacă viewport are 50cm lățime, 1vw = 0,5cm.

Unități CSS. Asistență browser.

Vezi videoclipul: Unități CSS. Asistență browser. Vezi toată lecția: CSS Unități Citește teoria: Unități CSS. Asistență browser.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral unitatea de lungime.

Notă: Internet Explorer 9 acceptă vmin cu numele non-standard: vm.

Unități CSS. Valori de lungime: width, margin, padding, font-size. Unități de lungime: absolută și relativă. Lungimi absolute.

Vezi videoclipul: Unități CSS. Valori de lungime: width,... Vezi toată lecția: CSS Unități Citește teoria: Unități CSS. Valori de lungime: width,...

Unități CSS

CSS are mai multe unități diferite pentru exprimarea unei lungimi.
Multe proprietăți CSS iau valori „de lungime” (lenght), cum ar fi lățimea, marja, căptușirea, dimensiunea fontului etc (width, margin, padding, font-size).
Lungimea (lenght) este un număr urmat de o unitate de lungime, cum ar fi 10px, 2em etc.
Un whitespace nu poate apărea între număr și unitate. Cu toate acestea, dacă valoarea este 0, unitatea poate fi omisă.
Pentru unele proprietăți CSS, lungimile negative sunt permise.
Există două tipuri de unități de lungime: absolută și relativă.

Lungimi absolute (Absolute Lengths)

Unitățile de lungime absolută sunt fixe și o lungime exprimată în oricare dintre acestea va apărea exact ca acea dimensiune.
Unitățile de lungime absolută nu sunt recomandate pentru utilizare pe ecran, deoarece dimensiunile ecranului diferă atât de mult. Cu toate acestea, pot fi utilizate dacă este cunoscut suportul de ieșire, cum ar fi pentru aspectul tipăririi.

Unitate	Descriere
cm	centimetri Încearcă-l
mm	milimetri Încearcă-l
in	inci (1in = 96px = 2.54cm) Încearcă-l
px *	pixeli (1px = 1/96th of 1in) Încearcă-l
pt	puncte (1pt = 1/72 of 1in) Încearcă-l
pc	picas (1pc = 12 pt) Încearcă-l

* Pixelii (px) sunt în raport cu dispozitivul de vizualizare. Pentru dispozitivele cu valoare redusă, 1px este un pixel de dispozitiv (punct) al afișajului. Pentru imprimante și ecrane de înaltă rezoluție, 1px implică mai mulți pixeli de dispozitiv.

Specificitatea CSS. Ierarhia specificității. Stiluri în linie. ID-uri: #navbar. Clase, atribute și pseudo-clase: :hover, :focus. Elemente și pseudo-elemente: h1, div, :before și :after

Vezi videoclipul: Specificitatea CSS. Ierarhia specifici... Vezi toată lecția: CSS Specificitate Citește teoria: Specificitatea CSS. Ierarhia specifici...

Specificitatea CSS

Dacă există două sau mai multe reguli CSS conflictuale care indică același element, browserul respectă câteva reguli pentru a determina care este cea mai specifică și, prin urmare, câștigă.
Gândiți-vă la specificitate ca punctaj / rang care determină ce declarații de stil sunt aplicate unui element în cele din urmă.
Selectorul universal (*) are specificitate scăzută, în timp ce selectoarele ID sunt foarte specifice!

Notă: Specificitatea este un motiv comun pentru care regulile CSS nu se aplică anumitor elemente, deși credeți că ar trebui.

Ierarhia specificității (Specificity Hierarchy)

Fiecare selector își are locul în ierarhia specificității. Există patru categorii care definesc nivelul de specificitate al unui selector:

Stiluri în linie (Inline styles) - Un stil inline este atașat direct la elementul care urmează să fie stilat. Exemplu: <h1 style = "color: #ffffff;">.
ID-uri (IDs) - Un ID este un identificator unic pentru elementele paginii, cum ar fi #navbar.
Clase, atribute și pseudo-clase - Această categorie include .classes, [attributes] and pseudo-classes, cum ar fi :hover, :focus etc.
Elemente și pseudo-elemente - Această categorie include nume de elemente și pseudo-elemente, cum ar fi h1, div, :before și :after.

Specificitatea CSS. Reguli de specificitate. Specificitate egală. Selectoarele ID. Selectoarele de atribute.

Vezi videoclipul: Specificitatea CSS. Reguli de specific... Vezi toată lecția: CSS Specificitate Citește teoria: Specificitatea CSS. Reguli de specific...

Reguli de specificitate (Specificity Rules)

Specificitate egală: ultima regulă contează - Dacă aceeași regulă este scrisă de două ori în foaia de stil externă (external style sheet), atunci regula inferioară din foaia de stil (style sheet) este mai aproape de elementul care trebuie stilizat și, prin urmare, va fi aplicată:

Exemplu:

h1 {background-color: yellow;}
h1 {background-color: red;}

Ultima regulă este întotdeauna aplicată.

Selectoarele ID au o specificitate mai mare decât selectoarele de atribute - Uitați-vă la următoarele trei linii de cod:

Exemplu:

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Prima regulă este mai specifică decât celelalte două și va fi aplicată.

Specificitatea CSS. Cum se calculează specificitatea? Atributul style.

Vezi videoclipul: Specificitatea CSS. Cum se calculează... Vezi toată lecția: CSS Specificitate Citește teoria: Specificitatea CSS. Cum se calculează...

Cum se calculează specificitatea?

Memorează cum să calculezi specificitatea!

Începeți de la 0, adăugați 1000 pentru atributul style, adăugați 100 pentru fiecare ID, adăugați 10 pentru fiecare atribut, clasă sau pseudo-clasă, adăugați 1 pentru fiecare nume de element sau pseudo-element.

Luați în considerare aceste trei fragmente de cod:

Exemplu:

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

Specificitatea lui A este 1 (un element)
Specificitatea lui B este 101 (o referință ID și un element)
Specificitatea C este 1000 (stil în linie)

De la 1 <101 <1000, a treia regulă (C) are un nivel mai mare de specificitate și, prin urmare, va fi aplicată.

Specificitatea CSS. Selectoarele contextuale. Selector de elemente. Selector de clasă. Selectorul universal și valorile moștenite.

Vezi videoclipul: Specificitatea CSS. Selectoarele conte... Vezi toată lecția: CSS Specificitate Citește teoria: Specificitatea CSS. Selectoarele conte...

Selectoarele contextuale sunt mai specifice decât un singur selector de elemente - Foaia de stil încorporată este mai aproape de elementul care urmează să fie stilat. Deci în situația următoare

Exemplu:

Din fișier CSS extern:
#content h1 {background-color: red;}

În fișier HTML:
<style>
#content h1 {
  background-color: yellow;
}
</style>

Ultima normă va fi aplicată.

Un selector de clasă bate orice număr de selectori de elemente - un selector de clase, cum ar fi .intro beats h1, p, div, etc:

Exemplu:

.intro {background-color: yellow;}
h1 {background-color: red;}

Selectorul universal și valorile moștenite au o specificitate de 0 - *, body * și similare au o specificitate zero. Valorile moștenite au, de asemenea, o specificitate de 0.

Colțuri rotunjite CSS. CSS border-radius - Specificați fiecare colț. Proprietatea border-radius.

Vezi videoclipul: Colțuri rotunjite CSS. CSS border-radi... Vezi toată lecția: CSS Colțuri rotunjite Citește teoria: Colțuri rotunjite CSS. CSS border-radi...

CSS border-radius - Specificați fiecare colț

Proprietatea border-radius poate avea de la una până la patru valori. Iată regulile:

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):

Colțuri rotunjite CSS. Proprietatea CSS border-radius. Proprietățiile border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.

Vezi videoclipul: Colțuri rotunjite CSS. Proprietatea CS... Vezi toată lecția: CSS Colțuri rotunjite Citește teoria: Colțuri rotunjite CSS. Proprietatea CS...

CSS Colțuri rotunjite (CSS Rounded Corners)

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.

Sfat: Această proprietate vă permite să adăugați colțuri rotunjite la elemente!

Iată trei exemple:

1. Colțuri rotunjite pentru un element cu o culoare de fundal specificată:

2. Colțuri rotunjite pentru un element cu bordură:

3. Colțuri rotunjite pentru un element cu o imagine de fundal:

Colțuri rotunjite CSS. Codul pentru proprietatea border-radius care poate avea de la una până la patru valori.

Vezi videoclipul: Colțuri rotunjite CSS. Codul pentru pr... Vezi toată lecția: CSS Colțuri rotunjite Citește teoria: Colțuri rotunjite CSS. Codul pentru pr...

Codul pentru proprietatea border-radius care poate avea de la una până la patru valori:

Exemplu:

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Puteți crea, de asemenea, colțuri eliptice:

Exemplu:

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Colțuri rotunjite CSS. Codul pentru proprietatea CSS border-radius care definește raza colțurilor unui element.

Vezi videoclipul: Colțuri rotunjite CSS. Codul pentru pr... Vezi toată lecția: CSS Colțuri rotunjite Citește teoria: Colțuri rotunjite CSS. Codul pentru pr...

Codul pentru proprietatea CSS border-radius care definește raza colțurilor unui element:

Exemplu:

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Sfat: 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.

Colțuri rotunjite CSS. Proprietăți CSS Colțuri rotunjite.

Vezi videoclipul: Colțuri rotunjite CSS. Proprietăți CSS... Vezi toată lecția: CSS Colțuri rotunjite Citește teoria: Colțuri rotunjite CSS. Proprietăți CSS...

Proprietăți CSS Rounded Corners (Colțuri rotunjite)

Proprietate	Descriere
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 (top-left corner)
border-top-right-radius	Definește forma marginii din colțul din dreapta sus (top-right corner)
border-bottom-right-radius	Definește forma marginii din colțul din dreapta jos (bottom-right corner)
border-bottom-left-radius	Definește forma marginii din colțul din stânga jos (bottom-left corner)

CSS Imagini Border. Proprietatea CSS border-image.

Vezi videoclipul: CSS Imagini Border. Proprietatea CSS b... Vezi toată lecția: CSS Border Images Citește teoria: CSS Imagini Border. Proprietatea CSS b...

CSS Imagini Border (CSS Border Images)

Cu proprietatea CSS border-image, puteți seta o imagine care să fie utilizată ca border în jurul unui element.

Proprietatea CSS border-image

Proprietatea CSS border-image vă permite să specificați o imagine care trebuie utilizată în loc de bordura normală din jurul unui element.

Proprietatea are trei părți:

Imaginea utilizată ca border.
Unde să tăiați imaginea.
Definiți dacă secțiunile din mijloc trebuie repetate sau întinse.

Vom folosi următoarea imagine (numită "border.png"):

Proprietatea border-image ia imaginea și o taie în nouă secțiuni, precum o placă tic-tac-toe. Apoi plasează colțurile la colțuri, iar secțiunile din mijloc sunt repetate sau întinse după cum specificați.

Notă: Pentru ca border-image să funcționeze, elementul are nevoie și de setul de proprietăți border!

CSS Imagini Border. Proprietatea border-image. Exemple în care secțiunile din mijloc sunt repetate sau întinse.

Vezi videoclipul: CSS Imagini Border. Proprietatea borde... Vezi toată lecția: CSS Border Images Citește teoria: CSS Imagini Border. Proprietatea borde...

Proprietatea border-image. Exemple în care secțiunile din mijloc sunt repetate sau întinse

Aici, secțiunile din mijloc ale imaginii sunt repetate pentru a crea border:

Iată codul:

Exemplu:

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Aici, secțiunile din mijloc ale imaginii sunt întinse pentru a crea border:

Iată codul:

Exemplu:

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Sfat: Proprietatea border-image este de fapt o proprietate de tip shorthand pentru proprietățile border-image-source, border-image-slice, border-image-width, border-image-outset și border-image-repeat.

CSS Imagini Border. CSS border-image - Different Slice Values.

Vezi videoclipul: CSS Imagini Border. CSS border-image -... Vezi toată lecția: CSS Border Images Citește teoria: CSS Imagini Border. CSS border-image -...

CSS border-image - Different Slice Values

Different slice values schimbă complet aspectul border-ului:

Notă: Internet Explorer 10 și versiunile anterioare nu acceptă proprietatea border-image.

Iată codul:

Exemplu:

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

CSS Imagini Border. Proprietățiile CSS Border Image.

Vezi videoclipul: CSS Imagini Border. Proprietățiile CSS... Vezi toată lecția: CSS Border Images Citește teoria: CSS Imagini Border. Proprietățiile CSS...

Proprietățiile CSS Border Image

Proprietate	Descriere
border-image	O proprietate shorthand pentru setarea tuturor proprietăților border-image- *
border-image-source	Specifică calea către imaginea care va fi utilizată ca border
border-image-slice	Specifică modul de tăiere a border image
border-image-width	Specifică lățimile pentru border image
border-image-outset	Specifică cantitatea prin care se extinde zona border image dincolo de border box
border-image-repeat	Specifică dacă border image trebuie repetată, rotunjită sau întinsă

Fundaluri multiple CSS. Proprietățiile background-size, background-origin, background-clip. Proprietatea background shorthand.

Vezi videoclipul: Fundaluri multiple CSS. Proprietățiile... Vezi toată lecția: CSS Fundaluri multiple Citește teoria: Fundaluri multiple CSS. Proprietățiile...

CSS Fundaluri multiple (CSS Multiple Backgrounds)

În acest capitol veți învăța cum să adăugați mai multe imagini de fundal la un element.

Veți afla, de asemenea, despre următoarele proprietăți:

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.

Următorul exemplu are două imagini de fundal, prima imagine este o floare (aliniată la partea de jos și la dreapta/ bottom and right), iar a doua imagine este un fundal de hârtie (aliniat la colțul din stânga sus/ top-left corner):

Exemplu:

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Mai multe imagini de fundal pot fi specificate utilizând fie proprietățiile de fundal individuale (ca mai sus), fie proprietatea background shorthand.

Următorul exemplu utilizează proprietatea background shorthand (același rezultat ca și exemplul de mai sus):

Exemplu:

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Fundaluri multiple CSS. Definirea dimensiunilor mai multor imagini de fundal. Proprietatea background-size. Imagine de fundal de dimensiune completă..

Vezi videoclipul: Fundaluri multiple CSS. Definirea dime... Vezi toată lecția: CSS Fundaluri multiple Citește teoria: Fundaluri multiple CSS. Definirea dime...

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.

Următorul exemplu are trei imagini de fundal specificate, cu o dimensiune de fundal (background-size) diferită pentru fiecare imagine:

Exemplu:

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Imagine de fundal de dimensiune completă (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).

Următorul exemplu arată cum se face; Utilizați elementul <html> (elementul <html> este întotdeauna cel puțin înălțimea ferestrei browserului). Apoi, setați un fundal fix și centrat pe el. Apoi ajustați-i dimensiunea cu proprietatea background-size:

Exemplu:

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

Fundaluri multiple CSS. Imagine Hero. Proprietatea CSS background-origin. Valorile proprietății background-origin: border-box, padding-box, content-box.

Vezi videoclipul: Fundaluri multiple CSS. Imagine Hero.... Vezi toată lecția: CSS Fundaluri multiple Citește teoria: Fundaluri multiple CSS. Imagine Hero....

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.

Exemplu:

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

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.

Următorul exemplu ilustrează proprietatea background-origin:

Exemplu:

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Fundaluri multiple CSS. Proprietăți CSS de fundal avansate.

Vezi videoclipul: Fundaluri multiple CSS. Proprietăți CS... Vezi toată lecția: CSS Fundaluri multiple Citește teoria: Fundaluri multiple CSS. Proprietăți CS...

Proprietăți CSS de fundal avansate:

Proprietate	Descriere
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

Fundaluri multiple CSS. Dimensiunea fundalului CSS. Valorile background-size contain și cover.

Vezi videoclipul: Fundaluri multiple CSS. Dimensiunea fu... Vezi toată lecția: CSS Fundaluri multiple Citește teoria: Fundaluri multiple CSS. Dimensiunea fu...

Dimensiunea fundalului CSS (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).
Următorul exemplu redimensionează background image la o dimensiune mult mai mică decât imaginea originală (folosind pixeli):

Iată codul:

Exemplu:

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

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.

Următorul exemplu ilustrează utilizarea contain și cover:

Exemplu:

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Fundaluri multiple CSS. Proprietatea CSS background-clip. Valorile proprietății background-clip: border-box, padding-box, content-box.

Vezi videoclipul: Fundaluri multiple CSS. Proprietatea C... Vezi toată lecția: CSS Fundaluri multiple Citește teoria: Fundaluri multiple CSS. Proprietatea C...

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.

Următorul exemplu ilustrează proprietatea background-clip:

Exemplu:

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Culori CSS. Culori RGBA.

Vezi videoclipul: Culori CSS. Culori RGBA. Vezi toată lecția: CSS Culori Citește teoria: Culori CSS. Culori RGBA.

Culori CSS

CSS acceptă 140+ nume de culoare, valori HEX, valori RGB, valori RGBA, valori HSL, valori HSLA și opacitate.

Culori RGBA

Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu: rgba (roșu, verde, albastru, alfa)/rgba(red, green, blue, alpha). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).

Următorul exemplu definește diferite culori RGBA:

Exemplu:

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity(roșu cu opacitate) */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity(verde cu opacitate) */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity(albastru cu opacitate ) */

Rezultat:

Culori CSS. Culorile HSLA.

Vezi videoclipul: Culori CSS. Culorile HSLA. Vezi toată lecția: CSS Culori Citește teoria: Culori CSS. Culorile HSLA.

Culorile HSLA

Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare HSLA este specificată cu: hsla(hue, saturation, lightness, alpha), unde parametrul alfa definește opacitatea. Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).

Următorul exemplu definește diferite culori HSLA:

Exemplu:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity(verde cu opacitate)*/
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity(verde deschis cu opacitate)*/
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity(verde închis cu opacitate)*/
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity(verde pastelat cu opacitate)*/

Rezultat:

Culori CSS. Culori HSL.

Vezi videoclipul: Culori CSS. Culori HSL. Vezi toată lecția: CSS Culori Citește teoria: Culori CSS. Culori HSL.

Culori HSL

HSL înseamnă Hue, Saturation and Lightness.
O valoare de culoare HSL este specificată cu: hsl(hue, saturation, lightness).

Hue este un grad pe roata de culoare (de la 0 la 360):

0 (sau 360) este roșu
120 este verde
240 este albastru

Saturation este o valoare procentuală: 100% este culoarea completă.
Lightness este, de asemenea, un procent; 0% este întunecat (negru) și 100% alb.

Următorul exemplu definește diferite culori HSL:

Exemplu:

#p1 {background-color: hsl(120, 100%, 50%);}  /* green(verde) */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green(verde deschis ) */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green(verde închis) */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green(verde pastel) */

Rezultat:

Culori CSS. Opacitate.

Vezi videoclipul: Culori CSS. Opacitate. Vezi toată lecția: CSS Culori Citește teoria: Culori CSS. Opacitate.

Opacitate

Proprietatea CSS opacity stabilește opacitatea pentru întregul element (atât culoarea de fundal, cât și textul vor fi opace / transparente).
Valoarea proprietății de opacitate (opacity) trebuie să fie un număr între 0,0 (complet transparent) și 1,0 (complet opac).

Observați că textul de mai sus va fi, de asemenea, transparent / opac!

Următorul exemplu prezintă diferite elemente cu opacitate:

Exemplu:

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity(roșu cu opacitate) */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity(verde cu opacitate) */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity(albastru cu opacitate) */

Rezultat:

Gradienți CSS. Utilizarea transparenței. Repetarea unui gradient liniar. Funcția repeating-linear-gradient().

Vezi videoclipul: Gradienți CSS. Utilizarea transparențe... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Utilizarea transparențe...

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ță).

Următorul exemplu arată un gradient liniar care pornește de la stânga. Începe complet transparent, trecând la roșu complet:

Exemplu:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Repetarea unui gradient liniar (Repeating a linear-gradient)

Funcția repeating-linear-gradient() este utilizată pentru a repeta gradienți liniari:

Exemplu:

Un gradient liniar repetat:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Gradienți CSS. Gradienți liniari. Gradienți radiali. Gradient liniar - de sus în jos.

Vezi videoclipul: Gradienți CSS. Gradienți liniari. Grad... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Gradienți liniari. Grad...

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.

Sintaxă

Gradient liniar - de sus în jos (Top to Bottom) (aceasta este implicit)

Următorul exemplu arată un gradient liniar care începe de sus. Începe roșu, iar trecerea se face la galben:

Exemplu:

#grad {
  background-image: linear-gradient(red, yellow);
}

Gradienți CSS. Utilizarea unghiurilor.

Vezi videoclipul: Gradienți CSS. Utilizarea unghiurilor. Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Utilizarea unghiurilor.

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

Sintaxă

Unghiul este specificat ca un unghi între o linie orizontală și linia de gradient.

Următorul exemplu arată modul de utilizare a unghiurilor pe gradienți liniari:

Exemplu:

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Gradienți CSS. Folosirea mai multor opriri de culori.

Vezi videoclipul: Gradienți CSS. Folosirea mai multor op... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Folosirea mai multor op...

Folosirea mai multor opriri de culori (Using Multiple Color Stops)

Următorul exemplu arată un gradient liniar (de sus în jos) cu mai multe opriri de culoare(multiple color stops):

Exemplu:

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Următorul exemplu arată cum se creează un gradient liniar (de la stânga la dreapta) cu culoarea curcubeului și cu un text:

Exemplu:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Gradienți CSS. Setați forma. Utilizarea cuvintelor cheie de dimensiuni diferite.

Vezi videoclipul: Gradienți CSS. Setați forma. Utilizare... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Setați forma. Utilizare...

Setați forma (Set Shape)

Parametrul shape definește forma. Poate lua cercul de valori sau elipsa. Valoarea implicită este elipsa.

Următorul exemplu arată un gradient radial sub forma unui cerc:

Exemplu:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

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

Exemplu:

Un gradient radial cu cuvinte cheie de dimensiuni diferite:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Gradienți CSS. Repetarea unui gradient radial. Funcția repeating-radial-gradient(). Proprietăți CSS pentru gradient.

Vezi videoclipul: Gradienți CSS. Repetarea unui gradient... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Repetarea unui gradient...

Repetarea unui gradient radial (Repeating a radial-gradient)

Funcția repeating-radial-gradient() este utilizată pentru a repeta gradienți radiali:

Exemplu:

Un gradient radial repetat:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Notă: Internet Explorer 9 și versiunile anterioare nu acceptă gradienți.

Proprietăți CSS pentru gradient

Următorul tabel listează proprietățiile gradientului CSS:

Proprietate	Descriere
background-image	Setează una sau mai multe imagini de fundal pentru un element

Gradienți CSS. Gradient liniar - de la stânga la dreapta. Gradient liniar - diagonală.

Vezi videoclipul: Gradienți CSS. Gradient liniar - de la... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Gradient liniar - de la...

Gradient liniar - de la stânga la dreapta (Linear Gradient - Left to Right)

Următorul exemplu arată un gradient liniar care pornește de la stânga. Începe roșu, trecerea se face la galben:

Exemplu:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

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.

Următorul exemplu arată un gradient liniar care începe în stânga sus (și merge spre dreapta jos). Începe roșu, trecerea se face la galben:

Exemplu:

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Gradienți CSS. Gradienți radiali CSS. Gradient radial - Opriri uniforme ale culorilor. Gradient radial - Opriri de culori distanțate diferit.

Vezi videoclipul: Gradienți CSS. Gradienți radiali CSS.... Vezi toată lecția: CSS Gradienți Citește teoria: Gradienți CSS. Gradienți radiali CSS....

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

Sintaxă

Î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ă)

Următorul exemplu arată un gradient radial cu opriri uniforme de culoare distanțate:

Exemplu:

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Gradient radial - Opriri de culori distanțate diferit / Radial Gradient - Differently Spaced Color Stops

Următorul exemplu arată un gradient radial cu opriri de culoare distanțate diferit:

Exemplu:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Efecte de umbră CSS. Efecte text-shadow.

Vezi videoclipul: Efecte de umbră CSS. Efecte text-shado... Vezi toată lecția: CSS Efecte de umbră Citește teoria: Efecte de umbră CSS. Efecte text-shado...

Efecte text-shadow

Adăugați o culoare la umbră:

Exemplu:

h1 {
  text-shadow: 2px 2px red;
}

Apoi, adăugați un efect de estompare la umbră:

Exemplu:

h1 {
  text-shadow: 2px 2px 5px red;
}

Următorul exemplu arată un text alb cu umbră neagră:

Exemplu:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Următorul exemplu arată o umbră de strălucire neon roșu:

Exemplu:

h1 {
  text-shadow: 0 0 3px #FF0000;
}

Efecte de umbră CSS. Proprietatea CSS box-shadow.

Vezi videoclipul: Efecte de umbră CSS. Proprietatea CSS... Vezi toată lecția: CSS Efecte de umbră Citește teoria: Efecte de umbră CSS. Proprietatea CSS...

Proprietatea CSS box-shadow

Proprietatea CSS box-shadow aplică umbre pentru elemente.
În cea mai simplă utilizare, specificați doar umbra orizontală și umbra verticală:

Exemplu:

div {
  box-shadow: 10px 10px;
}

Apoi, adăugați o culoare la umbră:

Exemplu:

div {
  box-shadow: 10px 10px grey;
}

Apoi, adăugați un efect de estompare la umbră:

Exemplu:

div {
  box-shadow: 10px 10px 5px grey;
}

Efecte de umbră CSS. Cards. Proprietăți CSS Shadow.

Vezi videoclipul: Efecte de umbră CSS. Cards. Proprietăț... Vezi toată lecția: CSS Efecte de umbră Citește teoria: Efecte de umbră CSS. Cards. Proprietăț...

Cards

Un exemplu de utilizare a proprietății box-shadow pentru a crea paper-like cards:

Exemplu:

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Proprietăți CSS Shadow

Următorul tabel listează proprietățiile CSS shadow:

Proprietate	Descriere
box-shadow	Adaugă una sau mai multe umbre la un element
text-shadow	Adăugă una sau mai multe umbre la un text

Efecte de umbră CSS. Proprietăți: text-shadow, box-shadow. Proprietatea CSS text-shadow.

Vezi videoclipul: Efecte de umbră CSS. Proprietăți: text... Vezi toată lecția: CSS Efecte de umbră Citește teoria: Efecte de umbră CSS. Proprietăți: text...

Efecte de umbră CSS (CSS Shadow Effects)

Cu CSS puteți adăuga umbră textului și elementelor.

În acest capitol veți afla despre următoarele proprietăți:

text-shadow
box-shadow

CSS Text Shadow

Proprietatea CSS text-shadow aplică umbre textului.

În cea mai simplă utilizare, specificați doar umbra orizontală (2px) și umbra verticală (2px):

Notă: Internet Explorer 9 și versiunile anterioare, nu acceptă proprietatea text-shadow.

Exemplu:

h1 {
  text-shadow: 2px 2px;
}

Efecte de umbră CSS. Umbre multiple.

Vezi videoclipul: Efecte de umbră CSS. Umbre multiple. Vezi toată lecția: CSS Efecte de umbră Citește teoria: Efecte de umbră CSS. Umbre multiple.

Umbre multiple (Multiple Shadows)

Pentru a adăuga mai mult de o umbră textului, puteți adăuga o listă de umbre separate de virgule.
Următorul exemplu arată o umbră de strălucire neon roșu și albastru:

Exemplu:

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Următorul exemplu arată un text alb cu umbra neagră, albastră și albastru închis:

Exemplu:

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Puteți utiliza, de asemenea, proprietatea text-shadow pentru a crea un chenar simplu în jurul unui text (fără umbre):

Exemplu:

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Efecte de umbră CSS. Umbre la pseudo-elemente ::before și ::after pentru a crea un efect interesant.

Vezi videoclipul: Efecte de umbră CSS. Umbre la pseudo-e... Vezi toată lecția: CSS Efecte de umbră Citește teoria: Efecte de umbră CSS. Umbre la pseudo-e...

Puteți adăuga, de asemenea, umbre la pseudo-elemente ::before și ::after pentru a crea un efect interesant:

Exemplu:

#boxshadow {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% */
  height: 100px;
  bottom: 0;
}

Efecte de text CSS. CSS Text Overflow, Word Wrap, Reguli de line breaking și moduri de scriere. Proprietăți: text-overflow, word-wrap, word-break, writing-mode.

Vezi videoclipul: Efecte de text CSS. CSS Text Overflow,... Vezi toată lecția: CSS Efecte de text Citește teoria: Efecte de text CSS. CSS Text Overflow,...

Efecte de text CSS (CSS Text Effects)

CSS Text Overflow, Word Wrap, Reguli de line breaking și moduri de scriere

În acest capitol veți afla despre următoarele proprietăți:

text-overflow
word-wrap
word-break
writing-mode

CSS Text Overflow

Proprietatea CSS text-overflow specifică modul în care conținutul overflowed care nu este afișat trebuie semnalat utilizatorului.

Poate fi decupat:

sau poate fi redat ca elipsă (...):

Codul CSS este următorul:

Exemplu:

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

Următorul exemplu arată cum puteți afișa conținutul overflowed când treceți peste element:

Exemplu:

div.test:hover {
  overflow: visible;
}

Efecte de text CSS. Mod de scriere CSS. Proprietatea CSS writing-mode.

Vezi videoclipul: Efecte de text CSS. Mod de scriere CSS... Vezi toată lecția: CSS Efecte de text Citește teoria: Efecte de text CSS. Mod de scriere CSS...

Mod de scriere CSS (CSS Writing Mode)

Proprietatea CSS writing-mode specifică dacă liniile de text sunt dispuse orizontal sau vertical.

Următorul exemplu arată câteva moduri de scriere diferite:

Exemplu:

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Efecte de text CSS. CSS Word Wrapping. Proprietatea CSS word-wrap.

Vezi videoclipul: Efecte de text CSS. CSS Word Wrapping.... Vezi toată lecția: CSS Efecte de text Citește teoria: Efecte de text CSS. CSS Word Wrapping....

CSS Word Wrapping

Proprietatea CSS word-wrap permite cuvintelor lungi să poată fi broken și wrap pe linia următoare.
Dacă un cuvânt este prea lung pentru a se încadra într-o zonă, acesta se extinde în afara:

Proprietatea word-wrap vă permite să forțați textul să fie wrap - chiar dacă înseamnă împărțirea în mijlocul unui cuvânt:

Codul CSS este următorul:

Exemplu:

Scrieți cuvinte lungi pentru a putea fi broken și wrap pe linia următoare:

p {
  word-wrap: break-word;
}

Efecte de text CSS. CSS Word Breaking. Proprietatea CSS word-break.

Vezi videoclipul: Efecte de text CSS. CSS Word Breaking.... Vezi toată lecția: CSS Efecte de text Citește teoria: Efecte de text CSS. CSS Word Breaking....

CSS Word Breaking

Proprietatea CSS word-break specifică regulile de rupere a liniei.

Codul CSS este următorul:

Exemplu:

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

Notă: Proprietatea break-word nu este acceptată în versiunile Opera 12 și anterioare.

Efecte de text CSS. Proprietăți CSS Efecte de text.

Vezi videoclipul: Efecte de text CSS. Proprietăți CSS Ef... Vezi toată lecția: CSS Efecte de text Citește teoria: Efecte de text CSS. Proprietăți CSS Ef...

Proprietăți CSS Efecte de text

Următorul tabel listează proprietățiile CSS Efecte de text:

Proprietate	Descriere
text-align-last	Specifică modul de aliniere la ultima linie a unui text
text-justify	Specifică modul în care textul justify ar trebui să fie aliniat și distanțat
text-overflow	Specifică modul în care conținutul revărsat care nu este afișat trebuie semnalat utilizatorului
word-break	Specifică regulile de rupere de linie pentru scripturile care nu sunt CJK
word-wrap	Permite cuvintele lungi pentru a putea fi broken și wrap pe linia următoare
writing-mode	Specifică dacă liniile de text sunt dispuse orizontal sau vertical

Fonturi Web CSS. Regula CSS @ font-face. Diferite formate de fonturi. Fonturi TrueType (TTF). Fonturi OpenType (OTF). Web Open Font Format (WOFF). Web Open Font Format (WOFF 2.0). Fonturi / forme SVG. Fonturi OpenType încorporate (EOT).

Vezi videoclipul: Fonturi Web CSS. Regula CSS @ font-fac... Vezi toată lecția: CSS Fonturi Web Citește teoria: Fonturi Web CSS. Regula CSS @ font-fac...

Fonturi Web CSS

Regula CSS @ font-face

Fonturile web permit proiectanților web să utilizeze fonturi care nu sunt instalate pe computerul utilizatorului.
Când a-ți găsit / cumpărat fontul pe care doriți să-l utilizați, includeți doar fișierul font pe serverul dvs. web, iar acesta va fi descărcat automat la nevoie.
Fonturile dvs. proprii sunt definite în regula CSS @font-face.

Diferite formate de fonturi (Different Font Formats)

Fonturi TrueType (TTF)

TrueType este un standard de font dezvoltat la sfârșitul anilor 1980, de Apple și Microsoft. TrueType este cel mai frecvent format de font atât pentru sistemele de operare Mac OS cât și pentru Microsoft Windows.

Fonturi OpenType (OTF)

OpenType este un format pentru fonturile computerului scalabile. A fost construit pe TrueType și este marcă înregistrată a Microsoft. Fonturile OpenType sunt utilizate astăzi frecvent pe majore platforme de calculatoare.

Web Open Font Format (WOFF)

WOFF este un format de font folosit pentru paginile web. A fost dezvoltat în 2009 și este acum o recomandare a W3C. WOFF este în esență OpenType sau TrueType cu compresie și metadate suplimentare. Scopul este de a sprijini distribuirea fontului de la un server la un client printr-o rețea cu restricții de lățime de bandă.

Web Open Font Format (WOFF 2.0)

Fontul TrueType / OpenType care asigură o compresie mai bună decât WOFF 1.0.

Fonturi / forme SVG

Fonturile SVG permit SVG-ului să fie utilizat ca glife la afișarea textului. Specificația SVG 1.1 definește un modul de font care permite crearea de fonturi într-un document SVG. Puteți aplica CSS și în documentele SVG, iar regula @ font-face poate fi aplicată textului în documente SVG.

Fonturi OpenType încorporate (EOT)

Fonturile EOT sunt o formă compactă de fonturi OpenType proiectate de Microsoft pentru a fi utilizate ca fonturi încorporate pe paginile web.

Fonturi Web CSS. Asistență browser pentru formate de fonturi.

Vezi videoclipul: Fonturi Web CSS. Asistență browser pen... Vezi toată lecția: CSS Fonturi Web Citește teoria: Fonturi Web CSS. Asistență browser pen...

Asistență browser pentru formate de fonturi

Numerele din tabel specifică prima versiune de browser care acceptă complet formatul de font.

* IE: formatul fontului funcționează numai atunci când este setat să fie „instalabil”.
* Firefox: Nu este acceptat implicit, dar poate fi activat (trebuie să setați un steag la „true” pentru a utiliza WOFF2).

Fonturi Web CSS. Utilizarea Bold Text. Regula @font-face.

Vezi videoclipul: Fonturi Web CSS. Utilizarea Bold Text.... Vezi toată lecția: CSS Fonturi Web Citește teoria: Fonturi Web CSS. Utilizarea Bold Text....

Utilizarea Bold Text

Trebuie să adăugați o altă regulă @font-face care conține descriptori pentru text bold:

Exemplu:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Fișierul "sansation_bold.woff" este un alt fișier de caractere, care conține caractere bolduite pentru fontul Sansation.
Navigatorii vor folosi acest lucru ori de câte ori o bucată de text cu font-family "myFirstFont" ar trebui să fie redată.
În acest fel, puteți avea multe reguli @font-face pentru același font.

Fonturi Web CSS. Utilizarea fontului dorit. Regula @font-face.

Vezi videoclipul: Fonturi Web CSS. Utilizarea fontului d... Vezi toată lecția: CSS Fonturi Web Citește teoria: Fonturi Web CSS. Utilizarea fontului d...

Utilizarea fontului dorit

În regula @font-face; mai întâi definiți un nume pentru font (de ex. myFirstFont) și apoi indicați fișierul font.

Sfat: Utilizați întotdeauna litere minuscule pentru adresa URL a fontului. Literele mari, pot da rezultate neașteptate în IE.

Pentru a utiliza fontul pentru un element HTML, consultați numele fontului (myFirstFont) prin proprietatea familiei de fonturi:

Exemplu:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Fonturi Web CSS. Descriptori de fonturi CSS.

Vezi videoclipul: Fonturi Web CSS. Descriptori de fontur... Vezi toată lecția: CSS Fonturi Web Citește teoria: Fonturi Web CSS. Descriptori de fontur...

Descriptori de fonturi CSS (CSS Font Descriptors)

Următorul tabel prezintă toti descriptorii de fonturi care pot fi definite în regula @font-face:

Descriptor	Valori	Descriere
font-family	name	Obligatoriu. Definește un nume pentru font
src	URL	Obligatoriu. Definește adresa URL a fișierului font
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Opțional. Definește modul în care trebuie întins fontul. Implicit este "normal"
font-style	normal italic oblique	Opțional. Definește modul în care trebuie să fie stilat fontul. Implicit este „normal”
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Opțional. Definește modul în care trebuie să fie stilat fontul. Implicit este „normal”
unicode-range	unicode-range	Opțional. Definește îndrăzneala fontului. Implicit este „normal” Definește gama de caractere UNICODE pe care le suportă fontul. Valoarea implicită este „U + 0-10FFFF”

CSS Transformări 2D. Metode de transformare 2D: translate, rotate, scaleX, scaleY, scale, skewX, skewY, skew, matrix. Metoda translate.

Vezi videoclipul: CSS Transformări 2D. Metode de transfo... Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metode de transfo...

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()

Metoda translate() mută un element din poziția sa curentă (în funcție de parametrii indicați pentru axa X și axa Y).

Următorul exemplu mută elementul <div> 50 pixeli spre dreapta și 100 pixeli în jos din poziția sa actuală:

Exemplu:

div {
  transform: translate(50px, 100px);
}

CSS Transformări 2D. Metoda rotate().

Vezi videoclipul: CSS Transformări 2D. Metoda rotate(). Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metoda rotate().

Metoda rotate()

Metoda rotate() roteste un element în sensul acelor de ceasornic sau în sens contrar acelor de ceasornic, în conformitate cu un anumit grad.

Următorul exemplu roteste elementul <div> în sens orar cu 20 de grade:

Exemplu:

div {
  transform: rotate(20deg);
}

Utilizarea valorilor negative va roti elementul în sensul acelor de ceasornic.

Următorul exemplu roteste elementul <div> în sensul acelor de ceasornic cu 20 de grade:

Exemplu:

div {
  transform: rotate(-20deg);
}

CSS Transformări 2D. Metoda scale().

Vezi videoclipul: CSS Transformări 2D. Metoda scale(). Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metoda scale().

Metoda scale()

Metoda scale() crește sau scade dimensiunea unui element (în funcție de parametrii dați pentru lățime și înălțime).

Următorul exemplu mărește elementul <div> pentru a fi de două ori lățimea inițială și de trei ori înălțimea inițială:

Exemplu:

div {
  transform: scale(2, 3);
}

Următorul exemplu reduce elementul <div> la jumătate din lățimea și înălțimea inițială:

Exemplu:

div {
  transform: scale(0.5, 0.5);
}

CSS Transformări 2D. Metoda scaleX(). Metoda scaleY().

Vezi videoclipul: CSS Transformări 2D. Metoda scaleX().... Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metoda scaleX()....

Metoda scaleX()

Metoda scaleX() crește sau scade lățimea unui element.

Următorul exemplu mărește elementul <div> de două ori din lățimea sa inițială:

Exemplu:

div {
  transform: scaleX(2);
}

Următorul exemplu scade elementul <div> la jumătate din lățimea sa inițială:

Exemplu:

div {
  transform: scaleX(0.5);
}

Metoda scaleY()

Metoda scaleY() crește sau scade înălțimea unui element.

Următorul exemplu mărește elementul <div> de trei ori înălțimea inițială:

Exemplu:

div {
  transform: scaleY(3);
}

Următorul exemplu reduce elementul <div> la jumătate din înălțimea inițială:

Exemplu:

div {
  transform: scaleY(0.5);
}

CSS Transformări 2D. Metoda skew().

Vezi videoclipul: CSS Transformări 2D. Metoda skew(). Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metoda skew().

Metoda skew()

Metoda skew() frânează un element de-a lungul axelor X și Y de unghiurile date.

Următorul exemplu înclină elementul <div> de 20 de grade de-a lungul axei X și de 10 grade de-a lungul axei Y:

Exemplu:

div {
  transform: skew(20deg, 10deg);
}

Dacă al doilea parametru nu este specificat, acesta are o valoare zero. Deci, următorul exemplu înclină elementul <div> de 20 de grade de-a lungul axei X:

Exemplu:

div {
  transform: skew(20deg);
}

CSS Transformări 2D. CSS Metode de transformare 2D.

Vezi videoclipul: CSS Transformări 2D. CSS Metode de tra... Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. CSS Metode de tra...

CSS Metode de transformare 2D

Funcție	Descriere
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(x-angle,y-angle)	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 Transformări 2D. Proprietatea transform. Asistență browser. Prefixuri specifice browserului: ms, webkit.

Vezi videoclipul: CSS Transformări 2D. Proprietatea tra... Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Proprietatea tra...

CSS Transformări 2D

Transformările CSS vă permit să vă deplasați, să rotiți, să scalați și să înlăturați elemente.
În acest capitol veți afla despre următoarele proprietăți CSS:

1. 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:

Exemplu:

div {
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari prior 9.0 */
  transform: rotate(20deg); /* Standard syntax */
}

CSS Transformări 2D. Metoda skewX(). Metoda skewY().

Vezi videoclipul: CSS Transformări 2D. Metoda skewX(). M... Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metoda skewX(). M...

Metoda skewX()

Metoda skewX() frânează un element de-a lungul axei X cu unghiul dat.

Următorul exemplu înclină elementul <div> de 20 de grade de-a lungul axei X:

Exemplu:

div {
  transform: skewX(20deg);
}

Metoda skewY()

Metoda skewY() frânează un element de-a lungul axei Y de unghiul dat.

Următorul exemplu înclină elementul <div> de 20 de grade de-a lungul axei Y:

Exemplu:

div {
  transform: skewY(20deg);
}

CSS Transformări 2D. Metoda matrix(). Parametrii: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()). Proprietăți de transformare CSS.

Vezi videoclipul: CSS Transformări 2D. Metoda matrix().... Vezi toată lecția: CSS Transformări 2D Citește teoria: CSS Transformări 2D. Metoda matrix()....

Metoda matrix()

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())

Exemplu:

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Proprietăți de transformare CSS

Următorul tabel listează toate proprietățiile de transformare 2D:

Proprietate	Descriere
transform	Aplică o transformare 2D sau 3D la un element
transform-origin	Vă permite să schimbați poziția asupra elementelor transformate

CSS Transformări 3D. CSS Metode de transformare 3D: rotateX(), rotateY(), rotateZ(). Metoda rotateX(). Metoda rotateY(). Metoda rotateZ().

Vezi videoclipul: CSS Transformări 3D. CSS Metode de tra... Vezi toată lecția: CSS Transformări 3D Citește teoria: CSS Transformări 3D. CSS Metode de tra...

CSS Metode de transformare 3D

Cu proprietatea de transformare CSS puteți utiliza următoarele metode de transformare 3D:

rotateX()
rotateY()
rotateZ()

Metoda rotateX()

Metoda rotateX() roteste un element in jurul axei X la un anumit grad:

Exemplu:

#myDiv {
  transform: rotateX(150deg);
}

Metoda rotateY()

Metoda rotateY() roteste un element in jurul axei sale Y la un anumit grad:

Exemplu:

#myDiv {
  transform: rotateY(130deg);
}

Metoda rotateZ()

Metoda rotateZ() roteste un element in jurul axei Z la un anumit grad:

Exemplu:

#myDiv {
  transform: rotateZ(90deg);
}

CSS Transformări 3D. Proprietăți de transformare CSS. CSS Metode de transformare 3D.

Vezi videoclipul: CSS Transformări 3D. Proprietăți de tr... Vezi toată lecția: CSS Transformări 3D Citește teoria: CSS Transformări 3D. Proprietăți de tr...

Proprietăți de transformare CSS

Următorul tabel listează toate proprietățiile de transformare 3D:

Proprietate	Descriere
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

Funcție	Descriere
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 Transformări 3D. Proprietatea transform. Asistență browser. Prefixuri specifice browserului.

Vezi videoclipul: CSS Transformări 3D. Proprietatea tran... Vezi toată lecția: CSS Transformări 3D Citește teoria: CSS Transformări 3D. Proprietatea tran...

CSS Transformări 3D

CSS acceptă, de asemenea, transformări 3D.

În acest capitol veți afla despre următoarele proprietăți CSS:

1. 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 (-webkit-) pentru a înțelege proprietățiile de transformare 3D:

Exemplu:

#myDiv {
  -webkit-transform: rotateY(130deg); /* Safari prior 9.0 */
  transform: rotateY(130deg); /* Standard syntax */
}

Tranziții CSS. Modificarea mai multor valori ale proprietății. Specificarea curbei de viteză a tranziției. Proprietatea transition-timing-function.

Vezi videoclipul: Tranziții CSS. Modificarea mai multor... Vezi toată lecția: CSS Tranziții Citește teoria: Tranziții CSS. Modificarea mai multor...

Modificați mai multe valori ale proprietății

Următorul exemplu adaugă un efect de tranziție atât pentru proprietatea lățimii (width), cât și pentru înălțime (height), cu o durată de 2 secunde pentru lățime (width) și 4 secunde pentru înălțime (height):

Exemplu:

div {
  transition: width 2s, height 4s;
}

Specificați curba de viteză (speed curve) a tranziției

Proprietatea transition-timing-function specifică curba de viteză (speed curve) a efectului de tranziție.

Proprietatea transition-timing-function poate avea următoarele valori:

ease - specifică un efect de tranziție cu început lent, apoi rapid, apoi sfârșit lent (acest lucru este implicit)
linear - specifică un efect de tranziție cu aceeași viteză de la început până la sfârșit
ease-in - specifică un efect de tranziție cu pornire lentă
ease-out - specifică un efect de tranziție cu sfârșit lent
ease-in-out - specifică un efect de tranziție cu început și sfârșit lent
cubic-bezier(n,n,n,n) - vă permite să definiți propriile valori într-o funcție cub-bezier

Următorul exemplu arată câteva dintre diferitele curbe de viteză (speed curve) care pot fi utilizate:

Exemplu:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Tranziții CSS. Proprietăți CSS tranziții.

Vezi videoclipul: Tranziții CSS. Proprietăți CSS tranziț... Vezi toată lecția: CSS Tranziții Citește teoria: Tranziții CSS. Proprietăți CSS tranziț...

Proprietăți CSS tranziții

Următorul tabel listează toate proprietățiile CSS transition:

Proprietate	Descriere
transition	O proprietate scurtă pentru setarea celor patru proprietăți de tranziție într-o singură proprietate
transition-delay	Specifică o întârziere (în secunde) pentru efectul de tranziție
transition-duration	Specifică câte secunde sau milisecunde durează un efect de tranziție
transition-property	Specifică numele proprietății CSS pentru care este efectul de tranziție
transition-timing-function	Specifică curba de viteză a efectului de tranziție

Tranziții CSS. Proprietăți: transition, transition-delay, transition-duration, transition-property, transition-timing-function. Asistență browser pentru tranziții. Prefixuri specifice browserului.

Vezi videoclipul: Tranziții CSS. Proprietăți: transition... Vezi toată lecția: CSS Tranziții Citește teoria: Tranziții CSS. Proprietăți: transition...

Tranziții CSS

Tranzițiile CSS vă permit să modificați valorile proprietății fără probleme, pe o durată dată.

În acest capitol veți afla despre următoarele proprietăți:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Asistență browser pentru tranziții

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.

Prefixuri specifice browserului

Unele browsere mai vechi au nevoie de prefixuri specifice (-webkit-) pentru a înțelege proprietățiile de tranziție:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* Safari prior 6.1 */
  transition: width 2s;
}

Tranziții CSS. Cum se utilizează tranzițiile CSS? Proprietatea width.

Vezi videoclipul: Tranziții CSS. Cum se utilizează tranz... Vezi toată lecția: CSS Tranziții Citește teoria: Tranziții CSS. Cum se utilizează tranz...

Cum se utilizează tranzițiile CSS?

Pentru a crea un efect de tranziție, trebuie să specificați două lucruri:

proprietatea CSS la care doriți să adăugați un efect
durata efectului

Notă: Dacă partea de durată nu este specificată, tranziția nu va avea niciun efect, deoarece valoarea implicită este 0.

Următorul exemplu prezintă un element <div> 100px * 100px red. Elementul <div> a specificat, de asemenea, un efect de tranziție pentru proprietatea de lățime, cu o durată de 2 secunde:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

Efectul de tranziție va începe atunci când proprietatea CSS (lățimea/width) specificată modifică valoarea.
Acum, să specificăm o nouă valoare pentru proprietatea de lățime/width atunci când un utilizator se alătură peste elementul <div>:

Exemplu:

div:hover {
  width: 300px;
}

Observați că atunci când cursorul se decuplează din element, acesta se va schimba treptat înapoi la stilul său original.

Tranziții CSS. Întârzie efectul de tranziție. Proprietatea transition-delay. Tranziție + transformare. Proprietatea shorthand transition.

Vezi videoclipul: Tranziții CSS. Întârzie efectul de tra... Vezi toată lecția: CSS Tranziții Citește teoria: Tranziții CSS. Întârzie efectul de tra...

Întârzie efectul de tranziție (Delay the Transition Effect)

Proprietatea transition-delay specifică o întârziere (în secunde) pentru efectul de tranziție.

Următorul exemplu are o întârziere de 1 secundă înainte de a începe:

Exemplu:

div {
  transition-delay: 1s;
}

Tranziție + transformare (Transition + Transformation)

Următorul exemplu adaugă un efect de tranziție la transformare:

Exemplu:

div {
  transition: width 2s, height 2s, transform 2s;
}

Mai multe exemple de tranziție

Proprietățiile CSS transition pot fi specificate una câte una, astfel:

Exemplu:

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

sau folosind proprietatea shorthand transition:

Exemplu:

div {
  transition: width 2s linear 1s;
}

Animații CSS. Prefixuri specifice browserului.

Vezi videoclipul: Animații CSS. Prefixuri specifice brow... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Prefixuri specifice brow...

Prefixuri specifice browserului

Unele browsere mai vechi au nevoie de prefixe specifice (-webkit-) pentru a înțelege proprietățiile de animație:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Animații CSS. Proprietăți: @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode, animation. Asistență browser pentru animații.

Vezi videoclipul: Animații CSS. Proprietăți: @keyframes,... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Proprietăți: @keyframes,...

Animații CSS

CSS permite animarea elementelor HTML fără a utiliza JavaScript sau Flash!

În acest capitol veți afla despre următoarele proprietăți:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Asistență browser pentru animații (Browser Support for Animations)

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.

Animații CSS. Ce sunt animațiile CSS? Regula @keyframes.

Vezi videoclipul: Animații CSS. Ce sunt animațiile CSS?... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Ce sunt animațiile CSS?...

Ce sunt animațiile CSS?

O animație permite unui element să se schimbe treptat de la un stil la altul.
Puteți modifica câte proprietăți CSS doriți, de câte ori doriți.
Pentru a utiliza animația CSS, trebuie mai întâi să specificați câteva cadre cheie pentru animație.
Cadrele cheie conțin ce stiluri va avea elementul în anumite momente.

Regula @keyframes

Când specificați stiluri CSS din regula @keyframes, animația se va schimba treptat de la stilul curent la noul stil în anumite momente.

Pentru ca animația să funcționeze, trebuie să legați animația de un element.

Următorul exemplu leagă animația „exemplu” de elementul <div>. Animația va dura 4 secunde și va schimba treptat culoarea de fundal a elementului <div> de la „red” la „yellow”:

Exemplu:

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Notă: Proprietatea animation-duration definește cât timp ar trebui să dureze o animație. Dacă proprietatea animation-duration nu este specificată, nu va apărea nicio animație, deoarece valoarea implicită este 0s (0 secunde).

În exemplul de mai sus am specificat când stilul se va schimba folosind cuvintele cheie „from” și „to” (care reprezintă 0% (start) și 100% (complet)).

Animații CSS. Întârziere animație.

Vezi videoclipul: Animații CSS. Întârziere animație. Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Întârziere animație.

Întârziere animație (Delay an Animation)

Proprietatea animation-delay specifică o întârziere pentru începerea unei animații.

Următorul exemplu are o întârziere de 2 secunde înainte de a începe animația:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

De asemenea, sunt permise valori negative. Dacă utilizați valori negative, animația va începe ca și cum ar fi jucat deja N secunde.

În următorul exemplu, animația va începe ca și cum ar fi jucat deja timp de 2 secunde:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Animații CSS. Rularea animației în direcție inversă sau cicluri alternative. Proprietatea animation-direction. Valorile: normal, reverse, alternate, alternate-reverse.

Vezi videoclipul: Animații CSS. Rularea animației în dir... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Rularea animației în dir...

Rulați animația în direcție inversă sau cicluri alternative

Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.

Proprietatea animation-direction poate avea următoarele valori:

normal - Animația este redată normal (înainte) (forwards). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi) (backwards)
alternate - animația este redată mai întâi, apoi înapoi (backwards)
alternate-reverse - animația este redată mai întâi înapoi (backwards), apoi înainte (forwards)

Următorul exemplu va rula animația în sens invers (înapoi)(backwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Următorul exemplu utilizează valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Următorul exemplu folosește valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte (forwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Animații CSS. Rulare animație în direcție inversă sau cicluri alternative. Proprietatea animation-direction. Valori: normal, reverse, altenate, alternate-reverse.

Vezi videoclipul: Animații CSS. Rulare animație în dire... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Rulare animație în dire...

Rulați animația în direcție inversă sau cicluri alternative

Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.

Proprietatea animation-direction poate avea următoarele valori:

normal - Animația este redată normal (înainte)(forwards). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)(backwards)
alternate - animația este redată mai întâi înainte(forwards), apoi înapoi(backwards)
alternate-reverse - animația este redată mai întâi înapoi(backwards), apoi înainte(forwards)

Următorul exemplu va rula animația în sens invers (înapoi)(backwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Următorul exemplu utilizează valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Următorul exemplu folosește valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte(forwards):

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Animații CSS. Modul de completare pentru o animație. Proprietatea animation-fill-mode. Valori: none, forwards, backwards, both.

Vezi videoclipul: Animații CSS. Modul de completare pent... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Modul de completare pent...

Precizați modul de completare (fill-mode) pentru o animație

Animațiile CSS nu afectează un element înainte de a fi redat primul cadru-cheie (keyframe) sau după ce ultimul cadru-cheie (keyframe) este redat. Proprietatea animation-fill-mode poate înlocui acest comportament.

Proprietatea animation-fill-mode specifică un stil pentru elementul țintă atunci când animația nu se joacă (înainte de a începe, după ce se termină, sau ambele).

Proprietatea animation-fill-mode poate avea următoarele valori:

none - Valoare implicită. Animația nu va aplica niciun stil la element înainte sau după executarea acestuia
forwards - Elementul va pastra valorile stilului setate de ultimul cadru cheie (keyframe) (depinde de animation-direction și animation-iteration-count)
backwards - Elementul va obține valorile de stil setate de primul cadru-cheie (keyframe) (depinde de animation-direction) și îl va păstra în timpul perioadei de întârziere a animației
both - Animația va respecta regulile atât în față cât și înapoi (forwards și backwards), extinzând proprietățiile de animație în ambele direcții

Următorul exemplu permite elementului <div> să păstreze valorile stilului de la ultimul cadru cheie (keyframe) la încheierea animației:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Animații CSS. Exemple pentru regula @keyframes.

Vezi videoclipul: Animații CSS. Exemple pentru regula @k... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Exemple pentru regula @k...

Regula @keyframes

Este posibilă utilizarea procentului. Utilizând procente, puteți adăuga oricâte modificări de stil doriți.

Următorul exemplu va schimba culoarea de fundal (background-color) a elementului <div> atunci când animația este completă 25%, 50% completă și din nou când animația este 100% completă:

Exemplu:

/* Codul de animație  */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* Elementul pentru a aplica animația pe */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Următorul exemplu va schimba atât culoarea de fundal (background-color), cât și poziția elementului <div> atunci când animația este completă 25%, 50% completă și din nou când animația este completă 100%:

Exemplu:

/* Codul de animație */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Elementul pentru a aplica animația pe */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Animații CSS. Proprietatea Shorthand Animation.

Vezi videoclipul: Animații CSS. Proprietatea Shorthand A... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Proprietatea Shorthand A...

Proprietatea Shorthand Animation

Exemplul de mai jos folosește șase dintre proprietățiile de animație:

Exemplu:

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Același efect de animație ca mai sus poate fi obținut folosind proprietatea shorthand animation:

Exemplu:

div {
  animation: example 5s linear 2s infinite alternate;
}

Animații CSS. Setarea rulării unei animații. Proprietatea animation-iteration-count.

Vezi videoclipul: Animații CSS. Setarea rulării unei ani... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Setarea rulării unei ani...

Setați de câte ori ar trebui să ruleze o animație

Proprietatea animation-iteration-count specifică numărul pe care trebuie să-l ruleze o animație.

Următorul exemplu va rula animația de 3 ori înainte de a se opri:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Următorul exemplu utilizează valoarea „infinite” pentru a face animația să continue pentru totdeauna:

Exemplu:

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Animații CSS. Precizarea curbei de viteză a animației. Proprietatea animation-timing-function. Valori: ease, linear, ease-in , ease-out , ease-in-out, cubic-bezier(n,n,n,n).

Vezi videoclipul: Animații CSS. Precizarea curbei de vit... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Precizarea curbei de vit...

Precizați curba de viteză (Speed Curve) a animației

Proprietatea animation-timing-function specifică curba de viteză (speed curve) a animației.

Proprietatea animation-timing-function poate avea următoarele valori:

ease - Specifică o animație cu început lent, apoi rapid, apoi sfârșit încet (aceasta este implicit)
linear - Specifică o animație cu aceeași viteză de la început până la sfârșit
ease-in - Specifică o animație cu pornire lentă
ease-out - Specifică o animație cu sfârșit lent
ease-in-out - Specifică o animație cu început și sfârșit lent
cubic-bezier(n,n,n,n) - Vă permite să definiți propriile valori într-o funcție cubic-bezier

Următorul exemplu arată câteva dintre diferitele curbe de viteză (speed curve) care pot fi utilizate:

Exemplu:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Animații CSS. Exemple animation-fill-mode.

Vezi videoclipul: Animații CSS. Exemple animation-fill-m... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Exemple animation-fill-m...

Exemple animation-fill-mode

Următorul exemplu permite elementului <div> să obțină valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației (în perioada de întârziere a animației (animation-delay)):

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Următorul exemplu permite elementului <div> să obțină valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației și să păstreze valorile stilului de la ultimul cadru de cheie (keyframe) atunci când animația se încheie:

Exemplu:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Animații CSS. Proprietăți CSS animation.

Vezi videoclipul: Animații CSS. Proprietăți CSS animatio... Vezi toată lecția: CSS Animații Citește teoria: Animații CSS. Proprietăți CSS animatio...

Proprietăți CSS animation

Proprietate	Descriere
@keyframes	Specifică codul de animație
animation	O proprietate shorthand pentru setarea tuturor proprietățiilor de animație
animation-delay	Specifică o întârziere pentru începerea unei animații
animation-direction	Specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative
animation-duration	Specifică cât timp trebuie să dureze o animație pentru a finaliza un ciclu
animation-fill-mode	Specifică un stil pentru element atunci când animația nu se joacă (înainte de a începe, după ce se termină sau ambele(before it starts, after it ends, or both))
animation-iteration-count	Specifică numărul de ori când trebuie să fie redată o animație
animation-name	Specifică numele animației @keyframes
animation-play-state	Specifică dacă animația este în curs de execuție sau în pauză
animation-timing-function	Specifică curba de viteză (speed curve) a animației

CSS Tooltip. Basic Tooltip.

Vezi videoclipul: CSS Tooltip. Basic Tooltip. Vezi toată lecția: CSS Tooltip Citește teoria: CSS Tooltip. Basic 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:

Exemplu:

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Dacă doriți puncte sub textul hoverable */
}

/* Text de tip tooltip */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Poziționează textul tooltip - vezi exemple de mai jos! */
  position: absolute;
  z-index: 1;
}

/* Afișați textul tooltip când treceți mouse-ul peste tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Textul de tip tooltip</span>
</div>

CSS Tooltip. Exemplu explicat. Textul de tip tooltip. Clasa tooltiptext. Proprietatea CSS border-radius.

Vezi videoclipul: CSS Tooltip. Exemplu explicat. Textul... Vezi toată lecția: CSS Tooltip Citește teoria: CSS Tooltip. Exemplu explicat. Textul...

Exemplu explicat

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).
Notă: 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".

CSS Tooltip. Instrumente de poziționare. Tooltip dreapta. Tooltip stânga. Tooltip de sus. Tooltip de jos.

Vezi videoclipul: CSS Tooltip. Instrumente de poziționar... Vezi toată lecția: CSS Tooltip Citește teoria: CSS Tooltip. Instrumente de poziționar...

Poziționare Tooltips

În acest exemplu, 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.

Tooltip dreapta (Right Tooltip)

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

Rezultat:

Tooltip stânga (Left Tooltip)

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

Rezultat:

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

Tooltip de sus (Top Tooltip)

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Utilizați jumătate din lățime (120/2 = 60), pentru a centra tooltip-ul */
}

Rezultat:

Tooltip de jos (Bottom Tooltip)

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Utilizați jumătate din lățime (120/2 = 60) pentru a centra tooltip-ul */
}

Rezultat:

CSS Tooltip. Instrumente săgeți. Săgetă jos. Exemplu explicat. Proprietatea border-width. Săgetă sus.

Vezi videoclipul: CSS Tooltip. Instrumente săgeți... Vezi toată lecția: CSS Tooltip Citește teoria: CSS Tooltip. Instrumente săgeți...

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.

Acest exemplu demonstrează cum se adaugă o săgeată în partea de jos a tooltip-ului:

Săgetă jos (Bottom Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /*  În partea de jos a tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Rezultat:

Exemplu explicat

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.

Notă: 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.

Acest exemplu demonstrează cum să adăugați o săgeată în partea de sus a tooltip. Observați că am stabilit de data aceasta bottom border color:

Săgetă sus (Top Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /*  În partea de sus a tooltip-ului */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Rezultat:

CSS Tooltip. Instrumente săgeți. Săgetă stânga. Săgetă dreapta. Fade în Tooltips (animație).

Vezi videoclipul: CSS Tooltip. Instrumente săgeți... Vezi toată lecția: CSS Tooltip Citește teoria: CSS Tooltip. Instrumente săgeți...

Instrumente săgeți (Tooltip Arrows)

Acest exemplu demonstrează cum se adaugă o săgeată la stânga tooltip-ului:

Săgetă stânga (Left Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* La stânga tooltip-ului */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Rezultat:

Acest exemplu demonstrează cum să adăugați o săgeată la dreapta tooltip-ului:

Săgetă dreapta (Right Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Rezultat:

Fade în Tooltips (animație)

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):

Exemplu:

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

CSS Stilizarea imaginilor. Imagini rotunjite. Proprietatea border-radius.

Vezi videoclipul: CSS Stilizarea imaginilor. Imagini rot... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Imagini rot...

CSS Stilizarea imaginilor (CSS Styling Images)

Imagini rotunjite (Rounded Images)

Utilizați proprietatea border-radius pentru a crea imagini rotunjite (rounded images):

Exemplu:

Imagine rotunjită (Rounded Image):

img {
  border-radius: 8px;
}

Exemplu:

Imagine înconjurată (Circled Image):

img {
  border-radius: 50%;
}

CSS Stilizarea imaginilor. Imagini în miniatură.

Vezi videoclipul: CSS Stilizarea imaginilor. Imagini în... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Imagini în...

Imagini în miniatură (Thumbnail Images)

Utilizați proprietatea border pentru a crea imagini în miniatură (thumbnail images).

Imagine in miniatură (thumbnail image):

Exemplu:

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="paris.jpg" alt="Paris">

Imagine în miniatură ca link (Thumbnail Image as Link):

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

CSS Stilizarea imaginilor. Imagini / Carduri Polaroid. Imagine transparentă. Proprietatea opacity.

Vezi videoclipul: CSS Stilizarea imaginilor. Imagini / C... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Imagini / C...

Imagini / Carduri Polaroid (Polaroid Images / Cards)

Exemplu:

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}

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ă:

Notă: 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.

Exemplu:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Pentru IE8 și versiunile anterioare */
}

CSS Stilizarea imaginilor. Imagine Modal (avansat).

Vezi videoclipul: CSS Stilizarea imaginilor. Imagine Mod... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Imagine Mod...

Image Modal (Advanced)

Acesta este un exemplu pentru a demonstra 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:

Exemplu:

// Get the modal
var modal = document.getElementById('myModal');

// Obțineți imaginea și introduceți-o în interiorul modalului - folosiți textul „alt” ca o legendă
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Obțineți elementul <span> care închide modalul
var span = document.getElementsByClassName("close")[0];

// Când utilizatorul face clic pe <span>(x), închideți modalul
span.onclick = function() {
  modal.style.display = "none";
}

CSS Stilizarea imaginilor. Imagini responsive. Centrați o imagine.

Vezi videoclipul: CSS Stilizarea imaginilor. Imagini res... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Imagini res...

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:

Dacă doriți ca o imagine să scadă în jos (scale down ), dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială, adăugați următoarele:

Exemplu:

img {
  max-width: 100%;
  height: auto;
}

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:

Exemplu:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

CSS Stilizarea imaginilor. Text în imagine. Filtre de imagine.

Vezi videoclipul: CSS Stilizarea imaginilor. Text în ima... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Text în ima...

Text în imagine (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.

Notă: Proprietatea CSS filter nu este acceptată în Internet Explorer, Edge 12 sau Safari 5.1 și nici în versiunile anterioare.

Exemplu:

Schimbați culoarea tuturor imaginilor în alb și negru (100% gri):

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

CSS Stilizarea imaginilor. Suprapunere de imagini în curs. Rotiți o imagine. Galerie de imagini responsive.

Vezi videoclipul: CSS Stilizarea imaginilor. Suprapunere... Vezi toată lecția: CSS Stilizarea imaginilor Citește teoria: CSS Stilizarea imaginilor. Suprapunere...

Suprapunere de imagini în curs (Image Hover Overlay)

Creați un efect de suprapunere asupra hover.

Rotiți o imagine (Flip an Image)

Mutați mouse-ul peste imagine.

Exemplu:

img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

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:

Exemplu:

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

CSS Butoane. Stilarea butonului de bază. Culorile butoanelor. Proprietatea background-color.

Vezi videoclipul: CSS Butoane. Stilarea butonului de baz... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Stilarea butonului de baz...

Butoane CSS

Aflați cum puteți stabili butoanele folosind CSS.

Stilarea butonului de bază (Basic Button Styling)

Exemplu:

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Culorile butoanelor (Button Colors)

Utilizați proprietatea background-color pentru a schimba culoarea de fundal a unui buton:

Exemplu:

.button1 {background-color: #4CAF50;} /* Green / Verde */
.button2 {background-color: #008CBA;} /* Blue / Albastru */
.button3 {background-color: #f44336;} /* Red / Rosu */
.button4 {background-color: #e7e7e7; color: black;} /* Gray / Gri */
.button5 {background-color: #555555;} /* Black / Negru */

CSS Butoane. Butoane Hoverable. Selectorul :hover. Proprietatea transition. Butoane Shadow. Proprietatea box-shadow.

Vezi videoclipul: CSS Butoane. Butoane Hoverable. Select... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Butoane Hoverable. Select...

Butoane Hoverable

Utilizați selectorul :hover pentru a schimba stilul unui buton atunci când deplasați mouse-ul peste el.

Sfat: Utilizați proprietatea transition pentru a determina viteza efectului „hover”:

Exemplu:

.button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...

Butoane Shadow

Utilizați proprietatea box-shadow pentru a adăuga umbre la un buton:

Exemplu:

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

CSS Butoane. Grupuri de butoane. Grup de butoane mărginite. Proprietatea border. Grup vertical de butoane.

Vezi videoclipul: CSS Butoane. Grupuri de butoane. Grup... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Grupuri de butoane. Grup...

Grupuri de butoane (Button Groups)

Eliminați marginile și adăugați float:left la fiecare buton pentru a crea un grup de butoane:

Exemplu:

.button {
  float: left;
}

Grup de butoane mărginite (Bordered Button Group)

Utilizați proprietatea border pentru a crea un grup de butoane mărginite (bordered button group):

Exemplu:

.button {
  float: left;
  border: 1px solid green;
}

Grup vertical de butoane (Vertical Button Group)

Utilizați display:block în loc de float:left pentru a grupa butoanele unul sub altul, în loc de alături:

Exemplu:

.button {
  display: block;
}

CSS Butoane. Mărimea butoanelor. Proprietatea font-size. Proprietatea padding.

Vezi videoclipul: CSS Butoane. Mărimea butoanelor. Propr... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Mărimea butoanelor. Propr...

Mărimea butoanelor (Button Sizes)

Utilizați proprietatea font-size pentru a modifica dimensiunea fontului unui buton:

Exemplu:

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Utilizați proprietatea padding pentru a schimba umplerea unui buton:

Exemplu:

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

CSS Butoane. Butoane rotunjite. Proprietatea border-radius. Margini butoane colorate. Proprietatea border.

Vezi videoclipul: CSS Butoane. Butoane rotunjite. Propri... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Butoane rotunjite. Propri...

Butoane rotunjite (Rounded Buttons)

Utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite la un buton:

Exemplu:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Margini butoane colorate (Colored Button Borders)

Utilizați proprietatea border pentru a adăuga un chenar colorat la un buton:

Exemplu:

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Green */
}
...

CSS Butoane. Butoane dezactivate. Proprietatea opacity. Proprietatea cursor. Lățimea butonului. Proprietatea width.

Vezi videoclipul: CSS Butoane. Butoane dezactivate. Prop... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Butoane dezactivate. Prop...

Butoane dezactivate (Disabled Buttons)

Utilizați proprietatea opacity pentru a adăuga transparență unui buton (creează un aspect „disabled”).

Sfat: Puteți adăuga, de asemenea, proprietatea cursor cu o valoare „nepermisă” (not-allowed), care va afișa un „no parking sign” când faceți click peste buton:

Exemplu:

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Lățimea butonului (Button Width)

În mod implicit, dimensiunea butonului este determinată de conținutul textului său (la fel de larg ca și conținutul său). Utilizați proprietatea width pentru a modifica lățimea unui buton:

Exemplu:

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

CSS Butoane. Buton pe imagine. Butoane animate.

Vezi videoclipul: CSS Butoane. Buton pe imagine. Butoane... Vezi toată lecția: CSS Butoane Citește teoria: CSS Butoane. Buton pe imagine. Butoane...

Buton pe imagine (Button on Image)

Adăugați un buton la o imagine:

Butoane animate (Animated Buttons)

Exemplu:

Adăugați o săgeată la hover:

Exemplu:

Adăugați un efect „pressed” pe click:

Exemplu:

Fade in on hover:

Exemplu:

Adăugați un efect „ripple” la click:

CSS Paginare. Margini rotunjite. Spațiu între legături. Proprietatea margin.

Vezi videoclipul: CSS Paginare. Margini rotunjite. Spați... Vezi toată lecția: CSS Paginare Citește teoria: CSS Paginare. Margini rotunjite. Spați...

Margini rotunjite (Rounded Borders)

Sfat: Adăugați rounded borders la prima și ultima dvs. legătură (link) din paginare:

Exemplu:

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Spațiu între legături (Space Between Links)

Sfat: Adăugați proprietatea margin dacă nu doriți să grupați linkurile paginii:

Exemplu:

.pagination a {
  margin: 0 4px; /* 0 este pentru partea de sus și de jos. Simte-te liber să-l schimbi */
}

CSS Paginare. Paginare Breadcrumbs.

Vezi videoclipul: CSS Paginare. Paginare Breadcrumbs. Vezi toată lecția: CSS Paginare Citește teoria: CSS Paginare. Paginare Breadcrumbs.

Mai multe exemple

Exemplu:

Paginare Breadcrumbs

O altă variantă a paginării este așa-numita "breadcrumbs"

Exemplu:

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

CSS Paginare. Paginarea activă și hoverable. Clasa .active. Selectorul :hover. Butoane rotunjite active și hoverable. Proprietatea border-radius.

Vezi videoclipul: CSS Paginare. Paginarea activă și hove... Vezi toată lecția: CSS Paginare Citește teoria: CSS Paginare. Paginarea activă și hove...

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:

Exemplu:

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

Butoane rotunjite active și hoverable

Dacă doriți un buton rotund „active” și „hover” adăugați proprietatea border-radius:

Exemplu:

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}

CSS Paginare. Efect de tranziție hoverable. Proprietatea transition. Paginare mărginită. Proprietatea border.

Vezi videoclipul: CSS Paginare. Efect de tranziție hover... Vezi toată lecția: CSS Paginare Citește teoria: CSS Paginare. Efect de tranziție hover...

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):

Exemplu:

.pagination a {
  transition: background-color .3s;
}

Paginare mărginită (Bordered Pagination)

Utilizați proprietatea border pentru a adăuga borduri la paginație:

Exemplu:

.pagination a {
  border: 1px solid #ddd; /* Gray */
}

CSS Paginare. Paginare simplă.

Vezi videoclipul: CSS Paginare. Paginare simplă. Vezi toată lecția: CSS Paginare Citește teoria: CSS Paginare. Paginare simplă.

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

Exemplu:

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

CSS Paginare. Mărimea paginării. Proprietatea font-size. Paginarea centrată. Proprietatea text-align:center.

Vezi videoclipul: CSS Paginare. Mărimea paginării. Propr... Vezi toată lecția: CSS Paginare Citește teoria: CSS Paginare. Mărimea paginării. Propr...

Mărimea paginării (Pagination Size)

Modificați dimensiunea paginării cu proprietatea font-size:

Exemplu:

.pagination a {
  font-size: 22px;
}

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

Exemplu:

.center {
  text-align: center;
}

CSS Coloane multiple. CSS Creează mai multe coloane. Proprietatea column-count. CSS Specificați decalajul dintre coloane. Proprietatea column-gap.

Vezi videoclipul: CSS Coloane multiple. CSS Creează mai... Vezi toată lecția: CSS Coloane multiple Citește teoria: CSS Coloane multiple. CSS Creează mai...

CSS Creează mai multe coloane (CSS Create Multiple Columns)

Proprietatea column-count specifică numărul de coloane în care trebuie divizat un element.

Următorul exemplu va împărți textul din elementul <div> în 3 coloane:

Exemplu:

div {
  column-count: 3;
}

CSS Specificați decalajul dintre coloane (CSS Specify the Gap Between Columns)

Proprietatea column-gap specifică decalajul dintre coloane.

Următorul exemplu specifică o distanță de 40 de pixeli între coloane:

Exemplu:

div {
  column-gap: 40px;
}

CSS Coloane multiple. CSS Reguli coloane. Proprietatea column-rule-style. Proprietatea column-rule-width. Proprietatea column-rule-color. Proprietatea column-rule.

Vezi videoclipul: CSS Coloane multiple. CSS Reguli coloa... Vezi toată lecția: CSS Coloane multiple Citește teoria: CSS Coloane multiple. CSS Reguli coloa...

CSS Reguli coloane (CSS Column Rules)

Proprietatea column-rule-style specifică stilul regulii dintre coloane:

Exemplu:

div {
  column-rule-style: solid;
}

Proprietatea column-rule-width specifică lățimea regulii între coloane:

Exemplu:

div {
  column-rule-width: 1px;
}

Proprietatea column-rule-color specifică culoarea regulii dintre coloane:

Exemplu:

div {
  column-rule-color: lightblue;
}

Proprietatea column-rule este o proprietate shorthand pentru setarea tuturor proprietăților column-rule- * de mai sus.

Următorul exemplu stabilește lățimea, stilul și culoarea (width, style, color) regulii între coloane:

Exemplu:

div {
  column-rule: 1px solid lightblue;
}

CSS Coloane multiple. Proprietăți CSS Multi-columns.

Vezi videoclipul: CSS Coloane multiple. Proprietăți CSS ... Vezi toată lecția: CSS Coloane multiple Citește teoria: CSS Coloane multiple. Proprietăți CSS ...

Proprietăți CSS Multi-columns

Următorul tabel listează toate proprietățiile cu mai multe coloane:

Proprietate	Descriere
column-count	Specifică numărul de coloane în care trebuie divizat un element
column-fill	Specifică modul de completare a coloanelor
column-gap	Specifică decalajul dintre coloane
column-rule	O proprietate shorthand pentru setarea tuturor proprietățiilor column-rule- *
column-rule-color	Specifică culoarea regulii dintre coloane
column-rule-style	Specifică stilul regulii dintre coloane
column-rule-width	Specifică lățimea regulii dintre coloane
column-span	Specifică câte coloane ar trebui să se întindă pe un element
column-width	Specifică o lățime sugerată, optimă pentru coloane
columns	O proprietate shorthand pentru setarea lățimii coloanei și a numărului de coloane

CSS Coloane multiple. Layout cu mai multe coloane CSS.Proprietăți CSS Multi-column:: column-count, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span, column-width.

Vezi videoclipul: CSS Coloane multiple. Layout cu mai mu... Vezi toată lecția: CSS Coloane multiple Citește teoria: CSS Coloane multiple. Layout cu mai mu...

CSS Coloane multiple

Layout cu mai multe coloane CSS( CSS Multi-column Layout)

Aspectul cu mai multe coloane CSS (multi-column layout) permite definirea ușoară a mai multor coloane de text - la fel ca în ziare.

Proprietăți CSS Multi-column

În acest capitol veți afla despre următoarele proprietăți CSS multi-column:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.

CSS Coloane multiple. Specificați câte coloane ar trebui să se întindă. Specificați lățimea coloanei. Proprietatea column-width.

Vezi videoclipul: CSS Coloane multiple. Specificați câte... Vezi toată lecția: CSS Coloane multiple Citește teoria: CSS Coloane multiple. Specificați câte...

Specificați câte coloane ar trebui să se întindă (Specify How Many Columns an Element Should Span)

Proprietatea column-span specifică câte coloane ar trebui să se întindă (span) între un element.

Următorul exemplu specifică faptul că elementul <h2> ar trebui să se întindă (span) pe toate coloanele:

Exemplu:

h2 {
  column-span: all;
}

Specificați Lățimea coloanei (Specify The Column Width)

Proprietatea column-width specifică o lățime optimă sugerată pentru coloane.

Următorul exemplu specifică faptul că lățimea optimă sugerată pentru coloane ar trebui să fie de 100px:

Exemplu:

div {
  column-width: 100px;
}

CSS Interfață utilizator. Proprietăți ale interfeței de utilizator CSS: resize, outline-offset. Asistență browser.

Vezi videoclipul: CSS Interfață utilizator. Proprietăți... Vezi toată lecția: CSS Interfață utilizator Citește teoria: CSS Interfață utilizator. Proprietăți...

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 (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.

CSS Interfață utilizator. CSS Outline Offset. Proprietatea outline-offset. Proprietăți CSS interfață utilizator: outline-offset, resize.

Vezi videoclipul: CSS Interfață utilizator. CSS Outline... Vezi toată lecția: CSS Interfață utilizator Citește teoria: CSS Interfață utilizator. CSS Outline...

CSS Outline Offset

Proprietatea outline-offset adaugă spațiu între un contur (outline) și margine (edge) sau un border unui element.

Notă: 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):

Exemplu:

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Proprietăți CSS interfață utilizator

Următorul tabel listează toate proprietățiile interfeței cu utilizatorul:

Proprietate	Descriere
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 Interfață utilizator. Redimensionare CSS. Proprietatea resize.

Vezi videoclipul: CSS Interfață utilizator. Redimensiona... Vezi toată lecția: CSS Interfață utilizator Citește teoria: CSS Interfață utilizator. Redimensiona...

Redimensionare CSS (CSS Resizing)

Proprietatea resize specifică dacă (și cum) un element trebuie redimensionat de către utilizator.

Notă: Internet Explorer și Edge nu acceptă proprietatea resize.

Următorul exemplu permite utilizatorului să redimensioneze doar lățimea unui element <div>:

Exemplu:

div {
  resize: horizontal;
  overflow: auto;
}

Următorul exemplu permite utilizatorului să redimensioneze doar înălțimea unui element <div>:

Exemplu:

div {
  resize: vertical;
  overflow: auto;
}

Următorul exemplu permite utilizatorului redimensionarea atât a înălțimii, cât și a lățimii unui element <div>:

Exemplu:

div {
  resize: both;
  overflow: auto;
}

În multe browsere, <textarea> poate fi redimensionată în mod implicit. Aici, am folosit proprietatea resize pentru a dezactiva redimensionarea:

Exemplu:

textarea {
  resize: none;
}

CSS Variabile. Funcția var(). proprietate personalizată globală "--main-bg-color". Proprietatea custom. CSS Funcția var().

Vezi videoclipul: CSS Variabile. Funcția var(). propriet... Vezi toată lecția: CSS Variabile Citește teoria: CSS Variabile. Funcția var(). propriet...

Funcția var()

Următorul exemplu definește mai întâi o proprietate personalizată globală numită "--main-bg-color", apoi folosește funcția var() pentru a insera valoarea proprietății custom ulterior în foaia de stil (style sheet):

Exemplu:

:root {
  --main-bg-color: coral;
}

#div1 {
  background-color: var(--main-bg-color);
}

#div2 {
  background-color: var(--main-bg-color);
}

Următorul exemplu utilizează funcția var() pentru a insera mai multe valori ale proprietății custom:

Exemplu:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

CSS Funcția var()

Proprietate	Descriere
var()	Inserează valoarea unei proprietăți custom

CSS Variabile. Proprietăți CSS personalizate (variabile). Funcția var(). Asistență browser. Funcția var().

Vezi videoclipul: CSS Variabile. Proprietăți CSS persona... Vezi toată lecția: CSS Variabile Citește teoria: CSS Variabile. Proprietăți CSS persona...

Variabile CSS

Proprietăți CSS personalizate (variabile)

Funcția var() poate fi utilizată pentru a insera valoarea unei proprietăți personalizate.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.

Funcția var()

Variabilele din CSS ar trebui declarate în cadrul unui selector CSS care definește domeniul său de aplicare. Pentru un domeniu global, puteți utiliza fie :root sau selectorul body.
Numele variabilei trebuie să înceapă cu două liniuțe (--) și este sensibil la litere mari și mici!

Sintaxa funcției var() este următoarea:

Valoare	Descriere
custom-name	Obligatoriu. Numele proprietății personalizate (trebuie să înceapă cu două liniuțe)
value	Opțional. Valoarea de retragere (folosită dacă proprietatea personalizată este nevalidă)

CSS Dimensiune Box. Cu proprietatea CSS box-sizing. Proprietatea CSS box-sizing. Setarea box-sizing: border-box;.

Vezi videoclipul: CSS Dimensiune Box. Cu proprietatea CS... Vezi toată lecția: CSS Box Sizing Citește teoria: CSS Dimensiune Box. Cu proprietatea CS...

Cu proprietatea CSS box-sizing

Proprietatea CSS box-sizing ne permite să includem padding și border în lățimea și înălțimea (width și height) totală a unui element.
Dacă setați box-sizing: border-box; pe un element padding și border sunt incluse în lățime și înălțime (width și height):

Iată același exemplu ca mai sus, cu dimensiunea box-sizing: border-box; adăugate la ambele elemente <div>:

Exemplu:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Deoarece rezultatul utilizării box-sizing: border-box; este cu atât mai bine, mulți dezvoltatori doresc ca toate elementele din paginile lor să funcționeze astfel.
Codul de mai jos asigură în acest mod mai intuitiv dimensiunea tuturor elementelor. Multe browsere folosesc deja box-sizing: border-box; pentru multe elemente de formă (dar nu toate - motiv pentru care inputs și text areas arată diferit la width: 100%;).
Aplicarea acestui lucru pe toate elementele este sigur și înțelept:

Exemplu:

* {
  box-sizing: border-box;
}

Proprietatea CSS Box Sizing

Proprietate	Descriere
box-sizing	Defineste modul în care se calculează lățimea și înălțimea (width și height) unui element: trebuie să includă padding și borders, sau nu

CSS Dimensiune Box. Proprietatea CSS box-sizing. Fără proprietatea CSS box-sizing.

Vezi videoclipul: CSS Dimensiune Box. Proprietatea CSS b... Vezi toată lecția: CSS Box Sizing Citește teoria: CSS Dimensiune Box. Proprietatea CSS b...

CSS Dimensiune Box (CSS Box Sizing)

Proprietatea CSS box-sizing ne permite să includem padding și border în lățimea și înălțimea totală (width și height) a unui element.

Fără proprietatea CSS box-sizing

În mod implicit, lățimea și înălțimea (width și height) unui element sunt calculate astfel:

width + padding + border = lățimea reală a unui element
height + padding + border = înălțimea reală a unui element

Aceasta înseamnă: Când setați lățimea / înălțimea (width/height) unui element, elementul pare adesea mai mare decât ați setat (deoarece border-ul și padding-ul elementului sunt adăugate la lățimea / înălțimea (width/height) specificată a elementului).

Următoarea ilustrație arată două elemente <div> cu aceeași lățime și înălțime (width și height) specificate:

Cele două elemente <div> de mai sus se termină cu dimensiuni diferite în rezultat (pentru că div2 are o căptușire specificată):

Exemplu:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Proprietatea box-sizing rezolvă această problemă.

CSS Interogări media. CSS2 Tipuri de suport introduse. Regula @media. CSS3 Interogări media introduse. Asistență browser.

Vezi videoclipul: CSS Interogări media. CSS2 Tipuri de s... Vezi toată lecția: CSS Interogări media Citește teoria: CSS Interogări media. CSS2 Tipuri de s...

CSS Interogări media (CSS Media Queries)

CSS2 Tipuri de suport introduse (CSS2 Introduced Media Types)

Regula @media, introdusă în CSS2, a făcut posibilă definirea regulilor de stil (style rules) diferite pentru diferite tipuri de media.

Exemple: Ați putea avea un set de reguli de stil (style rules) pentru ecrane de computer, una pentru imprimante, una pentru dispozitive portabile, una pentru dispozitive tip televizor și așa mai departe.

Din păcate, aceste tipuri de suporturi nu au primit niciodată multă asistență din partea dispozitivelor, în afară de tipul de printare (print media type).

CSS3 Interogări media introduse (CSS3 Introduced Media Queries)

Interogările media (Media queries) din CSS3 au extins ideea tipurilor de media CSS2: În loc să caute un tip de dispozitiv, ele analizează capacitatea dispozitivului.

Interogările media (Media queries) pot fi utilizate pentru a verifica multe lucruri, cum ar fi:

lățimea și înălțimea vizualizării (width and height of the viewport)
lățimea și înălțimea dispozitivului (width and height of the device)
orientare (tableta / telefonul este în mod landscape sau portret?) (orientation (is the tablet/phone in landscape or portrait mode?))
rezoluţie (resolution)

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral regula @media.

CSS Interogări media. Sintaxă interogare media. CSS3 Tipuri media: all, print, screen, speach.

Vezi videoclipul: CSS Interogări media. Sintaxă interoga... Vezi toată lecția: CSS Interogări media Citește teoria: CSS Interogări media. Sintaxă interoga...

Sintaxa interogare media (Media Query Syntax)

O interogare media (media query) constă dintr-un tip media și poate conține una sau mai multe expresii, care se rezolvă returnand fie valoarea adevărat, fie valoarea fals.

Rezultatul interogării este adevărat dacă tipul de media (media type) specificat se potrivește cu tipul de dispozitiv pe care este afișat documentul și toate expresiile din interogarea media (media query) sunt adevărate. Când o interogare media (media query) este adevărată, se aplică foaia de stil (stylesheets) sau regulile de stil (style rules) corespunzătoare, urmând regulile normale în cascadă.

Cu excepția cazului în care utilizați operatorii not sau only, tipul media este opțional și tot tipul va fi implicat.

Puteți avea, de asemenea, foi de stil (stylesheets) diferite pentru media diferite:

CSS3 Tipuri media (CSS3 Media Types)

Valoare	Descriere
all	Utilizat pentru toate dispozitivele de tip media
print	Utilizat pentru imprimante
screen	Utilizat pentru ecrane, tablete, telefoane inteligente etc.
speech	Utilizată pentru screenreaders care „citesc” pagina cu voce tare

CSS Interogări media. Exemple simple de Interogări media.

Vezi videoclipul: CSS Interogări media. Exemple simple d... Vezi toată lecția: CSS Interogări media Citește teoria: CSS Interogări media. Exemple simple d...

Exemple simple de Interogări media (Media Queries Simple Examples)

O modalitate de a utiliza interogări media (media queries) este să aveți o secțiune CSS alternativă chiar în foaia de stil (style sheet).

Următorul exemplu schimbă culoarea de fundal (background-color) în verde deschis dacă viewport-ul are o lățime de 480 de pixeli sau este mai lată (dacă viewport-ul este mai mic de 480 pixeli, culoarea de fundal (background-color) va fi roz):

Exemplu:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Următorul exemplu arată un meniu care va pluti (float) la stânga paginii dacă viewport-ul are o lățime de 480 de pixeli sau este mai lată (dacă viewport-ul este mai mic de 480 pixeli, meniul va fi deasupra conținutului):

Exemplu:

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

CSS Flexbox. Elemente Flexbox. Element părinte (Container).

Vezi videoclipul: CSS Flexbox. Elemente Flexbox. Element... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Elemente Flexbox. Element...

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.

Exemplu:

Un container flex cu trei articole flexibile:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

O dispunere flexibilă (Flexible Layout) trebuie să aibă un element părinte cu proprietatea de afișare setată la flex.
Elementele directe ale copilului containerului flexibil devin automat elemente flexibile.

Element părinte (Container)

Recipientul flex (flex container) devine flexibil prin setarea proprietății display la flex:

Exemplu:

.flex-container {
  display: flex;
}

CSS Flexbox. Proprietatea flex-wrap. Valoarea wrap. Valoarea nowrap. Valoarea wrap-reverse.

Vezi videoclipul: CSS Flexbox. Proprietatea flex-wrap. V... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietatea flex-wrap. V...

Proprietatea flex-wrap

Proprietatea flex-wrap specifică dacă elementele flex trebuie să fie wrap sau nu.

Exemplele de mai jos au 12 itemi flex, pentru a demonstra mai bine proprietatea flex-wrap-ului.

Exemplu:

Valoarea wrap specifică faptul că elementele flex se vor wrap dacă este necesar:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Exemplu:

Valoarea nowrap specifică faptul că elementele flex nu se vor wrap (aceasta este implicită):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Exemplu:

Valoarea wrap-reverse specifică faptul că elementele flexibile se vor wrap dacă este necesar, în ordine inversă:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

CSS Flexbox. CSS Modulul Flexbox Layout. Asistență browser. Proprietățiilie flexbox.

Vezi videoclipul: CSS Flexbox. CSS Modulul Flexbox Layou... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. CSS Modulul Flexbox Layou...

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.

CSS Flexbox. Proprietățiile containerului flex. Proprietatea flex-direction. Valoarea column. Valoarea column-reverse. Valoarea row. Valoarea row-reverse.

Vezi videoclipul: CSS Flexbox. Proprietățiile containeru... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietățiile containeru...

Proprietățiile containerului flex

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):

Exemplu:

Valoarea column stochează vertical elementele flex (de sus în jos):

.flex-container {
  display: flex;
  flex-direction: column;
}

Exemplu:

Valoarea column-reverse stochează vertical elementele flex (dar de jos în sus):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Exemplu:

Valoarea row stochează elementele flexate pe orizontală (de la stânga la dreapta):

.flex-container {
  display: flex;
  flex-direction: row;
}

Exemplu:

Valoarea row-reverse stochează elementele flexate pe orizontală (dar de la dreapta la stânga):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

CSS Flexbox. Proprietatea flex-flow. Proprietățiile flex-direction și flex-wrap. Proprietatea justify-content. Valoarea center. Valoarea flex-start. Valoarea flex-end. Valoarea space-around. Valoarea space-between.

Vezi videoclipul: CSS Flexbox. Proprietatea flex-flow. P... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietatea flex-flow. P...

Proprietatea flex-flow

Proprietatea flex-flow este o proprietate shorthand pentru setarea proprietăților flex-direction și flex-wrap.

Exemplu:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Proprietatea justify-content

Proprietatea justify-content este utilizată pentru alinierea elementelor flex:

Exemplu:

Valoarea center aliniază elementele flex în centrul containerului:

.flex-container {
  display: flex;
  justify-content: center;
}

Exemplu:

Valoarea flex-start aliniază elementele flex la începutul containerului (implicit):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Exemplu:

Valoarea flex-end aliniază elementele flex la sfârșitul containerului:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Exemplu:

Valoarea space-around afișează elementele flex cu spațiu înainte, între și după linii (before, between și after):

.flex-container {
  display: flex;
  justify-content: space-around;
}

Exemplu:

Valoarea space-between afișează elementele flexibile cu spațiu între linii:

.flex-container {
  display: flex;
  justify-content: space-between;
}

CSS Flexbox. Proprietatea align-items. Valoarea center. Valoarea flex-start. Valoarea flex-end. Valoarea stretch. Valoarea baseline.

Vezi videoclipul: CSS Flexbox. Proprietatea align-items.... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietatea align-items....

Proprietatea align-items

Proprietatea align-items este utilizată pentru alinierea elementelor flexate pe verticală.

În aceste exemple, utilizăm un container înalt de 200 de pixeli, pentru a demonstra mai bine proprietatea align-items.

Exemplu:

Valoarea center aliniază elementele flex din mijlocul containerului:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Exemplu:

Valoarea flex-start aliniază elementele flex din partea de sus a containerului:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Exemplu:

Valoarea flex-end aliniază elementele flex din partea de jos a containerului:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Exemplu:

Valoarea stretch întinde elementele flex pentru a umple containerul (aceasta este implicit):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Exemplu:

Valoarea baseline aliniază elementele flex, cum ar fi alinierea lor de bază:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Notă: Exemplul folosește font-size diferit pentru a demonstra că elementele sunt aliniate de text baseline:

CSS Flexbox. Proprietățiile elementului flex: order, flex-grow, flex-shrink, flex-basis, flex, align-self. Proprietatea order. Proprietatea order. Valoarea order. Proprietatea flex-grow. Valoarea flex-grow.

Vezi videoclipul: CSS Flexbox. Proprietățiile ele... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietățiile ele...

Proprietățiile elementului flex

Proprietățiile elementului flex sunt:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Proprietatea order

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.

Exemplu:

Proprietatea order poate modifica ordinea articolelor flex:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

Proprietatea flex-grow

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.

Exemplu:

Faceți ca cel de-al treilea element flex să crească de opt ori mai rapid decât celelalte elemente flex:

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

CSS Flexbox. Proprietatea flex. Proprietatea align-self. Proprietatea align-items. Galerie de imagini responsive folosind Flexbox. Website responsive folosind Flexbox.

Vezi videoclipul: CSS Flexbox. Proprietatea flex. Propri... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietatea flex. Propri...

Proprietatea flex

Proprietatea flex este o proprietate shorthand pentru proprietățiile flex-grow, flex-shrink și flex-basis.

Exemplu:

Faceți ca cel de-al treilea element flex să nu fie growable (0), să nu fie shrinkable (0) și să aibă o lungime inițială (initial length) de 200 de pixeli:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Proprietatea align-self

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.

În aceste exemple folosim un container înalt de 200 de pixeli, pentru a demonstra mai bine proprietatea align-self:

Exemplu:

Aliniați al treilea element flex în mijlocul containerului:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Exemplu:

Aliniați al doilea element flex în partea de sus a containerului și al treilea element flex în partea de jos a containerului:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

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.

CSS Flexbox. Proprietăți CSS Flexbox.

Vezi videoclipul: CSS Flexbox. Proprietăți CSS Flexbox. Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietăți CSS Flexbox.

Proprietăți CSS Flexbox

Următorul tabel listează proprietățiile CSS utilizate cu flexbox:

Proprietate	Descriere
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ățiile flex-grow, flex-shrink și flex-basis

CSS Flexbox. Proprietatea align-content. Valoarea space-between. Valoarea space-around. Valoarea stretch. Valoarea center. Valoarea flex-start. Valoarea flex-end.

Vezi videoclipul: CSS Flexbox. Proprietatea align-conten... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietatea align-conten...

Proprietatea align-content

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.

Exemplu:

Valoarea space-between afișează liniile flexate cu spațiu egal între ele:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Exemplu:

Valoarea space-around afișează liniile flexate cu spațiu înainte, între și după ele:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Exemplu:

Valoarea stretch întinde liniile flex pentru a ocupa spațiul rămas (acesta este implicit):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Exemplu:

Valoarea center afișează liniile de flexare din mijlocul containerului:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Exemplu:

Valoarea flex-start afișează liniile flex la începutul containerului:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Exemplu:

Valoarea flex-end afișează liniile de flex la sfârșitul containerului:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

CSS Flexbox. Centrare perfectă. Proprietățiile justify-content și align-items. Elemente copil (articole).

Vezi videoclipul: CSS Flexbox. Centrare perfectă. Propri... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Centrare perfectă. Propri...

Centrare perfectă

În următorul exemplu, vom rezolva o problemă de stil foarte comună: centrarea perfectă (perfect centering).

Soluție: Setați atât proprietățiile justify-content, cât și align-items in centru, iar elementul flex va fi perfect centrat:

Exemplu:

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Child Elements (Items)

Elementele child directe ale unui recipient flex devin automat elemente flexibile (flexibile).

Elementul de mai sus reprezintă patru elemente flexibile albastre în interiorul unui recipient flex gri.

Exemplu:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS Flexbox. Proprietatea flex-shrink. Valoarea flex-shrink. Proprietatea flex-basis.

Vezi videoclipul: CSS Flexbox. Proprietatea flex-shrink.... Vezi toată lecția: CSS Flexbox Citește teoria: CSS Flexbox. Proprietatea flex-shrink....

Proprietatea flex-shrink

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.

Exemplu:

Nu lăsați al treilea element flex să se micșoreze la fel de mult decât celelalte elemente flex:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Proprietatea flex-basis

Proprietatea flex-basis specifică lungimea inițială a unui element flex.

Exemplu:

Setați lungimea inițială a celui de-al treilea element flex la 200 de pixeli:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Interogări media CSS - exemple. Interogări media pentru coloane.

Vezi videoclipul: Interogări media CSS - exemple. Intero... Vezi toată lecția: CSS Interogări media - Exemple Citește teoria: Interogări media CSS - exemple. Intero...

Interogări media pentru coloane

O utilizare obișnuită a interogărilor media este de a crea un aspect flexibil (flexible layout). În acest exemplu, creem un aspect (layout) care variază între patru, două și full-width coloane, în funcție de diferitele dimensiuni ale ecranului:

Exemplu:

/* Creați patru coloane egale care plutesc (floats) unul lângă celălalt */
.column {
  float: left;
  width: 25%;
}

/* Pe ecranele cu o lățime de 992px sau mai mică, treceți de la patru coloane la două coloane */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* Pe ecranele cu o lățime de 600px sau mai mică, faceți coloanele să se stivească una peste alta, în loc una lângă alta */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Sfat: Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox (a se vedea exemplul de mai jos). Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats (după cum se arată mai sus).

Exemplu:

/* Container pentru flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Creați patru coloane egale */
.column {
  flex: 25%;
  padding: 20px;
}

/*  Pe ecranele cu o lățime de 992px sau mai mică, treceți de la patru coloane la două coloane */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* Pe ecranele cu o lățime de 600px sau mai mică, faceți coloanele să se stivească una peste alta, în loc una lângă alta */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Interogări media CSS - exemple. Interogări media CSS - mai multe exemple.

Vezi videoclipul: Interogări media CSS - exemple. Intero... Vezi toată lecția: CSS Interogări media - Exemple Citește teoria: Interogări media CSS - exemple. Intero...

Interogări media CSS (CSS Media Queries) - exemple

Interogări media CSS (CSS Media Queries) - mai multe exemple

Să ne uităm la câteva exemple de utilizare a interogărilor media.

Interogările media sunt o tehnică populară pentru livrarea unei foi de stil adaptate diferitelor dispozitive. Pentru a demonstra un exemplu simplu, putem schimba culoarea de fundal pentru diferite dispozitive:

Exemplu:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* Pe ecranele cu 992px sau mai puțin, setați background color pe blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* Pe ecrane cu o dimensiune mai mare de 600px, setați background color pe olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Interogări media CSS - exemple. Ascundeți elementele cu interogări media. Modificați dimensiunea fontului cu interogări media.

Vezi videoclipul: Interogări media CSS - exemple. Ascund... Vezi toată lecția: CSS Interogări media - Exemple Citește teoria: Interogări media CSS - exemple. Ascund...

Ascundeți elementele cu interogări media

O altă utilizare obișnuită a interogărilor media este de a ascunde elemente pe diferite dimensiuni ale ecranului:

Exemplu:

/* Dacă dimensiunea ecranului este lată sau mai mică de 600px, ascunde elementul  */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Modificați dimensiunea fontului cu interogări media

De asemenea, puteți utiliza interogări media pentru a modifica dimensiunea fontului (font size) unui element pe diferite dimensiuni ale ecranului:

Exemplu:

/*  Dacă dimensiunea ecranului este mai mare de 600px, setați font-size <div> la 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* Dacă dimensiunea ecranului este 600px lățime sau mai puțin, setați font-size <div> la 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Interogări media CSS - exemple. Galerie de imagini flexibile. Site web flexibil. Orientare: Portret / Peisaj. Lățimea minimă până la lățimea maximă.

Vezi videoclipul: Interogări media CSS - exemple. Galeri... Vezi toată lecția: CSS Interogări media - Exemple Citește teoria: Interogări media CSS - exemple. Galeri...

Galerie de imagini flexibile

Folosim interogări media împreună cu flexbox pentru a crea o galerie de imagini responsive.

Site web flexibil

Utilizăm interogări media împreună cu flexbox pentru a crea un site web responsive, care conține o bară de navigare flexibilă și conținut flexibil.

Orientare: Portret / Peisaj

Interogările media pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.

Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Landscape):

Exemplu:

Utilizați o culoare de fundal lightblue (background color) dacă orientarea este în modul peisaj (landscape):

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Lățimea minimă până la lățimea maximă (Min Width to Max Width)

Puteți utiliza, de asemenea, valorile (max-width: ..) and (min-width: ..) pentru a seta o lățime minimă și o lățime maximă.

De exemplu, când lățimea browserului este cuprinsă între 600 și 900px, schimbați aspectul unui element <div>:

Exemplu:

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Folosind o valoare suplimentară: În exemplul de mai jos, adăugăm o interogare media suplimentară la cea existentă folosind virgulă (aceasta se va comporta ca un operator OR):

Exemplu:

/* Când lățimea este între 600px și 900px OR peste 1100px - schimbați aspectul <div>  */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Interogări media CSS - exemple. Interogări media pentru meniuri.

Vezi videoclipul: Interogări media CSS - exemple. Inter... Vezi toată lecția: CSS Interogări media - Exemple Citește teoria: Interogări media CSS - exemple. Inter...

Interogări media pentru meniuri

În acest exemplu, folosim interogări media pentru a crea un meniu de navigare responsive, care variază în ceea ce privește designul pe diferite dimensiuni de ecran.

Exemplu:

/* Containerul navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Link-uri Navbar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Pe ecranele cu o lățime de 600px sau mai mică, faceți ca link-urile să se strângă una peste alta, în loc una lângă alta */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Web Design Responsiv - Introducere. Ce este Web Design Responsiv? Proiectarea pentru cea mai bună experiență pentru toți utilizatorii.

Vezi videoclipul: Web Design Responsiv - Introducere. Ce... Vezi toată lecția: CSS Responsive Web Design - Introducer... Citește teoria: Web Design Responsiv - Introducere. Ce...

Responsive Web Design - Introducere

Ce este Responsive Web Design?

Responsive web design face ca pagina dvs. web să arate bine pe toate dispozitivele.
Responsive web design utilizează numai HTML și CSS.
Responsive web design nu este un program sau un JavaScript.

Proiectarea pentru cea mai bună experiență pentru toți utilizatorii

Paginile web pot fi vizualizate folosind mai multe dispozitive diferite: desktop-uri, tablete și telefoane. Pagina dvs. web ar trebui să arate bine și să fie ușor de utilizat, indiferent de dispozitiv.
Paginile web nu ar trebui să lase informații pentru a se potrivi cu dispozitive mai mici, ci mai degrabă să își adapteze conținutul pentru a se potrivi cu orice dispozitiv.

Se numește responsive web design atunci când utilizați CSS și HTML pentru redimensionarea, ascunderea, micșorarea, mărirea sau mutatul conținutului pentru a face să arate bine pe orice ecran.

Web Design Responsiv - Viewport. Ce este Viewport? Setarea Viewport. Element viewport meta. Mărimea conținutului Viewport-ului. Câteva reguli suplimentare de urmat.

Vezi videoclipul: Web Design Responsiv - Viewport. Ce es... Vezi toată lecția: CSS Responsive Web Design - Viewport Citește teoria: Web Design Responsiv - Viewport. Ce es...

Responsive Web Design - Viewport

Ce este Viewport?

Viewport este zona vizibilă a utilizatorului unei pagini web.

Viewportul variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe un ecran al computerului.

Înainte de tablete și telefoane mobile, paginile web erau concepute doar pentru ecranele computerului și era comun ca paginile web să aibă un design static și o dimensiune fixă.

Apoi, când am început să navigăm pe internet folosind tablete și telefoane mobile, paginile web cu dimensiuni fixe erau prea mari pentru a se potrivi cu ecranul. Pentru a remedia acest lucru, browserele de pe aceste dispozitive au redus întreaga pagină web pentru a se potrivi ecranului.

Nu a fost perfect !! Dar o rezolvare rapidă.

Setarea Viewport

HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin intermediul etichetei <meta>.

Ar trebui să includeți următorul element viewport <meta> în toate paginile dvs. web:

Un element viewport <meta> oferă instrucțiuni browserului cu privire la modul de control al dimensiunilor și scalării paginii.

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

initial-scale=1.0 setează nivelul inițial de zoom atunci când pagina este încărcată prima dată de browser.

Iată un exemplu de pagină web fără viewport meta tag și aceeași pagină web cu viewport meta tag:

Mărimea conținutului Viewport-ului (Size Content to The Viewport)

Utilizatorii sunt folosiți pentru a derula site-urile pe verticală atât pe desktop cât și pe dispozitive mobile - dar nu pe orizontală!

Așadar, dacă utilizatorul este obligat să defileze orizontal sau să mărească, pentru a vedea întreaga pagină web, rezultă o experiență slabă a utilizatorului.

Câteva reguli suplimentare de urmat:

1. NU folosiți elemente cu lățime fixă mare - De exemplu, dacă o imagine este afișată la o lățime mai largă decât cea din portofoliu, aceasta poate determina derularea portofoliului pe orizontală. Nu uitați să ajustați acest conținut pentru a se încadra în lățimea vizualizării.

2. NU lăsați conținutul să se bazeze pe o anumită lățime a viewportului (viewport width) pentru a fi redat - Deoarece dimensiunile ecranului și lățimea în pixeli CSS variază foarte mult între dispozitive, conținutul nu ar trebui să se bazeze pe o anumită lățime a viewportului pentru a fi redat.

3. Utilizați interogări CSS media (media queries) pentru a aplica stiluri diferite pentru ecrane mici și mari - Setarea lățimilor CSS mari pentru elementele paginii va face ca elementul să fie prea larg pentru viewport de pe un dispozitiv mai mic. În schimb, luați în considerare utilizarea unor valori de lățime relative, cum ar fi lățimea: 100%. De asemenea, aveți grijă să folosiți valori mari de poziționare absolută. Poate determina elementul să iasă în afara ecranului pe dispozitive mici.

Web Design Responsiv - Grid-View. Construirea unui Grid-View 2 responsiv.

Vezi videoclipul: Web Design Responsiv - Grid-View. Cons... Vezi toată lecția: CSS Responsive Web Design - Grid-View Citește teoria: Web Design Responsiv - Grid-View. Cons...

Construirea unui Grid-View responsiv - continuare

Toate aceste coloane ar trebui să plutească (floating) spre stânga și să aibă un padding de 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Fiecare rând trebuie înfășurat (wrapped) într-un <div>. Numărul de coloane din interiorul unui rând ar trebui să adune întotdeauna până la 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Coloanele din interiorul unui rând plutesc (floating) spre stânga și, prin urmare, sunt scoase din fluxul paginii, iar alte elemente vor fi plasate ca și cum coloanele nu ar exista. Pentru a preveni acest lucru, vom adăuga un stil care curăță fluxul:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

De asemenea, dorim să adăugăm câteva stiluri și culori pentru ca acesta să arate mai bine:

Exemplu:

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

Web Design Responsiv - Grid-View. Ce este un Grid-View?

Vezi videoclipul: Web Design Responsiv - Grid-View. Ce e... Vezi toată lecția: CSS Responsive Web Design - Grid-View Citește teoria: Web Design Responsiv - Grid-View. Ce e...

Web Design Responsiv - Grid-View

Ce este un Grid-View?

Multe pagini web se bazează pe un grid-view, ceea ce înseamnă că pagina este împărțită în coloane:

Utilizarea unui grid-view este foarte util atunci când proiectați pagini web. Îți ușurează plasarea elementelor pe pagină.

Un responsive grid-view are adesea 12 coloane și are o lățime totală de 100% și se va micsora și se va extinde pe măsură ce redimensionați fereastra browserului.

Web Design Responsiv - Grid-View. Construirea unui Grid-View responsiv.

Vezi videoclipul: Web Design Responsiv - Grid-View. Cons... Vezi toată lecția: CSS Responsive Web Design - Grid-View Citește teoria: Web Design Responsiv - Grid-View. Cons...

Construirea unui Grid-View responsiv

Vom începe să construim un Grid-View responsiv.

Mai întâi asigurați-vă că toate elementele HTML au proprietatea box-sizing setată pe border-box. Acest lucru asigură că padding și border sunt incluse în lățimea totală și înălțimea (total width and height) elementelor.

Adăugați următorul cod în CSS:

* {
  box-sizing: border-box;
}

Următorul exemplu arată o pagină web responsive simplă, cu două coloane:

Exemplu:

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Exemplul de mai sus este bun dacă pagina web conține doar două coloane.

Cu toate acestea, dorim să utilizăm un grid-view responsiv cu 12 coloane, pentru a avea mai mult control asupra paginii web.

Mai întâi trebuie să calculăm procentul pentru o coloană: 100% / 12 coloane = 8,33%.

Apoi realizăm o clasă pentru fiecare din cele 12 coloane, class="col-" și un număr care definește câte coloane ar trebui să se întindă (span):

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Web Design Responsiv - Interogări media. Întotdeauna design pentru mobil întâi.

Vezi videoclipul: Web Design Responsiv - Interogări medi... Vezi toată lecția: CSS Responsive Web Design - Interogări... Citește teoria: Web Design Responsiv - Interogări medi...

Întotdeauna design pentru mobil întâi

Mobile First înseamnă proiectare pentru mobil înainte de proiectare pentru desktop sau orice alt dispozitiv (Acest lucru va face afișarea paginii mai rapidă pe dispozitive mai mici).

Aceasta înseamnă că trebuie să facem unele modificări în CSS-ul nostru.

În loc să schimbăm stilurile când lățimea devine mai mică de 768px, ar trebui să schimbăm designul când lățimea devine mai mare de 768px. Acest lucru va face în primul rând proiectarea noastră mobilă :

Exemplu:

/* Pentru telefoane mobile: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Web Design Responsiv - Interogări media. Alt Breakpoint. Exemplu HTML pentru desktop. Exemplu HTML pentru tablete.

Vezi videoclipul: Web Design Responsiv - Interogări medi... Vezi toată lecția: CSS Responsive Web Design - Interogări... Citește teoria: Web Design Responsiv - Interogări medi...

Alt Breakpoint

Poate părea ciudat că avem două seturi de clase identice, dar ne oferă posibilitatea în HTML, de a decide ce se va întâmpla cu coloanele pentru fiecare breakpoint:

Exemplu HTML

Pentru desktop:

Prima și a treia secțiune vor cuprinde fiecare ambele 3 coloane. Secțiunea din mijloc va cuprinde 6 coloane.

Pentru tablete:

Prima secțiune va cuprinde 3, a doua va cuprinde 9, iar a treia secțiune va fi afișată sub primele două secțiuni și va cuprinde 12 coloane:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Web Design Responsiv - Interogări media. Breakpoints tipice dispozitivului. Orientare: Portret / Peisaj.

Vezi videoclipul: Web Design Responsiv - Interogări medi... Vezi toată lecția: CSS Responsive Web Design - Interogări... Citește teoria: Web Design Responsiv - Interogări medi...

Breakpoints tipice dispozitivului (Typical Device Breakpoints)

Există tone de ecrane și dispozitive cu înălțimi și lățimi diferite, așa că este greu să creezi un punct de break (breakpoint) exact pentru fiecare dispozitiv. Pentru a menține lucrurile simple, puteți viza cinci grupuri:

Exemplu:

/* Dispozitive extra mici (telefoane, 600px și mai mici) */
@media only screen and (max-width: 600px) {...}

/* Dispozitive mici (tablete portret și telefoane mari, 600px sau mai mari) */
@media only screen and (min-width: 600px) {...}

/* Dispozitive medii (tablete landscape, 768px sau mai mari) */
@media only screen and (min-width: 768px) {...}

/* Dispozitive mari (laptopuri / desktop, 992px sau mai mari) */
@media only screen and (min-width: 992px) {...}

/* Dispozitive extra mari (laptop-uri mari și desktop-uri, 1200px sau mai mari) */
@media only screen and (min-width: 1200px) {...}

Orientare: Portret / Peisaj (Landscape)

Interogările media (media queries) pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.

Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Lanscape):

Exemplu:

Pagina web va avea un fundal luminos (lightblue background) dacă orientarea este în modul peisaj (lanscape):

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Web Design Responsiv - Interogări media. Ce este o interogare media? Regula @media. Adăugați un Breakpoint.

Vezi videoclipul: Web Design Responsiv - Interogări medi... Vezi toată lecția: CSS Responsive Web Design - Interogări... Citește teoria: Web Design Responsiv - Interogări medi...

Web Design Responsiv - Interogări media

Ce este o interogare media? (Media Query)

Interogarea media (Media Query) este o tehnică CSS introdusă în CSS3.

Utilizează regula @media pentru a include un block de proprietăți CSS numai dacă o anumită condiție este adevărată.
Dacă fereastra browserului este de 600px sau mai mică, culoarea de fundal (background color) va fi deschisă la culoare (lightblue):

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Adăugați un Breakpoint

Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane și a fost responzive, dar nu arăta bine pe un ecran mic.

Interogările media (Media queries) vă pot ajuta. Putem adăuga un punct de break (breakpoint) unde anumite părți ale designelui se vor comporta diferit pe fiecare parte a punctului de break (breakpoint).

Utilizați o interogare media pentru a adăuga un punct de break (breakpoint) la 768px:

Exemplu:

Când ecranul (fereastra browserului) devine mai mic decât 768px, fiecare coloană ar trebui să aibă o lățime de 100%:

/* Pentru desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* Pentru telefoane mobile: */
  [class*="col-"] {
    width: 100%;
  }
}

Web Design Responsiv - Interogări media. Alt Breakpoint.

Vezi videoclipul: Web Design Responsiv - Interogări medi... Vezi toată lecția: CSS Responsive Web Design - Interogări... Citește teoria: Web Design Responsiv - Interogări medi...

Alt Breakpoint

Puteți adăuga câte breakpoints doriți.

Vom insera, de asemenea, un punct de break (breakpoint) între tablete și telefoane mobile.

Facem acest lucru prin adăugarea a încă o interogare media (media query ) (la 600px) și un set de clase noi pentru dispozitive mai mari de 600px (dar mai mici decât 768px):

Exemplu:

Rețineți că cele două seturi de clase sunt aproape identice, singura diferență este denumirea (col- și col-s-):

/* Pentru telefoane mobile: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Web Design Responsiv - Interogări media. Ascundeți elementele cu interogări media. Modificați dimensiunea fontului cu interogări media.

Vezi videoclipul: Web Design Responsiv - Interogări medi... Vezi toată lecția: CSS Responsive Web Design - Interogări... Citește teoria: Web Design Responsiv - Interogări medi...

Ascundeți elementele cu interogări media (Hide Elements With Media Queries)

O altă utilizare obișnuită a interogărilor media (media queries) este de a ascunde elemente pe dimensiuni diferite de ecran:

Exemplu:

/* Dacă dimensiunea ecranului este lată sau mai mică de 600px, ascunde elementul */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Modificați dimensiunea fontului cu interogări media (Change Font Size With Media Queries)

De asemenea, puteți utiliza interogări media (media queries) pentru a modifica dimensiunea fontului unui element pe diferite dimensiuni ale ecranului:

Exemplu:

/* Dacă dimensiunea ecranului este de 601px sau mai mult, setați dimensiunea fontului <div> la 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* Dacă dimensiunea ecranului este de 600px sau mai mică, setați dimensiunea fontului <div> la 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Web Design Responsiv. Imagini de fundal. Proprietatea background-size.

Vezi videoclipul: Web Design Responsiv. Imagini de funda... Vezi toată lecția: CSS Responsive Web Design - Imagini Citește teoria: Web Design Responsiv. Imagini de funda...

Imagini de fundal (Background Images)

Imaginile de fundal (Background Images) pot răspunde, de asemenea, la redimensionare și scalare (resizing și scaling).

Aici vom prezenta trei metode diferite:

1. Dacă proprietatea background-size este setată pe „contain”, imaginea de fundal (background Images) se va scala și va încerca să se potrivească zonei de conținut. Cu toate acestea, imaginea își va păstra raportul de aspect (relația proporțională între lățimea și înălțimea imaginii (width și height)):

Iată codul CSS:

Exemplu:

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

2. Dacă proprietatea background-size este setată pe „100% 100%”, imaginea de fundal (background image) se va întinde pentru a acoperi întreaga zonă de conținut:

Iată codul CSS:

Exemplu:

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

3. Dacă proprietatea background-size este setată pe „cover”, imaginea de fundal (background image) se va scala pentru a acoperi întreaga zonă de conținut. Observați că valoarea „cover” păstrează raportul de aspect (aspect ratio), iar o parte din imaginea de fundal (background image) poate fi tăiată:

Iată codul CSS:

Exemplu:

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Web Design Responsiv - Imagini. Elementul HTML5 picture. Asistență browser. Atributul srcset. Atributul media. Regula CSS @media.

Vezi videoclipul: Web Design Responsiv - Imagini. Elemen... Vezi toată lecția: CSS Responsive Web Design - Imagini Citește teoria: Web Design Responsiv - Imagini. Elemen...

Elementul HTML5 <picture>

HTML5 a introdus elementul <picture>, care vă permite să definiți mai multe imagini.

Asistență browser (Browser Support)

Elementul <picture> funcționează similar cu elementele <video> și <audio>. Configurați surse diferite, iar prima sursă care se potrivește preferințelor este cea utilizată:

Exemplu:

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Atributul srcset este necesar și definește sursa imaginii.

Atributul media este opțional și acceptă interogările media (media queries) pe care le găsiți în regula CSS @media.

De asemenea, ar trebui să definiți un element <img> pentru browserele care nu acceptă elementul <picture>.

Web Design Responsiv - Imagini. Utilizarea proprietății width. Utilizarea proprietății max-width. Adăugați o imagine la pagina web.

Vezi videoclipul: Web Design Responsiv - Imagini. Utiliz... Vezi toată lecția: CSS Responsive Web Design - Imagini Citește teoria: Web Design Responsiv - Imagini. Utiliz...

Web Design Responsiv - Imagini

Utilizarea proprietății width

Dacă proprietatea lățimii (width) este setată la un procent și înălțimea este setată la „auto”, imaginea va fi receptivă și va scala în sus și în jos:

Exemplu:

img {
  width: 100%;
  height: auto;
}

Observați că în exemplul de mai sus, imaginea poate fi redusă 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ățimii maxime (max-width) este setată la 100%, imaginea se va reduce dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială:

Exemplu:

img {
  max-width: 100%;
  height: auto;
}

Adăugați o imagine la pagina web de exemplu

Exemplu:

img {
  width: 100%;
  height: auto;
}

Web Design Responsiv - Imagini. Imagini diferite pentru dispozitive diferite. Interogarea media min-device-width.

Vezi videoclipul: Web Design Responsiv - Imagini. Imagin... Vezi toată lecția: CSS Responsive Web Design - Imagini Citește teoria: Web Design Responsiv - Imagini. Imagin...

Imagini diferite pentru dispozitive diferite

O imagine mare poate fi perfectă pe un ecran mare al unui computer, dar inutilă pe un dispozitiv mic. De ce să încărcați o imagine mare atunci când trebuie să o măriți în jos? Pentru a reduce încărcarea sau pentru orice alte motive, puteți utiliza interogări media (media queries) pentru a afișa imagini diferite pe dispozitive diferite.

Iată o imagine mare și una mai mică care vor fi afișate pe dispozitive diferite:

Exemplu:

/* Pentru width mai mic de 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* Pentru width 400px și mai mare: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

Puteți utiliza interogarea media (media query) min-device-width, în loc de min-width, care verifică lățimea dispozitivului, în loc de lățimea browserului. Atunci imaginea nu se va schimba când redimensionați fereastra browserului:

Exemplu:

/* Pentru dispozitive mai mici de 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* Pentru dispozitive 400px și mai mari: */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

Web Design Responsiv - Videoclipuri. Utilizarea proprietății width. Utilizarea proprietății max-width. Adăugați un videoclip la pagina web.

Vezi videoclipul: Web Design Responsiv - Videoclipuri. U... Vezi toată lecția: CSS Responsive Web Design - Videoclipu... Citește teoria: Web Design Responsiv - Videoclipuri. U...

Web Design Responsiv - 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:

video {
  width: 100%;
  height: auto;
}

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ă:

Exemplu:

video {
  max-width: 100%;
  height: auto;
}

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:

Exemplu:

video {
  width: 100%;
  height: auto;
}

Web Design Responsiv - Frameworks. Folosire W3.CSS.

Vezi videoclipul: Web Design Responsiv - Frameworks. Fol... Vezi toată lecția: CSS Responsive Web Design - Frameworks Citește teoria: Web Design Responsiv - Frameworks. Fol...

Web Design Responsiv - Frameworks

Există multe CSS Frameworks existente care oferă un design responsive.
Sunt gratuite și ușor de utilizat.

Folosire W3.CSS

O modalitate excelentă de a crea un design responsive este să folosești o foaie de stil responsive (responsive style sheet), cum ar fi W3.CSS
W3.CSS facilitează dezvoltarea site-urilor care arată frumos la orice dimensiune; desktop, laptop, tabletă sau telefon:

Exemplu:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Redimensionați această pagină responsive!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>Londra</h2>
    <p>Londra este capitala Angliei.</p>
    <p>Este cel mai populat oraș din Regatul Unit,
     cu o zonă metropolitană de peste 13 milioane de locuitori.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris este capitala Franței.</p>
    <p>Zona din Paris este unul dintre cele mai mari centre de populație din Europa,
     cu peste 12 milioane de locuitori.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo este capitala Japoniei.</p>
    <p>Este centrul zonei Tokyo,
     și cea mai populată zonă metropolitană din lume.</p>
  </div>
</div>

</body>
</html>

Web Design Responsiv - Frameworks. Bootstrap.

Vezi videoclipul: Web Design Responsiv - Frameworks. Boo... Vezi toată lecția: CSS Responsive Web Design - Frameworks Citește teoria: Web Design Responsiv - Frameworks. Boo...

Bootstrap

Un alt framework popular este Bootstrap, folosește HTML, CSS și jQuery pentru a face pagini web responsive.

Exemplu:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplu Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Primas mea pagină Bootstrap</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

CSS Grid Introducere. Proprietatea display. Coloane Grid. Rânduri Grid.

Vezi videoclipul: CSS Grid Introducere. Proprietatea dis... Vezi toată lecția: CSS Grid Introducere Citește teoria: CSS Grid Introducere. Proprietatea dis...

Proprietatea display

Un element HTML devine un container grid atunci când proprietatea sa display este setată pe grid sau în inline-grid.

Exemplu:

.grid-container {
  display: grid;
}

Exemplu:

.grid-container {
   afișare: inline-grid;
}

Toți copiii direcți (direct children) ai containerului grid devin automat elemente grid.

Coloane Grid (Grid Columns)

Liniile verticale ale elementelor grid se numesc coloane (columns).

Rânduri Grid (Grid Rows)

Liniile orizontale ale elementelor grid se numesc rânduri (rows).

CSS Grid Introducere. Gapuri Grid. Proprietăți: grid-column-gap, grid-row-gap, grid-gap. Proprietatea grid-column-gap. Proprietatea grid-row-gap. Proprietatea grid-gap.

Vezi videoclipul: CSS Grid Introducere. Gapuri Grid. Pro... Vezi toată lecția: CSS Grid Introducere Citește teoria: CSS Grid Introducere. Gapuri Grid. Pro...

Gapuri Grid

Spațiile dintre fiecare coloană/rând (column/row) se numesc gaps.

Puteți ajusta dimensiunea gapului folosind una dintre următoarele proprietăți:

grid-column-gap
grid-row-gap
grid-gap

Exemplu:

Proprietatea grid-column-gap stabilește diferența dintre coloane:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Exemplu:

Proprietatea grid-row-gap stabilește diferența dintre rânduri:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Exemplu:

Proprietatea grid-gap este o proprietate shorthand pentru proprietățile grid-column-gap și grid-row-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Exemplu:

Proprietatea grid-gap poate fi, de asemenea, folosită pentru a seta atât row gap cât și column gap într-o singură valoare:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

CSS Grid Introducere. CSS Modulul Grid Layout. Grid Layout. Asistență browser. Proprietățiile grid. Elemente grid. Layout grid.

Vezi videoclipul: CSS Grid Introducere. CSS Modulul Grid... Vezi toată lecția: CSS Grid Introducere Citește teoria: CSS Grid Introducere. CSS Modulul Grid...

CSS Modulul Grid Layout

Grid Layout

CSS Grid Layout Module oferă un sistem de dispunere bazat pe grilă, cu rânduri și coloane, ceea ce facilitează proiectarea paginilor web fără a fi nevoie să folosiți plutitoare și poziționare (floats și positioning).

Asistență browser(Browser Support)

Proprietățiile grid sunt acceptate în toate browserele moderne.

Elemente grid

Un layout grid este format dintr-un element părinte, cu unul sau mai multe elemente copil.

Exemplu:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

CSS Grid Introducere. Linii Grid. Element grid. Container grid.

Vezi videoclipul: CSS Grid Introducere. Linii Grid. Elem... Vezi toată lecția: CSS Grid Introducere Citește teoria: CSS Grid Introducere. Linii Grid. Elem...

Linii Grid (Grid Lines)

Liniile dintre coloane se numesc linii coloană (column lines).
Liniile dintre rânduri se numesc linii rând (row lines).

Consultați numerele de linie atunci când introduceți un element grid într-un container grid:

Exemplu:

Plasați un element grid la linia coloanei 1 și lăsați-o să se încheie pe linia 3 a coloanei:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Exemplu:

Plasați un element grid la linia 1 de rând și lăsați-o să se încheie pe linia 3 de rând:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Grid Container. Proprietatea grid-template-rows. Valoarea space-separated-list. Proprietatea justify-content.

Vezi videoclipul: Grid Container. Proprietatea grid-temp... Vezi toată lecția: CSS Grid Container Citește teoria: Grid Container. Proprietatea grid-temp...

Proprietatea grid-template-rows

Proprietatea grid-template-rows definește înălțimea (height) fiecărui rând (row).

Valoarea este un space-separated-list, unde fiecare valoare definește înălțimea (height) rândului respectiv (row):

Exemplu:

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Proprietatea justify-content

Proprietatea justify-content este utilizată pentru alinierea întregului grid în interiorul containerului.

Notă: Lățimea (width) totală a gridului trebuie să fie mai mică decât lățimea (width) containerului pentru ca proprietatea justify-content să aibă vreun efect.

Exemplu:

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Exemplu:

.grid-container {
  display: grid;
  justify-content: space-around;
}

Exemplu:

.grid-container {
  display: grid;
  justify-content: space-between;
}

Exemplu:

.grid-container {
  display: grid;
  justify-content: center;
}

Exemplu:

.grid-container {
  display: grid;
  justify-content: start;
}

Exemplu:

.grid-container {
  display: grid;
  justify-content: end;
}

Grid Container. Proprietatea display. Proprietatea grid-template-columns. Valoarea space-separated-list. Proprietatea grid-template-columns.

Vezi videoclipul: Grid Container. Proprietatea display.... Vezi toată lecția: CSS Grid Container Citește teoria: Grid Container. Proprietatea display....

Grid Container

Pentru a face ca un element HTML să se comporte ca un container grid, trebuie să setați proprietatea display la grid sau la inline-grid.
Containerele grid constau din elemente grid, plasate în coloane și rânduri (columns și rows).

Proprietatea grid-template-columns

Proprietatea grid-template-columns definește numărul de coloane din aspectul gridului dvs. (grid layout) și poate defini lățimea (width) fiecărei coloane.

Valoarea este un space-separated-list, unde fiecare valoare definește lungimea coloanei respective.

Dacă doriți ca aspectul gridului (grid layout) să conțină 4 coloane, specificați lățimea (width) celor 4 coloane sau „auto” dacă toate coloanele trebuie să aibă aceeași lățime (width).

Exemplu:

Realizați un grid cu 4 coloane:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Notă: Dacă aveți mai mult de 4 elemente într-un grid de 4 coloane, gridul va adăuga automat un nou rând (row) pentru a introduce elementele.

Proprietatea grid-template-columns poate fi de asemenea folosită pentru a specifica dimensiunea (lățimea)(width) coloanelor.

Exemplu:

Setați o dimensiune pentru cele 4 coloane:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Grid Container. Proprietatea align-content.

Vezi videoclipul: Grid Container. Proprietatea align-con... Vezi toată lecția: CSS Grid Container Citește teoria: Grid Container. Proprietatea align-con...

Proprietatea align-content

Proprietatea align-content este utilizată pentru alinierea verticală (vertically align) a întregului grid în interiorul containerului.

Notă: Înălțimea (height) totală a gridului trebuie să fie mai mică decât înălțimea (height) containerului pentru ca proprietatea align-content să aibă vreun efect.

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Exemplu:

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

CSS Articole Grid. Elemente copil (Articole). Proprietatea grid-column. Proprietățiile grid-column-start și grid-column-end.

Vezi videoclipul: CSS Articole Grid. Elemente copil (Art... Vezi toată lecția: CSS Grid Item Citește teoria: CSS Articole Grid. Elemente copil (Art...

CSS Articole Grid (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.

Notă: 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.

Exemplu:

Faceți ca „item1” să înceapă pe coloana 1 și să se încheie înainte de coloana 5:

.item1 {
  grid-column: 1 / 5;
}

Exemplu:

Faceți „item1” să înceapă pe coloana 1 și să se întindă 3 coloane:

.item1 {
  grid-column: 1 / span 3;
}

Exemplu:

Faceți „item2” să înceapă pe coloana 2 și să se întindă 3 coloane:

.item2 {
  grid-column: 2 / span 3;
}

CSS Articole Grid. Proprietatea grid-row. Proprietățiile grid-row-start și grid-row-end.

Vezi videoclipul: CSS Articole Grid. Proprietatea grid-r... Vezi toată lecția: CSS Grid Item Citește teoria: CSS Articole Grid. Proprietatea grid-r...

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.

Notă: 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:

Exemplu:

Faceți ca „item1” să înceapă pe row-line1 și să se încheie pe row-line 4:

.item1 {
  grid-row: 1 / 4;
}

Exemplu:

Faceți ca „item1” să înceapă pe rândul ( row) 1 și întinde 2 rânduri (rows):

.item1 {
  grid-row: 1 / span 2;
}

CSS Articole Grid. Denumirea elementelor grid. Elementele grid denumite.Proprietatea grid-template-areas.

Vezi videoclipul: CSS Articole Grid. Denumirea elementel... Vezi toată lecția: CSS Grid Item Citește teoria: CSS Articole Grid. Denumirea elementel...

Denumirea elementelor grid (Named grid items)

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.

Exemplu:

Item1 primește numele „myArea” și se întinde pe toate cele cinci coloane într-un grid layout de cinci coloane:

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Fiecare rând este definit prin apostroafe ('')

Coloanele din fiecare rând sunt definite în interiorul apostrofelor, separate de un spațiu.

Notă: Un semn de perioadă reprezintă un element grid fără nume.

Exemplu:

Permiteți „myArea” să întindă două coloane într-un aspect grid (grid layout) de cinci coloane (semnele de perioadă reprezintă elemente fără nume):

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

Pentru a defini două rânduri, definiți coloana celui de-al doilea rând în interiorul unui alt set de apostroafe:

Exemplu:

Faceți din „item1” un interval de două coloane și două rânduri:

.grid-container {
   grid-template-areas: 'myArea myArea. . .“ 'myArea myArea. . . ";
}

Exemplu:

Denumiți toate articolele și creați un ready-to-use webpage template:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

CSS Articole Grid. Proprietatea grid-area. Proprietățiile grid-row-start, grid-column-start, grid-row-end și the grid-column-end.

Vezi videoclipul: CSS Articole Grid. Proprietatea grid-a... Vezi toată lecția: CSS Grid Item Citește teoria: CSS Articole Grid. Proprietatea grid-a...

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.

Exemplu:

Faceți ca „item8” să înceapă pe row-line 1 și pe column-line 2 și să se încheie pe row-line 5 și pe column-line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Exemplu:

Faceți ca „item8” să înceapă pe row-line 2 și pe column-line 1 și întindeți 2 rânduri și 3 coloane:

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

CSS Articole Grid. Comanda articolelor.

Vezi videoclipul: CSS Articole Grid. Comanda articolelor... Vezi toată lecția: CSS Grid Item Citește teoria: CSS Articole Grid. Comanda articolelor...

Comanda articolelor (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.

Exemplu:

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Puteți aranja order pentru anumite dimensiuni de ecran, folosind interogări media (media queries):

Exemplu:

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Potrivire obiect CSS. Proprietatea CSS object-fit. Asistență browser.

Vezi videoclipul: Potrivire obiect CSS. Proprietatea CSS... Vezi toată lecția: CSS object-fit Citește teoria: Potrivire obiect CSS. Proprietatea CSS...

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.

Asistență browser (Browser Support)

Numerele din tabel specifică prima versiune a browserului care acceptă integral proprietatea.

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

Uită-te la următoarea imagine din Paris, care este de 400x300 pixeli:

Cu toate acestea, dacă stilul imaginii de mai sus este de 200x400 pixeli, va arăta astfel:

Exemplu:

img {
  width: 200px;
  height: 400px;
}

Vedem că imaginea este squeezed pentru a se potrivi cu containerul de 200x400 pixeli, iar aspectul său original este distrus.
Dacă folosim object-fit: cover; va tăia părțile laterale ale imaginii, păstrând aspect ratio și completând și spațiul, astfel:

Exemplu:

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Potrivire obiect CSS. Exemple. Proprietatea object-fit: cover;. Toate valorile proprietății CSS object-fit: fill, contain , cover, none, scale-down.

Vezi videoclipul: Potrivire obiect CSS. Exemple. Proprie... Vezi toată lecția: CSS object-fit Citește teoria: Potrivire obiect CSS. Exemple. Proprie...

Alte Exemple

Aici avem două imagini și dorim ca acestea să umple lățimea de 50% a ferestrei browserului și 100% din înălțime.

În următorul exemplu, NU folosim object-fit, așa că atunci când redimensionăm fereastra browserului, raportul de aspect al imaginilor va fi distrus:

Exemplu:

În următorul exemplu, folosim object-fit: cover; astfel, când redimensionăm fereastra browserului, raportul de aspect al imaginilor este păstrat:

Exemplu:

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)

Următorul exemplu arată toate valorile posibile ale proprietății object-fit:

Exemplu:

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

CSS - Introducere. Ce este CSS? De ce să folosești CSS? CSS salvează multă muncă!

Sintaxa CSS. Comentarii în CSS.

Selectori CSS. Selectorul de grupare CSS. Selectori simpli CSS.

Selectori CSS. Selectorul CSS class. Selectorul universal CSS.

Selectori CSS. Selectorul de elemente CSS. Selectorul CSS id.

Cum să adăugați CSS. CSS extern. Elementul link. Secțiunea head. Proprietatea margin-left.

Cum să adăugați CSS. CSS intern. CSS inline. Elementul style.

Cum să adăugați CSS. Fișe de stil multiple. Comandă în cascadă.

Culori CSS. Culoarea marginilor în CSS (CSS Border Color). Valori de culoare CSS (CSS Color Values): RGB, HEX, HSL, RGBA și HSLA.

Culori CSS. Valoarea CSS HEX.

Culori CSS. Valoarea RGBA. Valoarea HSLA. Parametrul alpha.

Culori CSS. Nume de culoare CSS. Culoare de fundal CSS. Culoare text CSS.

Culori CSS. Valoarea CSS RGB.

Culori CSS. Valoarea CSS HSL. Hue. Saturația​​​​​​​ (Saturation). ​​​​​​​Luminozitate (Lightness).

Fundaluri CSS. Culoare de fundal CSS.

Fundaluri CSS. Imagine de fundal CSS. Repetare de fundal CSS.

Fundaluri CSS. CSS background-repeat: no-repeat. Poziția de fundal CSS. Atasament de fundal CSS.

Fundaluri CSS. Fundal CSS - Proprietatea Shorthand. Proprietățiile de fundal CSS.

CSS Borders. CSS Border - Proprietatea Shorthand. Proprietăți border individuale: border-width, border-style, border-color.

CSS Borders. CSS Rounded Borders. Proprietatea border-radius.

CSS Borders. Proprietăți CSS Borders. CSS Border Style.

CSS Borders. Lățimea marginilor CSS (CSS Border Width). CSS Border Color.

CSS Borders. CSS Border - Individual Sides. Proprietatea border-style.

CSS Borders. Toate proprietățiile CSS Border.

Margini CSS. Margin - Proprietatea shorthand.

Margini CSS. Margin - Individual Sides. Proprietățiile CSS margin: margin-top, margin-right, margin-bottom, margin-left.

Margini CSS. Valoarea auto. Valoarea inherit. Margin Collapse. Toate proprietățiile CSS margin.

CSS Padding. Padding și elementul width. Proprietatea box-sizing.

CSS Padding. Exemple de padding: left padding, right padding, top padding, bottom padding.

CSS Padding. Padding - Proprietatea Shorthand. Proprietățiile individuale padding: padding-top, padding-right, padding-bottom, padding-left.

CSS Padding. Padding - Individual Sides. Proprietățiile padding: padding-top, padding-right, padding-bottom, padding-left.

CSS Height și Width. Valori CSS height/width: auto, lenght, %, initial, inherit.

CSS Height și Width. Setarea lățimii maxime.

CSS Height și Width. Proprietățiile de dimensiune CSS.

CSS Box Model. Explicația diferitelor părți: content, padding, border, margin.

CSS Box Model. Lățimea și înălțimea unui element.

CSS Outline. CSS Outline Style.

CSS Outline. CSS Outline Width. Proprietatea outline-width. Valori: thin, medium, thick, o dimensiune specifică.

CSS Outline. CSS Outline Offset. Proprietatea outline-offset. Proprietățiile CSS Outline: outline, outline-color, outline-offset, outline-style, outline-width.

CSS Outline. Proprietăți outline: outline-style, outline-color, outline-width, outline-offset, outline.

CSS Outline. CSS Outline Color. Proprietatea CSS outline-color: name, RGB, Hex,invert.

CSS Outline. Proprietatea Shorthand. Proprietăți outline individuale: outline-width, outline-style (obligatoriu), outline-color.

Text CSS. Aliniere text. Proprietatea text-align.

Text CSS. Indentare text. Proprietatea text-indent. Spațiul dintre litere. Proprietatea letter-spacing. Înălţimea liniei. Proprietatea line-height.

Text CSS. Toate proprietățiile de text CSS.

Text CSS. Culoarea textului. Proprietatea color.

Text CSS. Decorarea textului. Proprietatea text-decoration. Valoarea text-decoration: none;. Transformarea textului. Proprietatea text-transform.

Text CSS. Direcția textului. Distanțarea cuvintelor. Proprietatea word-spacing. Umbra textului. Proprietatea text-shadow.

Fonturi CSS. Familii de fonturi CSS. Tipuri de nume de fonturi: font family, generic family.

Fonturi CSS. Proprietatea font-family. Proprietatea font-style. Valori: normal, italic, oblique.

Fonturi CSS. Mărimea fontului. Proprietatea font-size. Valoarea font-size: absolută sau relativă. Setarea dimensiunii fontului cu pixeli.

Fonturi CSS. Grosimea fontului. Proprietatea font-weight. Dimensiune responsivă a fontului.

Fonturi CSS. Varianta fontului. Proprietatea font-variant. Toate proprietățiile fontului CSS: font, font-family, font-size, font-style, font-variant, font-weight.

Fonturi CSS. Setarea dimensiunii fontului cu Em. Folosirea unei combinații de procente și Em.

Icoane CSS. Cum se adaugă icoane. Font Awesome Icons.

Icoane CSS. Icoane Bootstrap. Icoane Google.

Link-uri CSS. Link-uri stilate. Proprietăţi CSS: color, font-family, background. Links states: a: link, a:visited, a: hover, a: active.

Link-uri CSS. Decorarea textului. Culoare de fundal.

Link-uri CSS. Butoane link avansate.

Liste CSS. O imagine ca marcator de element de listă. Proprietatea list-style-image. Poziționare marcatori de elemente de listă. Proprietatea list-style-position: "list-style-position: outside;", "list-style-position: inside;".

Liste CSS. Eliminare setări implicite. Proprietatea list-style-type:none. Listă - Proprietatea Shorthand. Proprietatea list-style: list-style-type, list-style-position , list-style-image.

Liste CSS. Lista HTML și proprietățiile listelor CSS. Tipuri principale de liste: liste neordonate(ul), liste ordonate(ol). Diferiți marcatori de elemente de listă. Proprietatea list-style-type.

Liste CSS. Stilizarea listei cu culori. Etichete: ol, ul, li. Toate proprietățiile listei CSS

Tabele CSS. Bordurile tabelelor. Elementele tabel, th și td. Reducere margini tabel.

Tabele CSS. Aliniere verticală. Proprietatea vertical-align. Tabel Padding. Proprietatea padding. Elementele td și th.

Tabele CSS. Tabele cu dungi. Culoarea tabelului. Elementul th.

Tabele CSS. Lățimea și înălțimea tabelului. Proprietățiile width și height. Aliniere orizontală. Proprietatea text-align.

Tabele CSS. Divizoare orizontale. Proprietatea border-bottom. Tabel Hoverable. Selectorul :hover. Elementele th, td și tr.

Tabele CSS. Tabel responsiv. Elementul div și overflow-x: auto. Proprietățiile tabelului CSS: ​​​​​​​border, border-collapse, border-spacing, caption-side, empty-cells, table-layout.

CSS Display. Layout CSS - Proprietatea display. Elementele block și inline. Elemente la nivel de block: div, h1 - h6, p, form, header, footer, section. ​​​​​​​Elemente în linie: span, a, img.

CSS Display. Display: none;. Înlocuirea valorii implicite a afișajului. Proprietatea display. Elementele inline si block. Elementele li, span, a.

CSS Display. Ascunde un element - display:none sau visibility:hidden? ​​​​​​​Proprietăți CSS de afișare / vizibilitate: display, visibility.

CSS max-width. CSS Layout - width și max-width.

CSS Poziţie. Poziționarea textului într-o imagine.

CSS Poziţie. Elementul cu position: relative;. Elementul cu position: fixed;.

CSS Poziţie. Elementul cu position: absolute;.

CSS Poziţie. Elementul cu position: sticky;.

CSS Poziţie. CSS Layout - Proprietatea position. Valori de poziție: static, relative, fixed, absolute sau sticky. Element cu position: static;

CSS Poziţie. Elemente suprapuse. Proprietatea z-index.

Culori CSS. Valoarea CSS HSL. Hue. Saturația (Saturation). Luminozitate (Lightness).

Tabele CSS. Tabel responsiv. Elementul div și overflow-x: auto. Proprietățiile tabelului CSS: border, border-collapse, border-spacing, caption-side, empty-cells, table-layout.

CSS Display. Layout CSS - Proprietatea display. Elementele block și inline. Elemente la nivel de block: div, h1 - h6, p, form, header, footer, section. Elemente în linie: span, a, img.

CSS Display. Ascunde un element - display:none sau visibility:hidden? Proprietăți CSS de afișare / vizibilitate: display, visibility.

CSS Float. Elementul float: left;. Elementul float: none;.

CSS Pseudo-clase. Pseudo-clase și clase CSS. Hover pe div. Simple Tooltip Hover.