Diferențe

Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.

Link către această vizualizare comparativă

--- module:11-basic-web-dev:lectie-03 [2014/03/03 12:04]
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 ======
-=== Sintaxa CSS ===
+===== Sintaxa CSS =====
-** 1. Scurta introducere **
+==== 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.
@@ Linia 21: / Linia 21: @@
 <code html>
 <head>
-<style>
+  <style>
-p {color:sienna; margin-left:20px;}
+    p {
-</style>
+      color:sienna;
+      margin-left:20px;
+    }
+  </style>
 </head>
 <body>
-<p> This is a paragraph </p>
+  <p> This is a paragraph </p>
 </body>
 </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>
 <head>
@@ Linia 37: / Linia 40: @@
 </code>
-** 2. Sintaxa CSS **
+==== 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.
@@ Linia 47: / Linia 50: @@
 <code html>
 <style>
-p {color:sienna; border: 1px dotted #000000;  }
+p {
+  color: sienna;
+  border: 1px dotted #000;
+}
 </style>
 </code>
@@ Linia 54: / Linia 60: @@
 Să vedem un exemplu în [[http://codepen.io|Codepen]].
-<note todo>
+<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="4329" data-slug-hash="fxCwL" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/mateioprea/pen/fxCwL'>fxCwL</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<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. Încercați să schimbați culoarea astfel încât textul să fie albastru ( hint: **blue** ).
+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: blue; }
+h1, h2 {
+  color: green;
+}
 </style>
 </code>
-Cum interpretați codul de mai sus ? Introduceți în codepen-ul [[http://codepen.io/mateioprea/pen/fxCwL|acesta]] selectorii h1,h2 urmați de proprietățile lor. Folosiți în block-ul HTML următorul cod:
+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>
@@ Linia 79: / Linia 91: @@
 </code>
-** Proprietăți de bază **
+==== 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''.
+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>
@@ Linia 88: / Linia 100: @@
 <html>
-<p data-height="268" data-theme-id="4329" data-slug-hash="FyqxD" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/mateioprea/pen/FyqxD'>FyqxD</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<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 **
+==== 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.
@@ Linia 98: / Linia 110: @@
 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 todo>
+<note info>
 O clasă în CSS începe cu un punct (.) !
 </note>
@@ Linia 104: / Linia 116: @@
 <code html>
 <style>
-.dotted-border {color:blue ; border: 1px dotted #000000; }
+.dotted-border {
+  color: blue;
+  border: 1px dotted #000000;
+}
 </style>
 </code>
@@ Linia 111: / Linia 126: @@
 <code html>
-<p class="dotted-border"> Text introdus </p>
+<p class="dotted-border"> Text cu margine punctată </p>
 </code>
@@ Linia 119: / Linia 134: @@
 <html>
-<p data-height="268" data-theme-id="4329" data-slug-hash="ijAzx" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/mateioprea/pen/ijAzx'>ijAzx</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<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 todo>
+<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 **
+==== 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.
@@ Linia 136: / Linia 151: @@
 <code html>
 <style>
-#dotted-border {color:blue ; border: 1px dotted #000000; }
+#dotted-border {
+  color: blue;
+  border: 1px dotted #000000;
+}
 </style>
 </code>
@@ Linia 150: / Linia 168: @@
 </note>
-<note tip>
 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 interiorulu unei pagini HTML
+* ID-urile din CSS pot fi apelate o singură dată în interiorul unei pagini HTML
-</note>
-Folosind tot ceea ce am învățat până acum, haideti să creăm o clasă ''centru'' ce va avea următoarele proprietăți:
+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
+  * Când va fi apelată, textul va fi în dreapta paginii
-* Background-ul va fi albastru
+  * Background-ul va fi albastru
-* Dimensiunea acesteia va fi de 420 pixeli
+  * Dimensiunea acesteia va fi de 420 pixeli
 . Definirea numelui clasei ( și a clasei implicit ):
@@ Linia 167: / Linia 184: @@
 </code>
-<note todo>
+<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.
@@ Linia 174: / Linia 191: @@
 . Alinierea, colorarea și re-dimensionarea clasei:
 <code html>
-.dreapta{
+.dreapta {
-float: right;
+  float: right;
-width: 420px;
+  width: 420px;
-background-color: #b0e0e6;
+  background-color: #b0e0e6;
 }
 </code>
@@ Linia 183: / Linia 200: @@
 Exemplul de mai sus, pe codepen:
 <html>
-<p data-height="268" data-theme-id="4329" data-slug-hash="BuhxL" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/mateioprea/pen/BuhxL'>BuhxL</a> by Matei Oprea (<a href='http://codepen.io/mateioprea'>@mateioprea</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
+<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 **
+==== Înlănțuire de clase și id-uri ====
-//TODO
+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>
-=== Tutorial ===
+===== Task =====
-  - 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 ===
+Luați o pagină HTML (de pe Wikipedia de exemplu) și adăugați CSS la ea pentru stilizare. Trebuie să folosiți **minim**:
-  - pe o pagina HTML, sa adauge CSS folosind elementele din tutorial
+  * 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)

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină