- Demon Warlock
- October 13, 2008
- CSS
- 6 comments
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. Pseudo Class sẽ tạo ra thay đổi tới thành phần của XHTML khi một sự kiện nào đó sẽ xảy ra. Pseudo Class được sử dụng thông dụng nhất với các đường liên kết khi người dùng di chuột qua hoặc nhấp vào nó. Với những trình duyệt mới hơn (trừ Internet Explorer 6) bạn có thể dễ dàng tạo ra hiệu ứng Rollover với bất cứ thành phần nào trên trang chứ không chỉ thẻ <a>.
- Demon Warlock
- October 13, 2008
- CSS
- 8 comments
Contextual Position
Contextual Positioning là một khái niệm hết sức quan trọng mà bạn cần nắm vững nếu bạn muốn sử dụng CSS để thiết kế giao diện thay cho dùng bảng HTML. Nói nôm na thì Contextual Positioning có nghĩa là khi bạn định vị một thành phần bất kỳ sử dụng 4 giá trị top, right, bottom và left. Bạn thực chất định vị thành phần đó dựa vào vị trí của một thành phần khác. Thành phần khác đó được gọi là Contextual Positioning.
- Demon Warlock
- October 12, 2008
- CSS
- 8 comments
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
- Demon Warlock
- October 12, 2008
- CSS
- 7 comments
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 …
- Demon Warlock
- October 9, 2008
- CSS
- 18 comments
Position Property
Khi đã sử dụng CSS để thiết kế giao diện thì Position Property là một trong những phần quan trọng nhất mà bạn cần hiểu rõ. Position Property chi phối mối tương quan giữa các thành phần của trang web. Có tất cả 4 giá trị cho Position property là: Static, Absolute, Fixed và Relative. Trong đó Static là giá trị mặc định khi không có giá trị nào được gán. Trong ví dụ dưới đây bạn sẽ thấy có 4 đoạn văn ngắn. Đoạn văn thứ 1, 2 và 4 tôi để giá trị mặc định là Static và đoạn văn thứ 3 được gán id để chúng ta có thể thay đổi nó mà không ảnh hưởng đến các đoạn khác.
- Demon Warlock
- October 9, 2008
- CSS
- 13 comments
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.
- Demon Warlock
- October 9, 2008
- CSS
- 26 comments
Độ lớn thực sự của Box
Khi thiết kế giao diện nhiều cột sử dụng CSS thì độ lớn của các box rất quan trọng và chúng chịu ảnh hưởng rất lớn đến nhau. Nếu một box này bị phình to ra hơn kích thước bạn muốn, nó có thể đẩy box bên cạnh di chuyển sang hướng khác và hậu quả là cả giao diện của bạn sẽ không theo ý muốn. Cho nên để nắm rõ được cách mà CSS tác động đến độ lớn của box sẽ giúp bạn có cái nhìn rõ ràng hơn về sự ảnh hưởng lẫn nhau giữa các thành phần. Và đây cũng là một trong những điều gây phiền toái nhất của CSS.
- Demon Warlock
- October 8, 2008
- CSS
- 13 comments
Box Model
Bất cứ thành phần nào bạn tạo ra trong code XHTML đều được bao quanh bởi một hộp kể cả dòng chữ bạn gõ ra cũng có một hộp bao quanh nó. Ở giá trị mặc định đường viền cũng như màu sắc của hộp là trong suốt do vậy bạn không thấy được. Nhưng với CSS bạn có thể cho hiển thị đường viền cũng như màu nền của bất cứ đối tượng nào trong trang mà bạn muốn. Ở ví dụ dưới đây tôi cho hiển thị đường viền của thẻ p và thẻ h1 và màu nền là màu #EEE để bạn thấy được khái niệm hộp bao quanh đối tượng.
- Demon Warlock
- October 7, 2008
- CSS
- 18 comments
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.
