Pe parcursul acestui șir, s-a menționat de mai multe ori fișierele de stil (stylesheets). Aceste fișiere de stil permit separarea strictă a aspectului și a design-ului. Elementele HTML sunt responsabile exclusiv pentru descrierea logică sau semantică a documentului web, datorită CSS-ului.
În general, la început poate fi util să știți cum arată un fișier de stil. Uitați-vă la un prim exemplu pentru asta.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>portalul tău de grafică, web & foto</p>
</body>
</html>Dacă documentul este afișat în browser, arată astfel:
În zona body a fișierului HTML au fost definite două elemente:
• un titlu
• un paragraf de text
Aceste două elemente sunt formatate prin CSS. Pentru asta, în zona head este definită o secțiune de stil folosind style. În interiorul acestei secțiuni se face formatarea elementelor.
Iată încă o dată definiția pentru titlu h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Prin sintaxa prezentată se stabilesc două aspecte:
• Se stabilește familia de fonturi.
• Se definește dimensiunea fontului.
În acest moment, vom discuta în general despre sintaxa utilizată. O instrucțiune CSS este alcătuită fundamental din două părți – un selector și o declarație CSS. Prin intermediul selectorului se stabilește elementul care trebuie formatat. Cum arată, în cele din urmă, acea formatare, este determinată de declarația CSS. Selectorul este întotdeauna în partea stângă, declarația CSS în partea dreaptă, într-o pereche de acolade.
Declarația CSS propriu-zisă este formată din două elemente, și anume proprietatea și valoarea. Proprietatea și valoarea sunt separate de un două puncturi. După valoare urmează un punct și virgulă.
Selector {
Proprietate: Valoare;
}Încorporarea fișierelor de stil
Există diferite modalități de a încorpora fișiere de stil în paginile web. În primul rând, puteți atribui instrucțiuni de stil direct unui tag HTML. Un exemplu:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
În acest exemplu, titlul este afișat cu culoarea albastră.
Puteți adăuga mai multe instrucțiuni de stil unui tag HTML.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Le puteți nota unul după altul, separate printr-un punct și virgulă.
În principiu, aceste așa-numite stiluri inline (Inline-Styles) sunt utile doar atunci când anumite zone dintr-o pagină trebuie să fie formatate individual. De obicei, ar trebui să evitați acest tip de formatare directă, deoarece codul HTML devine astfel neclar.
Definirea centrală în zona head
Puteți defini un fișier de stil central în interiorul zonei head a fișierului HTML. Acolo sunt definite toate stilurile care ar trebui să se aplice pentru acel fișier.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Avantajul acestei variante: Spre deosebire de varianta inline, formatele definite pot fi utilizate de mai multe ori în document. În exemplul anterior, clasa CSS text a fost definită. (Informații detaliate despre selectori precum clasa utilizată aici urmează în următorul tutorial). Această clasă poate fi acum folosită în mod liber în document.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">portalul tău de grafică, web & foto</p>
O astfel de definiție are, evident, avantajul față de cea inline că modificările pot fi efectuate foarte rapid.
Externalizarea instrucțiunilor CSS
Cel mai practic mod de a defini CSS-ul este externalizarea stilurilor într-un fișier extern. Astfel, oricâte fișiere HTML puteți avea acces la același fișier CSS. Astfel, se face posibilă o formatare uniformă a tuturor fișierelor care fac parte din proiectul web. Modificările ulterioare, care ar trebui să afecteze toate paginile, pot fi realizate fără probleme astfel.
<link rel="stylesheet" type="text/css" href="css/styles.css">
În antetul fișierului HTML este definit elementul link. În cadrul lui link, se specifică mai întâi combinația atribut-valoare rel="stylesheet". Apoi urmează type="text/css". Attributului href i se atribuie fișierul CSS corespunzător. Aici, asemenea cazului încărcării de imagini, aveți grijă să specificați calea corectă. În exemplul actual, presupun că fișierul CSS styles.css se află în directorul css, care la rândul său se află la același nivel cu fișierul HTML corespunzător.
Fișierul CSS referențiat este un fișier text obișnuit cu extensia css. În fișierul CSS extern sunt definite instrucțiunile CSS corespunzătoare.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternativă la varianta de link prezentată, se pot importa și fișiere CSS. Aici, instrucțiunile CSS sunt plasate într-un fișier extern. Se folosește următoarea sintaxă:
<style type="text/css">
@import url("css/styles.css");
</style>
În interiorul parantezelor se specifică calea către fișierul CSS de importat. De menționat că instrucțiunea @import este parte a sintaxei CSS. Prin urmare, această instrucțiune poate fi folosită și în interiorul fișierelor CSS. Acest lucru permite includerea altor fișiere CSS dintr-un fișier principal, permițând o organizare mai bună a fișierelor CSS.
Desigur, se pune întrebarea dacă ar trebui folosit link sau @import. În principiu, eu prefer link, deoarece această variantă este mai rapidă, ceea ce înseamnă că performanța paginii este mai bună.
Fișiere CSS pentru Medii Specifice
Se pot defini fișiere CSS pentru diferite medii precum imprimantele sau ecranele. Se folosește atributul media. Astfel, un fișier CSS poate fi asignat mai multor medii separate prin virgulă.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
În acest caz au fost apelate două fișiere CSS, unul pentru ecran și celălalt pentru cazul în care pagina este printată. Fișierul CSS druck.css va fi deci încărcat atunci când funcția de tipărire a browser-ului este apelată. În total, următoarele valori pentru media sunt disponibile:
• all – Se aplică pentru toate mediile de ieșire.
• aural – Fișierul CSS este folosit pentru sistemele de ieșire vocală.
• braille – Fișierul CSS este destinat imprimantelor Braille cu feedback tactil, care pot genera așa-numitul "sistem Braille".
• embossed – Acest lucru se adresează imprimantelor Braille pentru hârtie.
• handheld – Pentru dispozitive portabile.
• print – Fișierul CSS se aplică pentru tipărirea pe hârtie. Browser-ele ar trebui să apeleze automat la acest fișier atunci când este apelată funcția de tipărire.
• projection – Această variantă este destinată prezentărilor proiectate.
• screen – Destinat afișării pe ecran.
• tty – Fișierul CSS se aplică pentru mediile care folosesc o grilă de caractere fixă. Acestea pot fi de exemplu, teleimprimoare și terminalele.
• tv – Acesta se adresează dispozitivelor similare televizoarelor. Se presupune că aceste dispozitive au o rezoluție mică și sunt limitate în funcția de derulare.
Pe lângă sintaxa HTML prezentată cu elementul link, mai există și variante CSS speciale. Aici sunt folosite @import sau @media.
<style type="text/css">
@media screen, projection {
/* Formate pentru ecran */
}
@media print {
/* Formate pentru tipărire */
}
</style>
În interiorul elementului style, se definesc printr-un @media un set de definiții de format pentru un anumit mediu de ieșire. După @media, urmat de virgulă și de spațiu, trebuie specificat unul dintre tipurile de medii descrise anterior. Mai multe tipuri de medii sunt separate prin virgulă.
