10 Thủ thuật CSS mà bạn cần biết - Phần I
Trong quá trình thực hành và làm việc với CSSCascading Style Sheets chúng ta sẽ
gặp những vấn đề xảy ra rất thường xuyên, để giải quyết chúng một cách nhanh
chóng thì chúng ta cần phải biến những cách xử lý của các vấn đề đó trở thành
những phản xạ của riêng mình. Do đó trong bài viết này tôi xin tổng hợp ra mười
thủ thuật về CSSCascading Style Sheets mà bạn cần phải biết và biến chúng thành
những kỹ năng của mình. Tôi hy vọng rằng sau khi đọc xong bài viết này các bạn
sẽ tự tin hơn trong việc giải quyết các vấn đề tương tự.
1. Dùng kỹ thuật Sorthand để thực hiện viết mã CSS.
Như tôi đã trình bày trong bài viết "Cách viết giản lược trong CSS" thì việc sử
dụng kỹ thuật này rất tiện ích cho quá trình bạn viết mã CSSCascading Style
Sheets.
Ví dụ: Khi style cho font chữ trong CSS thông thường bạn sẽ viết như sau:
view source
print?
1.font-weight: bold;
2.font-style: italic;
3.font-variant: small-caps;
4.font-size: 1em;
5.line-height: 1.5em;
6.font-family: Verdana, sans-serif;
Nếu áp dụng kỹ thuật Sorthand thì chúng ta chỉ cần phải viết.
view source
print?
1.font: bold italic small-caps 1em/1.5em verdana, sans-serif;
2. Đặt hai class cho cùng một đối tượng
Thông thường khi bạn viết mã HTML bạn chỉ đặt một class cho một đối tượng.
Tuy nhiên điều đó không có nghĩa rằng bạn chỉ được phép đặt duy nhất một class
cho một đối tượng. Định dạng HTML cho phép bạn đặt 2 class cho cùng một đối
tượng.
view source
print?
1.<div class="class1 class2">...</div>
Như các bạn đã thấy ở trên nếu bạn muốn đặt 2 class cho cùng một đối tượng thì
tên của class thứ nhất phải cách tên của class thứ hai bằng khoảng trống. Trong
trường hợp hai class này đều được đặt cùng một thuộc tính thì đối tượng này sẽ
được định dạng theo thuộc tính nào được viết sau.
Ví dụ cả hai class đều định nghĩa màu nền cho đối tượng
view source
print?
1.div.class1 {
2.background: #CC0000;
3.}
4.
5.div.class2 {
6.background: #00000FF;
7.}
Trong trường hợp như trên thì đối tượng sẽ nhận thuộc tính background của class2.
Vì class2 được định nghĩa sau và trình duyệt sẽ nhận giá trị của thuộc tính này.
3. Các giá trị mặc định của đường viền
Trong quá trình bạn style một đối tượng nào đó có thuộc tính border bạn sẽ liệt kê
ra các giá trị của thuộc tính border đó. Vd:
view source
print?
1.border: 2px solid #000;
Vậy cái gì sẽ hiện thị giá trị mặc định?
1.
Border-style: Trong quá trình bạn định nghĩa đường viền (border) cho
các đối tượng HTML, nếu như đối tượng phía trước được định nghĩa
kiểu border như thế nào thì các đối tượng sau cũng được định nghĩa kiểu
border đó ( trong trường hợp bạn không nêu ra kiểu của các đối tượng
định nghĩa sau )
2.
Border-width: Khi bạn không định nghĩa rõ độ dày của đường viền cho
đối tượng bạn định style thì trình duyệt sẽ lấy mặc định độ dày của
đường viền đó là 1 pixel.
3.
Border-color: Màu của đường bao ngoài sẽ có màu mặc định là màu của
đối tượng được bao ( trong trường hợp bạn bỏ qua thông số màu của đối
tượng )
4. Định dạng CSS cho tài liệu ở dạng in ấn.
Hầu hết những Web Designer ở Việt Nam rất ít quan tâm tới vấn đề này, nhưng
thực chất nó lại là một trong những vấn đề khá quan trọng trong quá trình thiết kế
Web. Khi bạn bắt tay vào thiết kế thông thường bạn chỉ quan tâm tới nó hiện thị
trên thiết bị đầu cuối là màn hình như thế nào, mà bạn ít khi quan tâm tới khi
Website của bạn sẽ được in ra như thế nào? Trong trường hợp người duyệt Web
muốn lưu lại những thông tin trên Website của bạn bằng những bản in thì bắt buộc
người duyệt cần phải mất thời gian cho việc lựa chọn và xóa bỏ những đối tượng
không cần thiết.
Để khắc phục điều đó bạn chỉ cần thêm một file CSS phục vụ riêng cho việc in ấn
vào trong Website của bạn. Cách thức cho như sau, trên phần header của bạn ngay
sau dòng lệnh chèn file CSSCascading Style Sheets bạn sẽ thêm một dòng tương tự
dòng trên những có một số chỗ khác biệt.
view source
print?
1.<link type="text/css" rel="stylesheet" href="/stylesheet.css" media="screen"
/>
2.<link type="text/css" rel="stylesheet" href="/printstyle.css" media="print" />
Hai chỗ khác biệt đó là tên file CSS (printstyle.css) được sử dụng cho chế độ in và
thứ hai là thuộc tính media của link phải đặt là "print" (media="print")