Chào mừng bạn đến với website cá nhân của Lê Tùng LâmNhư chúng ta đã biết ở bài viết trước mình đã có lần để cập đến vấn đề "làm việc tốt với các trình duyệt (browser)" bằng cách sử dụng CSS để xóa đi những định dạng mặc định của từng browser. Lần này, các bạn sẽ được biết đến những điều cần tránh trong khi viết mã HTML và CSS nếu bạn muốn website của mình hiển thị tốt ở hầu hết các browser.
1. Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width)
Đây là nguyên tắc cơ bản vì cách căn lề của Internet Explorer khác với các trình duyệt khác và cũng là 1 lỗi của trình duyệt này. Lỗi này được gọi là "Box Model Bug" hình dưới là một hình ảnh minh họa cho lỗi này.
Bạn có thể thấy rằng độ rộng của đối tượng "được" cộng thêm khi hiển thị ở IE nếu như có padding. Vậy đơn giản là không dùng padding cho các đối tượng có độ rộng cố định (fixed width).
2. Cố định cỡ chữ bằng đơn vị % và em
Thông thường các browser hiển thị cỡ chữ theo cách khác nhau nếu như bạn chưa định cỡ cho chúng. Khi mới bắt đầu học CSS, chúng ta thường định dạng cỡ chữ theo cách sau:
-
h1 {font-size:18px;}
-
h2 {font-size:16px;
Dòng mã là cách cơ bản, nhưng vấn đề là ở IE người xem sẽ không thể thay đổi cỡ chữ. Điều này rất cần thiết với những người để độ phân giải cao. Nhưng bạn đừng lo, có một giải pháp khác tốt hơn, hãy dùng % và em để định dạng cỡ chữ như sau:
-
body {font-size:62.5%;}
-
h1 {font-size:1.8em;}
-
h2 {font-size: 1.6em;}
3. Không nên dùng đơn vị 100%
Sử dụng 100% để căn chiều rộng của một đối tượng rất dễ gặp rủi ro trong việc bố trí kết cấu của website vì mỗi trình duyệt hiển thị chiều rộng 100% rất khác biệt. Theo kinh nghiệm bản thân thì những lần thử định vị 100% thì gần như rất khó có thể đạt được kết quả tốt nhất. Hãy chọn một con số khác có thể là nhỏ hơn 100% (95% có thể sẽ tốt hơn). Hoặc đơn giản hơn là hãy... cố định nó.
4. Không dùng 0px để định chiều cao
Các browser không thích việc bạn chọn 0px để định chiều cao cho đối tượng và thưởng hiển thị nó theo cách bạn... không muốn chút nào. Nếu có thể hãy thay nó bằng 1px sẽ tốt hơn rất nhiều.
-
height:1px
5. Không dùng ">" trong CSS
Mình đã từng thấy có người, thậm chí rất nhiều người viết mã CSS như sau:
-
#menubar>a {color:#cccccc;}
Với dòng mã CSS như trên IE6 sẽ không hiểu và không thể hiển thị được định dạng trên. Hãy dùng đoạn mã dưới đây, sẽ an toàn hơn rất nhiều.
-
#menubar a {color:#cccccc;}
11 Responses to “Những điều cần biết khi viết mã CSS”
Nk Huynh June 3rd, 2007
Cái chú ý nhất trong bài viết này là: Box Model Bug. Mới nghe á, hehe, thank!
Minh Thuan June 3rd, 2007
thông thường khi phải sửa bất kỳ một cái gì đó liên quan đến web, anh hay dùng pixel hơn là %. Cái vụ % coi vậy chứ nguy hiểm lắm àh nghen, nó làm banh web của mình hồi nào cũng không hay. Pixel là chắc cú nhất.
Nk Huynh June 4th, 2007
Vậy thì em thì sao? Tớ hay dùng em.
PMTuân June 13th, 2007
Cám ơn sự chia sẻ của Tùng Lâm mình có một thắc mắc là tại sao lại chọn font-size với 62.5% mà không phải là 1 số khác body {font-size:62.5%;}
redstrike July 13th, 2007
Font size theo dạng ems có thể căn chỉnh lại cho tương đương với px mình cần… bạn nên test sẽ rõ…
Sử dụng đơn vị % cho font size cũng hok nên đối với các webmaster thông thường vì rất khó làm chủ và hok có kinh nghiệm để canh font size !
Nên dùng px hoặc ems là cùng !
lkn2 August 15th, 2007
Box Model Bug là cái lỗi rất đáng ghét, may sao là có cách để sửa. Hình như những tip về font size chưa phù hợp lắm, 62.5% thì font bé tí tẹo, h1 và h2 gần như bằng nhau :(
lkn2 August 15th, 2007
/* This is where you set your desired font size. The line-height
and vertical margins are automatically calculated from this.
You have to add an extra calculation here because of IE, so that
all users may resize text manually in their browsers.
The top one is for IE: The percentage is of 16px (default IE text size)
10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth).
The second value is what all other browsers see (the wanted font size). */
body { font-size: 75%; } /* IE */
html > body { font-size: 12px; } /* Other browsers */
REDSTRIKE August 19th, 2007
Tớ đã dùng thử % và em theo hướng dẫn nhưng thấy ko ổn định chút nào ?
Nó dễ làm phá vỡ layout của site và rất khó điều khiển !
HoPhuc September 26th, 2007
Mình muốn cho cỡ chữ cua .CSS hẹp chữ lại nhưng không biết làm bằng cách gì? Mong các bạn thọ giáo giúp. Ví dụ: chữ của mình: “Ho Phuc Text type here” với width=”200px” font-size:12px font-family:arial, Bây giờ mình muốn cho độ dài của chữ width=150px nhưng font-size:12px.
Xin cám ơn các bạn
learner October 4th, 2007
mình muốn viết một đoạn code css cho phần a:link nó tự mở trang mới khi người dùng click vào liên kết thì viết như thế nào.
mình đã thử như thế này nhưng nó không hiểu ” a:link {target: blank;}
AN DUONG November 14th, 2007
khi sử dụng thẻ h1, h2, hx… chúng hay tạo ra khoảng cách lớn với các dòng tiếp sau. có thể làm cách nào để giảm khoảng cách giữa các dòng này.
Leave a Reply