Pseudo Class

Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết ở bài trước. Một thành phần rất quan trọng trong mọi website chính là liên kết. Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo- classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo- classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web.

Pseudo Class cho đường liên kết

Pseudo Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó ví dụ như những đường liên kết trên izwebz, khi bạn di chuột qua sẽ có màu nền là màu xanh nhạt.

Có tất cả 4 trạng thái của đường liên kết

  • Link: đơn thuần là đường liên kết để báo cho người đọc biết nó là đường liên kết.
  • Visited: Người đọc đã từng nhấp chuột vào link này rồi.
  • Hover: Người đọc di chuột qua đường liên kết
  • Active: Đường liên kết đang được người đọc nhấp chuột.

Tương đương với 4 Pseudo Class.

  • a:link {color:blue;}
  • a:visited {color:gray;}
  • a:hover {color:red; text-decoration:none;}
  • a:active {color:navy;}

Bây giờ hãy tạm gác chuyện màu nào hay hiệu ứng nào thì thích hợp cho đường liên kết lại, chúng ta hãy xem đoạn code trên ảnh hưởng tới đường liên kết như thế nào. Đoạn code trên định nghĩa đường liên kết lúc:

  • Bình thường sẽ có màu xanh và gạch chân là giá trị mặc định.
  • Đường liên kết đã được người dùng nhấp vào, nó sẽ có màu xám.
  • Người dùng di chuột lên (chưa nhấp) nó sẽ có màu đỏ và không có gạch chân
  • Người dùng chỉ nhấp và giữ chuột nó sẽ có màu xanh đậm (ít khi xảy ra)

Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết. Sau này bạn có thể sử dụng Pseudo Class như là 1 dạng Contextual Selector để hướng tới những đối tượng cụ thể và tạo ra những hiệu ứng khác nhau cho các đường link ở những phần khác nhau như thanh di chuyển, footer, liên kết bạn bè …

Trong 4 trạng thái trên thì bạn không nhất thiết phải khai báo cả 4 trạng thái. Thường thì người ta chỉ khai báo 2 trạng thái chủ yếu là :link và :hover. Còn :visited và :active thì cũng không thực sự cần thiết lắm. Trình duyệt sẽ bỏ qua những trạng thái không được khai báo.

Lưu ý: Tuy nhiên để có hiệu ứng Rollover, bạn phải khai báo :hover sau :link hoặc :visited. Hoặc bạn có thể nhớ theo kiểu LoVe Hate

Pseudo Class còn có thể được áp dụng cho bất cứ thành phần nào để tạo hiệu ứng Rollover chứ không chỉ với các đường liên kết. Ví dụ

h1:hover {background-color:green;}

Lưu ý: IE6 không hỗ trợ Pseudo Class ở những thành phần khác ngoại trừ đường liên kết. IE7 có hỗ trợ Pseudo Class nhưng bạn phải khai báo là Strict DOCTYPE thì nó mới hoạt động.

First Child

x:first-child

Tính năng này dùng để hướng đối tượng là con “trưởng” của một thành phần “đông con”, nơi x là con đầu

Ví dụ:

.vi_du em:first-child {color:red;}

với code xhtml như sau

Tính năng này chủ yếu dùng để hướng đối tượng

Ở đoạn code trên thì hai thẻ <em> đều là con của thẻ <p> nhưng thẻ <em> đứng trước là con đầu, cho nên nó bị ảnh hưởng bới luật trên và kết quả bạn sẽ có

Tính năng này chủ yếu dùng để hướng đối tượng

Pseudo Elements

Pseudo Elements cho phép bạn tạo ra những hiệu ứng đặc biệt mà bạn không cần phải thêm markup vào code.

x:first-letter ở đó x là tên thẻ bị ảnh hưởng

p:first-letter {font-size:300%;}

Với markup tương ứng

<p>Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết.</p>

x:first-line <– nơi x là tên thẻ bị ảnh hưởng

p:first-line {font-variation:small-caps;}

Cái hay của dòng code này là nếu cửa sổ trình duyệt lơn thì bất cứ chữ nào nằm vừa dòng đầu tiên sẽ bị IN HOA như hình trên. Nếu cửa sổ bé hơn, nó sẽ đẩy chữ xuống dưới và những chữ còn lại vẫn sẽ được IN HOA.

Clear và Float

 

Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có. Clear dùng để ngăn không cho thành phần ở dưới di chuyển lên trên đề lấp vào chỗ trống.

Ví dụ bạn có 2 đoạn văn bản, bạn chỉ muốn đoạn văn thứ nhất bao quanh hình ảnh và đoạn văn thứ hai thì vẫn nằm ở dưới. Theo luật trên thì cữ có chỗ là đoạn văn thứ 2 cũng sẽ tràn lên để lấp chỗ trống. Nếu bạn không muốn điều này xảy ra bạn có thể sử dụng Clear để nó không tràn lên được.

1. Float

Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh. Nhưng nó cũng được áp dụng nhiều trong việc thiết kế giao diện sử dụng CSS. Ở ví dụ dưới đây sẽ bao gồm một hình logo của izwebz và một đoạn văn bản. Tôi sẽ cho hình được float: left và đoạn văn bản được giữ nguyên.

img {float: left;}

Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p>

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Box Model</h3>
  <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại,
nó sẽ bị đầy lùi vào biên là 5px .</p>
</div><!--End #bao_quanh-->

Tóm lại khi bạn cho tấm hình float: left bạn khiến nó bị dịch chuyển sang phía tận cùng bên trái (hoặc phải nếu float: right) so với thẻ mẹ của nó là div id=”bao_quanh”. Đoạn văn bản cũng sẽ di chuyển tương tự so với thẻ mẹ của nó, do đó tạo ra hiệu ứng bao quanh lấy hình ảnh. Cho nên nếu bây giờ bạn không muốn chữ bao quanh hình nữa mà muốn nó tạo ra 2 cột song song với nhau, bạn chỉ cần tăng giá trị margin-left cho đoặn văn thành 150px.

 {margin-left: 150px;background: #faf3c7;}
img {float: left;}

Khi bạn cho tấm hình float sang bên trái và đoạn văn bản có lề trái bằng với độ lớn của tấm hình, thì hiệu ứng bao xung quanh hình sẽ mất đi mà thay vào đó bạn được 2 cột song song với nhau. Đây là nguyên lý cơ bản nhất để tạo ra giao diện có nhiều cột sử dụng float. Miễn là mỗi thành phần khi được float đều có một giá trị độ rộng nhất định thì nó sẽ xếp song song với nhau và tạo ra cột (nếu diện tích đủ rộng). Nếu bạn làm như vậy với 3 thẻ <div> float: left và có độ rộng nhất định, bạn sẽ được 3 cột song song. Sau đó bạn có thể thêm các thành phần vào từng cột để tạo nên giao diện.

 

2. Clear

Luôn đi chung với Float là Clear. Clear thực chất chỉ là một tính năng chống không cho đoạn văn ở dưới tràn lên trên để lấp vào chỗ trống. Như đã nói ở trên, khi bạn dùng float bạn có thể tạo ra hiệu ứng chữ bao xung quanh hình. Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển lên trên và lấp vào chỗ trống. Tất nhiên đó không phải là điều bạn muốn, do vậy bạn cần sử dụng Clear để “dọn sạch” nó đi.

Ở ví dụ dưới đây tôi có 2 đoạn văn và 2 tấm hình. Nếu bạn cho tất cả các thành phần đều float: left bạn sẽ thấy nó bị như hình dưới đây.

Lý do là vì tất cả các thành phần đều được float: left do vậy hình và đoạn văn ở dưới nó sẽ cố phủ đầy chỗ trống mà tấm hình và đoạn văn thứ nhất để lại khi bị float: left. Và cũng chính vì lẽ đó mà tạo ra hiệu ứng ta không mong đợi. Có nhiều cách xử lý vấn đề này, tôi sẽ hướng dẫn bạn cụ thể hơn trong video tutorial về Clear và Float. Còn bây giờ đây là cách phổ biến nhất và cũng gây ra nhiều tranh cãi nhất.

Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 “ngoan ngoãn” chịu chui xuống dưới, chúng ta sẽ thêm một thẻ div trống vào dưới đoạn văn thứ nhất.

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Clear và Float</h3>
  <p><!--Nội dung bị cắt ngắn --></p>

<div></div><!-- Thẻ div trống với-->

<img src="images/ball.png" alt="ball" />
   <p><!--Nội dung bị cắt ngắn --></p>
</div><!--End #bao_quanh-->

Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:

.clear {clear: both;}

Với một thẻ <div> và một class dùng để clear, bây giờ thì nó sẽ xuất hiện như ý rồi

Sở dĩ biện pháp này gây tranh cãi là vì chúng ta thêm một thành phần không phải là nội dung vào phần nội dung cốt để đạt được mục đích. Điều này đi ngược lại với nguyên lý của CSS là tách rời nội dung khỏi cách trình bày. Cho nên nếu bạn không muốn có một thẻ div trống trong code HTML của mình bạn cũng có thể làm theo cách dưới đây.

Sử dụng clearfix

Bạn copy đoạn code sau và cho vào stylesheet

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Bây giờ nếu bạn muốn clear nó thì bạn không phải tạo một thẻ div trống nữa mà chỉ việc khai báo class=”clearfix” vào thẻ mẹ chưa các thành phần float. Trong ví dụ ở trên bạn thêm vào phần sau

<div id="bao_quanh">

Với cách này bạn không cần phải thêm một thẻ div nữa mà vẫn hiện ngon lành. Cho đến bây giờ cách này cũng rất phổ biến vì nó hiển thị tốt trên mọi trình duyệt.

Class và ID

Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng html như thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn sẽ thấy nó được áp dụng cho tất cả các thẻ trong html. Nhưng không phải lúc nào bạn cũng muốn tất cả các thẻ p trong phần code của bạn đều bị ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ màu đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có thể hướng tới một đối tượng cụ thể hơn trong code HTML của bạn. Do đó cho bạn thêm một lựa chọn nữa để thiết kế trang web.

Cách sử dụng Class

Dưới đây là đoạn code chỉ cho bạn thấy cách sử dụng class

<h1>Đoạn văn này có cùng class với đoạn văn thứ 3</h1>
<p>Đoạn văn bản này xuất hiện bình thường</p>
<p> Khi chúng ta gắn class cho thẻ html
chúng ta có thể  hướng tới đối tượng dễ dàng hơn cho dù
nó có ở cấp bậc nào đi chăng nữa</p>

Ở đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính là class mà tôi thêm vào cho thẻ h1 và thẻ p. Bây giờ chúng ta sẽ tô đậm nó

p {font-family: helvetica; sans-serif;}
.classtext {font-weight: bold;}

Lưu ý: đoạn code trên bạn phải chèn vào phần head của tài liệu vì ở đây chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu HTML.

Kết quả là 2 đoạn văn bản có thẻ p sẽ được hiển thị với font Helvetica (hoặc nếu máy của bạn không có font này, nó sẽ cho hiển thị dòng font San Serif) nhưng đoạn văn có class=”classtext” sẽ được hiển thị vừa font Helvetica và in đậm. Đoạn văn bản nằm trong thẻ h1 thì có font là font mặc định của trình duyệt, nhưng nó cũng được in đậm bởi vì nó bị gắn với class=”classtext”. Thẻ span là cặp thẻ trắng sẽ không gây tác động gì cho đối tượng nằm trong nó vì chúng ta chưa định dạng gì cho nó hết.

Contextual Class Selector

Nếu bây giờ bạn chỉ muốn đoạn văn bản cuối cùng có màu đỏ thì phải làm sao? Bởi vì nếu bạn thêm

.classtext {font-weight:bold; color:red'}

thì đoạn văn bản nằm trong thẻ h1 cũng sẽ có màu đỏ và như thế không phải điều bạn muốn. Do vậy bạn có thể kết hợp thẻ đối tượng và tên class vào để tạo thành Selector.

p {font-family: helvetica; sans-serif;}
.classtext {font-weight: bold;}
p.classtext {color:red;}

như thế thì chỉ có đoạn văn bản thứ 3 là sẽ có màu đỏ hoặc bạn có thể làm cho 4 chữ chúng ta có thể được in nghiêng bằng cách sử dụng kết hợp

p.classtext span {font-style:italic;}

nếu bạn muốn bạn cũng có thể làm cho chữ cùng class nằm trong thẻ h1 in nghiêng bằng cách viết

.classtext span {font-style:italic;}

Tránh lạm dụng Class

Một trong những lỗi phổ biến nhất của những người mới bắt tay vào CSS là sử dụng quá nhiều class. Họ dùng class cho hầu hết các thẻ HTML và khai báo CSS cho từng class một. Làm như vậy thì cũng chẳng khác gì sử dụng thẻ HTML cả, vì nó cũng khó quản lý và thay đổi cũng rất khó khăn.

Cách sử dụng Class đúng cách là cho thẻ div bao quanh toàn bộ phần code mà bạn muốn hướng tới. Nếu bạn muốn hướng tới đối tượng nào nằm trong class đó, bạn luôn có thể kết hợp với phương pháp Contextual Class Selector để hướng tới nó.

Cách sử dụng IDs

ID được viết giống y như khi bạn viết code cho Class, chỉ có khác một điểm là bạn dùng ký hiệu dấu thăng (#) để thay cho dấu chấm . Nếu một đoạn văn bản được viết như sau

 Đây là đoạn văn bản bất kỳ

thì trong phần CSS code của nó sẽ như sau

p#classtext {color:red;}

Sự khác biệt giữa Class và ID

Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

Ví dụ bạn thấy ở trên izwebz thì mỗi một bài post đều được định dạng giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ việc định dạng một lần cho tất cả.

Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”

Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau.

Cú pháp của CSS

Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương

h3 {color: blue;}

Do vậy nếu bạn có code HTML như sau

<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>

Về cơ bản cú pháp của CSS bao gồm 2 phần chính: SelectorDeclaration. Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và Declaration sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào. Ở ví dụ trên, thẻ h3Selector và phần {color: blue;}Declaration.

Trong Declaration cũng có 2 phần là: PropertyValue. Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng như thế nào. Ở ví dụ trên color là Property nó quyết định sẽ tác động đến màu của h3 và blue là Value, nó quyết định màu sẽ là màu xanh.

Đoạn chữ này sẽ có màu xanh

Bạn có thể sử dụng những cách sau đây khi viết CSS

Nhóm nhiều Declaration vào một dòng

p {color:blue; font-size:12px; line-height:15px;}

và nếu bạn có một đoạn văn bản như sau trong code html

Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các Declaration ở trên

nó sẽ có màu xanh, cỡ chữ là 12px và độ cao giữa các dòng là 15px.

Lưu ý: Mỗi Declaration được ngăn cách bởi dấu chấm phẩy ; dấu chấm phẩy ở cuối cùng không bắt buộc, nhưng bạn nên cho vào để sau này nếu có thêm Declaration sẽ không bị quên

Nhóm nhiều Selector vào một dòng

Ví dụ nếu bạn muốn chữ từ h1 đến h6 có màu đỏ và được in nghiêng bạn có thể viết

h1 {color:red; font-style:italic;}
h2 {color:red; font-style:italic;}
...
h6 {color:red; font-style:italic;}

Hoặc bạn có thể nhóm tất cả lại để đỡ tốn công hơn

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}

Mỗi Selector được ngăn cách bằng dấu phẩy (,)

Một Selector có thể chịu ảnh hưởng bời nhiều luật

Ở ví dụ trên nếu bạn muốn thẻ h2 vừa được tô đậm và in nghiêng, bạn có thể thêm dòng sau

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}
h2 {font-style:bold;}

Hướng đối tượng dựa vào cấp bậc XHTML

Trong bài trước bạn đã học về cấp bậc của XHTML, trong bài này tôi 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

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:

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.

<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

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

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

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 “&gt;” ở giữa hai thẻ

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.