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/02/14 00:11]
mariana
+++ 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 ======
-=== Tutorial ===
+===== Sintaxa CSS =====
-  - 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 ===
+==== Scurta introducere ====
-  - pe o pagina HTML, sa adauge CSS folosind elementele din tutorial
-=== Tema ===
+Î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.
-  - sa adauge CSS pe pagina pe care au facut-o la tema trecuta (folsind minim o clasa,  minim un id, etc)
-=== Recapitulare ===
+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.
-  - 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)
+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'' )
+<code html>
+<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
+</code>
+* Internal ( când definim style-ul paginii, în ''<head>'' )
+<code html>
+<head>
+  <style>
+    p {
+      color:sienna;
+      margin-left:20px;
+    }
+  </style>
+</head>
+<body>
+  <p> This is a paragraph </p>
+</body>
+</code>
+* External ( atunci când definim un document ''*.css'' care va conține o colecție de stiluri definite )
+<code html>
+<head>
+<link rel="stylesheet" type="text/css" href="mystyle.css">
+</head>
+</code>
+==== 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.
+<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
+. 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>
+. 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
+==== 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ă!

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină