Top 10 thủ thuật css cho dân thiết kế web
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: Thủ thuật CSS 1 : Tạo chữ đảo ...
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:
Thủ thuật CSS 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>Test message</div>
</body>
</html>
Thủ thuật CSS 2 : Hiển thị hình ảnh nằm trên hình ảnh khác
Để hiểu rõ thủ thuật này các bạn có thể tham khảo ví dụ sau :
<html>
<head>
<title>Show Image over image</title>
<style type="text/css">
img { position:absolute; top: 25px; z-index: 2;}
.imgA1 { left: 0px; }
.imgB1 { left: 0px; }
.imgB2 { left: 15px; }
.imgB3 { left: 30px; }
.imgB4 { left: 45px; }
.imgB5 { left: 60px; }
.imgB6 { left: 75px; }
.imgB7 { left: 90px; }
.imgB8 { left: 105px; }
.imgB9 { left: 120px; }
</style>
</head>
<body>
<img src="http://www.codeproject.com/Info/images/codeproject125x125.gif" style="z-index: 1;"/>
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
<img src="line.gif" />
</body>
</html>
Các bạn sẽ dễ dàng nhìn thấy các hình line.gif được đặt nằm đè lên hình gốc như hình sau:
Các bạn có thể lấy hình line.gif để làm minh họa
Thủ thuật CSS 3 : 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
Thủ thuật CSS 4 : Đặ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 đó. Ví dụ :
<p class="text side">...</p>
Ở ví dụ trên chúng ta có 2 class là text và slide
Thủ thuật CSS 5 : 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.
Thủ thuật CSS 6 : 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ụ :
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.
Thủ thuật CSS 7 : 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 “
<h1><span>Buy widgets</span></h1>
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.
Thủ thuật CSS 8 : 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
{
awidth: 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 awidth + 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 awidths và padding awidths đượ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
{
awidth: 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
Thủ thuật CSS 9 : 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
{
awidth: 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;
awidth: 700px;
margin: 0 auto;
}
Thủ thuật CSS 10 : 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 !
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
