HTML: Foi de stil încorporate

O foaie de stil încorporată afectează fiecare element de pe pagină. Pentru a crea o foaie de stil încorporată, trebuie să mergem la elementul head al documentului. (Îți amintești elementul head? În sfârșit, iată și altceva care merge acolo, în afară de elementul title.)

Iată un exemplu de foaie de stil încorporată (vă rugăm să iertați verdele-pe-galben strident):

Exemplul 3.3. Toate paragrafele verzi

<html>  
<head>  
  <title>When Irish Eyes Are Smiling</title>  
  <style type="text/css">  
    p {color: #008000; background: #ffff00}  
  </style>  
</head>  
<body>  
  <h1>When <em>Irish Eyes</em> Are Smiling</h1>  
  <p>  
    Here's how the chorus goes:  
  </p>  
  <p>  
    When Irish eyes are smiling,<br>  
    <em>Sure, 'tis like the morn in Spring.</em><br>  
    In the lilt of Irish laughter<br>  
    <em>You can hear the angels sing.</em><br>  
    When Irish hearts are happy,<br>  
    <em>All the world seems bright and gay.</em><br>  
    And when Irish eyes are smiling,<br>  
    <em>Sure, they steal your heart away.</em>  
  </p>  
</body>  
</html>

Sintaxa este puțin diferită față de ceea ce suntem obișnuiți, dar ideea de bază (regula CSS) ar trebui să pară familiară. Să examinăm componentele foii de stil:

<style type=”text/css”>: Elementul style indică începutul foii de stil. Trebuie să intre în interiorul head. Atributul type specifică faptul că utilizați o foaie de stil CSS, spre deosebire de utilizarea unui alt limbaj pentru foi de stil, care nu a fost încă inventat. Este puțin prostesc, dar specificația HTML o cere, așa că mergeți mai departe și adăugați-o.
p: Selectorul CSS. Aceasta spune, „fă ceva tuturor elementelor p”.
{color: #008000; background: #ffff00}: Declarațiile CSS. Le-am mai văzut înainte în elementul style, deși fără acolade. Împreună cu selectorul p, declarațiile constituie o regulă CSS: „faceți toate paragrafele text verde cu un fundal galben strălucitor”. După cum s-a menționat în „Culoare de fundal”, trebuie să separați mai multe declarații cu punct și virgulă.

Nota

Veți vedea uneori dezvoltatori care își înglobează regulile CSS încorporate într-un comentariu HTML, astfel: <style><!– p {color: #008000;} –></style>. Acesta este un truc care ascunde regulile dvs. CSS de browsere extrem de vechi care nu pot procesa deloc CSS, și anume Mosaic și Netscape Navigator 1.0. Din fericire, aceste browsere au murit de mult și nu mai este nevoie să faceți acest lucru.

Acum, am fi putut obține același efect adăugând aceste declarații la atributul style al fiecărui paragraf. Diferența cheie este că foaia de stil afectează toate paragrafele. Selectorul ne permite să specificăm declarațiile o dată, iar browserul le aplică apoi tuturor elementelor care se potrivesc cu selectorul.