You are currently viewing Ce Este CSS? Înțelegerea Stilizării Paginilor Web

Ce Este CSS? Înțelegerea Stilizării Paginilor Web

  • Post author:
  • Post last modified:28/02/2025

CSS (Cascading Style Sheets) este unul dintre cele mai importante elemente ale dezvoltării web. În timp ce HTML (HyperText Markup Language) se ocupă de structurarea conținutului pe o pagină web, CSS se ocupă de aspectul vizual al acelei pagini. Fără CSS, toate site-urile ar arăta la fel, fiind doar texte și imagini afișate într-o formă destul de simplă. Acesta adaugă stil, culori, tipografie și layout, transformând o pagină simplă într-un site atractiv și ușor de utilizat.

În acest articol, vom explora ce este, cum funcționează și cum poate fi folosit pentru a personaliza aspectul unui site web.

Ce Este CSS?

CSS este un limbaj de stilizare care controlează aspectul și prezentarea documentelor HTML. Practic, spune browserului cum să afişeze elementele HTML. Cu ajutorul lui, poți modifica:

  • Culorile elementelor
  • Dimensiunile și mărimea fonturilor
  • Spațierea între elemente (margini, padding)
  • Alinierea textelor sau imaginilor
  • Pozitionarea elementelor pe pagină
  • Adăugarea de efecte vizuale precum umbre, tranziții sau animații

CSS permite astfel personalizarea completă a paginilor web, fără a modifica structura de bază definită de HTML.

Cum Funcționează CSS?

CSS funcționează prin atribuirea de stiluri (proprietăți) elementelor HTML pe baza unor selecții specifice. Un fișier conține un set de reguli de stil, fiecare având două părți esențiale:

  1. Selectorul – Aceasta este partea care selectează elementele HTML la care se vor aplica stilurile.
  2. Declarațiile de stil – Acestea sunt efectiv stilurile propriu-zise care vor fi aplicate selectorului.

Exemplu de sintaxă CSS:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

În acest exemplu, selectorul este h1 (un titlu de nivel 1), iar declarațiile de stil sunt:

  • color: culoarea textului (albastru)
  • font-size: dimensiunea fontului (24px)
  • text-align: alinierea textului (centrat)

Aceste stiluri vor fi aplicate tuturor elementelor <h1> de pe pagină.

Tipuri de

Există trei moduri principale de a adăuga CSS într-o pagină web:

CSS Intern: Stilurile sunt adăugate direct în interiorul documentului HTML, între tag-urile <style> din secțiunea <head>.

    <style>
    h1 {
        color: red;
    }
</style>

    CSS Extern: Stilurile sunt salvate într-un fișier separat cu extensia .css, iar acest fișier este legat de pagina HTML printr-un link în secțiunea <head>.

    <link rel="stylesheet" href="styles.css">

    În fișierul styles.css, stilurile sunt definite similar cu exemplul de mai sus.

    CSS Inline: Stilurile sunt adăugate direct pe un element HTML folosind atributul style.

    <h1 style="color: green;">Titlu</h1>

    Proprietăți CSS Comune

    Iată câteva dintre cele mai comune proprietăți pe care le poți folosi pentru a stiliza paginile web:

    • color: Setează culoarea textului.
    • background-color: Setează culoarea de fundal a unui element.
    • font-family: Alege tipul de font pentru text.
    • font-size: Setează dimensiunea fontului.
    • margin: Setează distanța dintre elementul curent și celelalte elemente din jur.
    • padding: Setează distanța dintre conținutul unui element și marginea acestuia.
    • border: Adaugă o margine elementului.
    • width / height: Setează lățimea și înălțimea unui element.
    • display: Controlează cum este afișat un element (de exemplu, bloc, inline, flex).
    • position: Permite controlul poziționării elementelor pe pagină.

    Exemplu de Stilizare CSS

    Să presupunem că ai un fișier HTML simplu:

    <!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplu CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bine ai venit pe site-ul meu!</h1>
    <p>Acesta este un paragraf de text.</p>
</body>
</html>

    În fișierul style.css ai următoarele stiluri:

    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    font-size: 36px;
}

p {
    font-size: 18px;
    color: #666;
}

    Aceste stiluri vor face ca pagina să aibă un fundal deschis, textul din <h1> să fie de culoare închisă și textul din <p> să fie gri.

    Beneficiile Utilizării CSS

    1. Separarea structurii de prezentare: permite separarea conținutului (HTML) de stiluri, ceea ce face ca site-urile să fie mai ușor de întreținut.
    2. Flexibilitate și personalizare: oferă o mare libertate în ceea ce privește stilizarea paginilor, permițând personalizarea aproape oricărei caracteristici vizuale.
    3. Performanță îmbunătățită: Fișierele externe sunt cached de browser, ceea ce reduce încărcarea paginilor și îmbunătățește performanța.
    4. Design responsive: poate fi folosit pentru a crea pagini web care se adaptează la diverse dimensiuni de ecran (desktop, tabletă, mobil).

    Concluzie

    CSS este un instrument esențial pentru orice dezvoltator web, deoarece permite personalizarea completă a aspectului site-urilor web. De la controlul culorilor și fonturilor, până la crearea unor layout-uri complexe și responsabile, CSS joacă un rol fundamental în experiența utilizatorului pe internet.

    Dacă ești la început de drum în dezvoltarea web, învățarea CSS este un pas important pentru a crea site-uri atractive și funcționale. Începe prin a înțelege bazele și experimentează cu diferite stiluri pentru a crea pagini web unice și profesionale.

    Tags: , , , , ,