×

Áp dụng style cho ký tự đầu tiên của phần tử - ::first-letter - trong CSS

Avatar of admin
admin 0 Views

Khi làm việc với CSS, việc tinh chỉnh giao diện của văn bản trên trang web là một trong những nhiệm vụ quan trọng giúp cải thiện trải nghiệm người dùng. Một trong những kỹ thuật hữu ích là áp dụng style đặc biệt cho ký tự đầu tiên của phần tử HTML. Để thực hiện điều này, ta sử dụng pseudo-element (thành phần giả) ::first-letter.

Giới thiệu về ::first-letter

Pseudo-element ::first-letter cho phép bạn chọn ký tự đầu tiên của một phần tử block-level (phần tử cấp khối) như <p>, <div>, <article>, hoặc <section> và áp dụng các thuộc tính style cụ thể chỉ cho ký tự đó. Đây là một cách tuyệt vời để tạo điểm nhấn hoặc làm tăng tính thẩm mỹ cho văn bản.

Cách sử dụng ::first-letter

Để áp dụng kiểu cho ký tự đầu tiên, bạn chỉ cần viết cú pháp CSS sau:

p::first-letter {
    color: blue;
    font-size: 200%;
    font-weight: bold;
    float: left;
    margin-right: 5px;
}

Trong ví dụ trên, ký tự đầu tiên của tất cả các đoạn văn HTML <p> sẽ có màu xanh, kích thước phông chữ gấp đôi kích thước bình thường, in đậm, được float sang trái và có khoảng cách phải là 5px. Hãy cùng xem xét một số thuộc tính CSS thường sử dụng với ::first-letter.

Các thuộc tính CSS phổ biến kèm ::first-letter

  1. Color: Để thay đổi màu sắc của ký tự đầu tiên.

    p::first-letter {
    color: red;
}

  2. Font-size: Để tăng hoặc giảm kích thước của ký tự đầu tiên.

    p::first-letter {
    font-size: 150%;
}

  3. Font-weight: Để điều chỉnh độ đậm của ký tự đầu tiên.

    p::first-letter {
    font-weight: bold;
}

  4. Float: Để tạo hiệu ứng hiển thị đặc biệt bằng cách float ký tự đầu tiên sang trái hoặc phải.

    p::first-letter {
    float: left;
}

  5. Margin: Để thêm khoảng cách xung quanh ký tự đầu tiên.

    p::first-letter {
    margin-right: 10px;
}

  6. Text-transform: Để thay đổi kiểu chữ như in hoa hoặc thường.

    p::first-letter {
    text-transform: uppercase;
}

  7. Line-height: Để thay đổi khoảng cách dòng của ký tự đầu tiên.

    p::first-letter {
    line-height: 1.5;
}

Lưu ý khi sử dụng ::first-letter

  • ::first-letter chỉ có thể được áp dụng cho các phần tử block-level.
  • Các thuộc tính CSS như float, margin, padding, border và một số thuộc tính khác chỉ có thể được áp dụng cho ::first-letter của phần tử block-level.
  • ::first-letter không hiệu quả với các phần tử inline (phần tử dòng) như <span>, <a>, hoặc <em>.

Ví dụ thực tế sử dụng ::first-letter

Dưới đây là một ví dụ minh họa cách sử dụng ::first-letter để tạo điểm nhấn cho ký tự đầu tiên của một đoạn văn trong một bài viết blog:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p::first-letter {
            color: darkred;
            font-size: 250%;
            font-weight: bold;
            float: left;
            margin-right: 10px;
        }
    </style>
    <title>Ví dụ ::first-letter</title>
</head>
<body>
    <article>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet accumsan tortor.
        </p>
    </article>
</body>
</html>

Trong ví dụ này, ký tự "L" đầu tiên của đoạn văn sẽ có màu đỏ đậm, kích thước gấp 2.5 lần so với kích thước bình thường, in đậm, float sang trái và có khoảng cách phải là 10px.

Kết luận

Sử dụng ::first-letter là một cách đơn giản nhưng hiệu quả để làm nổi bật văn bản trên trang web của bạn. Với kỹ thuật này, bạn có thể tạo ra những thiết kế sáng tạo và thu hút sự chú ý của người dùng, giúp trang web của bạn trở nên độc đáo và chuyên nghiệp hơn. Hy vọng bài viết này đã cung cấp cho bạn thông tin hữu ích về cách sử dụng ::first-letter trong CSS.

Comments

Bài viết liên quan