Vă amintiți HTML (Hypertext Markup Language)? Limbajul de codare care servește drept fundație pentru orice dezvoltare web? Ei bine, dacă HTML este primul limbaj pe care veți dori să îl învățați atunci când vreți să construiți site-uri web, atunci CSS este al doilea.
Ce este CSS? Și ce legătură are cu HMTL?
CSS înseamnă Cascading Style Sheets, cu accent pus pe „Style”. În timp ce HTML este folosit pentru a structura un document web (definind termeni precum titluri și paragrafe și permițându-vă să încorporați imagini, videoclipuri și alte elemente media), CSS apare și specifică stilul documentului dvs. – aspectul paginii, culorile și fonturile sunt toate determinate de CSS. Gândiți-vă la HTML ca la o fundație (fiecare casă are una) și la CSS ca la opțiuni estetice (există o mare diferență între un conac boieresc și o casă modernă de la mijlocul secolului).
Cum funcționează CSS?
CSS aduce stil paginilor web prin interacțiunea cu elemente din HTML. Elementele sunt componentele HTML individuale ale unei pagini web, de exemplu un paragraf, care în HTML ar putea arăta astfel:
<p>Acesta este paragraful meu!</p>
Dacă doriți ca acest paragraf să pară roz și îngroșat pentru persoanele care văd pagina web printr-un browser, ați folosi cod CSS care arată astfel:
p { color:pink; font-weight:bold; }
În acest caz, „p” (paragraful) se numește „selector” – este partea din codul CSS care specifică ce element HTML îi va afecta stilul CSS. În CSS, selectorul este scris în stânga primei paranteze. Informația dintre paranteze se numește declarație și conține proprietăți și valori care sunt aplicate selectorului. Proprietățile sunt informații precum dimensiunea fontului, culoarea și marginile, în timp ce valorile sunt setările pentru acele proprietăți. În exemplul de mai sus, „culoarea” și „greutatea fontului” sunt ambele proprietăți, iar „roz” și „bold” sunt valori. Setul complet între paranteze
{ color:pink; font-weight: bold; }
este declarația și, din nou, „p” (adică paragraful HTML) este selectorul. Aceleași principii de bază pot fi aplicate pentru a modifica dimensiunile fontului, culorile de fundal, spatiile marginilor și multe altele. De exemplu:
body { background-color:lightblue; }
ar face ca fundalul paginii dvs. să fie albastru deschis sau:
p { font-size:20px; color:red; }
va crea un paragraf cu font de 20 de puncte cu literele roșii.
CSS extern, intern sau inline?
S-ar putea să vă întrebați cum se aplică de fapt acest cod CSS conținutului HTML. La fel ca HTML, CSS este scris în text simplu, printr-un editor de text sau un procesor de text de pe computer și există trei modalități principale de a adăuga acel cod CSS la paginile HTML. Codul CSS (sau Style Sheets) poate fi extern, intern sau inline. Style Sheets externe sunt salvate ca fișiere .css și pot fi utilizate pentru a determina aspectul unui întreg site web printr-un singur fișier (în loc să adăugați instanțe individuale de cod CSS la fiecare element HTML pe care doriți să îl ajustați). Pentru a utiliza o foaie de stil externă, fișierele dvs. .html trebuie să includă o secțiune de antet care face link către foaia de stil externă și arată cam așa:
<head> <link rel=”stylesheet” type=”text/css” href=mysitestyle.css”> </head>
Aceasta va lega fișierul .html la foaia dvs. de stil externă (în acest caz, mysitestyle.css), iar toate instrucțiunile CSS din acel fișier se vor aplica apoi paginilor dvs. .html.
Foile de stil interne sunt instrucțiuni CSS scrise direct în antetul unei anumite pagini .html. (Acest lucru este util mai ales dacă aveți o singură pagină pe un site care are un aspect unic.) O foaie de stil internă arată cam așa. . .
<head>
<style>
Body { background-color:thistle; }
P { font-size:20px; color:mediumblue; }
</style>
</head>
. . . o culoare de fundal și paragrafe cu font albastru mediu de 20 de puncte vor fi acum aplicate acestei pagini .html.
În cele din urmă, stilurile inline sunt fragmente de CSS scrise direct în cod HTML și aplicabile doar unei singure instanțe de codare. De exemplu:
<h1 style=”font-size:40px;color:violet;”>Titlu!</h1>
ar face ca un titlu specific pe o singură pagină .html să apară cu font violet, de 40 de puncte.
În general, foile de stil externe sunt cea mai eficientă metodă de implementare a limbajului CSS pe un site web (este mai ușor să urmăriți și să implementați stilul unui site dintr-un fișier CSS dedicat), în timp ce foile de stil interne și stilul inline pot fi folosite în diferite cazuri, atunci când trebuie făcute modificări individuale de stil.
Deci, dacă HTML este fundația, cadrele, pereții și grinzile care susțin site-ul dvs., luați în considerare CSS ca fiind culoarea vopselei, stilurile ferestrelor și amenajarea interioară care apare ulterior. Nu puteți ajunge nicăieri fără să puneți acea bază mai întâi, dar — odată ce o faceți — veți dori să continuați cu ceva stil, iar CSS este modul în care vă puteți decora interiorul.
Comentarii