Tutorial CSS: Învață CSS de la zero

Ați fost vreodată fascinat de designul general al unui site web, culorile, aspectul, interfața cu utilizatorul și alte elemente care par atrăgătoare? Dar, vă întrebați cum sunt adăugate diferite elemente grafice pe site? Se realizează printr-un limbaj de codare numit CSS.

Acest blog vă ajută să înțelegeți ce este CSS, elementele fundamentale ale acestuia, avantajele sale și cum puteți utiliza CSS pentru a vă proiecta site-ul web sau pentru a vă construi o carieră în proiectarea site-urilor web.

Învață cursuri de dezvoltare software online de la cele mai bune universități din lume. Câștigați programe Executive PG, programe avansate de certificat sau programe de master pentru a vă accelera cariera.

Ce este CSS?

Foile de stil în cascadă (CSS) formează o parte integrantă a unui site web. Este un limbaj de codare folosit împreună cu HTML și JavaScript pentru a proiecta întregul aspect al site-ului web - pagini web, culori, dimensiunea fontului, spațiul dintre texte, diverse elemente și poziționarea acestora, fundalul și dimensiunea ecranului.

Termenul cascadă se referă la un stil adăugat textului părinte, în cascadă, până la textele ulterioare. CSS facilitează proiectarea și editarea paginilor web. Înainte de CSS, designerii web trebuiau să copieze manual etichetele, fontul, culorile, alinierea și alte reguli de stil pe toate paginile web. A fost nevoie de mult timp și efort. CSS rezolvă această problemă prin copierea regulilor de stil și aplicarea lor pe diferite pagini. Chiar dacă regulile de stil ale unei pagini sunt modificate, modificările se aplică automat celorlalte pagini de pe site. CSS permite companiilor să creeze o interfață de utilizator atrăgătoare pentru site-urile lor web și aplicațiile mobile.

Explorați cursurile noastre populare de inginerie software

Următoarele sunt câteva alte avantaje semnificative ale CSS:

• Viteză îmbunătățită:

  CSS adaugă culoare și stil site-ului web și îl face mai ușor de utilizat prin îmbunătățirea vitezei de încărcare a paginilor web. În plus, oferă o experiență de navigare lină, crescând astfel traficul pe site în mod organic.

• Întreținere ușoară: -

  Un alt avantaj esențial al utilizării CSS pentru site-ul dvs. este că oferă întreținere ușoară a site-ului. Puteți modifica aspectul unui întreg site printr-un singur cod de linie.

• Compatibilitate dispozitiv: -

  Un site web care pare să aibă un aspect specific pe un desktop poate să nu fie același pe un telefon mobil sau pe o tabletă. Aspectul site-ului se modifică în funcție de dimensiunea ecranului. Prin urmare, designerii de site-uri web trebuie să se asigure că aspectul rămâne consistent pentru toate dispozitivele. Este posibil cu ajutorul CSS.

Care sunt diferitele tipuri de CSS?

• CSS inline:-

  Este folosit pentru a stila un singur element în HTML, mai degrabă decât întreaga secțiune. Designerii folosesc CSS inline pentru a stila un singur element în continuare.

• CSS intern: -

  Se mai numește și CSS încorporat și este disponibil în stil. Este folosit pe o singură pagină, incluzând-o în partea de sus a documentului.

• CSS extern:-

  Spre deosebire de inline și intern, CSS extern aplică aceleași reguli de stil pe diferite pagini web. Este cel mai utilizat tip CSS, deoarece face mai ușor pentru designeri să facă modificări într-un singur fișier, mai degrabă decât să aplice modificări la mai multe fișiere.

Puteți asocia diferite stiluri unui document HTML cu ajutorul diferitelor tipuri de CSS. CSS-ul care primește cea mai mare prioritate este stilul inline. Acesta suprascrie regulile de stil în CSS încorporat și CSS extern. Urmează CSS-ul intern sau încorporat care înlocuiește regulile din foile externe. În cele din urmă, vine CSS-ul extern care nu poate suprascrie celelalte două foi de stil.

Sintaxă în CSS

Sintaxa în CSS se referă la diferitele reguli de stil sau elemente pe care un browser le interpretează în timp ce o pagină web este proiectată. Următoarele sunt cele trei elemente de bază ale CSS:

• Selector: -

  Puteți înțelege selectorul din CSS ca o etichetă în HTML care selectează singurul element pe care sunt aplicate regulile de stil. Iată diferitele tipuri de selectoare în CSS:

• Selector universal: -

  Nu selectează elementele în funcție de tip. În schimb, selectează toate elementele cu același nume.

• Selector descendent:-

  Acești selectori sunt utilizați pentru aplicarea unei reguli de stil unui element numai atunci când acesta este prezent în interiorul unui alt element anume.

• Selectoare de clasă: -

  După cum sugerează și numele, acești selectori aplică regula de stil tuturor elementelor unei anumite clase. De exemplu, toate elementele dintr-o pagină web marcată ca H2 vor avea dimensiunea fontului 12.

• Selector de ID: -

  Acești selectori aplică regulile de stil pe baza unui ID similar.

• Proprietate:-

  Proprietățile CSS se referă la diferitele atribute sau caracteristici ale etichetelor HTML, cum ar fi culoarea, dimensiunea, chenarul și alinierea.

• Valoare:-

  Acestea sunt valorile atribuite proprietăților CSS. De exemplu, o anumită culoare sau dimensiune trebuie să aibă valoarea #A2A2.

Coduri de culoare CSS

Diverselor culori utilizate în limbajul CSS li se atribuie o valoare sau un cod specific. Acesta permite designerului site-ului web să seteze anumite culori pentru elemente precum fundalul, textul sau chenurile. Următoarele sunt diferitele formate pentru a atribui valori de culoare în CSS:

• Coduri hexadecimale:-

  Acestea sunt coduri cu șase cifre utilizate pentru a reprezenta o valoare a culorii. Primele două cifre ale codului (RR) reprezintă valoarea culorii roșii și urmate de două valori pentru verde (GG) și ultimele două valori pentru albastru (BB). Puteți utiliza valori hexazecimale din diferite programe de grafică precum Adobe și Advanced Paint Brush. Este important de reținut că codurile hexazecimale din CSS încep cu un semn hash.

• Valori RGB: -

  În această proprietate, există o valoare specifică pentru fiecare dintre cele trei culori, și anume roșu, verde și albastru.

Cum să setați culoarea de fundal cu CSS?

Folosind diferite proprietăți CSS, puteți stila culoarea de fundal, imaginea, poziția sau derularea imaginii pe o pagină web. De exemplu, trebuie să utilizați proprietatea background-colour pentru a seta culoarea. Iată cum îl puteți executa.

<p style="culoarea fundalului: albastru;">. Acesta va oferi textului sau etichetei o culoare de fundal albastră. În mod similar, trebuie să utilizați proprietatea- „imagine de fundal” pentru a seta imaginea de fundal. Pentru a repeta imaginea în fundal, puteți utiliza proprietatea „background-repeat”.

Următoarele sunt diferitele proprietăți CSS utilizate pentru stilul fonturilor:

• Familia de fonturi schimbă fața fontului.
• Dimensiunea fontului este folosită pentru a mări sau a micșora dimensiunea textului prețului.
• Font-variant face textul cu majuscule mici.
• Proprietatea font-style face fontul bold sau italic. Greutatea fontului ajută la creșterea sau reducerea caracterului îndrăzneț al textului.

Proprietăți CSS pentru stilul textului și imaginilor

CSS are, de asemenea, diverse proprietăți pentru stilul textului unui element.

• Proprietatea „culoare” stabilește culoarea, în timp ce proprietatea direcție este folosită pentru a stila „direcția” textului.
• Proprietățile text-indent și text-align sunt utilizate pentru a seta indentarea textului și, respectiv, alinierea textului.
• Proprietatea letter-space ajută la creșterea sau reducerea spațiului dintre cuvinte.
• Puteți folosi proprietatea text-decor pentru a sublinia sau a bara textul.
• Proprietatea de transformare a textului ajută la convertirea textului din litere mici în majuscule și invers.
• De asemenea, puteți utiliza proprietatea text-shadow pentru a aranja umbra în jurul textului.

Imaginile paginii web pot fi stilate folosind următoarele proprietăți CSS.

• Proprietățile de înălțime și lățime stabilesc înălțimea și, respectiv, lățimea imaginii.
• Puteți utiliza proprietatea border pentru a seta lățimea chenarului imaginii.
• Proprietatea -moz-opacity ajută la remedierea transparenței sau opacității imaginii.

De asemenea, puteți pregăti liste numerotate sau cu marcatori cu CSS. Următoarele sunt proprietățile listei pe care trebuie să le cunoașteți:

• Proprietatea tip stil de listă ajută la setarea formei marcatorului, numărului sau oricărui alt marcator.
• De asemenea, puteți utiliza proprietatea list-style-image în loc de cea de mai sus pentru a adăuga imagini în loc de marcatori sau cifre.
• Proprietatea List-style-position controlează alinierea sau indentarea diferitelor puncte.

Citiți articolele noastre populare legate de dezvoltarea software

Concluzie

Site-urile web au devenit cruciale pentru afaceri, în principal datorită tendințelor în creștere în achizițiile online. Prin urmare, companiile trebuie să creeze un site web care să fie atrăgător vizual pentru clienți. CSS ajută companiile să obțină mai mulți clienți atragându-i către animațiile site-ului web, interfața de utilizare și alte elemente grafice.

Dacă doriți să urmați o carieră în proiectarea site-urilor web, puteți urma cursul de masterat în știință informatică de la upGrad.