Limbajul CSS Cascading Style Sheets foi de stiluri

Limbajul CSS (Cascading Style Sheets = foi de stiluri)

Cuprins • • • Avantajele folosirii "Foilor de stil“ De ce învăţăm? Prezentarea generală a foilor de stiluri în cascadă Modelul de formatare al unui element. Sintaxa unei definiţii CSS Modelul de afişare al unui element Stiluri la nivel de linie (inline) Foaia de stiluri internă Foaie de stiluri externă Aplicaţie Sfârşit prezentare #

Avantajele folosirii "Foilor de stil" Aplicarea foilor de stil unui document HTML de către creatorii de pagini Web are numeroase avantaje esenţiale pentru creatorii de pagini Web: • folosirea lor reduce considerabil efortul depus atunci când se doreşte modificarea aspectului şi aranjării elementelor din paginile dumneavoastră; în loc să parcurgeţi fiecare document în parte şi să faceţi modificări asupra fiecărui element, nu mai este necesar să operaţi modificări decât asupra foii de stiluri, care controlează aceste elemente; modificările se vor reflecta asupra oricărui segment de text care a fost formatat cu stilul respectiv; • oferă control crescut asupra aspectului şi plasării textului în pagină; • reduc "încurcătura" produsă de multitudinea de deschideri şi închideri ale etichetelor care descriu elementele individuale textului; • procesul de modificare a diferitelor elemente din pagina se simplifică întrucât modificarea ulterioară a unui stil se reflectă automat în toate zonele în care a fost folosit; • pot fi create şi aplicate nu doar pentru controlul aspectului fonturilor, ci şi a multor altor elemente de formatare ale paginii. #

De ce învăţăm? Tehnica foilor de stiluri în cascadă permite creatorilor documentelor Web să aibă un control mai bun asupra aspectului documentului, realizând şi separarea dintre conţinutul documentului şi modul de afişare a acestuia. #

Prezentarea generală a foilor de stiluri în cascadă Foile de stil în cascadă sunt grupuri de proprietăţi ce definesc modul de afişare a elementelor introduse prin etichetele HTML. Posibilitatea utilizării mai multor definiţii de stil pentru acelaşi element, navigatorul interpretându-le într-o ordine bine stabilită, explică termenul cascadă prezent în denumire. În acest moment au fost aprobate două standarde privind foile de stiluri şi anume: #

Prezentarea generală a foilor de stiluri în cascadă • CSS 1 (Cascading Style Sheets – level 1): permite specificarea unor definiţii de format pentru fonturi, culori, fundaluri, alinierea elementelor în document. • CSS 2 (Cascading Style Sheets – level 2): extinde CSS 1 cu facilităţi de moştenire a foilor de stiluri, poziţionarea absolută şi relativă a elementelor documentului, integrarea mai multor tipuri de medii etc. SFAT Este de preferat să utilizăm doar acele definiţii de stiluri care au suport în toate navigatoarele actuale. #

Modelul de formatare al unui element. Sintaxa unei definiţii CSS Elementele care pot fi introduse într-o pagină Web sunt afişate de navigator sub forma unei forme dreptunghiulare (casetă de afişare), conţinutul efectiv fiind înconjurat de mai multe zone opţionale: margini (margin area), borduri (border area) şi zone de protecţie (padding area). Existenţa acestor zone, precum şi caracteristicile lor pot fi controlate cu ajutorul definiţiilor de stil. Un element HTML poate fi: • Element la nivel de bloc • Element inline #

Modelul de formatare al unui element. Sintaxa unei definiţii CSS Element la nivel de bloc – afişarea unui astfel de element presupune deschiderea unei noi casete de afişare, care se extinde de obicei pe mai multe linii şi care este aliniată în raport cu celelalte elemente bloc vecine. De exemplu, elementul paragraf inserat prin utilizarea etichetei <p> este un element bloc. Elementele bloc pot conţine alte elemente bloc sau elemente inline, poziţionarea acestora realizându-se relativ la caseta care le conţine. #

Modelul de formatare al unui element. Sintaxa unei definiţii CSS Element inline – element care ocupă de obicei o zonă restrânsă, de multe ori în cadrul unei linii de text din document şi nu posedă caracteristicile elementelor bloc. De exemplu, etichetele <b>, <u>, <sub> introduc elemente inline în cadrul unui document Web. Elementele inline sunt afişate tot prin utilizarea unei casete de afişare, doar că aceasta este poziţionată în raport cu elementele vecine de pe linia pe care se află. #

Modelul de afişare al unui element padding right marginea superioară (margin top) padding left padding top CONŢINUTUL ELEMENTULUI padding bottom marginea inferioară (margin bottom) marginea stângă (margin left) chenar (border) marginea dreaptă (margin right) #

Modelul de formatare al unui element. Sintaxa unei definiţii CSS Există trei modalităţi de a ataşa definiţii de stil elementelor unui document Web: • definiţii de stil inline: definiţiile de stil sunt ataşate fiecărui element HTML în parte, prin utilizarea atributului STYLE=“definiţie CSS”; este afectat numai elementul respectiv; • definiţii de stil înglobate în documentul HTML: definiţiile de stil sunt incluse în cadrul documentului utilizând marcajul STYLE. Definiţia este valabilă în toată porţiunea de document ce urmează etichetei STYLE; • Definiţii de stil externe: definiţiile CSS sunt scrise într-un fişier separat, având extensia. css, fişierul fiind asociat unuia sau mai multor documente HTML folosind eticheta LINK. Definiţiile externe sunt valabile pentru întreg documentul asociat. #

Stiluri la nivel de linie (inline) • Acest tip de stil se foloseşte pentru a aplica un stil unic pentru o singură apariţie a unui element. • Pentru a folosi stiluri la nivel de linie, se foloseşte atributul style în eticheta unde vrem să aplicăm formatarea. • Exemplu • <html><head></head><body> • <p style=“font-size: 20 pt; color: #7 FFF 00; background: #191970; font-style: italic; width=3 cm; height: 4 cm; text-align: justify; ”> <b> “Tarile dezvoltate se preocupa mai ales ca sa arate elevilor tot ce se învata, ce li se preda, iar ceea ce nu li se poate arata, nu li se preda si-i lasa pe altii sa se amageasca cu câstigul efemer si nesemnificativ pentru tara, al unui titlu olimpic. Titluri olimpice aduc sportivii. Tara este în câstig doar cu elevi care au reusit sa acumuleze acele cunostinte capabile sa formeze din ei specialisti (care sa creeze ceva bun, sefi priceputi, care creeaza conditii ce duc la competitivitate si eficienta, buni meseriasi, care dau lucruri precise si de arta). ” • </b></p></body></html> #

√Atenţie! • La editarea stilurilor nu se lasă spaţii între valoarea proprietăţii şi unitatea de măsură. De exemplu, margin-left: 20 px nu va funcţiona; corect este: margin-left: 20 px #

Foaia de stiluri internă • Acest tip de stil se foloseşte pentru un singur document. Pentru a defini un stil intern, se foloseşte eticheta <style>, imbricată în secţiunea head. 1. Toate elementele de un anumit tip au acelaşi stil. <html><head><style> p {font-size: 20 pt; color: red; background: yellow; fontstyle: italic; width: 20 cm; height: 1 cm; } </style></head> <body><p>Oricate paragrafe ar contine documentul, toate vor avea acelasi stil. </p> </body></html> #

Foaia de stiluri internă 2. Stilul este aplicat unui element, care este identificat prin intermediul atributului id al acestuia. <html><head><style> #p 1 {font-size: 20 pt; color: red; background: yellow; fontstyle: italic; width: 20 cm; height: 1 cm; } </style></head> <body><p id=p 1>Formăm un stil cu numele “p 1”. Elementul care va avea acest stil va trebui să conţină atributul id care să aibă valoarea “p 1”. </p> <p>Un paragraf obişnuit. </p> </body></html> #

Foaia de stiluri internă 3. Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. <html><head><style>. still {font-size: 20 pt; color: red; background: yellow; fontstyle: italic; width: 20 cm; height: 1 cm; } </style></head> <body><p class=still>Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. </p> <p>Un paragraf obişnuit. </p> </body></html> #

Foaie de stiluri externă • Acest mod de inserare este recomandat când stilul respectiv se aplică pentru mai multe pagini. Cu o foaie externă se poate schimba un întreg site. Fiecare pagină web se leagă de foaia de stiluri (css). Pentru aceasta, se foloseşte eticheta <link>, imbricată în secţiunea head. Aceasta are următoarele atribute: • rel – defineşte tipul de fişier css; • type – indică browser-ului în ce limbaj este scris codul; • href – se specifică locaţia fişierului (dacă fişierul css nu se găseşte în aceiaşi locaţie cu cel html, se scrie adresa completă a sa). #

Foaie de stiluri externă • Exemplu. Reluând exemplul anterior, formăm un fişier text cu numele “unstil. css”, care va conţine definiţia stilului: . still {font-size: 20 pt; color: red; background: yellow; fontstyle: italic; width: 20 cm; height: 1 cm; } În aceste condiţii, fişierul HTML devine: <html><head> <link rel=stylesheet type=text/css href=unstil. css> </head> <body><p class=still>Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. </p> <p>Un paragraf obişnuit. </p> </body></html> #

Aplicaţie • Realizaţi programul TV de astăzi pentru postul preferat. Folosiţi liste şi tabele. Pentru formatarea textului, folosiţi foi de stiluri. #