Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== 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'' )
<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>

<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
</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
  * 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

==== 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

Unelte pagină
