Cascading Style Sheets (CSS) pentru HTML – Atributul style

Până acum am învățat câteva constructe HTML de bază: paragrafe, titluri și liste. Totul este foarte frumos, dar prin ele însele, aceste elemente sunt oarecum lipsite de viață. Un h1 este la fel ca orice alt h1 de acolo… nu?

Din fericire, nu. Putem personaliza aspectul h1-urilor noastre (și orice alt element) folosind un limbaj numit Cascading Style Sheets (CSS). Am văzut deja un indiciu despre ce pot face foile de stil atunci când ne-am ocupat cu culoarea primului plan și culoarea fundalului. Dar CSS poate face mult mai mult decât atât.

Ca exemplu a ceea ce poate face CSS, faceți o plimbare prin CSS Zen Garden. Fiecare pagină din CSS Zen Garden are exact același text și marcare. Singura diferență este CSS, dar fiecare pagină pare radical diferită.

În primul rând, vom învăța o nouă metodă de aplicare a stilurilor, care este mult mai eficientă decât ceea ce am făcut în capitolele precedente. La început, vom schimba doar culoarea, deoarece culoarea este simplă și dă sensul. Dar până la sfârșitul acestui capitol, îți vei extinde dramatic vocabularul stilistic.

Când ai terminat cu această secțiune, ar trebui să poți:

• Crea o foaie de stil pentru pagina ta web sau pentru întregul site web.
• Crea stiluri denumite, reutilizabile, folosind clase și ID-uri.
• Aplica modificări sofisticate de font oricărui element HTML.
• Modifica umplutura, marginile și bordurile.
• Alinia și indenta textul.

Atributul style

Până acum ne-am ocupat de două componente majore ale paginilor noastre web: elementele, care definesc structura de bază a paginii, și stilul, care rafinează și mai mult modul în care ar trebui să arate pagina. Am văzut efectele stilului în „Culori”:

Exemplu: Paragraf roșu (Redux)

1. <p>
2.   The grandmother lived out in the wood, half a league from the village,
3.   and just as Little Red-Cap entered the wood, a wolf met her. Red-Cap
4.   did not know what a wicked creature he was, and was not at all afraid
5.   of him.
6. </p>
7. <p style=”color: red”>
8.   ‘Good day, Little Red-Cap,’ said he.
9. </p>
10. <p>
11.   ‘Thank you kindly, wolf.’
12. </p>

Acum, este bine că putem face un singur paragraf roșu, dar ce se întâmplă dacă am dori ca toate paragrafele să fie roșii? Sau ce se întâmplă dacă am vrea să facem ceva mai mult decât să schimbăm culoarea paragrafului?

La începutul anilor 1990, singura modalitate de a controla culoarea, dimensiunea și fontul textului era elementul font. Deci, oamenii au scris o mulțime de texte HTML care arătau astfel:

Exemplu: Elementul fontului

1. <B><I><FONT Size=”+2″>
2. <FONT FACE=”Palatino, Arial, Helvetica”>
3. <FONT color=”#ff0000″>
4. Kneel Before the Power of the Font Element!
5. </FONT>
6. </font></Font></i></B>
8. <p><FONT Size=”-1″>
9. <FONT FACE=”Arial, Helvetica, sans-serif”>
10. <FONT color=”#123456″>
11. Ow! The bad HTML code! It burns us, burns us, precious!
12. </font></font></FoNt></p>

Aceasta a fost o problemă extraordinară din multe motive. Trebuia să tastezi în continuare acest tip de marcare pe toată pagina și, dacă șeful tău ți-a spus mai târziu să schimbi dimensiunea fontului, trebuia să refaci tot acest cod din nou.

Atributul style este o îmbunătățire față de elementul font, dar încă suferă de aceeași problemă de bază: nu este reutilizabil. Nu dorești să adăugați un element style la fiecare element de pe pagină. Din fericire, există o modalitate mult mai bună de a face toate acestea. În zilele noastre, nu ar trebui să utilizezi niciodată elementul font, iar atributul style doar puțin dacă nu chiar deloc. În secțiunea următoare, vom analiza o modalitate mult mai bună de a face acest lucru.

Sursa:  “The Pocket HTML Tutorial” Copyright 2022 de Evan Goer, licența CC BY 3.0. Traducere și adaptare de © 2023 Nicolae Sfetcu