Cách sử dụng Phần tử HTML

Tìm hiểu cách sử dụng HTML <span> phần tử.

HTML <span> phần tử là một phần tử vùng chứa nội tuyến chung, được sử dụng để đánh dấu văn bản. Nó thường được sử dụng bên trong một phần tử khác.

<span> thường được sử dụng để làm cho một phần của văn bản trông khác với phần còn lại.

Ví dụ:

<p>My hat is <span style="color:red">red.</span></p>

Bạn cũng có thể sử dụng <span> để nhóm các phần tử có cùng giá trị thuộc tính tạo kiểu thông qua một lớp class .

Ví dụ:giả sử bạn đang viết công thức nấu ăn và bạn muốn nhấn mạnh mọi từ trong khối văn bản của mình là từ thành phần, với một màu cụ thể:

<p>
  To make my delicious garlic butter you need just four ingredients,
  <span class="ingredient">butter</span>,
  <span class="ingredient">garlic</span>,
  <span class="ingredient">salt</span> and
  <span class="ingredient">black pepper.</span>
</p>

Sau đó, bạn có thể tạo lớp CSS như vậy:

.ingredient {
  color: green;
}

Điều thông minh khi sử dụng một lớp có thể tái sử dụng là nếu một lúc nào đó bạn thay đổi ý định về cách các từ thành phần trông trực quan, bạn chỉ có thể thay đổi kiểu của nó một lần trong .ingredient đó và hiệu lực sẽ diễn ra trên mọi <span> phần tử sử dụng lớp này.

Ví dụ:giả sử bạn muốn sử dụng phông chữ đậm thay vì màu để nhấn mạnh các thành phần:

.ingredient {
  font-weight: bold;
}

<span> bản chất chung của phần tử, khiến nó trở thành một phần tử không có ngữ nghĩa yếu tố. Do đó, chỉ nên sử dụng phần tử này nếu không có phần tử nào khác phù hợp hơn để sử dụng.

<span> phần tử tương tự với <div> , nhưng sự khác biệt chính là theo mặc định, <span> là một phần tử nội dòng và <block> là một phần tử cấp khối. Tuy nhiên, bạn có thể ghi đè kiểu mặc định của các phần tử bằng CSS.