====== Lecția 3: CSS ====== ===== Sintaxa CSS ===== ==== Scurta introducere ==== Înainte să începem, haideți să dăm o mică definiție ( nu ca la școală :) ) pentru CSS și să vedem la ce ne este folositor. CSS ( prescurtarea de la **C**ascading **S**tyle **S**heets ) este un limbaj folosit în paralel cu HTML pentru a separa contentul de pe o pagină, de designul acesteia. Putem defini mărimea fontului folosit, ce background vom avea, ce dimensiuni au imaginile, etc. Pe scurt, CSS decide cum este afișat contentul HTML. Avem 3 modalități prin care putem aplica CSS într-un document: * Inline ( când apelăm un tag ''html'' )


This is a paragraph.

* Internal ( când definim style-ul paginii, în '''' )



  
 

   This is a paragraph

* External ( atunci când definim un document ''*.css'' care va conține o colecție de stiluri definite )

==== 2. Sintaxa CSS ==== Sintaxa CSS este, de fapt, un set de reguli de tipul ''selector { proprietate: valoare; }'' ce definește cum trebuie sa arate o pagină HTML. Notă: Adăugarea tagului '' Selectorul, în cazul nostru va fi ''p''. Acesta specifică asupra cărui tag HTML se vor aplica proprietățile din interiorul acoladelor ''{}''. Tagul "p" se referă, în HTML, la un paragraf. Deci, pentru toate paragrafele din pagina noastra, culoarea va fi ''sienna'', cu ''border'' negru, punctat și de 1 pixel dimensiune. Să vedem un exemplu în [[http://codepen.io|Codepen]]. Atenție!!! [[http://codepen.io|Codepen]] ne permite să scriem elemente de HTML, CSS și JS separat, interpretând totul automat. Chiar dacă aplicarea CSS-ului este **External**, nu mai trebuie să includem noi nimic în document.

See the Pen mjabC by Digital Kids (@digitalkids) on CodePen.

Observați faptul că doar culorile textului din paragraf sunt afectate, iar cele din afară nu. Schimbați culoarea astfel încât textul să fie albastru. CSS mai permite și enumerarea mai mult taguri HTML, pentru aceeași listă de proprietăți:

Cum interpretați codul de mai sus? Introduceți în codepen-ul de mai sus selectorii h1, h2 urmați de proprietățile lor. Folosiți în block-ul HTML următorul cod:


 Acesta este un text mare 
 Acesta este un text mai micuț

==== Proprietăți de bază ==== Pentru alinierea textului vom folosi ''text-align''. Pentru a schimba dimensiunea textului putem folosi ''font-size: dimensiune px''. Pentru a schimba culoarea fontului, vom folosi ''color: culoare''. Urmăriți exemplul de mai jos ! Interpretați codul CSS scris împreună cu trainerii.

See the Pen FmlJq by Digital Kids (@digitalkids) on CodePen.

==== Clase de atribute ==== Pentru a nu fi nevoiți să modificăm fiecare tag în parte, CSS permite crearea de clase cu nume sugestive pentru a modifica mai ușor anumite zone dintr-o pagină HTML. Putem, deasemenea defini proprietăți pentru diferite tag-uri HTML, în funcție de cerințe. De exemplu, vreau ca tag-ul ''

'' din primul exemplu să aibe o dată proprietatea ''border'' dar următoarea dată când îl apelez să nu-l aibă. Putem defini astfel o clasă: O clasă în CSS începe cu un punct (.) ! Apelarea se va face în felul următor:

Text cu margine punctată

Astfel, îi spunem tagului ''

'' să "încarce" proprietățile din clasa ''dotted-border''. Să vedem primul exemplu, ușor modificat:

See the Pen giAso by Digital Kids (@digitalkids) on CodePen.

După cum puteți observa, textul din al doilea paragraf nu este afectat, chiar dacă este tot definit de un tag ''

''. ==== Id-uri de atribuire ==== Chiar dacă CSS permite modificarea anumitor tag-uri, elemente, bucăți de pagină utilizând clase a fost necesară și introducerea de Id-uri de atribuire. Acestea sunt proprietăți unice, ce pot fi folosite o singură dată într-o pagină HTML, făcându-le ideale pentru un meniu de navigare, de exemplu. Dacă clasele în HTML sunt definite începând cu **.**, Id-urile vor începe cu diez (#). Putem defini un Id în HTML în felul următor: Pentru apelare în pagina HTML:

Text

Creați pe [[http://codepen.io|Codepen]] un text care să se folosească de id-ul declarat anterior în CSS. Definiți voi toate elementele. Remember: * Clasele din CSS pot fi apelate de mai multe ori în interiorul unei pagini HTML. * ID-urile din CSS pot fi apelate o singură dată în interiorul unei pagini HTML Folosind tot ceea ce am învățat până acum, haideti să creăm o clasă ''dreapta'' ce va avea următoarele proprietăți: * Când va fi apelată, textul va fi în dreapta paginii * Background-ul va fi albastru * Dimensiunea acesteia va fi de 420 pixeli 1. Definirea numelui clasei ( și a clasei implicit ):


.dreapta {}

Pentru definirea poziției în pagină nu vom mai folosi ''align'', ci o proprietate "specială" numită ''float''. După cum spune și numele, aceasta proprietate va face elementele să "plutească" într-o direcție anume. Mai multe detalii, în lecția următoare când vom aprofunda elementele de CSS. 2. Alinierea, colorarea și re-dimensionarea clasei:


.dreapta {
  float: right;
  width: 420px;
  background-color: #b0e0e6;
}

Exemplul de mai sus, pe codepen:

See the Pen ezHAI by Digital Kids (@digitalkids) on CodePen.

==== Înlănțuire de clase și id-uri ==== CSS ne oferă și mai multă flexibilitate, în sensul că putem să folosim aproape orice combinație de selectori. În codepen-ul de mai jos sunt prezentate câteva astfel de combinații, iar în exerciții va trebui să folosiți și să descoperiți și voi alte combinații. Citiți cu atenție comentariile.

See the Pen nohgF by Digital Kids (@digitalkids) on CodePen.

===== Task ===== Luați o pagină HTML (de pe Wikipedia de exemplu) și adăugați CSS la ea pentru stilizare. Trebuie să folosiți **minim**: * 3 clase * 2 id-uri * 3 culori * 2 dimensiuni ale textului * o imagine * imagine sau culoare de fundal ==== Temă ==== Citiți de [[ http://www.w3schools.com/css/default.asp | aici ]] despre mai multe elemente CSS și pregătiți-vă pentru data viitoare: vom face echipe pentru a crea o pagină web cât mai frumoasă!