Metnin stilizasiyası üçün pseudoelementlər

7.1 Psevdoyelement ::first-letter

::first-letter və ::first-line psevdoyelementləri yazı elementlərinin ilk hərflərini və ya ilk sətirlərini stilləşdirmək üçün güclü alətlər təmin edir. Bu psevdoyelementlər müxtəlif tipoqrafik effektlər yaratmaq, oxunaqlılığı artırmaq və veb səhifələrin görünüşünü yaxşılaşdırmaq üçün istifadə olunur.

::first-letter psevdoyelementi yazı blokunun ilk hərfini stilləşdirməyə imkan verir. Bu, adətən, abzaslarda artırılmış və ya stilləşdirilmiş başlanğıc hərflər yaratmaq üçün istifadə olunur.

    
      seçici::first-letter {
        /* stillər */
      }
    
  

::first-letter istifadəsinə misal

Bu nümunədə abzasın ilk hərfi böyüdülür, qalın şriftlə vurğulanır və mavi rəngdə boyanır. float: left və margin-right xüsusiyyətləri "sıxılmış" ilk hərf effektini yaradır, qalan mətni kənara çəkir:

    
      /* Abzasın ilk hərfinin stilləşdirilməsi */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }
    
  

::first-letter üçün dəstəklənən xüsusiyyətlər

::first-letter psevdoyelementi bir çox xüsusiyyətləri dəstəkləyir, bunlara daxildir:

• font
• color
• background
• margin
• padding
• border
• float
• text-transform
• text-decoration

Bu xüsusiyyətlərdən istifadə edərək, yazının ilk hərfinin görünüşünü çevik şəkildə idarə etmək olar.

::first-letter üçün genişləndirilmış stilləşdirmə nümunəsi

Bu nümunədə ilk hərfə əlavə effektlər əlavə olunur — yazı kölgəsi və daha böyük ölçü:

    
      /* Əlavə effektlərlə abzasın ilk hərfinin stilləşdirilməsi */

      p::first-letter {
        font-size: 3em;
        font-weight: bold;
        color: #e74c3c;
        float: left;
        margin-right: 0.2em;
        line-height: 1;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      }
    
  

7.2 Pseudoelement ::first-line

Pseudoelement ::first-line mətn blokunun ilk sətrini tərtib etməyə imkan verir. Bu, müxtəlif tipoqrafik effektlər yaratmaq üçün istifadə olunur, məsələn, ilk sətirin şriftini və ya rəngini dəyişmək, mətnin vizual qavranılmasını yaxşılaşdırmaq.

Sintaksis:

    
      selektor::first-line {
        /* stil */
      }
    
  

::first-line istifadə nümunəsi

Bu nümunədə, abzasın ilk sətri qalın şriftlə vurğulanıb, yaşıla boyanır və açıq boz fon alır:

    
      /* Abzasın ilk sətrinin tərtibi */

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

::first-line üçün dəstəklənən property-lər

Pseudoelement ::first-line bir çox property-ləri dəstəkləyir, o cümlədən:

• font
• color
• background
• margin
• padding
• border
• line-height
• text-transform
• text-decoration
• letter-spacing
• word-spacing

Bunlar mətnin ilk sətrinin xarici görünüşünü çevik şəkildə idarə etməyə imkan verir.

::first-line ilə genişləndirilmiş tərtib nümunəsi

Bu nümunədə ilk sətirə əlavə effektlər əlavə olunur, məsələn, mətnin böyük hərflərə çevrilməsi və hərf və sözlərarası məsafənin dəyişdirilməsi:

    
      /* Əlavə effektlərlə abzasın ilk sətrinin tərtibi */

      p::first-line {
        font-weight: bold;
        color: #e67e22;
        background-color: #f9f9f9;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        word-spacing: 0.2em;
      }
    
  

7.3 ::first-letter və ::first-line-in kombinə edilmiş istifadəsi

::first-letter və ::first-line psevdoelementləri mürəkkəb tipoqrafik effektlər yaratmaq üçün birlikdə istifadə oluna bilər.

Kombinə edilmiş istifadənin nümunəsi

Bu nümunədə abzasın ilk hərfi və ilk sətiri müxtəlif stilləşdirmələr qəbul edir, mürəkkəb və maraqlı bir vizual effekt yaradır:

    
      /* Abzasın ilk hərfi və ilk sətirinin stilləşdirilməsi */

      p::first-letter {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

Tam nümunə

Bu nümunədə abzasın ilk hərfi böyüdülmüş və mavi rənglə vurğulanmış, abzasın ilk sətiri isə bold şriftlə yaşıl rəngdə və boz fon ilə vurğulanmışdır:

    
      /* Abzasın ilk hərfinin stilləşdirilməsi */

      p::first-letter {
        font-size: 2.5em;
        font-weight: bold;
        color: #3498db;
        float: left;
        margin-right: 0.1em;
      }

      /* Abzasın ilk sətirinin stilləşdirilməsi */

      p::first-line {
        font-weight: bold;
        color: #2ecc71;
        background-color: #f0f0f0;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>::first-letter və ::first-line psevdoelementlərinin nümunəsi</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
        </body>
      </html>