50 thủ thuật CSS không thể bỏ qua – part IV

50 thủ thuật CSS không thể bỏ qua – part IV

(tiếp theo các phần trước)
50 thủ thuật CSS không thể bỏ qua – part III
50 thủ thuật CSS không thể bỏ qua – part II
50 thủ thuật CSS không thể bỏ qua – part I

31. Hiểu về positioning

Nắm rõ cách sử dụng thuộc tính position sẽ giúp bạn rất nhiều khi làm việc với CSS. Bạn có thể xem bài viết Thuộc tính position trong CSS

32. Clearfix

Khi float một hay nhiều đối tượng nào đó, bạn phải để các đối tượng đằng sau không bị trôi theo. Có nhiều các làm được điều này, tôi thì hay dùng một class clearfix như sau:

<ul class="nav clearfix">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}	
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

33. Selection

Bạn có thể style cho các đối tượng được “bôi đen” bằng cách sử dụng selection:

::selection { background: green; }
::-webkit-selection { background: green; }
::-moz-selection { background: green; }

34. Đị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 làm style riêng cho việc in ấn:

// Style cho việc hiển thị ra màn hình
<link type="text/css" rel="stylesheet" href="/stylesheet.css" media="screen" />
// Style cho in ấn
<link type="text/css" rel="stylesheet" href="/printstyle.css" media="print" />

35. Sử dụng các CSS processor

Với các CSS processor, việc viết CSS sẽ dễ dàng, tốt ít thời gian và thuận tiện trong việc sửa lỗi hơn. Hai CSS processor tốt nhất hiện nay là Sass (+Compass) và Less

(còn tiếp)

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!