Các Pseudoelement để tạo kiểu cho văn bản

7.1 Pseudoelement ::first-letter

Pseudoelement ::first-letter và ::first-line cung cấp công cụ mạnh mẽ để tạo kiểu cho chữ cái đầu và dòng đầu của văn bản. Những pseudoelement này được sử dụng rộng rãi để tạo ra các hiệu ứng typographic khác nhau, cải thiện độ đọc và thẩm mỹ của văn bản trên các trang web.

Pseudoelement ::first-letter cho phép bạn tạo kiểu chữ cái đầu của khối văn bản. Nó thường được sử dụng để tạo ra các hiệu ứng trang trí, như chữ cái đầu được phóng to hoặc tạo kiểu trong các đoạn văn bản.

    
      selector::first-letter {
        /* styles */
      }
    
  

Ví dụ sử dụng ::first-letter

Trong ví dụ này, chữ cái đầu của đoạn văn được phóng to, in đậm và được tô màu xanh lam. Thuộc tính float: left và margin-right tạo hiệu ứng chữ đầu "nhúng", đẩy các chữ khác sang:

    
      /* Tạo kiểu cho chữ cái đầu của đoạn văn */

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

Các thuộc tính hỗ trợ cho ::first-letter

Pseudoelement ::first-letter hỗ trợ nhiều thuộc tính, bao gồm:

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

Với các thuộc tính này, bạn có thể linh hoạt điều chỉnh diện mạo của chữ cái đầu của văn bản.

Ví dụ về tạo kiểu mở rộng cho ::first-letter

Trong ví dụ này, chữ cái đầu được thêm hiệu ứng bổ sung — bóng văn bản và kích thước lớn hơn:

    
      /* Tạo kiểu cho chữ cái đầu của đoạn văn với hiệu ứng bổ sung */

      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 cho phép tạo kiểu cho dòng đầu của khối văn bản. Nó được sử dụng để tạo ra các hiệu ứng typographic khác nhau, như thay đổi phông chữ hoặc màu sắc của dòng đầu, cải thiện khả năng hiển thị của văn bản.

Cú pháp:

    
      selector::first-line {
        /* styles */
      }
    
  

Ví dụ sử dụng ::first-line

Trong ví dụ này, dòng đầu của đoạn văn được in đậm, tô màu xanh lá cây và có nền xám nhạt:

    
      /* Tạo kiểu cho dòng đầu của đoạn văn */

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

Các thuộc tính hỗ trợ cho ::first-line

Pseudoelement ::first-line hỗ trợ nhiều thuộc tính, bao gồm:

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

Chúng cho phép bạn linh hoạt điều chỉnh diện mạo của dòng đầu của văn bản.

Ví dụ về tạo kiểu mở rộng cho ::first-line

Trong ví dụ này, dòng đầu được thêm hiệu ứng bổ sung, chẳng hạn như chuyển đổi văn bản sang chữ in hoa và thay đổi khoảng cách giữa chữ cái và chữ:

    
      /* Tạo kiểu cho dòng đầu của đoạn văn với hiệu ứng bổ sung */

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

7.3 Sử dụng kết hợp ::first-letter và ::first-line

Pseudoelement ::first-letter và ::first-line có thể được sử dụng cùng nhau để tạo ra các hiệu ứng typographic phức tạp.

Ví dụ sử dụng kết hợp

Trong ví dụ này, chữ cái đầu của đoạn văn và dòng đầu có các kiểu khác nhau, tạo ra một hiệu ứng thị giác phức tạp và thú vị:

    
      /* Tạo kiểu cho chữ cái đầu và dòng đầu của đoạn văn */

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

Ví dụ đầy đủ

Trong ví dụ này, chữ cái đầu của đoạn văn được phóng to và nổi bật với màu xanh lam, còn dòng đầu của đoạn văn được in đậm và có màu xanh lá cây với nền xám:

    
      /* Tạo kiểu cho chữ cái đầu của đoạn văn */

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

      /* Tạo kiểu cho dòng đầu của đoạn văn */

      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>Ví dụ về pseudoelement ::first-letter và ::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>