Chào mừng bạn đến với website cá nhân của Lê Tùng Lâm1. Định dạng chữ mà không cần dùng đơn vị pixel.
Đôi khi, bạn tự hỏi làm sao những người thiết kế web lại dùng đơn vị em thay vì px? Rất đơn giản, chỉ với một thủ thuật nhỏ bạn cũng có thể làm được với đơn vị em thay vì px. Hãy thêm đoạn mã sau vào CSS.
-
body { font-size: 62.5% }
Với đoạn mã trên thì 1.0em sẽ tương đương với 10px và sẽ hoàn toàn dễ hơn cho bạn khi tính toán kích thước font chữ hơn. Và khi đó bạn có thể định dạng như sau:
-
p { font-size: 1.2em; line-height: 1.5em; }
2. Trình bày CSS sáng sủa hơn
Trình bày CSS một cách khoa học sẽ giúp việc phát triển, sửa chữa dễ dàng hơn bao giờ hết. Hãy chia các định dạng (styles) ra thành các block riêng biệt và trình bày chúng như những ngôn ngữ lập trình bạn vẫn thường làm.
-
h1 {}
-
h1#logo { font-size: 2em; color: #000; }
-
h2 {}
-
h2.title { font-size: 1.8em; font-weight: normal; }
Bạn có thể tham khảo chi tiết hơn về cách vết mã CSS tại bài viết Phương pháp viết mã CSS
Khi mới tiếp cận với CSS việc lạm dụng div thường là lỗi mà các lập trình viên dễ mắc phải. Hãy dùng đúng chức năng của mỗi tag.Ví dụ: hãy dùng h1, h2, h3 cho tiêu đề thay vì dùng div để định dạng.
4. Tối ưu mã CSS.
Tối ưu mã CSS ở đây là giảm độ dài của dòng lệnh CSS cũng có nghĩa giảm dung lượng với file CSS. Điều này sẽ giúp trang web được tải về nhanh hơn. Sau đây là một số ví dụ giúp bạn rút gọn mã CSS của mình.
Thay vì dùng #000000 bạn có thể dùng #000 cho định dạng màu đen. Trường hợp khác với #ffffcc bạn có thể dùng #ffc.
-
font-size: 1em;
-
font-family: Arial, Helvetica, Sans-Serif;
-
line-height: 1.5em;
-
font-weight: bold;
Đoạn mã trên giúp định dạng font và đoạn cho toàn trang web. Nhưng bạn có thể dùng đoạn mã sau để thay thế:
-
body { font: 1em/1.5em bold Helvetica, Arial, Sans-serif; }
Hoặc với trường hợp:
-
margin-top: 5px;
-
margin-left: 5px;
-
margin-bottom: 0;
-
margin-right: 0;
Bạn có dùng đoạn mã ngắn gọn hơn rất nhiều:
-
body { margin: 5px 0 0 5px; }
Cú pháp của hàm margin như sau:
-
margin: [top] [right] [bottom] [left]
hoặc trong trường hợp lề trên dưới và trái phải bằng nhau, bạn có thể dùng cú pháp sau:
-
margin: [top/bottom] [left/right]
Trường hợp khác, ngay trong chính một bài viết của mình, xin cám ơn Sonny và Quietman đã gợi ý một cách lập trình CSS khoa học. Đó là bạn có thể dùng
-
* { margin:0; padding:0; }
thay vì phải dùng đoạn mã dài lê thê sau:
-
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
-
pre, form, fieldset, input, p, blockquote, th, td {
-
margin: 0;
-
padding: 0;
-
}
10 Responses to “Lập trình với CSS”
keronii May 23rd, 2007
Just some comments;
1/. margin with 3 parameter means
margin: [top] [Left/Right] [bottom]
2/. You can only shorten the color HEXA code because the pattern is duplicated ans all duplicated HEXA are web-safe colors.
For example: #aabbcc can be shortened as #abc. Of course, you cannot shorten something like #123456
3/. There should be a little explanation on why? 1em (of 62.5%) is 10px. Because the default font size of most browsers is 16px. So if u want a 12px in body text. It should be 0.75em and 1opx is 62.5%. People like to remember 62.5% than 75% because the beauty of the number 10.
4./ I prefer to arrange style (in ur case, heading) along with the page component it sticks with rather than separated block. Because, it is easy to observe the balance between that style with other object’s style within a component. U don’t need to scroll a lot.
5./ I just drop in, but like ur blog design.
cssquestions May 24th, 2007
Cái dòng: * { margin:0; padding:0; }
cũng có thể không hoạt động “như ta muốn” trong các trình duyệt (rất) cũ đâu (ví dụ IE 4, chẳng hạn). Cũng đã có tác giả nói về cái này rồi. Viết dài cũng có cái hay của nó đấy.
Bản thân tôi thì vẫn dùng cách đó vì tôi cũng chỉ quan tâm tới FF và IE (6) thôi :), mấy trình duyệt kia xét sau, giao hàng trước đã , hì.
Mẹo để nhớ: Top Righ Bottom Left là: TRouBLe.
Bạn nói thiếu trường hợp ShortHand 3 giá trị, mà thôi, để độc giả tự tìm hiểu, trường hợp đấy cũng ít gặp!
cssquestions May 24th, 2007
à, giờ mới đọc cái comment, keronii đã nói đến trường hợp 3 giá trị: [top] [Left/Right] [bottom], mẹo để nhớ cái này là hình dạng thông dụng của 1 website : [header] [content/sidebar] [footer] .
về con số 62.5% có thể tham khảo cuốn Beauty of Web Design của Site Point.
NDLoc May 24th, 2007
Một lưu ý nhỏ nữa là margin và padding trong Firefox và IE có cánh hiển thị hơi khác nhau
Theo tôi thì FF hiển thị chuẩn hơn, nhưng có khá nhiều các sité của VN, của những cty có tiếng lại bị lỗi khi chạy trên trình duyệt khác IE.
Còn nếu chạy trên safari của Mac thì những site có cấu trúc không chặt chẽ một chú sẽ còn tệ hơn rất nhiều. Có một lần tôi đã access một site cũng khá popular trên safari trong một Mac ở trên Lab, nói chung cấu trúc site bị phá vỡ hoàn toàn,không thể hình dung được.
Còn về các con sô 62.5%,75%,TRouBLe… tôi thấy là không cấn thiết quan tâm đến nhiều lắm, chỉ gây nhiễu thêm mà thôi.
tmhung May 25th, 2007
Tôi rất thích về Design nhưng mà chưa có cơ sở căn bản về CSS cũng như PHP cho lắm . Bài viết này thật bổ ích đó bạn . Rất vui khi được biết đến blog bạn
Guppiz May 28th, 2007
Mà tại sao lại phải dùng em thay vì px vậy các bạn ? thanks :)
Quietmn May 29th, 2007
Nếu bạn sử dụng kích thước font bằng px trong IE, bạn sẽ không tăng giảm được kích thước văn bản trong trường hợp cỡ font của nó quá to hay quá nhỏ bằng cách chọn View > Text Size
redstrike July 13th, 2007
Bài viết rất hay !
Không biết bạn biết nhiều cuốn sách hay về css và web design hok ?
Mr.Alo July 19th, 2007
chào bạn,
bài viết hay quá, bạn có thể viết một bài về cách sử dụng thẻ div để thiết kế template hay layout gì đó ko, mình mới học code, nhưng nghe nói dùng thẻ div thì trang web load sẽ nhanh hơn dùng bảng.
Cảm ơn các bài viết bổ ích của bạn!^^
Minh Trung May 7th, 2008
Giờ mới xem hết bài viết này của ku. Hay lắm :)
Leave a Reply