Elementlərin vəziyyətlərinin stili

10.1 Psevdo-sinif :focus

CSS psevdo-sinifləri elementlərin müxtəlif vəziyyətlərində stil vermək üçün əla alətlər təqdim edir. Onların köməyi ilə formalar və digər interaktiv elementlərlə istifadəçi qarşılıqlı təsirini yaxşılaşdırmaq olar. Gəlin psevdo-siniflərdən :focus, :hover, :disabled və :checked istifadə edərək giriş elementlərinə (<input>) necə stil verə biləcəyimizə baxaq.

:focus psevdo-sinifi fokus alan zaman formanın elementinə tətbiq edilir. Bu, adətən, elementə klik edəndə və ya Tab düyməsi ilə keçiddə baş verir. Fokuslanan elementlərə stil vermək istifadəçilərin formadan daha yaxşı istifadə etməsinə kömək edir.

İstifadə nümunəsi:

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Ad:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

İzah

• border-color: Element fokuslandıqda onun sərhəd rəngini dəyişir
• box-shadow: Elementin ətrafında kölgə effekti əlavə edir ki, onu vurğulasın
• outline: Brauzerin standart çərçivəsini silir və onu özəl stil ilə əvəz edir

10.2 Psevdo-sinif :hover

:hover psevdo-sinifi istifadəçinin element üzərinə kursoru gətirdiyi zaman tətbiq olunur. Bu, elementlə qarşılıqlı əlaqədə vizual geribildirim təmin etmək üçün faydalı ola bilər.

İstifadə nümunəsi:

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

İzah

• border-color: kursor element üzərinə gətirildikdə, onun sərhəd rəngini dəyişdirir
• background-color: elementin fon rəngini, kursor üzərində olduqda dəyişdirir

10.3 Psevdo-sinif :disabled

Psevdo-sinif :disabled forma elementlərinə tətbiq olunur ki, bu elementlər deaktiv edilib, yəni aktiv deyil və istifadəçi tərəfindən istifadə və ya dəyişdirilə bilmir. Bu, istifadəçilərə elementin qarşılıqlı əlaqə üçün əlçatan olmadığını anlamağa kömək edir.

İstifadə nümunəsi:

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">İstifadəçi adı:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

İzah

• background-color: deaktiv edilmiş elementin fon rəngini dəyişir ki, onun qeyri-aktiv olduğunu göstərsin
• color: deaktiv edilmiş elementin daxilindəki mətnin rəngini dəyişir
• cursor: kursoru "not-allowed" vəziyyətinə gətirir, vizual olaraq elementin əlçatan olmadığını göstərmək üçün

10.4 Psevdo-sinif :checked

Psevdo-sinif :checked, checkbox və radio tipli elementlərə, seçilmiş vəziyyətdə olan zaman tətbiq edilir. Bu, seçilmiş elementlərin daha nəzərə çarpan olmasına imkan verir.

İstifadə nümunəsi:

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Variant 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Variant 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Seçim 1
        </label>
        <label>
          <input type="radio" name="choice">
          Seçim 2
        </label>
      </form>
    
  

Açıqlama

• background-color: seçilmiş elementin fon rəngini dəyişdirir
• border-color: seçilmiş elementin sərhəd rəngini dəyişdirir