50 Thủ thuật CSS không thể bỏ qua – Part 1

Dưới đây là 50 thủ thuật CSS hữu dụng mà các nhà thiết kế web không thể bỏ qua. Một số thủ thuật có thể mới mẻ, số khác lại đã quen thuộc với bạn. Tuy nhiên rất mong các bạn tìm thấy những điều bổ ích qua bài viết này.
 
 

1. Căn giữa theo chiều ngang

Để căn giữa theo chiều ngang một đối tượng kiểu block, bạn chỉ ra độ rộng (width) và thiết lập thuộc tính margin left, right là auto.
div#page {width: 960px; margin: 0 auto}

2. Căn giữa text theo chiều dọc

Để căn giữa theo chiều dọc đoạn chữ nằm trong thẻ div, bạn hãy chỉ rõ độ cao (height) và thuộc tính line-heigth bằng đúng độ cao của div.
div#container {height: 35px; line-height: 35px}

3. Căn giữa theo chiều dọc đối tượng block

HTML:
<div id="content">your content here</div>

CSS:

div#content {position: absolute; top: 50%; height: 500px;
 margin-top: -250px}
Thuộc tính top: 50% sẽ làm thẻ div sẽ cách phía trên một nửa chiều cao của đối tượng chứa nó. Kết hợp với thuộc tính margin-top có giá trị bằng 1/2 chiều cao của thẻ div sẽ làm nó được căn giữa.
Bạn cũng có thể làm tương tự để căn giữa theo chiều ngang:
div#content {position: absolute; top: 50%; left:50%; width:800px;
 height: 500px; margin-left: -400px;  margin-top: -250px}

4. Conditinal comments

Nếu muốn đoạn css chỉ áp dụng với một trình duyệt nhât định bạn có thể dùng conditional comment. Ví dụ muốn áp dụng css đối với riêng trình duyệt IE:
 <!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]--> 

Ngoài ra bạn cũng có thể chỉ ra phiên bản của IE bằng cách kết hợp các điều kiện sau:

<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->

5. Fluid Images

Fluid: lỏng, chất lỏng. Fluid image là ảnh mà kích thước của nó không bị vượt quá vật chứa nó. Nếu một ảnh có kích thước là 300px đặt trong một container 200px thì ảnh sẽ được co lại thành 200px. Để làm được điều này, bạn chỉ cần đặt thuộc tính max-width là 100%
img{max-width: 100%}

Riêng với IE, thay max-width bằng width:

img{width: 100%}

6. Nút bấm 3D

Bằng cách đặt màu nền và màu của border, bạn có thể làm một nút bấm 3D bằng thẻ div
 div#button {height:30px; width: 70px; background: #888;
border: 2px solid; border-color: #999 #777 #777 #999 } 

7. CSS Shorthand

Sử dụng shorthand (viết tắt) làm đoạn code css của bạn ngắn gọn và dễ viết hơn
body {font: font-style font-variant font-weight font-size line-height font-family;}

8. Multiple Class

Một đối tượng HTML có thể được khai báo với nhiều class, cách nhau bởi dấu space:
HTML:
<div class="class-1 class-2 class-3"></div>

CSS:

.class-2 {color: blue}
.class-1 {color: red}
.class-3 {color: green}

Trong trường hợp một thuộc tính được khai báo ở nhiều lớp, giá trị ở lớp khai báo cuối cùng sẽ có hiệu lực. Ở ví dụ trên màu của chữ trong thẻ div sẽ là green.

9. Bo tròn góc

border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;

10. Style cho liên kết

Một đường liên kết với thẻ <a> sẽ có 4 trạng thái: link, visited, hover, active. Bạn có thể style cho từng trạng thái khác nhau:
a:link{}
a:visited{}
a:hover{}
a:active{} 
Một cách dễ dàng để nhớ các thuộc tính trên là LoVe HAte. LVHA – Link, Visited, Hover, Active.
 
(còn tiếp)

 

Related Post


Tạo responsive cho facebook comment plugin
Monday, March 24, 2014
Hiện nay facebook comment plugin đang được tích hợp vào website khá phổ biến vì nó dễ sử dụng và quản lý, giúp website được chia sẻ nhanh trên mạng xã hội. Tuy nhiên với xu thế thiết kế web responsive hỗ trợ cho nhiều thiết bị như hiện nay, việc tích hợp plugin này vẫn còn vướng mắc một vấn đề là plugin này của facebook chỉ hỗ trợ kích thước có định mà chưa tự động co dãn theo giao diện web của bạn.
Sử dụng jQuery plugin Sidr tạo Menu Slide Left một cách dễ dàng
Wednesday, March 19, 2014
Hiện nay xu thế phát triển web responsive rất phát triển, có nhiều framework hỗ trợ người lâp trình viên phát triển ứng dụng web một cách nhanh chóng. Với cá nhân mình, mình lựa chọn sử dụng boostrap để xây dựng các ứng dụng web responsive vì nó đáp ứng khá đầy đủ nhu cầu thực tế và dễ sử dụng. Tuy nhiên trong một số dự án, mình nhận thấy navbar của bootstrap cung cấp hiện thị trên mobile chưa ưng ý với khi làm những menu có cấu trúc phức tạp. jQuery plugin Sidr là một giải pháp hay để giải quyết vấn đề này, nó hoạt động tốt cùng với boostrap và tạo ra được một menu slide khá đẹp mắt và đặc biệt rất phù hợp với web dành cho mobile...
Search

Đăng ký nhận bài mới


Category

Blog Archive