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/nantucket-fall-vacation-holiday-guide), î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 Savoy, helvtica, sans-serif;
    color: #333333;
}

Observație: În cursul 2 s-a prezentat modul de inserare în pagină a unui font care nu există în calculator. Căutând fontul "Savoy", acesta nu apare în lista celor oferite de Google. În schimb puteți descărca fișierul care îl conține de pe mai multe site-uri, identificate la căutarea fontului pe Internet. De exemplu site-ul https://fontsov.com/.

După găsirea fontului și identificarea variantei dorite (regular, italic sau bold), fontul se poate descărca sub forma unui fișier având extensia ttf (în cazul dat, Savoy_Regular.ttf).

Fișierul care conține fontul (Savoy_Regular.ttf) va trebui descărcat î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: Savoy;
  src: url(Savoy_Regular.ttf);
}

/* Urmează utilizarea fontului: */

p {
    font: 2rem/3.2rem Savoy, helvtica, sans-serif;  /* 2rem = 20px */
    color: #333333;
}

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: Savoy;
  src: url(Savoy_Regular.ttf);
}

h1 {
font: 4.94rem/6.5rem Savoy, helvtica, sans-serif;
    color: #333333;
}

p {
    font: 2rem/3.2rem Savoy, helvtica, sans-serif;
    color: #333333;
}
</style>
</head>

<body>
    <p>There was—at one point in the not so distant past—a defined high season for 
    coastal destinations like the island getaway of Nantucket. Namely, the strict Memorial 
    Day to Labor Day window in which the local population usually swelled with city 
    escapists, their bags full of rosé and white denim. But, as our offices become more 
    mobile, and our tether to a single home base becomes increasingly slack, these rules 
    have changed. With that in mind, find here a one-stop guide for everything an impromptu 
    Nantucket dweller might want or need during the typical—or, in this case, 
    not-so-typical—fall vacation season.</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ă:

Același font (Savoy) este folosit și pentru elementul <h1>:

h1 {
font: 4.94rem/4.9rem Savoy, helvtica, sans-serif;
    color: #333333;
}

Dacă se completează pagina de test cu un titlu (<h1>) și se compară rezultatul cu titlul din site-ul Vogue, se observă și aici o asemănare perfectă.


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 un bloc se adaugă regula:

   box-sizing: border-box;

atunci dimensiunile width şi height vor reprezenta mărimea blocului măsurată 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 putea folosi la dimensionarea tuturor elementelor de tip "bloc" din pagină, la începutul fișierului de stiluri, acolo unde sunt puse stilurile zise "de resetare", apare 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