Un tutorial rapid despre limbajul de proiectare al web-ului.

Aflati CSS in 5 minute Un tutorial pentru incepatori
Doriți să urmați cursul nostru gratuit CSS? Click aici!

CSS (Cascading Style Sheets) este ceea ce face ca paginile web să arate bine și prezentabile. Este o parte esențială a dezvoltării web moderne și o abilitate obligatorie pentru orice designer și dezvoltator web.

În acest articol, vă voi oferi o introducere rapidă pentru a vă ajuta să începeți cu CSS.

De asemenea, am lansat un curs gratuit CSS complet pe Scrimba. Faceți clic aici pentru a o verifica.

Presupun că aveți o înțelegere de bază a HTML-ului, dar în afară de aceasta nu există condiții prealabile pentru acest tutorial.

Noțiuni de bază

Să începem cu învățarea modului în care putem include CSS în proiectele noastre. Există de obicei trei moduri în care facem asta.

1. CSS în linie

În primul rând, putem include CSS direct în elementele noastre HTML. Pentru aceasta, folosim style atribut și apoi îi oferim proprietăți.

<h1 style="color: blue"> Hello world! </h1>

Aici îi dăm proprietatea color, și setarea valorii la blue, care are ca rezultat următoarele:

1611895025 272 Aflati CSS in 5 minute Un tutorial pentru incepatori

De asemenea, putem seta mai multe proprietăți în interiorul style eticheta dacă am vrut. Cu toate acestea, nu vreau să continui pe această cale, deoarece lucrurile încep să se încurce dacă HTML-ul nostru este aglomerat cu o mulțime de CSS în el.

Acesta este motivul pentru care a fost introdusă a doua metodă pentru a include CSS.

2. CSS intern

Cealaltă modalitate de a include CSS este utilizarea style element în head secțiunea documentului HTML. Aceasta se numește stil intern.

<head>  
    <style>  
        h1 {  
            color: blue;  
        }  
    </style>  
</head>

În elementul de stil, putem da stilul elementelor noastre HTML selectând elementul (elementele) și oferind atribute de stil. La fel cum am aplicatcolorproprietate la h1 element de mai sus.

3. CSS extern

Al treilea și cel mai recomandat mod de a include CSS este utilizarea unei foi de stil externe. Creăm o foaie de stil cu un .css extensiei și includeți linkul său în documentul HTML, astfel:

<head>  
    <link rel="stylesheet" href="https://www.freecodecamp.org/news/get-started-with-css-in-5-minutes-e0804813fc3e/style.css">  
</head>

În codul de mai sus, am inclus linkul style.css fișier folosind fișierul link element. Apoi scriem toate CSS-urile noastre într-o foaie de stil separată numită style.css astfel încât să fie ușor de gestionat.

h1 {  
   color: blue;  
}

Această foaie de stil poate fi importată și în alta HTML fișiere, deci acest lucru este minunat pentru reutilizare.

Selectoare CSS

După cum am discutat mai devreme, CSS este un limbaj de proiectare care este folosit pentru a stiliza elemente HTML. Și pentru a stiliza elementele, trebuie mai întâi să le selectați. Ați văzut deja o privire asupra modului în care funcționează acest lucru, dar să ne scufundăm puțin mai profund în selectoarele CSS și să analizăm trei moduri diferite de a selecta elemente HTML.

1. Element

Prima modalitate de a selecta un element HTML este prin simpla utilizare a numelui, ceea ce am făcut mai sus. Să vedem cum funcționează:

h1 {  
    font-size: 20px;  
}  
p {  
    color: green;  
}  
div {  
    margin: 10px;  
}

Exemplul de mai sus este aproape auto-explicativ. Selectăm diferite elemente precum h1, p, div și oferindu-le atribute de stil diferite. font-size controlează dimensiunea textului, color setează culoarea textului și margin adaugă spațiere în jurul elementului.

2. Clasa

Un alt mod de selectare a elementelor HTML este prin utilizarea atributului de clasă. În HTML, putem atribui diferite clase elementelor noastre. Fiecare element poate avea mai multe clase și fiecare clasă poate fi aplicată și la mai multe elemente.

Să o vedem în acțiune:

<div class="container">  
    <h1> This is heading </h1>  
</div>

.container {  
    margin: 10px;  
}

În codul de mai sus, am atribuit clasa de container la elementul div. În foaia de stil, ne selectăm clasa folosind .className format și oferindu-i un 10px marjă.

3. ID

La fel ca cursurile, putem folosi și ID-uri pentru a selecta elemente HTML și a le aplica stilul. Singura diferență între clasă și ID este că un singur ID poate fi atribuit unui singur element HTML.

<div>  
    <p id='para1'> This is a paragraph </p>  
</div>

#para1 {  
    color: green;  
    font-size: 16px;  
}

Exemplul de mai sus afișează modul în care atribuim un ID elementului de paragraf și ulterior folosim selectorul de ID din foaia de stil pentru a selecta paragraful și a aplica stilul acestuia.

Fonturi și culori

CSS ne oferă literalmente sute de opțiuni pentru a ne juca cu fonturi și culori și a face ca elementele noastre HTML să arate frumos. Putem alege dintre două tipuri de nume de familie de fonturi:

1. Familia generică: un grup de familii de fonturi cu un aspect similar (cum ar fi „Serif” sau „Monospace”)

2. Familia de fonturi: o anumită familie de fonturi (cum ar fi „Times New Roman” sau „Arial”)

Pentru culori, putem folosi nume de culori predefinite sau valori RGB, HEX, HSL, RGBA, HSLA.

<div class="container">  
    <h1 class="heading1">  
        CSS is Coooooool!!!!  
    </h1>  
</div>
.container {  
    width: 500px;  
    height: 100px;  
    background-color: lightcyan;  
    text-align: center;  
}

.heading1 {  
    font-family: 'Courier New';  
    color: tomato;  
}
1611895026 516 Aflati CSS in 5 minute Un tutorial pentru incepatori

După cum puteți vedea în exemplul de mai sus, avem un element div cu clasa de container. În interiorul acestui div, există un h1 etichetați cu un text în interior.

În foaia de stil, selectăm clasa container și o setăm width, height, background-color, și text-align.

În cele din urmă, selectăm .heading1 class – care se aplică la h1 tag – și dă-i atributele font-family și color.

Concluzie

S-ar putea să vă simțiți un pic copleșiți de toate aceste informații, dar nu vă faceți griji.

Doar verificați-ne curs introductiv gratuit la CSS pe Scrimba și veți fi un ninja de web design în mai puțin de o oră.


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.