Pseudoelementy do stylizacji tekstu

7.1 Pseudoelement ::first-letter

Pseudoelementy ::first-letter i ::first-line to potężne narzędzia do stylizacji pierwszych liter i pierwszych linii elementów tekstu. Te pseudoelementy są szeroko używane do tworzenia różnych efektów typograficznych, poprawy czytelności i estetyki tekstu na stronach internetowych.

Pseudoelement ::first-letter pozwala stylizować pierwszą literę bloku tekstu. Jest często używany do tworzenia dekoracyjnych efektów, takich jak powiększone lub stylizowane inicjały w akapitach.

    
      selektor::first-letter {
        /* style */
      }
    
  

Przykład użycia ::first-letter

W tym przykładzie pierwsza litera akapitu jest powiększona, pogrubiona i pokolorowana na niebiesko. Właściwości float: left i margin-right tworzą efekt "wciągniętej" pierwszej litery, odsuwając resztę tekstu:

    
      /* Stylizacja pierwszej litery akapitu */

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

Obsługiwane właściwości dla ::first-letter

Pseudoelement ::first-letter obsługuje wiele właściwości, w tym:

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

Dzięki tym właściwościom można elastycznie kontrolować wygląd pierwszej litery tekstu.

Przykład zaawansowanej stylizacji ::first-letter

W tym przykładzie do pierwszej litery dodano dodatkowe efekty — cień tekstu i większy rozmiar:

    
      /* Stylizacja pierwszej litery akapitu z dodatkowymi efektami */

      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 pozwala stylizować pierwszą linię bloku tekstu. Jest używany do tworzenia różnych efektów typograficznych, takich jak zmiana fontu lub koloru pierwszej linii, poprawiając wizualny odbiór tekstu.

Składnia:

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

Przykład użycia ::first-line

W tym przykładzie pierwsza linia akapitu jest pogrubiona, pokolorowana na zielono i otrzymuje jasnoszare tło:

    
      /* Stylizacja pierwszej linii akapitu */

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

Obsługiwane właściwości dla ::first-line

Pseudoelement ::first-line obsługuje wiele właściwości, w tym:

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

Te właściwości pozwalają elastycznie kontrolować wygląd pierwszej linii tekstu.

Przykład zaawansowanej stylizacji ::first-line

W tym przykładzie do pierwszej linii dodano dodatkowe efekty, takie jak zamiana tekstu na wielkie litery i zmiana odstępów między literami i wyrazami:

    
      /* Stylizacja pierwszej linii akapitu z dodatkowymi efektami */

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

7.3 Łączone użycie ::first-letter i ::first-line

Pseudoelementy ::first-letter i ::first-line można używać razem do tworzenia złożonych efektów typograficznych.

Przykład łączonego użycia

W tym przykładzie pierwsza litera akapitu i pierwsza linia otrzymują różne stylizacje, tworząc złożony i interesujący efekt wizualny:

    
      /* Stylizacja pierwszej litery i pierwszej linii akapitu */

      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;
      }
    
  

Pełny przykład

W tym przykładzie pierwsza litera akapitu jest powiększona i wyróżniona niebieskim kolorem, a pierwsza linia akapitu jest wyróżniona pogrubieniem i zielonym kolorem z szarym tłem:

    
      /* Stylizacja pierwszej litery akapitu */

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

      /* Stylizacja pierwszej linii akapitu */

      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>Przykład pseudoelementów ::first-letter i ::first-line</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>