Fișe CSS

Sponsor de categorie

CSS (Cascading Style Sheets) este un limbaj de stilizare folosit pentru a descrie aspectul și formatarea unui document scris într-un limbaj de marcare, creat de Håkon Wium Lie. Este o tehnologie cheie a World Wide Web, concepută pentru a separa prezentarea de structura documentului. CSS se caracterizează prin flexibilitate și capabilități puternice de stilizare, permițând controlul precis asupra layout-ului, culorilor, fonturilor și animațiilor elementelor paginii. Acest limbaj oferă selectori și proprietăți avansate, oferind dezvoltatorilor instrumente pentru a crea interfețe responsive și vizual atractive. CSS suportă, de asemenea, modularitatea și reutilizarea stilurilor, menținând performanța și permițând crearea de designuri consistente între diferite browsere și dispozitive.

Aplicația noastră de fișe include întrebări de interviu selectate cu atenție pentru CSS, cu răspunsuri cuprinzătoare, care te vor pregăti eficient pentru orice interviu ce necesită cunoștințe de CSS. IT Flashcards nu este doar un instrument pentru cei care caută un loc de muncă - este o modalitate excelentă de a-ți consolida și testa cunoștințele, indiferent de planurile tale de carieră actuale. Utilizarea regulată a aplicației te va ajuta să rămâi la curent cu cele mai recente tendințe CSS și să îți menții abilitățile la un nivel înalt.

Exemple de fișe CSS din aplicația noastră

Descarcă aplicația noastră din App Store sau Google Play pentru a obține mai multe flashcarduri gratuite sau abonează-te pentru acces la toate flashcardurile.

Care sunt diferențele dintre clase și ID-uri în CSS?

Clasele și identificatorii sunt instrumente CSS care vă permit să stilizați anumite elemente HTML. Deși ambele metode de selecție sunt aproape identice, există unele diferențe.

1. Unicitate: Clasele sunt non-unicate, ceea ce înseamnă că puteți folosi aceleași clase pe multe elemente diferite. Pe de altă parte, identificatorii sunt unici pe o pagină, ceea ce înseamnă că fiecare identificator poate fi folosit o singură dată pe pagină.

2. Specifitate: Identificatorii sunt mai specifici comparativ cu clasele. Acest lucru înseamnă că dacă stilurile sunt în conflict, stilurile identificatorului vor suprascrie stilurile de clasă.

3. Aplicarea JavaScript: Identificatorii sunt adesea folosiți pentru a manipula elementele HTML folosind JavaScript, în timp ce clasele sunt mai puțin folosite în acest scop.

4. Scalabilitate: Stilurile de clasă pot fi reutilizate de multe elemente pe pagină. Identificatorii sunt mai puțin flexibili și sunt mai probabil să fie utilizați pentru a stiliza secțiuni foarte specifice.

Vă rugăm să rețineți că una dintre cele mai bune practici este să folosiți clasele pentru stiluri CSS și identificatorii pentru JavaScript.

Cum poate fi un stylesheet CSS legat de un document HTML?

O foaie de stil CSS poate fi atașată unui document HTML într-unul dintre următoarele moduri:

1. **Stil inline:** Stilurile sunt atașate direct elementelor HTML folosind atributul `style`. De exemplu:

<p style="color:red;">Acest text este rosu</p>

Această metodă este rar utilizată, în mod tipic pentru modificări de stil "unică".

2. **CSS intern:** Stilurile sunt incluse în cadrul tag-urilor `<style>` din secțiunea `<head>` a documentului HTML. Exemplu:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

Această metodă este utilă pentru documentele HTML de o singură pagină.

3. **CSS extern:** Metoda cea mai frecvent utilizată pentru atașarea CSS. Foaia de stil CSS este scrisă într-un fișier separat (de obicei cu o extensie .css) și atașată documentului HTML folosind un link în secțiunea `<head>`. Exemplu:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

Această metodă este cel mai frecvent utilizată, deoarece permite actualizarea, întreținerea și partajarea ușoară a foilor de stil în diferite documente HTML.

Ce sunt pseudo-clasele în CSS și oferă un exemplu de utilizare a acestora.

Pseudo-clasele în CSS sunt adiții de cuvinte cheie la selectori care definesc o anumită stare a unui element dat. Acestea permit stilizarea elementelor HTML nu numai pe baza informațiilor conținute direct în cod, dar și pe un anumit context sau stare a elementului.

De exemplu, pseudo-clasa :hover permite modificări vizuale ale unui element când acesta este survolat cu mouse-ul. Alte pseudo-clase utile includ :active (atunci când elementul este activ sau apăsat), :visited (atunci când un link a fost vizitat) sau :first-child (stilizează primul copil al unui element dat).

Codul de probă arată cum pseudo-clasa :hover poate fi folosită pentru a schimba culoarea de fundal a unui element atunci când este survolat cu mouse-ul:

button:hover {
  background-color: red;
}

În acest caz, culoarea de fundal a butonului se va schimba în roșu atunci când utilizatorul îl survolează cu mouse-ul. O astfel de interacțiune nu ar fi posibilă fără utilizarea unei pseudo-clase.

Care sunt metodele pentru poziționarea elementelor în CSS și ce limitări au acestea?

În CSS, avem mai multe metode de poziționare a elementelor de ales:

1. Static: Aceasta este setarea implicită în care elementele se suprapun unul după altul, așa cum este determinat de structura HTML. Poziția elementului este irelevantă și nu poate fi schimbată folosind proprietățile top, right, bottom sau left. Limitarea este lipsa de control asupra plasării elementului.

2. Relative: Vă permite să schimbați poziția unui element relativ la locația sa originală. Poziția este determinată de proprietățile top, right, bottom, left, dar nu afectează aspectul altor elemente. Limitarea este că elementele sunt pur și simplu deplasate, nu sunt îndepărtate din fluxul normal al documentului.

3. Absolute: Poziția unui element este determinată relativ la cel mai apropiat element de structură superioră poziționat diferit de static (relative, absolute, fixed, sticky). Dacă nu există un astfel de element, poziția este determinată relativ la documentul în sine. Elementul este îndepărtat din fluxul normal al documentului și nu afectează aspectul altor elemente. Limitarea este nevoia de a controla contextul de poziționare.

4. Fixed: Poziția unui element este determinată relativ la marginile browser-ului. Un astfel de element nu se mișcă chiar și atunci când pagina este derulată. Este îndepărtat din fluxul normal al documentului și nu afectează aspectul altor elemente. Limitarea este posibilitatea de a obscura alte elemente de către cel plasat permanent.

5. Sticky: Aceasta este o combinație de pozitionare relativa și fixă. Elementul se comportă ca unul static până când marginea superioară atinge un anumit loc (de exemplu, marginea de sus a ecranului), apoi elementul se comportă ca și cum ar fi fost fixat. Limitarea este necesitatea suportului browser-ului.