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 …
Ở 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ệ):
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
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.
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 …
- 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>
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
Bài viết liên quan
Bài viết mới
