- Tham gia
- 28/02/2015
- Bài viết
- 16,833
- Được Like
- 12,691
Hướng dẫn cách áp dụng hướng đối tượng dựa vào cấp bậc XHTML
Trong bài trước bạn đã biết về cấp bậc của XHTML, trong bài này mình sẽ hướng dẫn bạn cách hướng đối tượng cụ thể nằm sâu hơn trong cấp bậc của HTML. Có 2 cách bạn có thể hướng đối tượng cụ thể là Contextual Selector và Child Selector
Contextual Selector
Nếu bạn viết code CSS như sau
Thì tất cả các thẻ <p> trong trang web sẽ có màu xanh. Nhưng nếu bạn chỉ muốn một đoạn nào đó có màu xanh thôi chứ không phải toàn bộ trang. Lúc đó bạn sẽ dùng Contextual Selector có quy luật như sau:
Cách viết rất đơn giản, bạn chỉ cần liệt kê những thẻ “dẫn” đến thẻ bạn muốn hướng tới và cách nhau bằng một dấu cách. Thẻ nào gần nhất với dấu { … } là thẻ đó bị ảnh hưởng bởi CSS.
Chúng ta sẽ lấy một ví dụ nơi mà cấp bậc của XHTML phức tạp hơn để minh hoạ cho cách hướng đối tượng này.
Nếu bây giờ bạn bắt đâu viết code CSS
Thì tất cả chữ nằm trong thẻ <em> sẽ bị biến thành màu đỏ.
Nhưng nếu bây giờ bạn không muốn có chữ màu đỏ ở thẻ <h1> mà bạn chỉ muốn nó ở các thẻ <p> thôi. Bạn sẽ viết như sau
Ở luật trên bạn đã thêm “đường dẫn” p vào trước em để chỉ ra rằng chỉ có thẻ <em> nào nằm trong <p> mới bị ảnh hưởng và cụ thể là sẽ có màu đỏ.
Ở ví dụ trên bạn thấy thẻ <em> nằm trong thẻ <span> cũng bị ảnh hưởng mặc dù nó không phải là “con đẻ” của thẻ <p> nhưng nó lại là “cháu nội” của thẻ <p> do vậy nó vẫn bị ảnh hưởng.
Bạn có thể gộp nhiều thẻ vào một Selector như sau
Ở luật này bạn đã chỉ ra rất chi tiết chỉ có thẻ <em> nằm trong thẻ <span> và nằm trong thẻ <p> mới bị ảnh hưởng. Trong cách dùng Contextual Selector này bạn có thể gộp bao nhiêu thẻ tùy thích miễn là thẻ bạn muốn hướng tới nằm ở cuối cùng sát cạnh dấu { … }
Nhưng bây giờ nếu bạn chỉ muốn từ “cấp bậc XHTML” ở đoạn văn thứ 2 có màu đỏ thì bạn sẽ không làm được với Contextual Selector. Bởi vì 2 đoạn văn đều có cấu trúc giống nhau. Cho nên bạn cần phải sử dụng đến Child Selector
Child Selector
Child Selector dùng để hướng tới đối tượng là “con cái” trực tiếp của chúng trong cấp bậc XHTML. Khi đó bạn có thể dùng dấu lớn hơn “>” ở giữa hai thẻ
Với luật này bạn chỉ ra rằng chỉ có thẻ <em> là con trực tiếp của thẻ <p> mới bị ảnh hưởng. Còn chữ “đường dẫn” ở đoạn văn thứ 2 không phải là con trực tiếp do đó nó không bị ảnh hưởng bởi luật này.
Kết luận
Sử dụng thành thạo Contextual Selector sẽ giúp bạn rất nhiều trong quá trình thiết kế giao diện. Có người do không nắm vững khái niệm này đã lạm dụng ID và Class chỉ để hướng tới những đối tượng cụ thể trong cấp bậc, làm cho code XHTML và CSS của họ trở nên phức tạp và không gọn gàng. Tất nhiên nếu đôi khi bạn không thể hướng tới một đối tượng cụ thể, bạn có thể sử dụng vài ID và Class. Nhưng đừng tuỳ tiện sử dụng chúng chỉ vì bạn không nắm rõ cấp bậc XHTML.
Chúc các bạn thành công.
Trong bài trước bạn đã biết về cấp bậc của XHTML, trong bài này mình sẽ hướng dẫn bạn cách hướng đối tượng cụ thể nằm sâu hơn trong cấp bậc của HTML. Có 2 cách bạn có thể hướng đối tượng cụ thể là Contextual Selector và Child Selector
Contextual Selector
Nếu bạn viết code CSS như sau
Mã:
p {color: blue;}Thì tất cả các thẻ <p> trong trang web sẽ có màu xanh. Nhưng nếu bạn chỉ muốn một đoạn nào đó có màu xanh thôi chứ không phải toàn bộ trang. Lúc đó bạn sẽ dùng Contextual Selector có quy luật như sau:
Mã:
div p {color: blue;}Cách viết rất đơn giản, bạn chỉ cần liệt kê những thẻ “dẫn” đến thẻ bạn muốn hướng tới và cách nhau bằng một dấu cách. Thẻ nào gần nhất với dấu { … } là thẻ đó bị ảnh hưởng bởi CSS.
Chúng ta sẽ lấy một ví dụ nơi mà cấp bậc của XHTML phức tạp hơn để minh hoạ cho cách hướng đối tượng này.
HTML:
<body>
<h1>Cách hướng đối tượng <em>trong CSS</em> rất quan trọng</h1>
<p>Ví dụ này sẽ chỉ cho bạn cách sử dụng<em> cấp bậc XHTML </em>
để hướng đối tượng </p>
<p>Cách viết rất đơn giản, bạn chỉ cần <span>liệt kê <em>”đường dẫn”
</em>đến thẻ</span> cần hướng tới, thẻ nào nằm ở cuối cùng sẽ là đối
tượng bị ảnh hưởng </p>
</body>Nếu bây giờ bạn bắt đâu viết code CSS
Mã:
em {color: red;}Thì tất cả chữ nằm trong thẻ <em> sẽ bị biến thành màu đỏ.
Nhưng nếu bây giờ bạn không muốn có chữ màu đỏ ở thẻ <h1> mà bạn chỉ muốn nó ở các thẻ <p> thôi. Bạn sẽ viết như sau
Mã:
p em {color:red;}Ở luật trên bạn đã thêm “đường dẫn” p vào trước em để chỉ ra rằng chỉ có thẻ <em> nào nằm trong <p> mới bị ảnh hưởng và cụ thể là sẽ có màu đỏ.
Ở ví dụ trên bạn thấy thẻ <em> nằm trong thẻ <span> cũng bị ảnh hưởng mặc dù nó không phải là “con đẻ” của thẻ <p> nhưng nó lại là “cháu nội” của thẻ <p> do vậy nó vẫn bị ảnh hưởng.
Bạn có thể gộp nhiều thẻ vào một Selector như sau
Mã:
p span em {color:red;}Ở luật này bạn đã chỉ ra rất chi tiết chỉ có thẻ <em> nằm trong thẻ <span> và nằm trong thẻ <p> mới bị ảnh hưởng. Trong cách dùng Contextual Selector này bạn có thể gộp bao nhiêu thẻ tùy thích miễn là thẻ bạn muốn hướng tới nằm ở cuối cùng sát cạnh dấu { … }
Nhưng bây giờ nếu bạn chỉ muốn từ “cấp bậc XHTML” ở đoạn văn thứ 2 có màu đỏ thì bạn sẽ không làm được với Contextual Selector. Bởi vì 2 đoạn văn đều có cấu trúc giống nhau. Cho nên bạn cần phải sử dụng đến Child Selector
Child Selector
Child Selector dùng để hướng tới đối tượng là “con cái” trực tiếp của chúng trong cấp bậc XHTML. Khi đó bạn có thể dùng dấu lớn hơn “>” ở giữa hai thẻ
Mã:
p > em {color:red;}Với luật này bạn chỉ ra rằng chỉ có thẻ <em> là con trực tiếp của thẻ <p> mới bị ảnh hưởng. Còn chữ “đường dẫn” ở đoạn văn thứ 2 không phải là con trực tiếp do đó nó không bị ảnh hưởng bởi luật này.
Kết luận
Sử dụng thành thạo Contextual Selector sẽ giúp bạn rất nhiều trong quá trình thiết kế giao diện. Có người do không nắm vững khái niệm này đã lạm dụng ID và Class chỉ để hướng tới những đối tượng cụ thể trong cấp bậc, làm cho code XHTML và CSS của họ trở nên phức tạp và không gọn gàng. Tất nhiên nếu đôi khi bạn không thể hướng tới một đối tượng cụ thể, bạn có thể sử dụng vài ID và Class. Nhưng đừng tuỳ tiện sử dụng chúng chỉ vì bạn không nắm rõ cấp bậc XHTML.
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
