Site-uri și aplicații pentru web

Curs 2


Capitolul 2. CSS

Unități de măsură în CSS

În CSS pentru exprimarea dimensiunilor se folosesc diverse unităţi de măsură: px, pt, pc, %, em, ex, in, mm, cm. Importanţă practică au însă doar următoarele:

  1. px – pixeli (puncte ecran). Exemplu: 14px. Pentru majoritatea aplicaţiilor de navigare, mărimea normală, implicită a fontului paragrafelor (p) este de 16px.
  2. em – este o unitate adoptată din domeniul tipografiei şi reprezintă mărimea curentă a fontului. De exemplu 2em înseamnă de două ori mărimea curentă. Raportarea se face permanent la mărimea curentă a fontului din blocul în care dimensiunea 2em este folosită. Dacă de exemplu pentru elementul html mărimea este lăsată cea implicită, (16px), pentru body (inclus în html) este impusă de 0.75em (ar fi 12px) şi pentru paragrafe (p, evident incluse în body) este impusă mărimea 0.875em, mărimea reală în pixeli a fontului paragrafelor va fi 0.75*0.875*16px=10.5px.
    Observație: Această unitate este scalabilă. Ea permite modificarea proporţională a mărimii tuturor fonturilor când cititorul paginii web modifică mărimea fontului de bază folosind facilităţile browser-ului (Ctrl + pentru zoom + respectiv Ctrl – pentru zoom -);
  3. rem (root em) – permite raportarea mărimilor fonturilor folosite la o singură mărime de font, respectiv cea impusă pentru elementul html. Unitatea a fost introdusă începând cu CSS3.
  4. % - procent din mărimea normală. Se poate folosi în loc de em (100% = 1em) dar se utilizează mai ales la definirea dimensiunilor blocurilor în care este divizată pagina.

Observaţie: Mărimea normală, implicită a textului pentru majoritatea browser-elor este de 16px. Deci 1em = 16px. Evident, dacă nu se realizează o scalare (zoom + sau zoom -). Calculând în pixeli şi neglijând efectul de moştenire, o variantă de exprimare a mărimii în em a fonturilor ar putea fi:

  • h1: 1.25em (20px);
  • h2: 1.125em (18px)
  • h3 1em (16px)
  • textul normal (p): 0.875em (14px) sau 0.75em (12 px)
  • textul scris mic (subtext, note de picior s.a.): 0.625em (10 px).

Pentru rem se poate gândi şi o variantă mai simplu de utilizat, astfel:

  • html: mărimea de referinţă, 0.625rem (nescalat înseamnă 10px);
  • textul normal (p): 1.2rem sau 1.4rem (fără scalare dimensiunile sunt 12px sau 14px);
  • h3: 1.6rem (16 px), etc.

Pentru definirea mărimii fontului se foloseşte proprietatea font-size. Exemple:

html {font-size: 0.625rem;}  /* pt. elementul html s-a impus 10px */
h1 {font-size: 2rem;}  /* 20px */
p {font-size: 1.4rem;}  /* 14px */


TOP

Culori

În CSS culoarea se exprimă prin codul acesteia exprimat în hexazecimal sau în zecimal (folosind expresia RGB(r, v, a)).

De regulă se va folosi notația hexazecimală. În acest caz codul are formatul #rrggbb, valorile componentelor culorii fiind definite în ordinea roşu (rr), verde (gg) şi albastru (bb). Exemple:

  #ff0000 sau color: red (sau color:RGB(255,0,0))
  #00ff00 sau color: green (sau color:RGB(0,255,0))
  #0000ff sau color: blue (sau color:RGB(0, 0, 255))
  #ffff00 sau color: yellow (sau color:RGB(255,255,0))
  #00ffff sau color: aqua (sau color:RGB(0,255,255))
  #ff00ff sau color: magenta (sau color:RGB(255,0,255))
  #000000 sau color: black (sau color:RGB(0,0,0))
  #ffffff sau color: white (sau color:RGB(255,255,255)).

Observații:

1. Folosind codificarea prezentată se pot crea 256x256x256 culori distincte.
2. Dând valori identice celor trei componente ale culorii se obțin nuanțe de gri.

Exemplu de stilizare a unui element h1:

   h1 {font-size:1.75rem; color: #357CAC;}

Codul unei culori exprimat în zecimal (RGB) poate fi obţinut şi folosind fereastra standard din Windows.

Observaţie: CSS permite şi creare de zone în care culoarea de umplere are un oarecare grad de transparenţă. Astfel de culori se pot defini folosind espresia RGBA(rrr,ggg,bbb,a). Ultima valoare, a (prescurtare de la alpha), indică transparenţa şi poate lua valori între 0 (perfect transparent) şi 1 (complet opac). Exemplu:

   h1 { font-size:1.25em; color:#00FF00; background-color:RGBA(255,255,255,0.35);}

TOP

Fonturi

În CSS, aspectul și mărimea unui font sunt impuse prin utilizarea unui ansamblu de șapte proprietăți: font-family, font-style, font-weight, font-stretch, font-variant, font-size și line-height.


font-family

Aspectul fontului se defineşte folosind proprietatea font-family. Valorile obişnuite sunt:

  • font-family:"Times New Roman", Times, serif sau
  • font-family:Tahoma, Verdana, Arial, sans-serif.

Browser-ul va încerca să aplice fonturile în ordinea dată. În lipsa fonturilor precizate se va folosi unul dintre fonturile din familia indicată (serif sau sans-serif).

Diferenţa dintre familiile serif şi sans-serif rezultă din figura următoare.

Observație: Setul de fonturi normale poate fi extins prin folosirea unor fonturi din Internet sau adăugate în site. Se poate accesa colecţia de fonturi a companiei Google (https://fonts.google.com/). Pentru a folosi o familie de fonturi disponibilă pe acest site se parcurg paşii următori:

  1. Se accesează https://fonts.google.com/ şi se alege fontul potrivit. Pentru a alege fontul, se poate tasta un șir de caractere care conține și diacritice.
    Apoi se studiază fonturile afișate și se selectează fontul dorit (Monserrat):
  2. După selectarea fontului, se poate studia cum se va afișa acesta pentru diferite dimensiuni și linii de trasare:
  3. Se selectează apoi fontul dorit. Aplicația va afișa un panou suplimentar din care se poate copia codul care trebuie inserat în secțiunea <head> și modul de scriere a proprietății font-family pentru elementul HTML care trebuie să se afișeze cu acest font:

Pentru fontul selectat, în secțiunea head a paginii se adaugă linia:

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

Pentru utilizarea fontului, regula de stilizare trebuie scrisă astfel:

h1 {
    font-family: 'Montserrat', sans-serif;
}


font-style

Proprietatea font-style poate lua una dintre valorile: normal, italic sau oblique:

Ca exemplu de utilizare, se poate defini clasa .inclinat care va fi folosită pentru a impune font-style: italic:

 .inclinat {font-style: italic;}


font-weight

Proprietatea font-weight poate avea una dintre valorile: normal, bold, bolder, lighter, inherit sau una dintre valorile: 100, 200, 300, 400, 500, 600, 700, 800, sau 900.

Pentru valorile uzuale (normal sau bold) utilizarea proprietății este evidentă, iar pentru celelalte puteți accesa https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight.


font-stretch

Proprietatea font-stretch permite impunerea unei anumite lățimi a caracterelor unui font. Valorile cele mai utilizate ale acestei proprietăți sunt normal, condensed (caractere îngustate) sau expanded (caractere mai late decât în varianta normală). Pentru alte valori posibile puteți accesa https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch.


font-variant

Proprietatea font-variant permite în principal reprezentarea literelor mici folosind tot majuscule, dar de dimensiuni mai mici. Valorile pe care le poate lua această proprietate sint: normal, small-caps, initial sau inherit.


font-size

Modul de impunere a valorilor acestei proprietăți a fost tratat pe larg în subcapitolul destinat prezentării unităților de măsură din CSS.


line-height

Proprietatea line-height este folosită pentru a impune o anumită distanță între liniile unui text. Valorile posibile ale acestei proprietăți sunt normal sau o valoare numerică. Dacă pentru valoarea numerică nu se precizează unitatea de măsură, mărimea se calculează înmulțind mărimea fontului cu valoarea numerică.

Exemple:

  line-height: normal;
  line-height: 2.5;
  line-height: 1.5rem;


Notația prescurtată pentru definirea unui font

Pentru definirea unui font se poate folosi o scriere prescurtată:

  font: ... font-size ... font-family;

Notația de mai sus indică faptul că dintre cele șapte proprietăți care definesc un font, două sunt obligatorii: mărimea (font-size) și aspectul (font-family). De asemenea, font-family trebuie scrisă obligatoriu pe ultima poziție. Proprietățile opționale font-style, font-variant și font-weight trebuie scrise înainte de font-size, în orice ordine.

Exemple:

body {
    font: italic small-caps bold 24px Georgia, sans-serif;
}

p {
    font: 12px/200% Georgia, sans-serif;
}

În al doilea exemplu, scriind valorile 12px/200%, s-a impus atât mărimea fontului (font-size: 12px) cât și lățimea liniilor de text (line-height: 200%, sau 24px). Evident, dacă pentru line-height nu s-ar preciza dimensiunile, un rezultat similar se putea obține scriind:

p {
    font: 12px/2 Georgia, sans-serif;
}


Aplicație:

Ca prim exerciţiu de stilizare a unui document hipertext se propune realizarea unei pagini web conţinând poezia Numai una, de George Coşbuc.

Rezolvare:

Poezia poate fi descărcată din Internet. Primele două strofe sunt următoarele:

Pe umeri pletele-i curg râu 
Mlădie, ca un spic de grâu, 
Cu șorțul negru prins în brâu,
O pierd din ochi de dragă.
Și când o văd, îngălbenesc;
Și când n-o văd, mă-mbolnăvesc,
Iar când merg alții de-o pețesc,
Vin popi de mă dezleagă.

La vorbă-n drum, trei ceasuri trec
Ea pleacă, eu mă fac că plec,
Dar stau acolo și-o petrec
Cu ochii cât e zarea.
Așa cum e săracă ea,
Aș vrea s-o știu nevasta mea,
Dar oameni răi din lume rea
Îmi tot închid cărarea.

Pentru codificare se va deschide editorul de texte (Sublime Text) şi se va tasta conţinutul paginii:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Numai una!</title>
    </head>
    <body>
        <h1>Numai una!</h1>
        <p>De George Coșbuc</p>
        <p>Pe umeri pletele-i curg râu 
        Mlădie, ca un spic de grâu, 
        Cu șorțul negru prins în brâu,
        O pierd din ochi de dragă.
        Și când o văd, îngălbenesc;
        Și când n-o văd, mă-mbolnăvesc,
        Iar când merg alții de-o pețesc,
        Vin popi de mă dezleagă.</p>
        <p>La vorbă-n drum, trei ceasuri trec
        Ea pleacă, eu mă fac că plec,
        Dar stau acolo și-o petrec
        Cu ochii cât e zarea.
        Așa cum e săracă ea,
        Aș vrea s-o știu nevasta mea,
        Dar oameni răi din lume rea
        Îmi tot închid cărarea.</p>
    </body>
</html>

După salvare pe disc şi afişare în fereastra browser-ului favorit se obţine o primă versiune a paginii:



Rezultatul nu este tocmai satisfăcător deoarece browser-ul nu ia în considerare apăsarea tastei Enter. Apăsarea acesteia pentru a trece la linie nouă este deci inutilă. Totuşi strofele apar în blocuri de text diferite deoarece sunt conţinute în elemente p separate.

Pentru a remedia modul de afişare a versurilor se va introduce după fiecare vers un element br (eng. break).

Observație: Marcarea unui element br nu necesită o pereche de marcaje. Limbajul HTML de codificare a documentelor hipertext a fost la un anumit moment modificat astfel încât să fie compatibil cu standardul XML de înregistrare a informaţiilor structurate, rezultatul fiind standardul de codificare XHTML. În XML, deci şi în XHTML nu se acceptă marcaje fără pereche. Pentru marcarea elementelor care nu necesită folosirea unei perechi de marcaje (ca br, img, meta, link şi altele), în XHTML se foloseşte sintaxa <marcaj />. Deoarece HTML5 a apărut după XHTML, acesta permite folosirea marcajelor XHTML (din considerente de compatibilitate). Deci elementul break (br) se poate marca scriind fie <br>, fie <br />.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Numai una!</title>
</head>
<body>
   <h1>Numai una!</h1><p>De George Coșbuc</p>
   <p>Pe umeri pletele-i curg râu <br>Mlădie, ca un spic de grâu, <br>
   Cu șorțul negru prins în brâu,<br>O pierd din ochi de dragă.<br>
   Și când o văd, îngălbenesc;<br>Și când n-o văd, mă-mbolnăvesc,<br>
   Iar când merg alții de-o pețesc,<br>Vin popi de mă dezleagă.</p>
   <p>La vorbă-n drum, trei ceasuri trec<br>Ea pleacă, eu mă fac că plec,<br>
   Dar stau acolo și-o petrec<br>Cu ochii cât e zarea.<br>
   Așa cum e săracă ea,<br>Aș vrea s-o știu nevasta mea,<br>
   Dar oameni răi din lume rea<br>Îmi tot închid cărarea.</p>
</body>
</html>

Rezultat:

Observaţie: Pe lângă ignorarea apăsării tastei Enter, browser-ul ignoră şi spaţiile consecutive (reţine doar unul) şi apăsările tastei Tab. Ca urmare, în fereastra aplicaţiei de editare conţinutul unei pagini poate fi structurat prin indentarea blocurilor de text, ca şi în cazul programelor de calculator. Medii de dezvoltare avansate (a fost menţionat deja NetBeans) pot realiza structurarea paginii automat, ca efect al executării unei comenzi de formatare. Exemplu, în NetBeans:

Limitările specifice limbajului de codificare HTML5 opresc la acest nivel dezvoltarea paginii.

Observaţie: Pagina web afişată este denumită şi pagină nestilizată, deoarece este afişată folosind reguli de afişare integrate în browser. De fapt ea este stilizată şi anularea stilului implicit înaintea impunerii propriilor reguli va face obiectul unei activităţi aparte. Aspectul paginii nestilizate poate diferi de la un browser la altul.

În continuare va trebui să impunem prin stiluri modul de afişare a informaţiei. Fiind vorba de o pagină izolată, stilurile pot fi inserate la începutul paginii, în head:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Numai una!</title>
    <style>
        html {font-size: 0.625rem;}  /* pt. elementul html s-a impus 10px */
        h1 {
            font-size: 2rem;  /* 20 px */
            color:RGB(192,0,0); 
            font-style: italic;
            font-family:Tahoma, Verdana, sans-serif; 
        }

        p {
            font-size: 1.2rem; /* 12px */
            font-style: italic; 
            font-family:Tahoma, Verdana, sans-serif ;
        }
    </style>
</head>

Rezultat:



Dacă stilurile sunt mutate într-un fişier separat denumit stil.css plasat în acelaşi director cu fișierul poezie.html, elementul head va conţine un element link, astfel:

<head>
    <meta charset="UTF-8">
    <title>Numai una!</title>
    <link href="css/stil.css" rel="stylesheet">
</head>

Observaţie: Scrierea regulilor în fişierul de stiluri se realizează de obicei pe mai multe linii, ca în exemplul anterior. Această scriere permite vizualizarea mai uşoară a diferitelor proprietăţi.


TOP

Aplicația Browsersync

Browsersync este o aplicație care permite instituirea supravegherii unui număr de fișiere dintr-un director. Ori de câte ori unul dintre fișierele supravegheate se modifică, Browsersync va reîncărca pagina web sau aplicația web căreia fișierul modificat îi aparține.

Procesul de instalare a aplicației este următorul:

  1. Se accesează https://nodejs.org/en/ și se instalează Node.js.
  2. Se instalează Browsersync. Pentru aceasta se tastează într-o fereastră Command prompt comanda:
   npm install -g browser-sync
  1. Se instituie supravegherea fișierelor .html, .css și .js din componența proiectului. Pentru aceasta, în fereastra command prompt deschisă în directorul proiectului se tastează comanda:
   browser-sync start --server --files "*.html, css/*.css, js/*.js"


Observație: Pentru a deschide o fereastră Command prompt într-un director, o variantă este navigarea în acel director folosind aplicația File Explorer. Apoi, în caseta care afișează adresa directorului se tastează comanda "cmd":


După introducerea comenzii de mai sus (browser-sync start --server ...), pentru a deschide în fereastra browser-ului pagina index.html, se va tasta:

 http://localhost:3000

Evident, pentru o altă pagină a site-ului se va tasta și numele fișierului:

 http://localhost:3000/despre.html

TOP