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.

Ghid WordPress pentru dezvoltatori

WordPress este o platformă pentru site-uri web rapidă, fiabilă, cu facilități multiple pentru dezvoltatori și ușor de utilizat. Totusi, dezvoltatorii și beneficiarii au de multe ori nevoie să adauge funcționalități suplimentare pentru a răspunde nevoilor lor. Acest ghid oferă unele … Citeşte mai mult

Nu a fost votat 19.07 lei Selectează opțiunile

Ghid WordPress pentru începători

WordPress combină simplitatea pentru utilizatorii şi editori cu complexitate suportului software pentru dezvoltatori. Acest lucru îl face mai flexibil, fiind în acelaşi timp uşor de utilizat. Simplitatea sa face posibilă instalarea şi publicarea online rapid. Nimic nu ar trebui să … Citeşte mai mult

Nu a fost votat 14.29 lei – 26.19 lei Selectează opțiunile

Proiectarea, dezvoltarea şi întreţinerea siturilor web

Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult

Nu a fost votat 14.29 lei – 57.21 lei Selectează opțiunile