Calculatoare si Aplicații Gratuite Online Aplicatii Utile
Pagina de pornire
Postări

Proprietățile CSS de Modifica și control aspecte elemente HTML în pagini web

Înțelegerea proprietăților CSS este esențială pentru a putea modifica și controla aspectul elementelor HTML în paginile web. 

Proprietățile CSS vă permit să definiți cum vor arăta elementele în ceea ce privește culorile, dimensiunile, fundalurile, tipurile de font și multe altele. Iată o prezentare a câtorva proprietăți CSS cheie și cum le puteți folosi:

  1. Culoarea textului și fundalului:

    • color: Specifică culoarea textului.
    • background-color: Specifică culoarea fundalului elementului.

  2. Margini și padding:

    • margin: Specifică marginea exterioară a unui element.
    • padding: Specifică spațiul interior dintre conținutul unui element și marginea sa.

  3. Dimensiuni:

    • width: Specifică lățimea elementului.
    • height: Specifică înălțimea elementului.

  4. Fonturi:

    • font-family: Specifică familia de fonturi pentru text.
    • font-size: Specifică dimensiunea fontului.
    • font-weight: Specifică grosimea fontului (de exemplu, bold sau normal).
    • font-style: Specifică stilul fontului (de exemplu, italic).

  5. Aliniere:

    • text-align: Specifică alinierea textului (stânga, dreapta, centru, justificat).
    • vertical-align: Specifică alinierea verticală a unui element în cadrul liniei de bază.

  6. Borduri:

    • border: Specifică stilul, grosimea și culoarea marginii unui element.
    • border-radius: Specifică raza de încovoiere a colțurilor elementului.

  7. Liste:

    • list-style-type: Specifică tipul de marcator pentru liste (cum ar fi buline sau numere).

  8. Imagine de fundal:

    • background-image: Specifică imaginea de fundal a unui element.
    • background-size: Specifică modul în care imaginea de fundal se va ajusta în raport cu elementul.

  9. Opacitate:

    • opacity: Specifică nivelul de opacitate al elementului (0 - complet transparent, 1 - complet opac).

  10. Tranziții și animații:

    • transition: Specifică tranzițiile de stil pentru o proprietate într-un anumit interval de timp.
    • animation: Specifică animații complexe pentru elemente.

Acestea sunt doar câteva dintre proprietățile CSS disponibile. Înțelegerea modului în care fiecare proprietate funcționează și cum pot fi combinate vă permite să creați stiluri vizuale complexe și să controlați în mod precis modul în care elementele apar pe pagină.


Exemple Practice CSS cu HTML:

Foloseste butonul Testare sau Salveaza ca HTMl si deschide pagina in browser.

În acest exemplu:

  1. .box: Am stilizat un container cu lățimea de 400px, margini automate orizontal (margin: 50px auto), un spațiu de padding (padding: 20px), un fundal gri deschis (background-color: #f0f0f0), o imagine de fundal și o bordură cu colțuri încovoiate (border: 2px solid #333 și border-radius: 10px).

  2. h2: Am stilizat titlul cu culoarea textului gri închis (color: #333), dimensiunea de font 24px și o margine mică jos (margin-bottom: 10px).

  3. p: Am stilizat paragraful cu culoarea textului gri deschis (color: #666), dimensiunea de font 18px, un spațiu între liniile de text (line-height: 1.5) și o margine mai mare jos (margin-bottom: 20px).

  4. ul: Am stilizat lista cu marcatori de tip bulină (list-style-type: circle) și o margine stânga (margin-left: 40px).

  5. li: Am stilizat fiecare element de listă cu culoarea textului portocaliu (color: #FF5733) și fontul bold (font-weight: bold).

  6. .box:hover: Am adăugat un efect de tranziție la hover pentru container, reducând opacitatea la 0.8 și folosind o tranziție de opacitate cu durata de 0.3s.

Studiază Tutoriale cu Exemple Practice:

Lecții Invatare HTML

Lecții CSS

Trimiteți un comentariu