Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/pseudo-class/[8/10/2010 3:00:47 PM] NAVIGATION Style Latest Post khác với post thường Tạo WordPress theme – Sidebar và Thumbnail Tạo Form với HTML và CSS Tránh lạm dụng thẻ Div Bán hết cá 1-4 rồi Cách hiển thị Breadcrumbs Hãy là một webmaster thân thiện Cách tạo trang 404 Error Page Luôn sử dụng thẻ Alt Tách hình sử dụng Extract Filter (video) PHP CO BẢN – NÂNG CAO tìm hiểu cú pháp và phương thức PHP Phép toán và phát biểu có điều kiện trong php $_POST và $_GET Làm quen đối tượng Session Khai báo hàm, chèn tập tin và tập tin dùng chun Cách xử lý chuỗi, mảng, kiểu DataTime Thao tác trên cơ sở dữ liệu MySQL PHP và Database Phân trang với PHP Xóa, Cập nhật dữ liệu dạng mảng Tạo Mailing List: PHP & Mysql RECENT COMMENTS Random News Popular EMAIL ARTICLES Pseudo Class October 13, 2008 1 comment 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>. Pseudo Class cho đuờ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 CSS CSS Cơ bản jQuery jQuery Cơ bản Phát triển Web Bài viết, kinh nghiệm Videos Các thể loại WordPress Tutorials, Hacks HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/pseudo-class/[8/10/2010 3:00:47 PM] QUẢNG CÁO Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Tạo WordPress Theme – Dựng xHTML (16) chicken_roll: hahaha hay quá hết chổ trê (thanks you very much much…) nghe anh nói đây ko Tạo WordPress Theme – Slice hình (22) chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều từ anh và Anh CS thanks phát cho có Tạo WordPress Theme – Search form và Random Posts (15) DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ: <script type="text/javascript& PHP Căn Bản – Bài 9 (40) pham duy: Vang ban angelthao_0984884679 da noi dung do chung t con chan chu gi nua ma khong giup doan: ai muốn xem bằng file swf thì down KMP về mà dùng cái này còn hay hơn media của win nhiều Lập trình web và sự Lười nhác (23) kien: Không còn gì để nói :-s Tạo trang web đầu tiên (41) ho nga: ? ho nga: huhu sao làm web mệt dzữ vậy a hai ui…? đị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ụ 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 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ụ: 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. 1 h1:hover {background-color:green;} 1 x:first-child 1 .vi_du em:first-child {color:red;} Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/pseudo-class/[8/10/2010 3:00:47 PM] 1 Comment ( Comment bài này ) Leave a comment ( Chọn hình đại diện ) « Contextual Position Contextual Position » Những bài viết có liên quan Class và ID Box Model Thứ bậc trong XHTML Độ lớn thực sự của Box Clear và Float Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here! BIDVERTISER ADS x:first-letter ở đó x là tên thẻ bị ảnh hưởng Với markup tương ứng x:first-line <– nơi x là tên thẻ bị ảnh hưởng 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. 1 p:first-letter {font-size:300%;} 1 <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> 1 p:first-line {font-variation:small-caps;} Compatible Implant Trilobe Compatible Implant The $145.00 Alternative www.BlueSkyBio.com Bùi Quốc Hưng says: December 21, 2009 at 12:26 am với code xhtml như sau Tính năng này chủ yếu dùng để hướng đối tượng Code XHTML nào vậy ạ Reply Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/pseudo-class/[8/10/2010 3:00:47 PM] Chọn kiểu gõ: Tự động TELEX VNI Tắt Tên bạn Email Website Comment Luu ý khi post comment: Không "bóc tem" topic Dùng lời lẽ có văn hoá và lịch sự Xem trang FAQs trước khi hỏi Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a> Wrap code trong dấu `backtick` (dấu trên phím Tab) © 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock Izwebz is solemnly hand coded and designed from scratch by Demon Warlock. It is also very proud of being powered by WordPress, which is an exceptionally well written and beautiful CMS Rules are not made to be broken at Izwebz Bạn không được tự ý copy và phát hành lại nội dung của izwebz nếu chưa được sự đồng ý của tôi. Biết tôn trọng và cư xử hòa nhã với mọi người Không "bóc tem" bài viết. Izwebz được quyền xóa những comment nào không phù hợp với nội dung của trang web Câu hỏi thường gặp Liên hệ Tác giả Bản quyền Trang web vẫn đang trong quá trình phát triển về nội dung. Do vậy nếu bạn có khả năng hãy đóng góp bài viết hoặc bạn có thể quảng cáo trang web đến những người mà bạn biết. Được vậy tôi sẽ rất biết ơn bạn. Submit . nào vậy ạ Reply Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css /pseudo- class/ [8/10/2010 3:00:47 PM] Chọn kiểu gõ: Tự động TELEX VNI Tắt Tên bạn Email Website Comment Luu. loại WordPress Tutorials, Hacks HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css /pseudo- class/ [8/10/2010 3:00:47 PM] QUẢNG CÁO Your Ad Here for Free $20. {background-color:green;} 1 x:first-child 1 .vi_du em:first-child {color:red;} Pseudo Class | Học thiết kế web theo chuẩn. http://www.izwebz.com/css /pseudo- class/ [8/10/2010 3:00:47 PM] 1 Comment ( Comment bài này