Despre CSS (foi de stil în cascadă). Modul 7 de la Eurocor

Bine v-am regăsit la un nou curs de Web Design. Am ajuns la modulul 7, iar lucrurile încep să devină tot mai serioase. Fără prea multă introducere, vă anunţ că subiectul de astăzi îl reprezintă:

 Css – foi de stil în cascadă (Cascading Style Sheets)

Iniţial, nu aş putea spune că m-a extaziat prea tare, iar asta fiindcă nu m-am mai întâlnit până acum cu subiectul css şi da, mi s-a părut cam inabordabil. De html a mai auzit lumea, dar de css/stylesheet mai rar. Asta o spun eu, amatoarea.

După ce am parcurs lecţia în întregime, pot spune că mi-am mai clarificat din unele chestiuni. Am aflat lucruri noi, evident. La ce ne ajută css şi cum implementăm noţiuni de css când lucrăm la un website, aflaţi în rândurile de mai jos.

DE CE ESTE UTIL SĂ CUNOAŞTEM CSS? HTML NU E SUFICIENT?

La modul clasic, poţi face modificări direct în codul HTML. Asta înseamnă că poţi schimba culori de font, poţi formata textul după cum doreşti. Doar că totul poate deveni mult prea greoi şi sisific. Să iei fiecare pagină în parte şi să-i specifici atributele dorite. Dacă ai un website care conţine 10 pagini HTML, fiecare pagină trebuie tratată (formatată) separat; faci acelaşi lucru până la suprasaturare.

Cu ajutorul CSS poţi face toate aceste lucruri într-un singur document separat (un stylesheet) care să-ţi deservească toate paginile HTML. Cunoaşterea tehnologiei CSS constituie metoda profesională a oricărui webdesigner prin care formatează conţinutul la nivel de cod HTML.

Foile de stil în cascadă (CSS – Cascading Style Sheets) sunt utilizate pentru a descrie, puncta, felul în care se prezintă un website (formatarea şi paginarea acestuia).

Iată un exemplu de cod CSS cu locul în care trebuie plasat în cadrul unui fişier HTML:

<head>

<title>titlul paginii</title>

 <style type=”text/css”>in acest loc se pot introduce codurile CSS</style>

</head>

SINTAXA CSS

O foaie de stil (engl:stylesheet) comportă câteva reguli. Un set de astfel de reguli conţine unul sau mai mulţi selectori şi o declaraţie. O declaraţie cuprinde o listă de comenzi separate de un punct şi o virgulă. Fiecare declaraţie este o proprietate, două puncte (:), o valoare şi apoi punct şi virgulă (;).

Rolul principal al CSS este de a îmbunătăţi, uşura, automatiza, fluidiza un document HTML.

SURSELE CSS

După cum spuneam, informaţiile CSS pot fi stocate într-un document distinct de cel HTML care este denumit foaie de stil. Se pot utiliza şi foi de stil multiple pentru acelaşi document HTML. Asta înseamnă că în funcţie de browserul sau device-ul pe care se va accesa pagina, unui document HTML i se pot anexa mai multe foi de stil.

Prin urmare, foile de stil pot fi:

  • externe documentului HTML;
  • integrate în documentul HTML;
  • integrate doar unui element din cadrul unui document HTML;
  • aparţin vizitatorului (vizitatorii pot specifica foi de stil proprii pe care să le utilizeze la vizualizarea unui website; de exemplu: dacă preferă fontul cu Times New Roman 12, aceştia îşi pot defini o foaie de stil personală cu aceste atribute pe care să o utilizeze pentru toate paginile vizitate)

PROPRIETĂŢILE CSS

CSS, la fel ca şi HTML, este şi el un limbaj. Ca şi în orice limbaj de programare, se lucrează cu nişte elemente numite proprietăţi.

Proprietăţile asupra cărora se poate aplica CSS se referă la:

  • Background
  • Border (Margine)
  • Clasificare şi poziţionare
  • Dimensiune
  • Font
  • Listare
  •  Margini
  • Pagină
  • Tabele
  • Texte

În cazul fiecăreia dintre aceste proprietăţi se pot aplica detalii care ţin de culori, stiluri, lăţimi, distanţe, înălţime, mod de afişare, mărime font etc.

Exemplu:

  1. Specifică detalii privind spaţierea între cuvinte -> div { word-spacing: normal; }
  1. Specifică numele fontului care va fi utilizat -> div {font-family: Arial; }
  2. Specifică culoarea unui text -> div {color:green; }

Un fişier css poate fi scris în orice editor de text  (Notepad, Notepad++, Word), singura condiţie e ca la final să îl salvaţi cu extensia „.css”.

Cam atât despre CSS. Dacă ţi-am deschis apetitul cu astfel de informaţii, te invit să urmezi şi tu un asemenea curs de Design şi programare Web. Nu doar că vei afla lucruri noi, de specialitate, bine explicate, dar la final vei obţine şi o diplomă recunoscută pe plan naţional şi internaţional.

Dacă ai nelămuriri cu privire la lecţia prezentată, le aştept în comentarii.

Te aştept şi la modulul 8!

Citeşte şi: Cum NU trebuie să arate un website. Modul 6 de la Eurocor

You might also like

Comments (3)

  • Cristina Dragomir 7 ani ago Reply

    Ai ajuns deja la modulul 7? Eu abia sunt la 2, la cursul meu de fotografie. Ma bucur ca impartasesti cu noi o parte din ce inveti. M-ar tenta si pe mine sa invat CSS dar ma tem ca nu m-as descurca si m-as face de ras.

    Cristi 7 ani ago Reply

    Poti sa incepi de aici 🙂 : https://www.w3schools.com/css/

  • Cristi 7 ani ago Reply

    Este foarte util si important sa cunosti utilitatea CSS-ului.

Leave a Reply