O foaie de stil externă definește aspectul unei pagini web. Puteți utiliza o foaie de stil pentru a specifica lucruri precum dimensiunea, culoarea și fontul textului, culoarea butoanelor sau poziția meniurilor și a barelor laterale.
Cod utilizat într-o foaie de stil externă
Există două tipuri de cod utilizate pentru a crea o pagină web de bază:
- Limbaj de marcare HyperText (HTML): Definește conținutul unei pagini web. Acesta conține textul real cu un mark-up care identifică dacă secțiunile de text sunt paragrafe, titluri sau liste. De asemenea, conține linkuri către imagini care apar pe pagină și hyperlinkuri către pagini externe.
- Foi de stil în cascadă (CSS): Un limbaj de codare utilizat pentru a specifica modul de afișare a conținutului. Acesta definește modul în care fiecare tip de element de text este afișat și poate afișa același tip de element în mod diferit dacă aparțin unor clase diferite sau au un ID diferit. Acest lucru permite lucrurilor precum meniurile și listele să se comporte foarte diferit în textul principal al unei pagini web.
În general, separarea stilului de conținut este o idee bună, deoarece vă permite să vă concentrați asupra unui singur lucru la un moment dat. Acest lucru devine și mai important într-o echipă, permițând specialiștilor în conținut și prezentare să lucreze independent de restul. Poate mai important, permite, de asemenea, să se aplice uniform un singur set de instrucțiuni de stil pe un întreg site web.
Prezentarea vizuală a site-ului web poate fi apoi schimbată dintr-o singură foaie de stil fără a edita fiecare pagină web individual. Pentru site-urile web complexe mai mari, pot fi utilizate mai multe foi de stil pentru a controla textul, meniurile și diviziunile din pagini. Această colecție de foi de stil poate fi numită „temă”.
Utilizarea unui CSS extern pentru a lega HTML la CSS
Este posibil să includeți stilul CSS direct în codul HTML al unei pagini web, folosind CSS pentru a stiliza individual fiecare paragraf și a se îndrepta diferit. Acest tip de stil inline în general nu este o idee bună, deoarece pierzi toate avantajele separării stilului de conținut. În special, pierdeți capacitatea de a vă actualiza în mod consecvent întregul site web dintr-un singur fișier.
Modul corect de a aplica un stil unui site web este să creați un singur fișier de foaie de stil extern pentru fiecare tip de stil pe care doriți să îl aplicați, apoi faceți referire la aceste fișiere din fiecare fișier HTML. De exemplu, este posibil să aveți următoarele foi de stil externe:
- text.css
- meniuri.css
- layout.css
Puteți face modificări la codul CSS în acele foi de stil externe fără a le modifica nume de fișiere, adică referințele la aceste fișiere, în cadrul HTML al tuturor paginilor dvs. web, nu vor fi schimbat.
Exemple de HTML și CSS
O pagină HTML foarte simplă poate conține următorul cod:
Totul despre mine!
Această pagină este despre mine și de ce sunt minunat.
Dacă doriți să vedeți cum arată acest lucru într-un browser web, copiați textul într-un editor de text, cum ar fi Notepad. Salvați fișierul ca „index.html” și trageți-l în browserul dvs. pentru a vedea stilul vechi.
O foaie de stil externă simplă poate fi legată de această pagină adăugând următorul cod sub.
type = "text / css"
href = "myStyle.css" />
Creați un alt fișier text numit myStyle.css, situat în același folder ca index.html care conține următorul cod:
h1 {
culoare: # FF7643;
font-face: Arial '
}
p {
culoarea rosie;
dimensiunea fontului: 1,5em;
}
Puteți face mult mai multe cu CSS. Dacă doriți să aflați mai multe, Școlile W3 este un loc minunat pentru a începe.