Theo như code bạn cho, mình sẽ giải thích cho bạn từng đoạn, nếu đọc xong mà không hiểu nữa thì nên tìm một sư phụ nào đó để được chỉ dạy ban đầu cho có căn bản, vì xem ra tự đọc trên mạng chưa đủ sức để hiểu. Mong bạn không xem rằng mình đang nặng lời.
<!DOCTYPE html>
<html>
<head>
<style>
ul { /* định nghĩa một list / tức danh sách */
list-style-type: none; /* kiểu của các dòng trong danh sách là không có gì đầu dòng */
margin: 0; /* thụt lề bằng 0 */
padding: 0; /* vùng đệm để đẩy thành phần chứa bên trong thụt vô bằng 0 */
overflow: hidden; /* nếu chữ/ hình bị tràn ra ngoài, cắt bỏ */
background-color: #333333; /* màu chữ của các thứ chứa trong danh sách là màu đen hơi xám */
}
li { /* định nghĩ cho các dòng trong danh sách */
float: left; /* cho các dòng trôi nổi về góc bên trái như những cục shit trôi sông tấp vào bờ trái */
}
li a { /* định nghĩa thẻ a nằm bên trong một thẻ li */
display: block; /* bình thường thẻ a là thẻ inline, không phải block, giờ cho nó thành block */
color: white; /* màu chữ sẽ là màu trắng */
text-align: center; /* canh lề giữa cho chữ, tức thẻ a sẽ là khối chữ nhật, chữ nằm giữa, canh đều hai bên */
padding: 16px; /* vùng đệm thụt vào 16px rồi mới đến nội dung bên trong a */
text-decoration: none; /* không trang trí hoa hòe hoa sói, tức rà chuột, kích chuột,... chữ vẫn trắng mà không ra màu khác hay chớp nháy, gạch chân gì cả */
}
li a:hover { /* định nghĩa hành động cho thẻ a khi rà chuột */
background-color: #111111; /* khi rà chuột vào khối chữ nhật do thẻ a taoọ ra thì đổi màu nền thành màu đen */
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<!-- nguyên đoạn trên tạo ra các khối chữ nhật và cho nó trôi nổi về phía trái, xếp cạnh nhau nếu màn hình còn chỗ -->
</ul>
</body>
</html>
Mình đã giải thích trong code trên, có gì chưa hiểu lại comment bên dưới nhé. Như vậy, về mặt lý thuyết người mới học sẽ khó hiểu khi:
-
Thẻ a đã được định nghĩa là block, tức nó không thể nằm cùng dòng với thẻ nào khác, ở đây nó lại nằm cùng với dòng mấy khối chữ nhật khác <= quái quỉ gì thế. Giờ ta mới phát hiện ra cái ông a này lại nằm bên trong một ông li khác, ông li không rõ là block hay không, chỉ biết ổng float. Hahaha, thế là thế quái nào? Giờ ta đi tra cứu xem float nó làm gì. Lúc này thấy hết khó hiểu.
-
Cái overflow: hidden; trong thẻ ul để làm quái gì, không ai hiểu nó là gì cả, bối rối cho người mới học. Cái này thì người phải có trình độ khá và kinh nghiệm về CSS mới lý giải được, người mới học cứ làm như con vẹt thôi. Cái đây là một mẹo do những tiền bối vọc CSS phát hiện ra thôi, không có sách vở nào rõ ràng, Thin tạm giải thích như sau: một khi các thành phần bên trong ul đặt là float mà lại không thấy định nghĩa height cho ul thì nếu có thừa ra sẽ không bị cắt/ làm gì khác nếu không thấy overflow được set thế nào, cho nên, người ta overflow: hidden; mục đích là để ul lấy chiều cao của thành phần con bên trong làm chiều cao của nó - tức của ul, hoặc nói theo cách khác thành phần bên trong nó sẽ lấn hết chiều cao/ rộng / không gian của ul. Trình duyệt hiểu như vậy đó. Nhờ đó cho nên cái nền #333333 mới có tác dụng, ta bỏ overflow: hidden; thì ul thành cái xác không hồn, chẳng có nền gì ráo.
Ai muốn hiểu được cái đoạn lôi thôi trên, cứ làm cách thành phần lồng nhau rồi định nghĩa màu nền, canh chỉnh float, align, overflow,… một lát sẽ phát hiện ra vấn đề, thằng bên trong có khi to hơn thằng bố bên ngoài và thằng bố thì chẳng thấy chiều cao ở chỗ nào, màu nền có khi là một đường bé tí xíu. Cái này gọi là “trăm hay không bằng tay quen”, ít làm thì khó gặp.
Hết. Không hiểu nữa thì cứ làm theo như con vẹt, ngày nào đó sẽ tự hiểu vì CSS là một thứ mà nhiều lập trình viên rất ghét, nó không theo logic của các ngôn ngữ lập trình mà họ biết, cho nên, CSS chưa bao giờ được xếp vào nhóm “ngôn ngữ lập trình”.
Cuối cùng, thực ra đề bài đặt sai. Bài này là bài “Tạo menu nằm ngang dùng thẻ LI” (tiêu đề gốc trên trang W3 Sờ Cun kia là A horizontal list menu) mới đúng, chứ danh sách nào ở đây.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?