Site-uri și aplicații pentru web

Curs 5


Stilizarea elementelor de tip bloc (continuare)

Stilizarea avansată a elementelor de tip bloc


Stilizarea border-ului

Proprietatea CSS border permite specificarea geometriei, culorii și grosimii de trasare a chenarului care poate încadra un element HTML. Exemplu:

  <p style="border: 1px solid red; padding: 12px;">Paragraf cu border de 1px, roșu.</p>

Paragraf cu border.

Pentru a defini aspectul border-ului se folosesc trei proprietăți CSS: border-width, border-style (obligatorie) și border-color.

  • Proprietatea border-style poate lua valoarea none (fără border) sau una dintre valorile de mai jos:
  • Proprietatea border-width se exprimă de obicei în px şi permite impunerea grosimii liniei folosite la trasare.
  • Proprietatea border-color permite impunerea culorii liniei folosite la trasare.

Pentru a indica valori distincte pentru fiecare dintre laturi, în numele proprietăţilor, după border se vor intercala denumirile laturilor (top, right, bottom şi left). Exemplu:

   border-top-style:dotted;
   border-right-style:solid;
   border-bottom-style:dotted;
   border-left-style:solid;

Dacă se impun toate cele trei proprietăţi şi acestea au aceleaşi valori pentru toate laturile se poate simplifica definirea border-ului, ca în cazul paragrafului de mai sus. La scrierea valorilor proprietăţilor se va respecta ordinea border-width border-style border-color.

O altă proprietate legată de trasarea border-ului este border-radius. Ea permite rotunjirea colțurilor border-ului.

Exemple:

  <p style="border: 1px solid red; border-radius: 5px; padding: 12px;">Paragraf cu border de 1px, roșu, și rază de 5px.</p>

Paragraf cu border de 1px, roșu, și rază de 5px.

  <p style="border: 1px solid red; border-radius: 2rem; padding: 1rem; font: 1.5rem/2rem sans-serif;">Paragraf cu border, rotunjit la capete.</p>

Paragraf cu border, rotunjit la capete.

Blocurile pot fi evidențate și prin efecte de umbrire. Numărul de parametri necesar impunerii unor valori corecte fiind mare, n-o să tratăm în detaliu acest efect. În locul unei prezentări exhaustive va fi inserată descrierea acestui efect așa cum apare ea în prezentarea realizată de compania Google în 2014 și intitulată Material design.

/* Shadow 0dp */
box-shadow: none;

/* Shadow 1dp */
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);

/* Shadow 2dp */
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

/* Shadow 3dp */
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);

/* Shadow 4dp */
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);

/* Shadow 6dp */
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.20);

/* Shadow 8dp */
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);

/* Shadow 9dp */
box-shadow: 0 9px 12px 1px rgba(0,0,0,0.14), 0 3px 16px 2px rgba(0,0,0,0.12), 0 5px 6px -3px rgba(0,0,0,0.20);

/* Shadow 12dp */
box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);

/* Shadow 16dp */
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);

/* Shadow 24dp */
box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);

Observație: Unitatea de măsură "dp" (prescurtare de la en. Density-independent Pixels) corespunde pixelilor cu care operăm în mod curent, mărimea acestora fiind însă cea specifică unui ecran având rezoluția nativă de 160 DPI (160 pixeli/inch).

Aplicație:

Se consideră 9 blocuri (elemente <div>) stilizate folosind clasa patrat definită astfel:

.patrat {
   display: inline-block;
   margin: 20px;
   width: 180px;
   height: 180px;
   border: 2px solid #F4F4F4; 
   padding: 12px;
   border-radius: 5px;
}

Cele 9 blocuri vor avea dimesiunile zonei umbrite de 0dp, 1dp, 2dp, 3dp, 4dp, 8dp, 12dp, 16dp și 24dp. Pentru a adăuga efectul de umbrire vor fi create 9 clase suplimentare, astfel:

/* Shadow 0dp */
.dp0 {
    box-shadow: none;
}

/* Shadow 1dp */
.dp1 {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
}

/* Shadow 2dp */
.dp2 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}

.dp3 {
/* Shadow 3dp */
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
}

/* Shadow 4dp */
.dp4 {
   box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
}

/* Shadow 8dp */
.dp8 {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
}


/* Shadow 12dp */
.dp12 {
    box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);
}

/* Shadow 16dp */
.dp16 {
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
}

/* Shadow 24dp */
.dp24 {
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);
}

Codul pentru inserarea celor 9 blocuri este următorul:

<div>
    <div class="patrat dp0">0dp</div><div class="patrat dp1">1dp</div>
    <div class="patrat dp2">2dp</div><div class="patrat dp3">3dp</div>
    <div class="patrat dp4">4dp</div><div class="patrat dp8">8dp</div>
    <div class="patrat dp12">12dp</div><div class="patrat dp16">16dp</div>
    <div class="patrat dp24">24dp</div>
</div>

Rezultat:

0dp
1dp
2dp
3dp
4dp
8dp
12dp
16dp
24dp


Observație: Pentru stilizarea elementelor de tip bloc de un real ajutor este pagina https://htmlcheatsheet.com/css/#.


Stilizarea elementelor care realizează divizarea spațiului de afișare

În multe site-uri, pagina afișată este divizată în mai multe părți folosind elementele de tip bloc cunoscute: elementele semantice introduse de HTML5 (header, main, aside, footer, article sau section) dar și elemente de tip div, acolo unde elementele semantice HTML5 nu au sens.

Pentru a nu fi afectate de regulile de gestionare a proprietății margin, toate blocurile folosite la împărțirea paginii în regiuni vor avea definită proprietatea padding.

Explicație:

Pentru elementul main din imaginea următoare s-a impus o valoare oarecare pentru proprietatea padding. Dacă nu s-ar fi realizat acest lucru, elementul h1, primul element inclus în main, care, evident, are o valoare (mare!) pentru proprietatea margin ar fi determinat decalarea elementul main (situația din imaginea din stânga). Regula enunțată deja (dacă două elemente au o latură comună, margin va fi identic pentru cele două și va fi maximul celor două valori) va face ca main să primească margin, deși nu trebuie deoarece compromite alinierea blocurilor din pagină! Impunerea unei valori pentru proprietatea padding a elementului main determină blocarea decalării acestuia datorită elementelelor pe care le include.


TOP

Poziţionarea elementelor tip bloc

Proprietatea display

Această proprietate aplicată unui element poate avea mai multe valori, cele mai importante fiind block, inline, inline-block, grid, flex şi none. Proprietatea operează astfel:

  • display: block este folosit pentru schimbarea comportamentului elementului astfel stilizat transformându-l din element de tip "inline" în element de tip "bloc". De obicei această proprietate este folosită pentru img şi a.
  • display: inline este opusul transformării precedente, respectiv transformă un element de tip "bloc" în element de tip "inline". Proprietățile height și width, dacă sunt prezente, vor fi ignorate;
  • display: inline-block realizează limitarea unui element de tip bloc (la o dimensiune dată de conținutul lui sau definită prin proprietățile height și width) iar afișarea se va face ca și cum ar fi un element inline. În acest mod putem afișa unul după altul mai multe blocuri.
  • display: grid permite declararea unui bloc ca fiind un container care conține o rețea de blocuri. Astfel se realizează în paginile cu o arhitectură mai complexă divizarea în regiuni a paginii.
  • display: flex pentru blocuri de tip container flex. Conținutul unui astfel de container este format din blocuri dispuse pe o linie (un rând sau o coloană). Modul lor de poziționare și de ocupare a spațiului disponibil este impus prin proprietăți specifice.
  • display: none suprimă afişarea elementului astfel stilizat. În acest mod se suprimă de exemplu afişarea unui element considerat neimportant în cazul afişării paginii pe ecrane mici (pe ecranele telefoanelor).

Observație: pentru ascunderea unui bloc există în CSS două proprietăți: display:none și visibility: hidden. Diferența dintre ele este faptul că, în cazul în care se folosește display: none, elementul este invizibil și nu i se alocă spațiu de afișare pe ecran, în timp ce, dacă se folosește visibility: hidden, elementul este ascuns dar spațiul pe care l-ar ocupa este totuși alocat.

Proprietatea position

Această proprietate se referă la poziţia în cadrul site-ului sau a ferestrei browser-ului în care se afişează un element de tip "bloc". Evident, pentru a o putea aplica unor elemente "inline" (img, a), acestea trebuie în prealabil transformate în elemente de tip "bloc" (display: block;).

Valori posibile:

  • position: static este valoarea implicită. Blocurile astfel poziţionate vor fi afişate în poziţia lor firească.
  • position: fixed impune afişarea elementului într-o poziţie fixă din fereastra browser-ului. Poziţia este definită printr-o pereche de proprietăţi suplimentare, una fiind top sau bottom iar a doua fiind left sau right. Valorile acestor proprietăţi indică decalarea faţă de laturile referite. Exemplu:
.dreapta_jos {
   position: fixed;
   right: 0;
   bottom: 0;
   width: 150px;
}

Elementul căruia i s-a ataşat clasa din exemplu va fi afişat în colţul din dreapta-jos a ferestrei browser-ului.

  • position: relative impune afişarea elementului într-o poziţie decalată faţă de poziţia în care s-ar fi afişat în mod normal. Decalarea se indică folosind o pereche de proprietăţi suplimentare, una fiind top sau bottom iar a doua fiind left sau right. Valorile acestor proprietăţi indică decalarea faţă de poziţia normală a obiectului. Exemplu:
h2.pos_left
{
   position:relative;
   left:-20px; top: -5px;
}

h2.pos_right
{
   position:relative;
   left:20px; top: 5px;
}
  • position: absolute impune afişarea elementului într-o poziţie definită faţă de laturile primul element superior în ierarhie care este poziţionat la rândul său (folosindu-se fie position: relative, fie position: absolute). Poziţia este definită tot printr-o pereche de proprietăţi suplimentare, una fiind top sau bottom iar a doua fiind left sau right. Valorile acestor proprietăţi indică decalarea faţă de laturile elementului superior în ierarhie considerat ca referinţă. Exemplu:
h2 {
   position:absolute;
   left:100px;
   top:70px;
   width: 40%;
}

Observaţie: Frecvent position: relative se foloseşte doar pentru a conferi unui bloc statutul de element poziţionat (deci nu se mai impun decalări folosind top, bottom, left sau right!), urmând să se exploateze în continuare această proprietate la definirea poziţiilor unor blocuri incluse folosind position: absolute.

Proprietatea float

Proprietatea float poate fi folosită pentru a putea plasa text lângă imagini.

Astfel pentru elementul img din exemplul dat se va folosi stilul:

img { float: right; margin:7px;} 

Proprietatea float mai are însă şi altă utilizare interesantă, respectiv este o metodă comodă de a dispune blocuri unul lângă altul pentru a forma coloane. Evident, blocurile care urmează să devină coloane vor trebui să aibă lăţimea (width) calculată corespunzător.

Observaţie: Blocurile declarate flotante sau pentru care s-a impus position: absolute sau position: fixed nu intră în calculul înălţimii blocului în care acestea sunt incluse.

Observaţie: Dacă un text scris alături de o imagine poziţionată folosind float se termină înainte de limita de jos a imaginii, se ajunge în situaţia din imaginea următoare. Se observă că imaginea trece peste limita de jos a blocului de text deoarece se aplică regula enunțată: la stabilirea înălţimii unui bloc elementele flotante pe care acesta le conține nu sunt luat în calcul.

<p><img src="imagini/papagal.jpg" style="float: right;" alt="pasare">Text plasat în stânga imaginii .......
</p>

Pentru a rezolva această situaţie, la stilizarea blocului care conţine textul şi imaginea (elementul p) se va adăuga proprietatea overflow: hidden.


TOP