×

Cách sử dụng thẻ <span> để định dạng văn bản trong HTML

Avatar of admin
admin 1 Views

Trong thế giới thiết kế web và phát triển web, việc sử dụng các thẻ HTML để định dạng văn bản là vô cùng quan trọng. Một trong những thẻ phổ biến và hữu ích nhất là thẻ <span>. Thẻ này cho phép bạn áp dụng các kiểu dáng CSS tùy chỉnh cho các phần nhỏ của văn bản mà không cần ảnh hưởng đến cấu trúc tổng thể của tài liệu.

Khái niệm cơ bản về thẻ <span>

Thẻ <span> là một thẻ HTML không có ý nghĩa cụ thể về mặt nội dung; nó chủ yếu được sử dụng như một công cụ để trợ giúp trong việc định dạng và làm nổi bật các đoạn văn bản ngắn. Thông thường, thẻ này được sử dụng cùng với CSS để thay đổi màu sắc, phông chữ, và các thuộc tính khác của văn bản bên trong nó.

Cách sử dụng thẻ <span>

Cách dùng thẻ <span> rất đơn giản. Dưới đây là cú pháp cơ bản của việc sử dụng thẻ này:

<span>Văn bản cần định dạng</span>

Tuy nhiên, cú pháp đơn giản này chưa thể hiện được sự linh hoạt của thẻ <span>. Để tận dụng tối đa tiềm năng của nó, ta cần sử dụng thẻ này cùng với CSS. Dưới đây là một số cách để định dạng văn bản bằng CSS.

Sử dụng CSS trực tiếp trong thẻ <span>

Bạn có thể áp dụng các kiểu dáng CSS trực tiếp trong thẻ <span> bằng cách sử dụng thuộc tính style. Ví dụ:

<span style="color: red; font-weight: bold;">Văn bản có màu đỏ và đậm</span>

Trong ví dụ trên, văn bản sẽ được hiển thị với màu đỏ và chữ đậm nhờ thuộc tính style.

Định dạng bằng cách sử dụng lớp CSS

Một phương pháp hay hơn để định dạng văn bản là sử dụng các lớp CSS (class). Việc này giúp mã HTML trở nên gọn gàng và dễ bảo trì hơn. Dưới đây là ví dụ về cách áp dụng một lớp CSS cho thẻ <span>:

<!-- Định nghĩa lớp CSS trong tập tin .css hoặc trong thẻ <style> -->
<style>
  .highlight {
    color: blue;
    background-color: yellow;
    font-size: larger;
  }
</style>

<!-- Sử dụng lớp CSS trong thẻ <span> -->
<span class="highlight">Văn bản được làm nổi bật</span>

Sử dụng ID CSS cho thẻ <span>

Nếu bạn chỉ muốn áp dụng một kiểu dáng duy nhất cho một phần tử nào đó, bạn có thể sử dụng id thay vì class. Ví dụ:

<!-- Định nghĩa ID CSS trong tập tin .css hoặc trong thẻ <style> -->
<style>
  #uniqueText {
    color: green;
    font-style: italic;
  }
</style>

<!-- Sử dụng ID CSS trong thẻ <span> -->
<span id="uniqueText">Văn bản dạng nghiêng màu xanh lá</span>

Một số ví dụ ứng dụng thực tế

Dùng <span> để thay đổi màu chữ

<span style="color: blue;">Văn bản màu xanh dương</span>

Dùng <span> để thay đổi kích thước chữ

<span style="font-size: 20px;">Văn bản với kích thước lớn</span>

Dùng <span> để làm ẩn chữ

<span style="display: none;">Văn bản bị ẩn</span>

Kết luận

Thẻ <span> là một công cụ mạnh mẽ và linh hoạt cho việc định dạng văn bản trong HTML. Với sự kết hợp của CSS, bạn có thể dễ dàng áp dụng các kiểu dáng khác nhau để làm nổi bật văn bản, thay đổi màu sắc, kích thước, và nhiều thuộc tính khác. Hy vọng qua bài viết này, bạn đã hiểu rõ hơn về cách sử dụng thẻ <span> để tạo ra những trang web đẹp mắt và chuyên nghiệp.

Comments

Bài viết liên quan