Acronimul CSS înseamnă „foi de stil în cascadă”. CSS este utilizat pentru stilizarea site-urilor web și a aplicațiilor utilizate pe toate dispozitivele. Foaia de stil este frecvent utilizată alături de HTML și un limbaj de programare front-end, cum ar fi JavaScript.

CSS poate fi implementat într-unul din cele trei moduri - în linie, intern sau extern. Deși CSS extern este abordarea recomandată, există cazuri în care cele două metode rămase de implementare ar putea fi mai practice.

În acest articol tutorial, veți afla toate elementele de bază ale CSS pentru a începe să creați aplicații astăzi.

Când se utilizează diferitele metode de implementare CSS

Inline CSS este metoda ideală de implementare atunci când intenția este de a include doar una sau două preferințe de stil pe o pagină web, împreună cu alte câteva cazuri de nișă. Metoda CSS inline utilizează stil cuvânt cheie împreună cu o proprietate CSS pentru a obține un rezultat specific.

Dacă intenționați să schimbați culoarea unui singur titlu în roșu, atunci CSS în linie ar putea fi o opțiune bună. Un caz de nișă, așa cum s-a menționat mai sus, ar fi atunci când se creează machete HTML constând în principal din tabele (o practică învechită).

Utilizarea Exemplului CSS Inline

Titlul principal

Linia de cod de mai sus va afișa textul „Heading principal” acoperit cu culoarea roșie. Acesta este probabil unul dintre singurele motive practice pentru utilizarea CSS inline, deoarece există de obicei doar unul h1 element de pe o anumită pagină web.

Dacă intenționați să le acoperiți pe toate h2 elemente de pe o pagină web cu culoarea galbenă. Va trebui să utilizați CSS stil cuvânt cheie, împreună cu culoare proprietate și valoarea acesteia (galben) pe fiecare element. Cu toate acestea, un mod mai eficient de realizare a acestei sarcini este utilizarea CSS intern.

Utilizarea Exemplului CSS intern

Plasarea codului de mai sus în eticheta fișierului HTML vă va asigura că toate fișierele h2 elementele din acel fișier sunt acoperite cu galben. CSS intern este separat de codul HTML, ceea ce face metoda mai eficientă, deoarece facilitează direcționarea diferitelor grupuri de elemente.

Deci, de ce este metoda de implementare CSS externă cea mai recomandată abordare? Separarea preocupărilor. Cu CSS extern, codul dvs. CSS este complet separat de codul dvs. HTML, ceea ce asigură scalabilitatea pentru proiecte mari și face procesul de testare mai eficient.

Utilizarea Exemplului CSS extern

Introducerea liniei de cod de mai sus în eticheta fișierului HTML va facilita stilarea paginii dvs. web utilizând metoda CSS externă. Singurul aspect al codului de mai sus care se va modifica este valoarea atribuită href property, care ar trebui să fie întotdeauna numele fișierului CSS (inclusiv extensia .css).

Legate de: Ce sunt foile de stil în cascadă și pentru ce se folosește CSS? Cu fișierul CSS legat de documentul HTML, puteți începe acum să scrieți cod CSS în fișierul CSS. În acest moment, singura diferență dintre exemplul CSS intern de mai sus și CSS extern este stil etichetă. Prin urmare, inserarea următorului cod într-un fișier CSS va produce același rezultat ca și exemplul CSS intern de mai sus.

h2 {
culoare: galben;
}

Explorarea structurii de bază CSS

Declarația CSS de bază conține șapte elemente esențiale, după cum puteți vedea din exemplul de mai jos. Toți lucrează împreună pentru a realiza un set specific de preferințe de stil.

Selectorul

Într-o declarație CSS, un selector poate fi id, A clasă, un element sau, în unele cazuri speciale, un pseudo-selector. În structura CSS de deasupra A elementul este folosit ca selector, ceea ce înseamnă că toate linkurile de pe o pagină web vor fi acoperite cu roșu. În esență, scopul selectorului este de a identifica elementul (elementele) care ar trebui stilat (e).

Declarație Start și End

Declarația de început și sfârșit sunt importante, deoarece conțin toate preferințele de stil care se aplică unui selector specific. Ambele elemente sunt reprezentate de o pereche de acolade deschise și închise. O modalitate bună de a vă aminti să utilizați un început de declarație sau un sfârșit de declarație este să vă amintiți că, dacă aveți o acoladă deschisă, ar trebui să existe o acoladă corespunzătoare închisă și invers.

Proprietatea

Proprietatea CSS dintr-o structură de declarație poate fi una dintre cele peste o sută de tipuri de proprietăți diferite. Tipul de proprietate utilizat în structura CSS de mai sus este culoare iar această proprietate vizează textul de pe o pagină web. Dacă doriți să aflați mai multe, consultați pagina noastră lista cuprinzătoare a proprietăților CSS și utilizarea acestora.

Separatorul de proprietate / valoare

Deși ar putea părea mic și nesemnificativ, separatorul proprietate / valoare este la fel de important ca toate celelalte elemente din structura CSS. Dacă există vreodată o instanță în care acest element este uitat, întreaga declarație CSS nu se va executa.

Valoarea

Valoarea proprietății CSS reprezintă stilul exact pe care doriți să îl aplicați unei proprietăți date. Valorile disponibile pentru utilizare depind de tipul de proprietate. De exemplu, proprietatea utilizată în structura de mai sus este culoare, ceea ce înseamnă că există un singur tip de valoare care poate fi aplicat acestei proprietăți, un nume de culoare. A culoare valoarea poate fi prezentată în una din cele patru forme: o valoare de cuvânt (ca în exemplul de mai sus), o valoare hexazecimală, o valoare HSL (Hue, Saturation, Lightness) sau o valoare RGB (roșu, verde, albastru).

Declarația Separator

Separatorul de declarații indică faptul că sunteți la sfârșitul unei declarații specifice de stil. În structura de mai sus există un singur separator de declarații, dar pot fi mai multe. Totul depinde de numărul de proprietăți CSS pe care intenționați să le utilizați pentru un anumit clasă, id, sau element.

Ce sunt id-urile și cursurile?

id-uri și clase joacă un rol fundamental în procesul de stilizare CSS. La fel ca elementele HTML, CSS id-uri și clase sunt utilizate ca selectoare într-o declarație CSS. In orice caz, clase și id-uri să primeze față de un element HTML.

Regula generală din CSS este că ultima declarație de stil pe care o adăugați la un fișier îi va suprascrie pe cele care erau acolo înainte. Prin urmare, dacă există două declarații cu un h2 selector într-un fișier CSS, declarația adăugată ultima le înlocuiește pe cele care erau acolo înainte.

Cu toate acestea, dacă aceasta h2 elementul are un id care este folosit ca selector într-o declarație CSS, indiferent de poziția sa (înainte sau după) față de o declarație CSS care are h2 element ca selector, preferința de stil în id declarația va avea întotdeauna prioritate față de element. Pe scurt, un id va suprascrie alte selectoare de stil.

Este important să ne amintim că într-o declarație CSS, id-uri începeți cu un semn numeric și cursurile încep cu un punct. Cea mai semnificativă diferență dintre un id și a clasă este că un id este unic, în timp ce a clasă poate fi duplicat. De exemplu, o colecție de similare etichetele pot fi date la fel clasă Nume; Însă id de fiecare eticheta trebuie să fie unică.

Explorarea diferitelor tipuri de selectoare

Există trei tipuri de bază de selectoare - unic, multiplu și imbricat. Până în prezent, acest articol a acoperit pe larg selectoarele individuale.

Când utilizați CSS, vor exista cazuri în care doriți diferite elemente în diferite poziții pe un pagină web pentru a avea un stil similar diferit de stilul general aplicat întregii pagini web. În aceste cazuri, va fi util să știți cum să folosiți mai multe selectoare.

Exemplu de șablon HTML de bază

Bine ati venit

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Despre

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architecto
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Titlu

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impiedica hic maxime? Eius modi optio ad, nisi tempora sapiente?







Titlu

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores? At ad laborum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni at iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
impiedica hic maxime? Eius modi optio ad, nisi tempora sapiente?

Dacă priviți cu atenție fișierul HTML de mai sus, veți vedea dinamica care există între id-uri și clase. Cu referire la fișierul de mai sus, dacă doriți să aplicați același stil la despre secțiunea și articolele de pe pagina web, următorul cod CSS va realiza acest lucru.

Exemplu de utilizare a selectorilor multipli

#Despre, .content {
culoare albă;
culoare de fundal: darkcyan;
}

Când utilizați mai multe selectoare, trebuie să separați fiecare selector folosind o virgulă. Exemplul de mai sus are doi selectori, un id și a clasă. Dacă virgula care urmează despreid lipsește, declarația CSS nu se va executa.

Revenind la Exemplul de șablon HTML de bază de mai sus, există două etichete prezente - una în secțiunea de întâmpinare și cealaltă în secțiunea despre. Dacă obiectivul dvs. este să vizați doar unul dintre acestea etichete, un selector imbricat ar trebui să fie metoda de accesare.

Utilizarea de exemple de selectoare imbricate

#Binevenit p span {
culoarea rosie;
}

Selectorul imbricat de mai sus conține un id și două elemente HTML. După cum puteți vedea din exemplul de mai sus, un selector imbricat vă oferă posibilitatea de a viza un anumit element dintr-un grup.

Prin urmare, numai span secțiunea din eticheta de div cu bun venit id vor fi acoperite cu culoarea roșie.

Fie că utilizați un limbaj de stil precum CSS sau un limbaj de programare, ar trebui să știți cum să scrieți un comentariu. Comentariile sunt esențiale în proiectele la nivel de întreprindere în care mai mulți dezvoltatori lucrează împreună și sunt utile, de asemenea, atunci când facem o dezvoltare la scară mică.

Un comentariu CSS conține două bare oblice înainte, două asteriscuri și o secțiune de comentarii.

/ * Acesta este modul în care scrieți un singur comentariu de linie în CSS * /

/*
Așa scrieți
un comentariu pe mai multe linii
în CSS
*/

Ce urmeaza?

Acest articol vă oferă componentele fundamentale ale CSS. Acum puteți utiliza o identificare:

• Oricare dintre cele trei metode de implementare CSS
• Toate elementele dintr-o declarație CSS
• Cele trei tipuri de bază de selectoare
• Un comentariu CSS

Totuși, acesta este doar începutul. CSS are mai multe cadre care vă vor ajuta să dezvoltați o mai bună înțelegere a limbii. Singura provocare este de a decide care dintre ele este cea mai potrivită pentru dvs.

Tailwind CSS vs. Bootstrap: Care este un cadru mai bun?

Atunci când alegeți un cadru CSS, este important să îl găsiți pe cel care îndeplinește cerințele dvs.

Citiți în continuare

Despre autor