Este CSS un limbaj de programare?

  • Reading time:14 minute pentru a citi

Este CSS un limbaj de programare?

Limbajele de programare sunt compuse dintr-o serie de instrucțiuni prin intermediul cărora un calculator efectuează operații. În comparație cu acestea, pagini de stil cum ar fi cele de tip CSS transmit informații legate de aspectul unor documente structurate (spre exemplu, fișiere HTML sau XML) și stabilesc de asemenea și layout-ul, font-urile, culorile și așa mai departe.

Spre urmare, pentru a răspunde la întrebarea de mai sus, am putea spune că CSS nu este un limbaj de programare ci o pagină de stil (CSS = pagină de stil în cascadă). Cu toate acestea, la nivelele avansate, sunt multe opțiuni complexe ale CSS-ului care se asemănă cu programarea.

În acest articol, vom discuta ce sunt paginile de stil, cum este structurată sintaxa CSS-ului, ce poți face cu documentele HTML cu ajutorul stilurilor și ce opțiuni în plus ai cu ajutorul CSS dacă ajungi să stăpânești această limbă.

 

Cursuri de programare online la CodeBerry

 

Care este diferența dintre limbajele de programare și paginile de stil?

Limbajele de programare

Cu ajutorul limbajelor de programare putem formula o serie de instrucțiuni, respectiv pașii pe care un calculator trebuie să îi facă pentru a finaliza o sarcină.

Există limbaje care se aseamănă mai mult cu codul mașină și care sunt foarte diferite de limbajul uman (cum ar fi Assembly) și există de asemenea și limbaje de programare de nivel avansat care se aseamănă mai mult cu limbajul uman decât cu codul mașină (cum ar fi C# și Java). 

Există un număr mare limbaje de programare, iar acest număr va continua doar să crească. Apar mereu limbaje noi despre care se vorbește și biblioteci noi ale acestora care pot fi explorate. Putem categoriza limbajele de programare în multe feluri—spre exemplu, există limbaje de programare orientate pe obiecte și limbaje funcționale—sau le putem clasifica în funcție de utilizarea acestora. Dacă dorești să înveți mai multe despre limbajele de programare, poți găsi o mulțime de articole interesante despre acestea pe blogul Codeberry, capitolul denumit „Limbaje de Programare”.

Paginile de stil

Paginile de stil sunt limbaje pe care le folosim în informatică pentru a formata și afișa documente structurate cum ar HTML sau XML. O pagină de stil determină ce reguli de stil se aplică fiecărui element al unui document, ce culori, fundal, layout, fonturi, etc. pe care browser-ul le afișează.

Câteva exemple de limbaje de stil:

  • CSS (pagină de stil în cascadă sau Cascading Style Sheets în engleză)
  • XSL (limbaj de stil extensibil sau Extensible Stylesheet Language în engleză) 
  • JSSS (pagini de stil JavaScript sau JavaScript Style Sheets în engleză) 

 

 

Ce este CSS?

Știm acum că CSS se referă la pagini de stil în cascadă și că este cel mai comun limbaj de stil folosit. Acesta îți oferă posibilitatea de a indica felul în care afișează browser-ul elementele documentului HTML.

Deși formatarea este posibilă în HTML (spre exemplu, poți menționa culoarea, grosimea fontului și layout-ul), informațiile legate de stil nu se scriu în mod obișnuit în documentele HTML deoarece fiecare element ar fi prea lung și ar fi prea dificil să se mențină procesul. De asemenea, opțiunile tale sunt mult mai limitate. Spre urmare, un fișier extern CSS este în mod normal atașat documentului HTML, care va gestiona instrucțiunile de stil ale mai multor elemente în același timp și, dacă este necesar, să le suprascrie în mod automat.

Există de asemenea opțiuni deosebite pentru a crea design-uri complexe, captivante și sofisticate (spre exemplu, cu ajutorul Flexbox-ului sau tehnologiilor Grid).

 

 

Sintaxa CSS-ului

Declarațiile CSS sunt compuse din selectori, proprietăți și valorile acestora.

Un selector indică care element HTML trebuie schimbat. Se adaugă apoi proprietățile în interiorul unor acolade (cum ar fi culoare, font, mărime, layout etc.) și valorile acestora lângă ele. Dacă un element HTML are mai multe linii de formatare, acestea sunt separate prin punct și virgulă.

Structura generală:

selector {
property: value;
property: value;
}

 

Așa arată centrarea unui paragraf și schimbarea culorii acestuia:

p {
  color: green;
  text-align: center;
}

Există multe alte opțiuni la nivel avansat, cum ar fi: putem crea website-uri care sunt compatibile cu un ecran mai mic, animații sau un design care poate reacționa la acțiunile unui utilizator.

Același framework HTML, stiluri diferite

Uită-te la exemplele de mai jos și vei observa că textul si codul HTML sunt la fel. Putem crea însă o înfățișare extrem de diferită atunci când oferim website-ului stiluri diferite cu ajutorul CSS.

  • Pe acest website, poți observa evoluția web design-ului de la începuturile sale până în anul 2020. Folosind cursorul, poți schimba stilurile CSS în forme mai moderne, dar vei observa că HTML-ul rămâne la fel. – Evolution of Webdesign
  • CSS Zen Garden este un website foarte cunoscut care îți arată cum poți afișa același fișier HTML în mai multe feluri. Poate fi folositor să observi multitudinea de design-uri pentru a putea înțelege ce elemente și cum au fost schimbate acestea de către creatorii site-ului pentru a putea face aceste schimbări. – CSS Zen Garden 

 

 

Câteva informații interesante legate de caracteristicile CSS

Pe lângă formatarea conținutului unui website și modificarea culorilor, font-urilor și layout-urilor cu ajutorul CSS, putem crea de asemenea și alte lucruri impresionante prin intermediul acestuia. Mai jos poți găsi câteva exemple ale posibilităților interesante pe care CSS le poate oferi prin implementarea acestuia.

Album foto

Poze clare și frumoase—dacă acoperi o imagine cu cursorul, poți vedea o versiune mai mare a acesteia.

 

Source: sonspring.com/hoverbox How it was made: Hoverbox image gallery

 

Layout-uri impresionante cu imagini

Este o bucurie să derulezi prin această galerie. Poți derula prin poze folosing butoanele săgeată—creatorul s-a folosit de transformări 3D pentru a crea acest website.

 

Sursa: Snow Stack

 

Grafică în stil 3D

Această bară de progres sau orice alt element 3D (care poate funcționa ca o diagramă) poate fi creat prin intermediul câtorva trucuri CSS.

 

Sursa: Pure CSS Progress Bar

 

Jocuri simple

CSS nu se folosește pentru a crea jocuri, însă sunt multe persoane care crează jocuri doar cu ajutorul HTML și CSS, luând-o ca pe o provocare. 

Poți găsi mai jos exemple de astfel de jocuri bazate pe trucuri CSS.

 

Programare și tehnologii avansate CSS

Dacă trecem de nivelul formatării elementelor documentului tău HTML, cum ar fi culori, mărimea font-ului, tipul font-ului etc., ajungem la tehnologii avansate, unde putem găsi soluții la probleme, acestea asemănându-se mai mult cu programarea tradițională.

În CSS, putem declara funcții, putem folosi orientare după obiect și putem contrui un sistem modular transparent și ușor de gestionat.

CSS preprocessors

Preprocesoarele CSS sunt extensii CSS care pot genera cod CSS, însemnând că putem automa pași folosind metode de programare. Există multe preprocesoare, dar cele mai cunoscute dintre ele sunt Sass și Less. 

În materia preprocesoarelor, CSS și programarea se intersectează, și deși am spus la începutul acestui articol că CSS nu este un limbaj de programare, dacă îl suplimentăm cu tehnologii avansate, concepte și operații de programare pot apărea și în CSS.

 

Cursuri online de programare la CodeBerry

 

Se merită să învăț CSS? 

Răspunsul scurt la această întrebare este că se merită cu siguranță. CSS oferă numeroase oportunități creative și, dacă ajungi să stăpânești limbajul, poți crea design-uri frumoase și impresionante prin intermediul acestuia. Dacă cunoști și JavaScript, poți deveni un dezvoltator front-end și vei avea, spre urmare, o șansă mai mare de a găsi un loc de muncă cu un venit bun.

Abilități avansate CSS și care sunt la zi cu actualizările acestuia sunt valoroase pe piața muncii și deși poți învăța elementele de bază într-un timp scurt, nu există mulți designeri web care sunt în totalitate stăpâni pe CSS. În domeniul design-ului și al implementării, există mereu spațiu pentru îmbunătățiri.

 

Dacă doriți să vedeți mai multe tutoriale de programare, consultați canalul nostru de Youtube, unde avem o mulțime de tutoriale video Python în limba engleză.

În seria noastră de articole „Cursuri de programare” am adunat oportunitățile de învățare, așa că dacă doriți să învățați să programați, puteți găsi acolo acestea și alte fapte interesante care vă pot ajuta să găsiți cursul perfect.

Cursuri de programare