[Codevivu] – Nắm vững css là điều bắt buộc đối với dân thiết kế web, vì thế mình xin chia sẻ với các bạn 10 thủ thuật css hay cho người mới bắt đầu và cả những ai quan tâm đến lĩnh vực thiết kế web nói chung và css nói riêng. Nào chúng ta cùng khám phá từng thủ thuật nào:
1.Tạo chữ đảo ngược
Có khi nào bạn muốn thể hiện một phong cách khác người bằng cách tạo ra các chữ lộn ngược, ví dụ sau sẽ giúp bạn làm điều đó
<html>
<head>
<title>Text Up side down</title>
<style type="text/css">
.txtUpsideDown
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE6,IE7 */
ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /* IE8 */
-moz-transform: rotate(-180deg); /* FF3.5+ */
-o-transform: rotate(-180deg); /* Opera 10.5 */
-webkit-transform: rotate(-180deg); /* Safari 3.1+, Chrome */
position: absolute;
}
</style>
</head>
<body>
<div>Tôi yêu lap trình</div>
</body>
</html>
2. 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
3. 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 :
<div id="box">...</div>
Đ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:
<div id="box"><div>...</div></div>
Bây giờ thì độ rộng của tất cả các trình duyệt đã là 150px
4. 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;
}
5. 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 nhé !
