Các thủ thuật CSS bạn cần biết

Đăng bởi Admin | 4/12/13 | 0 nhận xét

CSS (Cascading Style Sheet) không khó để học, cái khó là làm sao để đảm bảo css chạy tốt trên các trình duyệt mà không sinh ra lỗi. Mặc dù CSS3 đã ra đời, tuy nhiên để tất cả các trình duyệt đều hỗ trợ thì cũng cần có một thời gian nữa. Sau đây là danh sách các thủ thuật về css mà mình tin sẽ rất hữu ích cho bạn.

1. Tránh sử dụng CSS hacks:

Chúng ta nên tránh sử dụng hack trong css trừ phi không còn cách nào để sửa. Bởi vì chúng ta khó có thể biết khi nào thì những câu lệnh hack này ngừng hoạt động. Vì thế cách chung nhất để đối phó với nhiều phiên bản khác nhau của trình duyệt IEs thì chúng ta nên sử dụng câu lệnh if else

01 02 03 04 05 06 07 08 09 10

<!--[If IE 5]> ie 5 <![endif]-->   <!--[If lte 6]> ie 6 and lower <![endif]--> <!--[If gte 7]> ie 7 or higher <![endif]-->

2. Gộp các phần tử lại thành 1 nhóm:

Việc gộp các phần tử có chung những thuộc tính là điều cần thiết khi viết css, vì nó giúp bạn giảm dung lượng file css và cũng giúp bạn dễ dàng quản lý

1 2 3 4 5

h1, h2, h3, h4, h5, h6 { font-family:arial; margin:0.5em 0; padding:0; }

3. Canh Giữa:

Thật dễ dàng để canh giữa các phần tử , với trình duyệt firefox và safari, chúng ta chỉ cần chỉ định độ rộng (width) canh trái phải tự động. Tuy nhiên với trình duyệt IE thì chúng ta nên chỉ định thêm text-align:center; để canh giữa phần tử cha.

1 2 3 4 5 6 7 8 9

body { text-align:center;  /* for ie   */ }   #container { width:800px; margin:0 auto; text-align:left; }

4. CSS Positioning:

Bằng cách ấn định position:absolute; chúng ta sẽ có được vị trí chính xác cho đối tượng. Để dễ hiểu chúng ta xem ví dụ sau :

01 02 03 04 05 06 07 08 09 10

#container { position: relative; width:500; height:300; }   #item { position: absolute; left: 200px; top: 50px; }

#item sẽ xuất hiện bên trong  #container chính xác 200px tính từ bên trái và 50px tính từ trên xuống.

5. Text transform:

Css cho phép bạn tạo ra các kiểu chữ khác nhau như chữ hoa, chữ thường, hay làm các kí tự đầu dòng được in hoa.

01 02 03 04 05 06 07 08 09 10 11 12

h1 { /* chữ hoa */ text-transform:uppercase; } h2 { /* kí tự đầu được in hoa */ text-transform:capitalize; } p { /* chữ thường */ text-transform:lowercase; }

6. Che dấu chữ:

Cách tốt nhất để làm việc này là sử dụng text-indent và outline:none để xóa đường viền. Chúng ta sẽ sử dụng thủ thuật này khi chúng ta muốn sử dụng hình ảnh để thay thế cho các dòng chữ (mục đích chính của dòng chữ là để google có thể index)

1 2 3 4 5 6 7

a { text-indent:-999em; outline:none; background: url(button.jpg) no-repeat 0 0; width:100px; height:50px; display:block; }

7. SUP và SUB:

Khi bạn làm website và cần sử dụng nhiều đến các kí tự như ® và ™ và gặp rắc rối phần hiển thị ở các trình duyệt thì đoạn css sau sẽ giúp bạn giải quyết vấn đề

01 02 03 04 05 06 07 08 09 10 11 12 13 14

sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; } sup { bottom: 1ex; } sub { top: .5ex; }

8. CSS Transparency cho các trình duyệt:

Nếu bạn cần làm một đối tượng nào đó trở nên trong suốt thì đoạn css sau sẽ giúp bạn, và nó hỗ trợ hầu hết các trình duyệt phổ biến hiện nay

1 2 3 4 5 6

.transparent_class { filter:alpha(opacity=50);    /* ie  */ -moz-opacity:0.5;    /* old mozilla browser like netscape  */ -khtml-opacity: 0.5;    /* for really really old safari */ opacity: 0.5;    /* css standard, currently it works in most modern browsers like firefox,  */ }

9. Sửa lỗi hiển thị ảnh PNG trong IE6:

Mặc dù hiện nay IE đã nâng cấp lên phiên bản mới, nhưng số người sử dụng IE6 cũng rất nhiều, vì thế học thêm thủ thuật này cũng không có gì là vô ích

1 2 3 4 5 6

.png_hack{ background-image: url(../img/the_image.png) !important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png'); }

10. Ngăn chặn việc xuống dòng:

Thủ thuật này đơn giản thôi, nhưng mình tin rằng cũng có bạn chưa biết, thủ thuật này bắt buộc dòng chữ phải được viết ngay trong một hàng mà không được xuống dòng.

1 2 3

h1{ white-space:nowrap; }

11. Xóa bỏ thanh cuộn dọc trong IE:

Nếu các thanh cuộn trong IE làm phiền bạn , thì đoạn css sau sẽ giúp bạn loại bỏ phiền toái đó:

1 2 3

textarea{ overflow:auto; }

12. Hiệu ứng 3D button:

Các bạn có thể tự tay tạo cho mình một hiệu ứng 3D cho các button của mình , sau đây là đoạn css minh hoạn :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

a { display: block; border: 1px solid; border-color: #aaa #000 #000 #aaa; width: 8em; background: #fc0; }   a:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; }

13. CSS Tooltips:

Các bạn có biết là có thể tạo tooltips bằng css mà không cần phải dùng bất kỳ đoạn code javacript nào không. Đoạn css sau làm rất tốt việc đó :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

a:hover { background:#ffffff;     /*BG color is a must for IE6*/ text-decoration:none; }   a.tooltip span { display:none; padding:2px 3px; margin-left:8px; width:130px; }   a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c; }

Và đây là cách sử dụng :

1	<a href="#">Tooltip<span> Thông tin mô tả </span></a>

14.Viết tắt CSS:

Các bạn nên tập viết tắt cho các đoạn css của mình, để dễ quản lý và làm giảm dụng lượng file css, sau đây là ví dụ minh họa:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

/* MARGIN */ h1 {margin:1em 0 2em 0.5em;}   h1 {margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; }   /* BORDER */ h1 {border:1px solid #000;}   h1 {border-width:1px; border-style:solid; border-color:#000; }   /* BORDER WIDTH */ h1 {border-width:1px 2px 3px 4px;}   h1 {border-top-width:1px; border-right-width:2px; border-bottom-width:3px; border-left-width:4px; }   /* BACKGROUND */ div {background:#f00 url(background.gif) no-repeat fixed 0 0;} div {background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; } /* FONT */ h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;} h1 {font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif; } /* LIST STYLE */ ul {list-style:square inside url(image.gif);} ul {list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); } /* OUTLINE */ h1 {outline:#f00 solid 2px;} h1 {outline-color:#f00; outline-style:solid; outline-width:2px; }

Hy vọng với những thủ thuật đơn giản này sẽ giúp các bạn có thêm kiến thức và làm chủ CSS. 

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

                                                                                                  Theo : thuthuatweb.net