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

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

Trang 1

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

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 đượ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

Trang 2

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

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 ạ:

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ẻ đều là con của thẻ nhưng thẻ đứ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 h 1: hover {background - color: green ;}

1 x:first - child

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

Trang 3

1 Comment ( Comment bài này )

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

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 < >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

Trang 4

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ư:, , <a>

Wrap code trong dấu `backtick` (dấu trên phím Tab)

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

Định dạng
Số trang	4
Dung lượng	281,79 KB