xay dung website voi thu thaut CSS

Phan Long

Xây d?ng Website: Th? thu?t vi?t l?nh v?i CSS

Bài vi?t này s? gi?i thi?u v?i b?n d?c m?t s? th? thu?t vi?t l?nh v?i CSS

(Luu ý: CSS - Cascading Style Sheet - t?m d?ch: M?u d?nh d?ng phân t?ng - là 
m?t ph?n c?a trang web gi? ch?c nang d?nh nghia các d?nh d?ng quy d?nh s? hi?n
th? c?a m?t trang web ho?c m?t ph?n c?a trang web trên trình duy?t. Microsoft 
Office luu gi? các m?u d?nh d?ng du?c s? d?ng ? d?u m?i trang web - Phan
Long)
01. Các ví d? m?u
B?i b?n ch?t khá tr?u tu?ng c?a c?u trúc hi?n th? CSS, b?n có th? s? c?m th?y 
khó khan khi s? d?ng nó so v?i ki?u thi?t k? trang web theo d?nh d?ng b?ng.
Tuy nhiên, có khá nhi?u ngu?n tr?c tuy?n tuy?t v?i cho phép b?n có th? copy và 
th? nghi?m v?i các ví d? m?u CSS. Các website này g?m có: 
http://www.bluerobot.com/web/layouts,
http://www.thenoodleincident.com và http://www.glish.com/css.
02. Luu tâm t?i các trình duy?t cu
M?t trong nh?ng v?n d? d?i v?i CSS là nhi?u trình duy?t phiên b?n cu không hi?u 
du?c ph?n l?n c?u trúc c?a nó. Ví d? di?n hình nh?t là Netscape Navigator
4. D? kh?c ph?c, hãy s? d?ng phuong pháp k?t xu?t @import d? nh?p các m?u d?nh 
d?ng vào trình duy?t, th? thu?t này hi?u qu? hon nhi?u so v?i phuong pháp
liên k?t (xem thêm http://www.alistapart.com/stories/journey/5.html d? có thêm 
thông tin). Các trình duy?t thông d?ng hi?n nay có kh? nang hi?n th? t?t
các c?u trúc CSS trong khi các trình duy?t cu (cùng v?i các PDA và các thi?t b? 
truy nh?p web khác) có th? s? b? qua nó mà không làm m?t di n?i dung c?a
trang web.
03. Th? thu?t v?i mô hình hi?n th? d?ng h?p
CSS du?c xây d?ng trên co s? mô hình d?ng h?p (box model) trong dó m?i thành t? 
d?u có các thông s? v? n?i dung, du?ng vi?n, l? và kho?ng cách t? van b?n
t?i du?ng vi?n. Các trình duy?t không tuong thích (trong dó bao g?m c? phiên 
b?n r?t ph? thông Internet Explorer 5.5 cho Windows) d?t các du?ng vi?n và
kho?ng cách t? van b?n t?i du?ng vi?n bên trong các kho?ng r?ng c?a mô hình 
d?ng h?p dó. Do dó, n?u b?n có m?t thành ph?n n?i dung có chi?u r?ng 300px
v?i du?ng vi?n 10px và kho?ng cách 25px, các trình duy?t tuong thích s? ch? c?n 
CSS d?nh d?ng d? r?ng là 300px trong khi các trình duy?t không tuong thích
s? xác d?nh d? r?ng là 370px (t?c là 10px+25px+300px+25px+10px). D? hoà h?p v?i 
c? hai lo?i trình duy?t này, chúng ta s? d?ng m?t th? thu?t v?i mô hình
d?ng h?p do Tantek Celik gi?i thi?u trên 
http://www.tantek.com/CSS/Examples/boxmodelhack.html. Do?n mã này cung có m?t 
ngo?i l? v?i trình duy?t tuong thích
Opera, do dó chúng tôi thêm ph?n dành cho Opera:
#content
{
padding: 25px; border: 10px;
/* width for non-compliant browsers */
width: 370px;
/* this blocks non-compliant browsers from going further in this rule */
voice-family: "\"}\"";
voice-family: inherit;
/* correct width for compliant browsers */
width: 300px;
}
/* A separate be nice to Opera rule */
html>body #content {width: 300px;}
04. Di?u khi?n in
M?c dù b?n ch?t di?u khi?n in c?a CSS - kh? nang d?nh nghia các h? font và kích 
c? font - không m?y bí m?t, song nhi?u ngu?i l?i không t?n d?ng du?c các
uu di?m c?a nó khi can chi?u cao dòng (line-height) và kho?ng cách gi?a các ký 
t?. B?n cung có th? s? d?ng CSS d? ki?m soát d?ng ký t? qua l?nh text-transform
v?i các giá tr? ch? hoa, ch? hoa d?u t?, ch? thu?ng và không d?nh d?ng 
(capitalize, uppercase, lowercase và none). Ví d?, khi thêm l?nh h1,h2 
(text-transform:
lowercase) vào m?u d?nh d?ng s? làm cho toàn n?i dung trong th? h1 và h2 du?c 
hi?n th? du?i d?ng ch? cái thu?ng.
05. Chuy?n d?i gi?a các m?u d?nh d?ng
H?u h?t v?i các nhà thi?t k?, kích c? font d?u du?c xác d?nh b?ng di?m ?nh 
pixel b?i dó là nh?ng ph?n t? nh? nhât có th? hi?n th?. Tuy nhiên, trình duy?t
ph? bi?n nh?t hi?n nay, Windows Internet Explorer 6 không có kh? nang phóng d?i 
các van b?n (trong khi dó, dây l?i là di?u bình thu?ng v?i nhi?u trình
duy?t khác, bao g?m c? Internet Explorer 5 cho Mac). Dó có th? là m?t khó khan 
v?i nh?ng ngu?i khi?m th?, và b?n có th? kh?c ph?c v?n d? b?ng cách s? d?ng
các m?u d?nh d?ng thay th? v?i các c? font khác nhau. Paul Snowden có m?t bài 
vi?t thú v? v? v?n d? này t?i http://www.alistapart.com/stories/alternate/.
06. Thêm du?ng vi?n
M?i ngu?i thu?ng thêm du?ng vi?n quanh các hình ?nh, tuy nhiên n?u du?ng vi?n 
don gi?n thì công vi?c này tr? nên lãng phí th?i gian. Thay vào dó, hãy thêm
du?ng vi?n vào t?t c? các hình ?nh có trong trang web c?a b?n b?ng l?nh img 
(border: 1px solid #000000;) ho?c l?nh img.borderOn (border: 1px solid #000000;)
trong t?p CSS c?a b?n ho?c th? trong t?p HTML v?i nh?ng tru?ng h?p riêng l?. 
B?n có th? ch?nh s?a d? d?m c?a du?ng vi?n b?ng vi?c thay d?i thông s? trong
CSS.
07. Do?n d?nh d?ng ki?u t?p chí
H?u h?t các trang web d?u có kho?ng tr?ng gi?a các do?n d? giúp ngu?i s? d?ng 
d? theo dõi, song b?n cung có th? t?o ra các do?n có d?nh d?ng gi?ng nhu trong
các t?p chí gi?y. Hãy thêm do?n l?nh sau dây vào t?p CSS: p (margin-top: 0; 
margin-bottom: 1em;) p+p (text-indent: 2em; margin-top: -1em;). B?n có th?
ch?nh s?a kho?ng cách gi?a các do?n b?ng vi?c thay d?i giá tr? c?a text-indent.
08. Tu? bi?n v?i ?nh n?n
B?n có th? dã quen v?i phuong pháp s? d?ng HTML d? dua các t?p d? ho? vào hình 
n?n c?a trang web, b?ng, v.v. nhung b?n có th? làm nhi?u hon th? v?i CSS.
L?y ví d?, b?n có th? thêm các do?n l?nh sau: (background: #444 
url(assets/page_background.gif) no-repeat fixed top left;) d? d?t m?t t?p ?nh 
vào v? trí
trên cùng bên trái c?a trang v?i thu?c tính c? d?nh khi cu?n trang web và không 
du?c nhân lên kín trang. D? tìm hi?u danh sách các giá tr? khác, b?n có
th? truy nh?p vào
http://www.w3schools.com/css/css_background.asp.

Ngu?n: www.quantrimang.com.vn
Name: Nguyen Hoang Bao Vu
Office: Sao Mai Computer Center for the Blind
12B/C7 Hoang Hoa Tham street, Tan Binh district Ho Chi Minh City Viet Nam
tel: 84 8 849 5069.
Fax: 84 8 293 8300.
Email:
info@xxxxxxxxxxxxxxxx
Website:
www.saomaicenter.org

Home: 210C Hiep Binh Chanh tenement. Thu Duc district Ho Chi Minh City Viet Nam
Cell-phone: 0989350014
Yahoo ID: nguyenhoangbaovu
Skype ID: nguyenhoangbaovu
Blog: 
360.yahoo.com/nguyenhoangbaovu

Other related posts: