RU

CSS

Ce este CSS?

Lecția trecută am studiat cum să creăm o pagină web cu ajutorul HTML. Însă HTML este limbajul care definește structura documentului și nu ne oferă posibilitatea de a face pagina noastră să arate frumos.

În ajutor ne poate veni CSS—Cascading style sheets.

CSS este un standard care definește modul în care vor fi afișate elementele din pagina noastră.

Pentru început să creăm un document HTML index.html pe care îl vom folosi în calitate de bază pentru site-ul tău.

Documentul tău HTML va arăta în felul următor:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Sintaxa CSS

Selectori

Pentru a începe lucrul, trebuie să înțelegem sintaxa CSS.

Aceasta este una simplă și arată în felul următor:

Aceasta constă dintr-un selector și proprietățile aplicate acestuia, sub formă de perechi chei – valoare. În calitate de selector pot servi diferite elemente HTML, tag-uri, clase și orice combinații între acestea.

Sună complicat?

Să vedem un exemplu. Vom crea un paragraf nou și vom seta culoarea textului să fie roșie și de dimensiunea 25px. Pentru aceasta utilizăm deja cunoscutul HTML: adăugăm tagul p în tag-ul body.

<p>Salut</p>

Acum urmează să stilizăm HTML-ul cu CSS. Pentru aceasta vom adăuga în head un tag special style, unde vom descrie stilul dorit:

<style type="text/css">
    p {
        color: red;
        font-size: 25px
    }
</style>

Acum deschide fișierul index.html în browser-ul tău preferat și vei vedea următorul rezultat.

Arată mai bine decât fără stil, așa-i?

Selectori utilizând clase

Pe motiv că în calitate de selector am luat tag-ul p, deocamdată oricare tag p din documentul HTML va fi stilizat utilizând definiția noastră în CSS. Dacă dorim să aplicăm un anumit stil doar elementelor care au careva proprietăți comune, în calitate de selector putem să luăm o clasă.

De exemplu, să creăm un container div de clasa my-class:

<div class='my-class'>Hello</div>

Apoi vom adăuga un selector pentru clasa my-class înăuntrul tag-ului style din HTML:

.my-class {
    background-color: orange;
    font-size: 30px;
}

Fă refresh la pagina din browser și vei vedea următorul rezultat:

Selectori utilizând ID

În calitate de selector poate fi utilizat și un ID (identificator unic pentru orice element HTML).

Pentru a exemplifica, vom modifica puțin div-ul din exemplul precedent: în loc de atributul class vom scrie un id al elementului:

<div id='my-id'>¡Hola!</div>

Iar pentru a stiliza, vom mai adăuga un selector pentru id:

#my-id {
    background-color: blue;
    font-size: 40px;
}

În exemplul dat, ID-ul elementului div este my-id. Reactualizează pagina din browser și vei vedea următorul rezultat:

Selectori multipli

Până acum definițiile noastre pentru stil erau identice pentru toate elementele cu același tag și clasă. De aceea, pentru a putea fi și mai specifici, putem să combinăm mai mulți selectori într-unul.

De exemplu, următorul selector va stiliza în mod corespunzător toate elementele cu clasa my-paragraph-class ale căror părinte este un element div cu clasa my-class:

div.my-class .my-paragraph-class {
    color: red;
    background-color: cian;
    text-align: center;
}
<div class="my-class">
  <p class="my-paragraph-class">Bonjour</p>
<div>

Ai remarcat structura? Dacă dorești să alegi/setezi un selector pentru un element child (copil) care este înăuntrul altui element parent (părinte), trebuie doar să înlănțui selectorul părintelui și al copilului, separându-le prin spații:

parent child {
    key: value;
}

Mai multe despre selectori poți să afli aici.

Cum să folosesc CSS?

Sunt 3 metode cum poți stiliza HTML-ul cu CSS:

  1. Incluzi CSS-ul într-un fișier extern cu extensia .css (external style sheet).

    De asemenea, vei lega documentul CSS style.css de cel HTML, folosind tag-ul <link rel="stylesheet" type="text/css" href="style.css">. Atrage atenția la atributul href---acesta arată calea spre fișierul .css.

  2. Folosești tagul style în head-ul al documentului HTML (internal style sheet):

    <style> p { text-indent: 25px; } </style>

În interiorul style poți lista mai multe declarații de stil.

  1. Folosești atributul style pentru fiecare tag din document (inline style):

<p style="text-indent: 25px">Hola!</p>

Când lucrezi cu stiluri trebuie să ții minte două reguli: 1. pentru același selector se aplică ultimul stil declarat; 2. fiecare metodă de declarare a stilului are prioritatea sa: inline style este cel mai prioritar, apoi urmează internal style și doar la sfârșit external style.

Culori și background

Pentru a seta culoarea unui text, poți folosi proprietatea color care poate să primească următoarele tipuri de valori:

  1. numele culorii: red, green, blue;

  2. codul hexadecimal al culorii: #ff00ff;

  3. codul RBG rgb(255, 0, 0).

De exemplu, poți seta culoarea roșie a textului în trei metode:

p {
    color: #ff0000;
    color: rgb(255, 0, 0);
    color: red;
}

Pentru a seta culoarea de fundal a unui element folosește proprietatea background-color:

div {
    background-color: lightblue;
}

Imagine pe fundal?

Dacă dorești să plasezi o imagine pe fundal, ai la îndemână proprietatea background-image unde trebuie sa specifici adresa imaginii.

div {
    background-image: url("paper.gif");
}

Stilizarea textelor și fonturi

Fontul

Pentru a seta un font pentru text, poți folosi proprietatea font-family.

p {
    font-family: "Times New Roman";
}

Aceasta va seta fontul Times New Roman.

Dar ce dacă pe calculator nu este instalat Times New Roman? Pentru a rezolva această problemă, poți înlănțui mai multe fonturi:

p {
    font-family: "Times New Roman", Times, serif;
}

Acum se va seta Times New Roman pentru elementul tău. În caz că acest font lipsește pe calculatorul utilizatorului, se va aplica fontul Times, iar dacă nici acesta nu este prezent, se va recurge la familia de fonturi serif.

Mărimea fontului

Pentru a controla mărimea fontului de folos îți va fi proprietatea font-size, unde poți indica în pixeli (px) înălțimea textului:

h1 {
    font-size: 40px;
}

Mai multe despre fonturi poți să afli aici.

Alte proprietăți

Dacă dorești să schimbi modul în care arată textul, poți folosi următoarele proprietăți:

Proprietatea

Descrierea

color

Setează culoarea textului

letter-spacing

Mărește sau micșoreaza spațiul între litere

line-height

Setează înălțimea liniei

text-align

Specifică alinierea orizontală a textului

text-decoration

Specifică modul de decorare a textului

text-indent

Setează indentarea primei linii a textului

Mai multe despre proprietățile CSS care specifică cum va arăta textul poți să afli aici.

Box model

Box model este un concept care ne permite ușor să vizualizăm și să înțelegem conceptul de margin, padding, border și width / height a unui element HTML.

În box model un element HTML este reprezentat prin niște cutii, ele fiind:

  • margin - distanța în jurul elementului, este transparentă;

  • border - chenarul elementului;

  • padding - distanța între conținutul elementului și chenar;

  • conținutul - spațiul unde este afișat textul interior / imaginea.

Înălțimea și lungimea elementului HTML se calculează în dependență de cele 4 componente.

De exemplu, avem un element cu următoarele proprietăți:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Lățimea acestuia va fi de 350px: 320px + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin).

Despre parametrii proprietăților din box model poți citi suplimentar aici și aici.

Poziționare

Până acum am discutat despre cum vor arăta elementele paginii, dar nu am menționat în ce ordine ele vor apărea pe ecran și unde trebuie să se afle un anumit element.

Pentru aceste scopuri în CSS există proprietatea position. Aceasta specifică metoda prin care un element HTML va fi poziționat în pagină.

Există 4 posibile valori pentru proprietatea position:

static – elementul este poziționat după setarea implicită a browser-ului;

div.static {
 position: static;
 border: 3px solid #73AD21;
}

relative – elementul este poziționat relativ față de poziția lui inițială, însa ocupa spațiul rezervat;

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid red;
}

absolute – elementul este poziționat absolut față de primul părinte cu poziția relative sau, dacă acesta nu este, față de elementul body al documentului HTML;

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

fixed – specifică poziționarea fixă pe pagină, asta înseamnă că elementul va rămâne constant pe ecran, chiar dacă facem scroll.

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

Float

Cu toate că avem deja posibilitatea să mișcăm elementele în pagină, este foarte anevoios să aliniem elementele pe orizontală.

Soluția ușoară pentru această problemă este proprietatea CSS float. Aceasta ne permite să creăm elemente plutitoare poziționate unul lângă altul, orizontal. Cu ajutorul acestei proprietăți putem crea galerii de imagini, liste de noutăți și alte elemente.

Astfel, elementele HTML cu proprietatea float: left se vor aranja orizontal unul după altul.

.float {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 10px;
    float: left;
 }
<div class='float'></div>
<div class='float'></div>

Odată cu libertatea de a plasa elementele pe orizontală apare problema cu elementele statice care apar mai jos în documentul HTML. În mod special, dacă acestea sunt statice, ele se vor suprapune cu elementele plutitoare.

De exemplu, dacă la exemplul de mai sus adăugăm un element după elementele cu clasa float, el se va suprapune cu elementele plutitoare.

Pentru a evita această suprapunere trebuie să atribuim elementului care urmează după elementele plutitoare proprietatea clear: both:

.float {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 10px;
    float: left;
 }
 .element {
    height: 200px;
    width: 200px;
    background-color: orange;
    clear: both;
 }
<div class='float'></div>
<div class='float'></div>
<div class='element'></div>

Pseudo-clase și pseudo-elemente

Ce reprezintă pseudo-clasele în CSS?

Pseudo-clasele sunt utilizate pentru a defini o stare specială a unui element HTML. Spre exemplu, ele pot fi utilizate pentru:

  • a stiliza un element atunci cînd mouse-ul este deasupra

  • a stiliza link-urile accesate și neaccesate diferit

  • a stiliza un element atunci cînd deține focus-ul

Syntax

Sintaxa pentru a utiliza pseudo-clasele în CSS este:

selector:pseudo-class {
    property:value;
}

Pseudo-clase pentru link-uri

Link-urile pot fi afișate în diferite moduri:

/* unvisited link */
a:link {
    color: #FF0000;
}
/* visited link */
a:visited {
    color: #00FF00;
}
/* mouse over link */
a:hover {
    color: #FF00FF;
}
/* selected link */
a:active {
    color: #0000FF;
}

a:hover trebuie să fie definită după a:link și a:visited pentru a avea efect, totodată, a:active trebuie să fie definită după a:hover.

Pentru demo click aici

Pseudo-clasele pot fi folosite împreună cu clasele CSS

Pseudo-clasele pot fi combinate cu clasese definite de tine.

a.my-class:pseudo-class {
    property:value;
}

Hover asupra unui <div>

Iată un exemplu de a utiliza pseudo-clasa :hover asupta unui element div.

div:hover {
    background-color: red;
}

Pentru demo click aici

Pseudo-clasa :first-child

Pseudo-clasa :first-child se utilizează pentru a selecta primul element copil al fiecărui element.

/*match the first <p> element*/
p:first-child {
    color: blue;
}
/*match the first <i> element in all <p> elements*/
p i:first-child {
    color: blue;
}

Pentru demo click aici

Pseudo-clasa :nth-child(n)

Această pseudo-clasa se utilizează pentru a selecta fiecare element care este copilul n-lea al elementului părinte. n poate fi valoare, cuvînt cheie, funcție.

/*select every <p> element that is the second child of its parent*/
p:nth-child(2) {
    background: red;
}
/*select odd and even p elements*/
p:nth-child(odd) {
    background: red;
}
p:nth-child(even) {
    background: blue;
}

Pentru demo click aici

FlexBox

Are scopul de a oferi un mod mai eficient pentru realizarea layout-urilor web, de a alinia și distribui spațiul între elemente înăuntrul unui container chiar și atunci când dimensiunea nu este cunoscută sau este dinamică. Flexbox ne simplifică foarte mult munca pentru că gestionează în mod automat float-urile și înălțimea elementelor.

Container-ul setat pe display: flex face ca elementele child să aibă aceeași înălțime ca și valoare predefinită.

Nu este nevoie să specificăm altceva pentru a obține elemente child de aceeași înălțime. Asta pentru că de default proprietatea align-items este setată pe valoarea baseline, ceea ce înseamnă că elementele child iau înălțimea maximă în interiorul părintelui.

În flexbox ajunge să setăm container-ului direcția de coloană și sî centrăm elementele pe axa principală și transversală: display: flex; flex-direction: column; justify-content: center; align-items: center;

flex-direction proprietate specifică direcția elementelor flexibile din interiorul containerului flexibil. Valoarea implicită a flex-direction este row ( de la stânga la dreapta, de sus în jos).

Celelalte valori sunt după cum urmează:

  • row-reverse - În cazul în scris-mode (direction) este la stânga la dreapta, elementele flex vor fi dispuse la dreapta la stânga

  • column - În cazul în care sistemul de scriere este orizontală, elementele flex vor fi dispuse vertical

  • column-reverse - La fel ca și coloană, dar inversat

justify-content de proprietate aliniază orizontal elemente containerul flexibil atunci când elementele nu folosesc tot spațiul disponibil pe principala axa.

Valorile posibile sunt după cum urmează:

  • flex-start - valoarea implicită. Elementele sunt poziționate la începutul containerului

  • flex-end - Elementele sunt poziționate la capătul containerului

  • center - Elementele sunt poziționate în centrul containerului

  • space-between - Elementele sunt poziționate cu spațiul dintre liniile

  • space-around în space-around de - Elementele sunt poziționate cu spațiu înainte, între și după liniile

align-items proprietatea aliniază vertical elemente containerul flexibil atunci când elementele nu folosesc tot spațiul disponibil pe axa transversală.

Valorile posibile sunt după cum urmează:

  • stretch - valoarea implicită. Elementele sunt întinse pentru a se potrivi containerului

  • flex-start - Elementele sunt poziționate în partea superioară a containerului

  • flex-end - Elementele sunt poziționate în partea inferioară a recipientului

  • center - Elementele sunt poziționate în centrul containerului (vertically)

  • de baseline - Elementele sunt poziționate la linia de bază a containerului

flex-wrap proprietate specifică dacă elementele flex ar trebui să înveliți sau nu, în cazul în care nu există spațiu suficient pentru ei pe o singură linie flex.

Valorile posibile sunt după cum urmează:

  • nowrap - Valoare implicită. Elementele flexibile nu vor încheia

  • wrap - Elementele flexibile vor încheia , dacă este necesar

  • wrap-reverse - Elementele flexibile se vor încheia, dacă este necesar, în ordine inversă

align-content de proprietate modifică comportamentul flex-wrap proprietate. Este similar cu align-items , dar în loc de aliniere elemente flex, se aliniază liniile de flex.

Valorile posibile sunt după cum urmează:

  • stretch - valoarea implicită. Liniile se întind pentru a prelua spațiul rămas

  • flex-start - Liniile sunt ambalate spre începutul containerului flexibil

  • flex-end - Liniile sunt ambalate spre capătul containerului flexibil

  • center - Liniile sunt ambalate spre centrul containerului flexibil

  • space-between - Liniile sunt distribuite uniform în container flexibil

  • space-around în space-around - Liniile sunt distribuite uniform în container flexibil, cu spații de jumătate de dimensiune la fiecare capăt

Pentru a exersa, click pe acest link.

Tranzițtii CSS

Tranzițiile CSS oferă programatorului un mod de a controla viteza de animare atunci cînd sunt schimbate proprietățile CSS ale elementelor HTML. Pentru a utiliza tranzițiile, este nevoie de a specifica două lucruri:

  • proprietatea CSS la care dorești să aplici efectul

  • durata efectului

Dacă durata efectului nu va fi specificată, atunci tranziția nu se va aplica deoarece valoarea implicită pentru dutară este 0.

Exemplu

În exemplul de mai jos, putem observa că atunci cînd cursorul va fi peste un element div, se va modifica lungimea lui cu o durată de 2 secunde.

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
div:hover {
    width: 300px;
}

Pentru demo click aici

Tranziții cu întîrziere

Exemplul de mai jos demonstrează cum de utilizat proprietatea transition-delay.

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 3s;
    transition-delay: 1s;
}

div:hover {
    width: 300px;
}

Pentru demo click aici

Tranziții + Transformări

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 300px;
    height: 300px;
    transform: rotate(180deg);
}

Pentru demo click aici.

Blur Menu

Pentru că sunt foarte multe lucruri care pot fi efectuate cu tranzițiile și transformările în CSS, o să experimentăm cu scopul de a realiza un efect de blur asupra unei bare de meniu.

body{
  background-image:
    url("http://tympanus.net/Tutorials/BlurMenu/images/pattern.png"),
    url("http://tympanus.net/Tutorials/BlurMenu/images/1.jpg");
}
.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    color: black;
    font-size: 50px;
    display: block;
}
.bmenu li a{
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-shadow: 0px 0px 5px #fff;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
    text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
    color: #fff;
    text-shadow: 0px 0px 1px #fff;
    padding-left: 10px;
}

Elementele HTML:

<ul class="bmenu">
  <li><a href="#">About</a></li>
  <li><a href="#">Illustrations</a></li>
  <li><a href="#">Photography</a></li>
  <li><a href="#">Web Design</a></li>
  <li><a href="#">Personal Projects</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Pentru demo click aici

Specificitate

Specificitatea determină care stiluri trebuie aplicate atunci când au fost aplicate mai mult de o regulă. Bântuie părerea că importanța unui slector este direct proporțională cu lungimea acestuia, dar cu părere de rău realitatea stă departe de această afirmație.

Punctajul selectorelor

Pentru a calcula specificitatea unui selectore putem folosi tabelul de mai jos.

Tag

1 punct

Clasă

10 puncte

ID

100 puncte

Inline

1000 puncte

Un exemplu?

Selector

Specificitate

* { }

0 (selector universal)

li { }

1 (un tag)

ul li { }

2 (două tag-uri)

ul ol li.red { }

13 (o clasă și trei tag-uri)

li.red.level { }

21 (două clase și un tag)

style=“”

1000 puncte (inline / pe tag)

.sith

10 (o clasă)

#sith

100 (un ID)

body #darkside .sith p { }

112 (un ID, o clasă și două tag-uri)

În acest exemplu putem vedea cum 6 clase nu sunt în stare să „bată” un singur ID.

Cum pot exersa?

Noi am pregătit un joc interactiv care ilustrează comportamentele selectorelor CSS în diferite situații. Pentru a savura pe deplin aventura, vreau să vă recomand să parcurgeți un scurt ghid de introducere în acest joc.

Resurse

PreviousHTMLNextExerciții

Last updated