Hướng dẫn Tìm hiểu khái niệm thứ bậc trong XHTML

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,681
Tìm hiểu khái niệm thứ bậc trong XHTML

Thứ bậc trong XHTML là một khái niệm rất quan trọng mà bạn cần nắm rõ để sử dụng CSS sau này. Thứ bậc của XHTML giống như phả hệ của một gia đình vậy. Ở trên cùng là cụ tổ, xuống dưới là cụ, ông, cha, chú, anh chị em …

tree-html.png

Ở hình ví dụ trên bạn sẽ thấy rõ ràng mối liên hệ giữa các thẻ với nhau và chúng ta có thể hiểu bằng những cách sau (suy diễn theo kiểu phả hệ):
  • Thẻ <body> đóng vai trò là thẻ gốc và chứa các thẻ con nằm trong nó.
  • Các thẻ p, h1 và img là con của body
  • Hay nói cách khác body chính là cha của p,h1 và img.
  • ul là cha của li hay nói cách khác li là con của ul
  • <body> là “ông nội” của <ul> và là ông cố của <li>
Đến đây bạn có thể hỏi “tại sao tôi cần phải biết phả hệ này?”, tại vì sau này khi sử dụng CSS để thiết kế giao diện. Đôi khi bạn cần hướng tới một đối tượng cụ thể nào đó trong đoạn code XHTML, nếu bạn không nắm rõ mối liên quan giữa các thẻ với nhau. Có thể bạn sẽ bị nhầm lẫn và hướng tới sai đối tượng.

Ví dụ sau này trong đoạn code của bạn có nhiều thẻ <h1> nhưng bạn chỉ muốn thẻ <h1> nằm trong phần “content” là có màu đỏ. Lúc đó bạn có thể hướng tới nó nhờ cấp bậc của XHTML. Nếu cho đoạn code sau
Mã:
#content h1 {color:red;}

Như thế chỉ có thẻ <h1> thuộc thẻ <div id=”content”> sẽ bị ảnh hưởng, còn các thẻ khác trong trang web sẽ không bị ảnh hưởng vì nó không phải là một thành phần của <div id=”content”>

Có nhiều người chưa hiểu rõ cấp bậc của XHTML nên họ gặp nhiều khó khăn trong việc hướng đối tượng khi viết code. Vì thế họ đã tuỳ tiện dùng ID và Class chỉ để hướng tới một đối tượng cụ thể, mà nếu nắm rõ khái niệm cấp bậc này, bạn chỉ cần viết một đoạn code nhỏ thay vì có hàng tá ID và Class không cần thiết.

Chúc các bạn thành công.


Nguồn: izwebz.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom