10 thủ thuật CSS cần biết

CSS (Cascading Style Sheet) không khó để học, cái khó là làm sao để đảm bảo css chạy tốt trên các trình duyệt mà không sinh ra lỗi. Mặc dù CSS3 đã ra đời, tuy nhiên để tất cả các trình duyệt đều hỗ trợ thì cũng cần có một thời gian nữa. Sau đây là danh sách các thủ thuật về css mà mình tin sẽ rất hữu ích cho bạn.

Chúng ta nên tránh sử dụng hack trong css trừ phi không còn cách nào để sửa. Bởi vì chúng ta khó có thể biết khi nào thì những câu lệnh hack này ngừng hoạt động. Vì thế cách chung nhất để đối phó với nhiều phiên bản khác nhau của trình duyệt IEs thì chúng ta nên sử dụng câu lệnh if else

Việc gộp các phần tử có chung những thuộc tính là điều cần thiết khi viết css, vì nó giúp bạn giảm dung lượng file css và cũng giúp bạn dễ dàng quản lý

h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
} 

Thật dễ dàng để canh giữa các phần tử , với trình duyệt firefox và safari, chúng ta chỉ cần chỉ định độ rộng (awidth) canh trái phải tự động. Tuy nhiên với trình duyệt IE thì chúng ta nên chỉ định thêm text-align:center; để canh giữa phần tử cha.

body {
text-align:center;  /* for ie   */
}
 
#container {
awidth:800px;
margin:0 auto;
text-align:left;
}

Bằng cách ấn định position:absolute; chúng ta sẽ có được vị trí chính xác cho đối tượng. Để dễ hiểu chúng ta xem ví dụ sau :

#container {
position: relative;
awidth:500; height:300;
}
 
#item {
position: absolute;
left: 200px;
top: 50px;
}

#item sẽ xuất hiện bên trong #container chính xác 200px tính từ bên trái và 50px tính từ trên xuống.

Css cho phép bạn tạo ra các kiểu chữ khác nhau như chữ hoa, chữ thường, hay làm các kí tự đầu dòng được in hoa.

h1 {
/* chữ hoa */
text-transform:uppercase;
}
h2 {
/* kí tự đầu được in hoa */
text-transform:capitalize;
}
p {
/* chữ thường */
text-transform:lowercase;
}

Cách tốt nhất để làm việc này là sử dụng text-indent và outline:none để xóa đường viền. Chúng ta sẽ sử dụng thủ thuật này khi chúng ta muốn sử dụng hình ảnh để thay thế cho các dòng chữ (mục đích chính của dòng chữ là để google có thể index)

a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
awidth:100px; height:50px;
display:block;
}

Khi bạn làm website và cần sử dụng nhiều đến các kí tự như ® và ™ và gặp rắc rối phần hiển thị ở các trình duyệt thì đoạn css sau sẽ giúp bạn giải quyết vấn đề

sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}

Nếu bạn cần làm một đối tượng nào đó trở nên trong suốt thì đoạn css sau sẽ giúp bạn, và nó hỗ trợ hầu hết các trình duyệt phổ biến hiện nay

.transparent_class {
filter:alpha(opacity=50);    /* ie  */
-moz-opacity:0.5;    /* old mozilla browser like netscape  */
-khtml-opacity: 0.5;    /* for really really old safari */
opacity: 0.5;    /* css standard, currently it works in most modern browsers like firefox,  */
}

Mặc dù hiện nay IE đã nâng cấp lên phiên bản mới, nhưng số người sử dụng IE6 cũng rất nhiều, vì thế học thêm thủ thuật này cũng không có gì là vô ích

.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}

Thủ thuật này đơn giản thôi, nhưng mình tin rằng cũng có bạn chưa biết, thủ thuật này bắt buộc dòng chữ phải được viết ngay trong một hàng mà không được xuống dòng.

h1{
white-space:nowrap;
}