Top 8 thủ thuật CSS cho dân thiết kế Website

Dưới đây là 8 thủ thuật CSS nên biết và hay dùng nhất cho dân thiết kế Website

1. Thủ thuật CSS 1 : Qui tắc rút gọn trong font css

Khi áp đặt thuộc tính cho font chữ trong css bạn có thể viết như sau :

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-varient: small-caps; font-family: verdana,serif

Và bạn có thể rút ngắn lại như sau 

font: 1em/1.5em bold italic small-caps verdana,serif

Tốt hơn phải không, tuy nhiên có 1 vấn đề nhỏ là phiên bản viết tắt này chỉ hoạt động khi bạn chỉ định cả thuộc tính font-size và font-family

Mặc dù vậy nếu bạn không chỉ định thuộc tính font-weight, font-style, hoặc font-varient thì những giá trị này sẽ tự động đưa về giá trị mặc định là normal.

2. Thủ thuật CSS 2 : Đặt đối tượng có nhiều hơn 1 class

Bạn có biết rằng bạn có thể đặt cho đối tượng nhiều hơn 1 class không? Điều này rất đơn giản, chỉ cần thêm khoảng trắng giữa các class là bạn có thể thêm class cho đối tượng đó.

3. Thủ thuật CSS 3 : CSS border

Khi bạn áp đặt border cho một đối tượng , bạn thường chỉ định màu sắc, độ dày và style .

Ví dụ : border: 3px solid #000 , Tuy nhiên giá trị cần nhất ở đây đó là border style. Nếu bạn chỉ viết border: solid thì nó vẫn có hiệu lực với các giá trị mặc định, trong đó độ dày là vào khoảng 3px - 4px và màu mặc đinh là #000.


4. Thủ thuật CSS 4 : Câu lệnh !important

Thông thường khi bạn muốn áp đặt ưu tiên một thuộc tính nào đó cho đối tượng mà không cần quan tâm đến các câu lệnh css khác, bạn thường đặt câu lệnh !important ở phía dưới thuộc tính đó. Tuy nhiên bạn có biết là nó chỉ hoạt động ở hầu hết các trình duyệt nhưng lại không có tác dụng gì trong IE. 

Ví dụ :
Code:margin-top: 3.5em !important; margin-top: 2em
Thuộc tính margin-top sẽ được ấn định là 3.5em cho tất cả trình duyệt, nhưng với IE thì lại là 2em. Điều này cũng có ích khi bạn cần phải chỉnh sửa cho web của bạn phù hợp với tất cả trình duyệt khác nhau.


5. Thủ thuật CSS 5 : Kỹ thuật thay thế chữ bằng hình ảnh

Có những lúc bạn cần dùng hình ảnh chứa những dòng chữ được làm từ những font riêng biệt trong photoshop để hiển thị trên web đẹp hơn, tuy nhiên khả năng tìm kiếm trên google của web bạn sẽ giảm đi nhiều nếu dòng chữ đó chữa những từ khóa mà bạn cần seo. Vậy làm sao để có thể đáp ứng được cả hai nhu cầu trên? rất đơn giản bạn chỉ cần tham khảo ví dụ sau :
- Giả sự bạn cần dùng hình ảnh thay thế cho đoạn chữ " Buy widgets "

Code:

Buy widgets

Bạn có thể áp dụng css như sau :

h1 { background: url(widget-image.gif) no-repeat; } h1 span { position: absolute; left:-2000px }

Vậy là từ nay bạn có thể vừa seo được web mà vấn làm web của bạn đẹp hơn.


6. Thủ thuật CSS 6 : CSS box model hack alternative

box model hack được dùng để chỉnh sửa vấn đề về độ rộng trong các phiên bản trước IE6. Để dễ hiểu chúng ta xem đoạn css sau :

#box { width: 100px; border: 5px; padding: 20px; }

Và đoạn css này áp dụng cho :
Code:
...

Điều này có nghĩa là tổng độ rộng của box là 150px (100px width + 2 lần 5px borders + 2 lần 20px paddings) trong tất cả các trình duyệt và chỉ trừ các phiên bản trước IE6 , những trình duyệt này chỉ có độ rộng là 100px (border widths và padding widths được hòa lẫn cả với độ rộng). Và box model hack có thể giúp bạn chỉnh sửa lại như sau:

#box { width: 150px; } #box div { border: 5px; padding: 20px; }

Chỉ đơn giản là thêm một thẻ div vào giữa:
Code:
...

Bây giờ thì độ rộng của tất cả các trình duyệt đã là 150px


7. Thủ thuật CSS 7 : Canh giữa một phần tử block

Nếu bạn muốn canh giữa một đối tượng ra giữa màn hình thì bạn có thể áp đặt css như sau:

#content { width: 700px; margin: 0 auto; }

Đoạn code này hoạt động tốt với hầu hết các trình duyệt chỉ trừ có những người hàng xóm khó chịu là các phiên bản từ IE6 trở về trước, tuy nhiên bạn cũng có thể canh giữa trên những trình duyệt này bằng đoạn css sau :

body { text-align: center; } #content { text-align: left; width: 700px; margin: 0 auto; }

8. Thủ thuật CSS 8 : CSS positioning bên trong 1 container

Một trong những điều tốt nhất về css đó là bạn có thể đặt ví trí (position) một đối tượng bên trong đối tượng khác. Rất đơn giản các bạn chỉ cần áp đặt thuộc tính css như sau :

#container { position: relative }

Bây giờ nếu bạn muốn đặt một đối tượng nào khác bên trong đối tượng container này thì bạn áp dụng thuộc tính css như sau :

#navigation { position: absolute; left: 30px; top: 5px }

đối tượng navigation sẽ được đặt vị trí chính xác là cách bên trái 30px và vị trí trên cùng là 5px so với đối tượng container.
Còn rất nhiều thủ thuật css khác cho các bạn, tuy nhiên mình sẽ giới thiệu tiếp theo trong các bài viết kế tiếp.

Chúc các bạn thành công !