Foile de stil în cascadă (CSS)

Foile de stil externe sunt cea mai comună și recomandată metodă de a aplica stiluri CSS. Ele oferă o serie de avantaje, inclusiv⁚

• Separarea conținutului de prezentare
• Reutilizarea stilurilor pe mai multe pagini web
• Îmbunătățirea organizării și lizibilității codului
• Facilitarea actualizării stilurilor

Foile de stil externe sunt esențiale pentru dezvoltarea web modernă și ar trebui utilizate în toate proiectele web complexe.

Reguli de stil

Selectori

• Selectorul de tip⁚ p se aplică tuturor elementelor de tip paragraf. De exemplu, p { color⁚ blue; } va seta culoarea textului la albastru pentru toate paragrafele.
• Selectorul de ID⁚ #id se aplică elementului cu ID-ul specificat. De exemplu, #header { background-color⁚ #f0f0f0; } va seta culoarea de fundal a elementului cu ID-ul “header” la gri deschis.
• Selectorul de clasă⁚ .class se aplică tuturor elementelor cu clasa specificată. De exemplu, .important { font-weight⁚ bold; } va seta fontul la îngroșat pentru toate elementele cu clasa “important”.
• Selectorul de atribut⁚ [atribut] se aplică tuturor elementelor care au atributul specificat. De exemplu, [href] { color⁚ blue; } va seta culoarea textului la albastru pentru toate elementele cu atributul “href”.
• Selectorul de pseudo-clasă⁚ ⁚pseudo-clasă se aplică elementelor în funcție de starea lor. De exemplu, a⁚hover { color⁚ red; } va seta culoarea textului la roșu când mouse-ul este poziționat deasupra unui link.

Acestea sunt doar câteva exemple de selectori CSS. Există o gamă largă de selectori disponibili, care oferă flexibilitate și control asupra aspectului paginilor web.

Proprietăți

• Proprietăți de text⁚ font-family, font-size, font-weight, color, text-align, text-decoration, line-height, etc. Aceste proprietăți controlează aspectul textului, inclusiv fontul, dimensiunea, culoarea, alinierea și decorarea.
• Proprietăți de fundal⁚ background-color, background-image, background-repeat, background-position, background-size, etc. Aceste proprietăți controlează aspectul fundalului elementului, inclusiv culoarea, imaginea, repetarea, poziția și dimensiunea.
• Proprietăți de margine⁚ border-width, border-style, border-color, border-radius, etc. Aceste proprietăți controlează aspectul marginii elementului, inclusiv lățimea, stilul, culoarea și rotunjirea colțurilor.
• Proprietăți de poziționare⁚ position, top, right, bottom, left, z-index, etc. Aceste proprietăți controlează poziția elementului pe pagină, inclusiv poziționarea relativă, absolută sau fixă.
• Proprietăți de dimensiune⁚ width, height, min-width, min-height, max-width, max-height, etc. Aceste proprietăți controlează dimensiunile elementului, inclusiv lățimea, înălțimea și limitele minime și maxime.

Valori

Valorile CSS sunt folosite pentru a specifica modul în care o anumită proprietate va fi aplicată unui element. Fiecare proprietate are un set specific de valori acceptate, care pot fi de tipuri diferite⁚

• Valori numerice⁚ Acestea includ numere întregi, numere zecimale, unități de măsură (px, em, rem, %, etc.) și unități de timp (s, ms). De exemplu, valoarea 10px pentru proprietatea font-size specifică o dimensiune a fontului de 10 pixeli.
• Valori de culoare⁚ Acestea pot fi specificate prin nume de culori predefinite (ex. red, blue, green), coduri hexazecimale (ex. #FF0000), valori RGB (ex. rgb(255, 0, 0)) sau valori HSL (ex. hsl(0, 100%, 50%)).
• Valori de șir⁚ Acestea sunt secvențe de caractere închise între ghilimele. De exemplu, valoarea "Arial" pentru proprietatea font-family specifică un font Arial.
• Valori booleene⁚ Acestea pot fi true sau false. De exemplu, valoarea true pentru proprietatea display specifică afișarea elementului, iar false specifică ascunderea acestuia.
• Valori de enumerare⁚ Acestea sunt un set de valori predefinite. De exemplu, proprietatea text-align acceptă valorile left, center, right, justify.
• Valori de funcție⁚ Acestea sunt funcții predefinite care returnează o valoare. De exemplu, funcția url este folosită pentru a specifica o imagine pentru proprietatea background-image.

Alegerea valorilor potrivite pentru proprietățile CSS este esențială pentru a crea un design web estetic și funcțional.