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/05/23 15:01]
mariana
+++ module:11-basic-web-dev:lectie-03 [2016/02/27 17:46] (curent)
astoican [Id-uri de atribuire]
@@ Linia 3: / Linia 3: @@
 ===== 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>
@@ 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 48: / Linia 51: @@
 <style>
 p {
-  color:sienna;
+  color: sienna;
   border: 1px dotted #000;
 }
@@ Linia 62: / Linia 65: @@
 <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>
@@ Linia 75: / Linia 78: @@
 <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 86: / 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 95: / 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 105: / 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 111: / Linia 116: @@
 <code html>
 <style>
-.dotted-border {color:blue ; border: 1px dotted #000000; }
+.dotted-border {
+  color: blue;
+  border: 1px dotted #000000;
+}
 </style>
 </code>
@@ Linia 118: / Linia 126: @@
 <code html>
-<p class="dotted-border"> Text introdus </p>
+<p class="dotted-border"> Text cu margine punctată </p>
 </code>
@@ Linia 126: / 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 143: / Linia 151: @@
 <code html>
 <style>
-#dotted-border {color:blue ; border: 1px dotted #000000; }
+#dotted-border {
+  color: blue;
+  border: 1px dotted #000000;
+}
 </style>
 </code>
@@ Linia 157: / 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ă ''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 190: / 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 ====
 CSS ne oferă și mai multă flexibilitate, în sensul că putem să folosim aproape orice combinație de selectori.
@@ Linia 200: / Linia 210: @@
 Î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.
-=== Tutorial ===
+<html>
-  - sintaxa CSS
+<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>
-  - atribute de baza (culoare, aliniere, marime, font size) pentru taguri HTML
+<script async src="//codepen.io/assets/embed/ei.js"></script>
-  - id pentru elemente din HTML + atribute pentru id-ul respectiv in CSS
+</html>
-  - clase de atribute
-  - inlantuire de clase si id-uri
+===== Task =====
-=== 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ă