Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision | ||
module:11-basic-web-dev:lectie-03 [2014/03/03 10:10] matei.oprea |
module:11-basic-web-dev:lectie-03 [2016/02/27 17:46] (curent) astoican [Id-uri de atribuire] |
||
---|---|---|---|
Linia 1: | Linia 1: | ||
====== Lecția 3: CSS ====== | ====== Lecția 3: CSS ====== | ||
- | === Sintaxa 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. | Î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. | 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. | ||
Linia 18: | Linia 21: | ||
<code html> | <code html> | ||
<head> | <head> | ||
- | <style> | + | <style> |
- | p {color:sienna; margin-left:20px;} | + | p { |
- | </style> | + | color:sienna; |
+ | margin-left:20px; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | <p> This is a paragraph </p> | + | <p> This is a paragraph </p> |
</body> | </body> | ||
</code> | </code> | ||
- | * External ( atunci când definim un document ''*.css'' care va conține (nu știu ce să zic aici )) | + | * External ( atunci când definim un document ''*.css'' care va conține o colecție de stiluri definite ) |
<code html> | <code html> | ||
<head> | <head> | ||
Linia 33: | Linia 39: | ||
</head> | </head> | ||
</code> | </code> | ||
- | === Tutorial === | ||
- | - sintaxa CSS | ||
- | - atribute de baza (culoare, aliniere, marime, font size) pentru taguri HTML | ||
- | - id pentru elemente din HTML + atribute pentru id-ul respectiv in CSS | ||
- | - clase de atribute | ||
- | - inlantuire de clase si id-uri | ||
- | === Task-uri === | + | ==== 2. Sintaxa CSS ==== |
- | - pe o pagina HTML, sa adauge CSS folosind elementele din tutorial | + | |
+ | Sintaxa CSS este, de fapt, un set de reguli de tipul ''selector { proprietate: valoare; }'' ce definește cum trebuie sa arate o pagină HTML. | ||
+ | <note todo> | ||
+ | Notă: Adăugarea tagului ''<style>'' este în scop demonstrativ pentru că intepretorul din această pagină să știe că este vorba de atribute CSS. Pe Codepen, voi nu va trebui să faceți asta. | ||
+ | </note> | ||
+ | |||
+ | Să luăm ca exemplu, următoarea sintaxă: | ||
+ | <code html> | ||
+ | <style> | ||
+ | p { | ||
+ | color: sienna; | ||
+ | border: 1px dotted #000; | ||
+ | } | ||
+ | </style> | ||
+ | </code> | ||
+ | |||
+ | 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]]. | ||
+ | <note info> | ||
+ | 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. | ||
+ | </note> | ||
+ | |||
+ | <html> | ||
+ | <p data-height="268" data-theme-id="0" data-slug-hash="mjabC" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/digitalkids/pen/mjabC/'>mjabC</a> by Digital Kids (<a href='http://codepen.io/digitalkids'>@digitalkids</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//codepen.io/assets/embed/ei.js"></script> | ||
+ | </html> | ||
+ | |||
+ | Observați faptul că doar culorile textului din paragraf sunt afectate, iar cele din afară nu. | ||
+ | |||
+ | <note todo> | ||
+ | Schimbați culoarea astfel încât textul să fie albastru. | ||
+ | </note> | ||
+ | |||
+ | CSS mai permite și enumerarea mai mult taguri HTML, pentru aceeași listă de proprietăți: | ||
+ | <code html> | ||
+ | <style> | ||
+ | h1, h2 { | ||
+ | color: green; | ||
+ | } | ||
+ | </style> | ||
+ | </code> | ||
+ | |||
+ | 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: | ||
+ | |||
+ | <code html> | ||
+ | <h1> Acesta este un text mare </h1> | ||
+ | <h2> Acesta este un text mai micuț </h2> | ||
+ | </code> | ||
+ | |||
+ | ==== 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''. | ||
+ | |||
+ | <note todo> | ||
+ | Urmăriți exemplul de mai jos ! Interpretați codul CSS scris împreună cu trainerii. | ||
+ | </note> | ||
+ | |||
+ | <html> | ||
+ | <p data-height="268" data-theme-id="0" data-slug-hash="FmlJq" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/digitalkids/pen/FmlJq/'>FmlJq</a> by Digital Kids (<a href='http://codepen.io/digitalkids'>@digitalkids</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//codepen.io/assets/embed/ei.js"></script> | ||
+ | </html> | ||
+ | |||
+ | ==== 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 ''<p>'' 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ă: | ||
+ | |||
+ | <note info> | ||
+ | O clasă în CSS începe cu un punct (.) ! | ||
+ | </note> | ||
+ | |||
+ | <code html> | ||
+ | <style> | ||
+ | .dotted-border { | ||
+ | color: blue; | ||
+ | border: 1px dotted #000000; | ||
+ | } | ||
+ | </style> | ||
+ | </code> | ||
+ | |||
+ | Apelarea se va face în felul următor: | ||
+ | |||
+ | <code html> | ||
+ | <p class="dotted-border"> Text cu margine punctată </p> | ||
+ | </code> | ||
+ | |||
+ | Astfel, îi spunem tagului ''<p>'' să "încarce" proprietățile din clasa ''dotted-border''. | ||
+ | |||
+ | Să vedem primul exemplu, ușor modificat: | ||
+ | |||
+ | <html> | ||
+ | <p data-height="268" data-theme-id="0" data-slug-hash="giAso" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/digitalkids/pen/giAso/'>giAso</a> by Digital Kids (<a href='http://codepen.io/digitalkids'>@digitalkids</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//codepen.io/assets/embed/ei.js"></script> | ||
+ | </html> | ||
+ | |||
+ | <note info> | ||
+ | După cum puteți observa, textul din al doilea paragraf nu este afectat, chiar dacă este tot definit de un tag ''<p>''. | ||
+ | </note> | ||
+ | |||
+ | ==== 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: | ||
+ | |||
+ | <code html> | ||
+ | <style> | ||
+ | #dotted-border { | ||
+ | color: blue; | ||
+ | border: 1px dotted #000000; | ||
+ | } | ||
+ | </style> | ||
+ | </code> | ||
+ | |||
+ | Pentru apelare în pagina HTML: | ||
+ | |||
+ | <code html> | ||
+ | <p id="dotted-border"> Text </p> | ||
+ | </code> | ||
+ | |||
+ | <note todo> | ||
+ | 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. | ||
+ | </note> | ||
+ | |||
+ | 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 ): | ||
+ | <code html> | ||
+ | .dreapta {} | ||
+ | </code> | ||
+ | |||
+ | <note info> | ||
+ | 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. | ||
+ | </note> | ||
+ | |||
+ | 2. Alinierea, colorarea și re-dimensionarea clasei: | ||
+ | <code html> | ||
+ | .dreapta { | ||
+ | float: right; | ||
+ | width: 420px; | ||
+ | background-color: #b0e0e6; | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | Exemplul de mai sus, pe codepen: | ||
+ | <html> | ||
+ | <p data-height="268" data-theme-id="0" data-slug-hash="ezHAI" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/digitalkids/pen/ezHAI/'>ezHAI</a> by Digital Kids (<a href='http://codepen.io/digitalkids'>@digitalkids</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//codepen.io/assets/embed/ei.js"></script> | ||
+ | </html> | ||
+ | |||
+ | ==== Î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. | ||
+ | |||
+ | <html> | ||
+ | <p data-height="268" data-theme-id="0" data-slug-hash="nohgF" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/digitalkids/pen/nohgF/'>nohgF</a> by Digital Kids (<a href='http://codepen.io/digitalkids'>@digitalkids</a>) on <a href='http://codepen.io'>CodePen</a>.</p> | ||
+ | <script async src="//codepen.io/assets/embed/ei.js"></script> | ||
+ | </html> | ||
+ | |||
+ | ===== 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 | ||
- | === Tema === | + | ==== Temă ==== |
- | - sa adauge CSS pe pagina pe care au facut-o la tema trecuta (folsind minim o clasa, minim un id, etc) | + | |
- | === Recapitulare === | + | 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ă! |
- | - grila? sau | + | |
- | - o pagina html, sa adauge css pe ea, pe care o sa o folosim la lectia urmatoare pentru a arata structura in pagina web (div-uri) | + |