Site-uri și aplicații pentru web

Curs 4


Capitolul 4. Stilizarea elementelor de tip "bloc"

Stiluri de resetare

Înainte de a începe stilizarea elementelor din pagina web considerată (pagina din site-ul revistei Vogue, https://www.vogue.com/article/the-best-hotels-in-the-hamptons), în fișierul care va conține stilurile (stil.css în cazul acesta) se vor insera câteva reguli de stilizare care au rolul de a anula ansamblul de reguli de stilizare specifice diferitelor browsere (necontrolabil de altfel). Astfel de regului poartă numele sugestiv de stiluri de resetare. Procedând în acest mod, afișarea paginii nu va mai depinde de browser-ul utilizat.

/* Stiluri de resetare */
* {
    box-sizing: border-box;
}

aside, article, body, div, footer, header, html, nav, section, ol, ul, li, p {
    margin: 0;
    padding: 0;
}

/* Stiluri specifice aplicatiei */
/* Pregătim exprimarea mărimii fonturilor */ 
html {
    font-size: 0.625rem;  /* pt. elementul html s-a impus 10px */
} 

body {
    font-size: 2rem;  /* 20 px, fara zoom */
} 

Stilurile legate de fonturi stabilesc mărimea implicită a fontului la 20px în interiorul elementelor incluse în <body> și pentru care nu există alte specificații.


TOP

Preluarea caracteristicilor fonturilor

Pentru a examina și prelua caracteristicile unui element din pagină (având în vedere că realizăm o copie a unui site existent) selectați cu butonul drept al mouse-ului un punct din pagină și, în meniul contextual afișat, selectați inspect:

Apoi, în panoul afișat, activați instrumentul de selectare afișat în stânga-sus, evidențiat în imagine (clic pe pictogramă):

Apoi indicați cu un clic elementul din pagină a cărui stilizare vă interesează:

Browser-ele vă arată atunci cum este stilizat elementul indicat. În exemplul considerat, indicând un bloc de text (de fapt un element <p>), Google Crome a afișat următoarele informații:

Deci puteți adăuga fișierului stil.css regula de stilizare a elementelor <p>.

p {
    font: 20px AdobeGaramondPro, serif;
    color: #000000;
}

Observație: În cursul 2 s-a prezentat modul de inserare în pagină a unui font disponibil pe site-ul firmei Google (https://fonts.google.com). Metoda expusă vu va fi aplicată și pentru inserarea în pagină a fontului AdobeGaramondPro deoarece acesta nu face parte dintre fonturile disponibile pe acest site.

Ca urmare se va realiza o căutare pe Internet. Fontul Adobe Garamond Pro apare pe site-ul https://www.cufonfonts.com/.

După găsirea fontului și identificarea variantei dorite (regular, italic sau bold), fontul se poate descărca sub forma unei arhive .zip conținând mai multe fișiere printre care și un fișier denumit AGaramondPro-Regular.otf.

Fișierul care conține fontul (AGaramondPro-Regular.otf) va trebui extras din arhivă și memorat în directorul care conține fișierul de stiluri, stil.css.

Utilizarea acestui font presupune încărcarea lui înaintea primei referiri:

@font-face {
  font-family: AdobeGaramondPro;
  src: url(AGaramondPro-Regular.otf);
}

/* Urmează utilizarea fontului: */

p {
    font: 2rem/3.2rem AdobeGaramondPro, serif;  /* 2rem = 20px */
    color: #000000;
}

Pentru verificarea soluției puteți realiza o mică pagină web de test:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Vogue</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
<style>
/* Stiluri de resetare */
* {
    box-sizing: border-box;
}

aside, article, body, div, footer, header, html, nav, section, ol, ul, li, p {
    margin: 0;
    padding: 0;
}

/* Stiluri specifice aplicatiei */
/* Pregătim exprimarea mărimii fonturilor */ 
html {
    font-size: 0.625rem;  /* pt. elementul html s-a impus 10px */
} 

@font-face {
  font-family: AdobeGaramondPro;
  src: url(AGaramondPro-Regular.otf);
}

h1 {
font: 4.94rem/6.5rem AdobeGaramondPro, serif;
    color: #000000;
}

p {
    font: 2rem/3.2rem AdobeGaramondPro, serif;
    color: #000000;
}
</style>
</head>

<body>
    <p>Looking for the best hotels in the <a href="https://www.vogue.com/article/the-best-hotels-in-the-hamptons">Hamptons</a>? As Memorial Day approaches (and the lazy summertime feel that comes with it), a trip to the end of Long Island becomes top of mind. Between the rugged dunes of Montauk, the polished town of East Hampton, or reachable-by-ferry-only Shelter Island—with several additional towns dotting the South Fork—you can find whatever fits your vacation vibe.</p>
</body>
</html>

În pagina de test, textul folosit în elementul p este cel din pagina site-ului Vogue. Rezultatul comparării aspectului celor două paragrafe arată o similitudine perfectă:

Pentru elementul <h1> în pagina analizată este folosit un alt font denumit VogueAvantGarde)

h1 {
font: 4.94rem/4.9rem VogueAvantGarde, helvetica, sans-serif;
    color: #000000;
}

Din păcate nici acest font nu poate fi găsit pe site-ul companiei Google, deci trebuie căutat un site de unde poate fi descărcat, urmând procedura cunoscută deja.


TOP

Stilizarea elementelor de tip "bloc"

În continuare va fi realizat fişierul stil.css conţinând stilurile necesare afişării corecte a paginii considerate din site-ul revistei Vogue. Înainte de a începe stilizarea efectivă va fi însă prezentată geometria elementelor de tip "bloc", prezentată în imagine.

În schiţă apare un chenar colorat denumit border. Acesta poate fi impus folosind reguli CSS (tip de linie, grosime, culoare etc.). Dacă nu s-a realizat acest lucru, chenarul nu va exista. În cazul blocurilor din fişierul nestilizat chenarul lipseşte.

Spaţiul dintre conţinutul efectiv şi border se numeşte padding. La aplicarea pe fundalul blocului a unei culori sau a unei imagini, acestea vor ocupa tot spaţiul din interiorul border-ului deci se vor extinde şi peste padding.

Zona exterioară border-ului este denumită margin. Ea este transparentă şi serveşte la distanţarea blocurilor.

Observație: Dacă două blocuri se întâlnesc de-a lungul unei laturi, distanţa dintre ele nu va fi suma mărimilor zonelor margin corespunzând celor două blocuri. Distanțarea se va realiza folosind valoarea maximă, ca în imaginea următoare.

În HTML4 dimensiunile unui bloc sunt definite în principal prin proprietăţile width şi height. Aceste proprietăţi definesc dimensiunile părţii utile (interioare) a unui bloc. Pentru a obţine dimensiunea zonei din pagină ocupată efectiv de un bloc este necesară adăugarea mărimilor celorlalte elemente geometrice ale blocului (padding, border şi margin).

Având în vedere dificultăţile gestionării locului ocupat de un bloc în pagină în varianta HTML4, în CSS3 s-a introdus o nouă proprietate, box-sizing. Astfel, dacă pentru elementele de tip bloc dintr-o pagină se adaugă regula:

   box-sizing: border-box;

atunci dimensiunile width şi height ale acestora vor reprezenta mărimile blocurilor măsurate pe exteriorul border-ului.

În acest caz gestionarea poziţiei şi a dimensiunii blocurilor este mai uşoară și mai intuitivă. Proprietatea box-sizing este implementată de toate browserele actuale. Pentru a o impune, la începutul fișierului de stiluri, acolo unde sunt puse stilurile zise "de resetare", se inserează o regulă scrisă astfel:

   * {box-sizing: border-box;}

Observaţie: În general un bloc pentru care nu s-au specificat dimensiuni se va extinde automat astfel încât să ocupe pe orizontală tot spaţiul disponibil iar pe verticală să conţină elementele pe care fişierul hipertext le plasează în interiorul lui. Dar așa cum se va vedea, există și o excepție.

Pe lângă width şi height există însă şi alte proprietăţi, utile mai ales în crearea site-urilor adaptabile (eng. responsive), respectiv min-width, max-width, min-height şi max-height.

  • min-width – permite limitarea scăderii lăţimii unui bloc până la o anumită valoare. Se utilizează când lăţimea acelui bloc, width este exprimată în unităţi relative (em, rem, %) pentru a limita îngustarea blocului la afişarea pe ecrane mici. Exemplu:
<style>
p {
    width: 25%;
    min-width:150px;
    background-color: brown;
}
</style>
  • max-width – permite limitarea creşterii lăţimii unui bloc până la o anumită valoare. Se utilizează când lăţimea acelui bloc, width este exprimată în unităţi relative (em, rem, %) pentru a limita creşterea blocului la afişarea pe ecrane mari. Exemplu:
#blocLateral img {
    display: block;
    width: 47%;
    max-width: 728px;
    height: auto;
}

Celelalte două proprietăţi, min-height şi max-height operează similar, dar sunt folosite mai rar.

Pentru imagini se foloseşte frecvent height: auto, ceea ce impune scalarea uniformă a acestora dacă lăţimea se modifică.

Lăţimea elementelor geometrice prezentate (padding, border şi margin) poate fi specificată printr-o valoare unică (exprimată de cele mai multe ori în pixeli sau %) sau separat. Dacă se impun valori distincte pentru marginile de pe diferite laturi ale blocului se vor folosi sufixele –top, -right, -bottom şi -left. Exemplu:

article {
    padding: 8px;  /* Valoare unică */
    margin-top: 32px;
    margin-left: 10px;
}

Observaţie: În CSS nu este definită o proprietate care să impună centrarea pe orizontală a unui bloc în interiorul spaţiului disponibil. Pentru a realiza acest tip de dispunere se foloseşte proprietatea margin, astfel:

#container {
    margin: 8px auto 8px auto;  /* Ordinea: top – right – bottom – left */
}

sau, mai simplu,

   #container {margin: 8px auto;}

Deci când dimensiunile pentru top - bottom respectiv left – right coincid, se pot introduce pentru margin, border sau padding doar două valori. Prima valoare reprezintă valoarea comună pentru top şi bottom iar cea de-a doua, valoarea pentru left şi right.

Observaţie: Cadrarea conţinutului de tip "inline" a unui bloc (text, elemente de tip inline sau care sunt declarate ca fiind inline) se realizează folosind proprietatea text-align. Valorile peosibile ale acesteia sunt: left, right, center şi justify. Exemplu:

h1 {
    text-align: center;
}

TOP

Definirea aspectului fundalului blocurilor

CSS permit aplicarea pe fundalul unui bloc a unei culori, a unei imagini sau ambele.

Impunerea unei culori pentru fundalul blocurilor se realizează folosind proprietatea background-color, ca în exemplul următor:

   body {background-color:#b0c4de;}

Impunerea unei imagini se realizează folosind proprietatea background-image, astfel:

   #head-princ {background-image: url('../imagini/peisaj.png');}

Dacă imaginea indicată nu umple complet blocul, aceasta va fi repetată atât pe orizontală cât şi pe verticală până la umplerea acestuia. Pentru a controla modul de repetare a imaginii de fundal există proprietatea background-repeat cu valorile posibile:

  • repeat-x - repetare doar în direcţia orizontală,
  • repeat-y - repetare doar în direcţia verticală şi
  • no-repeat.

Exemplu:

.nav-princ {
    background-image: url('imagini/bara.png');
    background-repeat: repeat-x;
    background-color: #CCF0DC;
}

Observaţie: Exemplul precedent este o soluţie de aplicare pe fundal a unui gradient de culoare. În acest caz imaginea utilizată (bara.png) va fi un şir vertical de pixeli a căror culoare variază de la o valoare iniţială până la culoarea de fundal, efectul fiind cel din imaginea următoare:

Dacă imaginea de fundal nu este repetată (background-repeat: no-repeat) poziţia acesteia în cadrul blocului este colţul din stânga-sus. Aceasta poate fi modificată folosind proprietatea background-position împreună cu o pereche de valori din lista următoare:

  • left top (background-position:left top;)
  • left center;
  • left bottom;
  • right top;
  • right center;
  • right bottom;
  • center top;
  • center center;
  • center bottom.

Se poate însă preciza şi mai exact poziţia imaginii de fundal folosind pentru background-position o pereche de valori numerice reprezentând poziţia imaginii faţă de colţul din stânga-sus a blocului. De obicei poziţia se exprimă în '%' sau în px.

În cadrul exemplului de site considerat nu există culori sau imagini aplicate pe fundalurile blocurilor.


TOP