Псевдоелементи для стилізації тексту

7.1 Псевдоелемент ::first-letter

Псевдоелементи ::first-letter і ::first-line надають потужні інструменти для стилізації перших літер і перших рядків елементів тексту. Ці псевдоелементи широко використовуються для створення різних типографічних ефектів, покращення читабельності та естетики тексту на вебсторінках.

Псевдоелемент ::first-letter дозволяє стилізувати першу літеру блоку тексту. Він часто використовується для створення декоративних ефектів, таких як збільшені або стильні початкові літери в абзацах.

    
      селектор::first-letter {
        /* стилі */
      }
    
  

Приклад використання ::first-letter

У цьому прикладі перша літера абзацу збільшується в розмірі, виділяється жирним шрифтом і фарбується в синій колір. Властивості float: left і margin-right створюють ефект "втягнутої" першої літери, відсуваючи інший текст:

    
      /* Стилізація першої літери абзацу */

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

Підтримувані властивості для ::first-letter

Псевдоелемент ::first-letter підтримує безліч властивостей, включаючи:

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

За допомогою цих властивостей можна гнучко керувати зовнішнім виглядом першої літери тексту.

Приклад розширеної стилізації ::first-letter

У цьому прикладі до першої літери додаються додаткові ефекти — тінь тексту і більший розмір:

    
      /* Стилізація першої літери абзацу з додатковими ефектами */

      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 Псевдоелемент ::first-line

Псевдоелемент ::first-line дозволяє стилізувати перший рядок блоку тексту. Він використовується для створення різних типографічних ефектів, таких як зміна шрифту або кольору першого рядка, покращуючи візуальне сприйняття тексту.

Синтаксис:

    
      селектор::first-line {
        /* стилі */
      }
    
  

Приклад використання ::first-line

У цьому прикладі перший рядок абзацу виділяється жирним шрифтом, фарбується в зелений колір і отримує світло-сірий фон:

    
      /* Стилізація першого рядка абзацу */

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

Підтримувані властивості для ::first-line

Псевдоелемент ::first-line підтримує безліч властивостей, включаючи:

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

Вони дозволяють гнучко керувати зовнішнім виглядом першого рядка тексту.

Приклад розширеної стилізації ::first-line

У цьому прикладі до першого рядка додаються додаткові ефекти, такі як перетворення тексту в верхній регістр і зміна міжлітерної і міжсловної відстані:

    
      /* Стилізація першого рядка абзацу з додатковими ефектами */

      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 і ::first-line

Псевдоелементи ::first-letter і ::first-line можна використовувати разом для створення складних типографічних ефектів.

Приклад комбінованого використання

У цьому прикладі перша літера абзацу і перший рядок отримують різні стилізації, створюючи складний і цікавий візуальний ефект:

    
      /* Стилізація першої літери і першого рядка абзацу */

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

Повний приклад

У цьому прикладі перша літера абзацу збільшена і виділена синім кольором, а перший рядок абзацу виділено жирним шрифтом і зеленим кольором із сірим фоном:

    
      /* Стилізація першої літери абзацу */

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

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Приклад псевдоелементів ::first-letter і ::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>