Aceasta e o versiune anterioară a paginii.

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 Cascading Style Sheets ) 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 )

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

* Internal ( când definim style-ul paginii, în <head> )

<head>
<style>
p {color:sienna; margin-left:20px;}
</style>
</head> 
<body>
<p> This is a paragraph </p>
</body>

External ( atunci când definim un document *.css care va conține (nu știu ce să zic aici ))
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

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.

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.

Să luăm ca exemplu, următoarea sintaxă:

<style>
p {color:sienna; border: 1px dotted #000000;  }
</style>

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 Codepen.

Atenție!!! 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.

See the Pen fxCwL by Matei Oprea (@mateioprea) on CodePen.

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:

<style>
h1, h2 { color: blue; }
</style>

Cum interpretați codul de mai sus ? Introduceți în codepen-ul acesta selectorii h1,h2 urmați de proprietățile lor. Folosiți în block-ul HTML următorul cod:

<h1> Acesta este un text mare </h1>
<h2> Acesta este un text mai micuț </h2>

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.

Urmăriți exemplul de mai jos ! Interpretați codul CSS scris împreună cu trainerii.

See the Pen FyqxD by Matei Oprea (@mateioprea) on CodePen.

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ă:

O clasă în CSS începe cu un punct (.) !

<style>
.dotted-border {color:blue ; border: 1px dotted #000000; }
</style>

Apelarea se va face în felul următor:

<p class="dotted-border"> Text introdus </p>

Astfel, îi spunem tagului <p> să „încarce“ proprietățile din clasa dotted-border.

Să vedem primul exemplu, ușor modificat:

See the Pen ijAzx by Matei Oprea (@mateioprea) on CodePen.

După cum puteți observa, textul din al doilea paragraf nu este afectat, chiar dacă este tot definit de un tag <p>.

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:

<style>
#dotted-border {color:blue ; border: 1px dotted #000000; }
</style>

Pentru apelare în pagina HTML:

<p id="dotted-border"> Text </p>

Creați pe Codepen un text care să se folosească de id-ul declarat anterior în CSS. Definiți voi toate elementele.

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 ):

.dreapta {}

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.

2. Alinierea, colorarea și re-dimensionarea clasei:

.dreapta{
float: right;
width: 420px;
background-color: #b0e0e6;
}

Exemplul de mai sus, pe codepen:

See the Pen BuhxL by Matei Oprea (@mateioprea) on CodePen.

Î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

Sidebar

Lecția 3: CSS

Sintaxa CSS

Digital Kids

Unelte utilizator

Unelte site

Sidebar

Lecția 3: CSS

Sintaxa CSS

Unelte pagină