pseudo class _ học thiết kế web theo chuẩn.

Pseudo Class | Học thiết kế web theo chuẩn.
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.
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.
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.
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