47 thủ thuật CSS không thể bỏ qua – part 1

Dưới đây là 47 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.

1	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.

HTML:

1	div#page {width: 960px; margin: 0 auto}

CSS:

1	div#container {height: 35px; line-height: 35px}

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

HTML:

1	<div id="content">your content here</div>

CSS:

1	div#content {position: absolute; top: 50%; height: 500px;

2	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:

1	div#content {position: absolute; top: 50%; left:50%; width:800px;

2	height: 500px; margin-left: -400px;  margin-top: -250px}

4. Conditional 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:

1	<!--[if IE]>

2

3	<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />

4

5	< ![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:

1	<!--[if IE 6]> - targets IE6 only -->

2	<!--[if gt IE 6]> - targets IE7 and above -->

3	<!--[if lt IE 6]> - targets IE5.5 and below -->

4	<!--[if gte IE 6]> - targets IE6 and above -->

5	<!--[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-widthlà 100%

1	img{max-width: 100%}

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

1	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

1	div#button {height:30px; width: 70px; background: #888;

2	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

1	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:

1	<div class="class-1 class-2 class-3"></div>

1	.class-2 {color: blue}

2	.class-1 {color: red}

3	.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

Bạn có thể xem chi tiết tại đây.

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:

1

a:link{}

2	a:visited{}

3

a:hover{}

4	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.

Posted in: Thiết kế web