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

** 1. 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 (nu știu ce să zic aici ))
<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 #000000;  }
</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 todo>
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>
<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** ). 

CSS mai permite și enumerarea mai mult taguri HTML, pentru aceeași listă de proprietăți:
<code html>
<style>
h1, h2 { color: blue; }
</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: 

<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="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>
<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 todo>
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 introdus </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="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>
<script async src="//codepen.io/assets/embed/ei.js"></script>
</html>

<note todo>
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ă ''centru'' 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 todo>
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="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>
<script async src="//codepen.io/assets/embed/ei.js"></script>
</html>

** Înlănțuire de clase și id-uri **

TODO

=== 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 ===
  - pe o pagina HTML, sa adauge CSS folosind elementele din tutorial

=== Tema ===
  - sa adauge CSS pe pagina pe care au facut-o la tema trecuta (folsind minim o clasa,  minim un id, etc)

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

Unelte pagină
