27 thủ thuật CSS không thể bỏ qua

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

?

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

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

?

1 2 3

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

?

1 2 3 4 5

<!--[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%

?

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

?

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:

HTML:

?

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

CSS:

?

1 2 3

.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

?

1 2 3

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:

?

1 2 3 4

a:link{} a:visited{} a:hover{} a:active{}

11. Html hack cho IE

Một trong những cách viết CSS chỉ cho IE là sử dụng dấu * và _

?

1 2 3 4 5

.element {     background: red; /* các trình duyệt hiện đại */     *background: green; /* IE7 và các phiên bản thấp hơn */     _background: blue; /* chỉ IE6 */ }

12. Sửa lỗi min-heigth cho IE6

IE6 không hỗ trợ min-height. Tuy nhiên, nó lại làm việc với thuộc tính height như là với min-height ở các trình duyệt khác. Bạn có thể sử dụng đoạn CSS sau để áp dụng min-height cho mọi trình duyệt:

?

1 2 3 4 5

.element {     min-height: 500px;     height: auto !important;     height: 500px; }

Dòng đầu tiên sẽ set thuộc tính min-height cho các trình duyệt không phải IE6. Dòng cuối cùng sẽ thiết lập min-height cho IE6 do nó làm việc với height như min-height ở các trình duyệt khác. Dòng giữa với từ khóa !important đảm bảo rằng các trình duyệt khác không lấy 500px làm giá trị của height.

Một cách khác thay thế nữa là dùng thuộc tính _height: IE6 hiểu _height như là height. Đoạn CSS sẽ trở nên ngắn gọn hơn:

?

1 2 3 4

.element {     min-height: 500px;     _height: 500px; }

13. Base font-size

Sử dụng các đơn vị như ‘em’ hoặc ‘%’ cho font chữ là một cách tuyệt vời để tạo ra các thiết kế fluid. Bạn thiết lập font-size cho thẻ body, và các thành phần khác được đặt tương đối theo nó. Khi muốn thay đổi, phóng to, thu nhỏ toàn trang, bạn chỉ cần thay đổi font-size của body.

Để việc tính toán giá trị ‘em’ đối với các thành phần khác được đơn giản, hãy đặt font-size của body là 10px (~ 62.5% do font-size mặc định của các trình duyệt là 16px)

?

1 2 3 4 5

body {font-size:62.5%} /* 10/16 = 62.5% */ h1 {font-size: 2.4 em} /* 24px */

14. Style cho chữ cái đầu tiên của đoạn văn bản

Sử dụng pseudo-element :first-letter

?

1 2 3 4 5 6 7 8 9

p:first-letter {     display: block;     float: left;     margin: 5px 5px 0 0;     color: red;     font-size: 1.4em;     background: #ddd;     font-family: Helvetica; }

15. Text-transform

Bạn có thể hiển thị toàn bộ đoạn text dưới dạng chữ hoa, chữ thường hoặc chỉ chữ cái đầu tiên viết hoa với thuộc tính text-transform

?

1 2 3

p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize}

16. Sử dụng Css Reset

Các trình duyệt đều có các giá trị mặc định cho các thuộc tính CSS là khác nhau. Sử dụng CSS Reset để đảm bảo các giá trị mặc định này là như nhau với mọi trình duyệt. Tôi hay sử dụng YUI Reset CSS trong các project của mình.

17. Đặt ảnh làm Bullet

Đôi khi bạn không muốn sử dụng các bullet HTML mặc định như disc, circle, square, mà thay vào đó là một ảnh đẹp hơn, ví dụ như ở hình dưới chẳng hạn.

Lúc đấy bạn có thể dùng CSS như sau:

?

1 2 3 4 5 6

ul {list-style: none} ul li {     background-image: url("path-to-your-image");     background-repeat: none;     background-position: 0 0.5em; }

18. Cross-browser opacity

?

1 2 3 4 5 6

.element {     filter:alpha(opacity=50);     -moz-opacity:0.5;     -khtml-opacity: 0.5;     opacity: 0.5; }

Trong đó:

1. opacity: CSS3
2. -moz-opacity: Mozilla Firefox
3. -khtml-opacity: các phiên bản cũ của Safari và các trình duyệt dùng khtml rendering engine
4. filter:alpha(opacity=50): Internet Explorer

19. Cross-browser transition

?

1 2 3 4 5

transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; -ms-transition: none

Trong đó:

1. transition: CSS3
2. -moz-transition: Mozilla Firefox
3. -webkit-transition: Chrome
4. -o-transition: Opera
5. -ms-transition: Internet Explorer

20. Cross-browser gradient

?

1 2 3 4 5 6 7 8

background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left,  #1e5799 0%, #7db9e8100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left,  #1e5799 0%,#7db9e8100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%);/* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1); /* IE6-9 */

Ngoài ra bạn có thể tùy biến hơn bằng công cụ CSS Gradient Generator.

21. Nth-child

nth-child pseudo class cho phép bạn chọn các thành phần có thự tự bất kỳ trong một list. Ví dụ:

?

1 2 3

ul li:nth-child(3) {     background: blue }

Đoạn CSS trên sẽ đặt background là blue cho thành phần thứ 3 của list.

?

1 2 3

ul li:nth-child(3n+3) {     background: blue }

Đoạn CSS trên sẽ đặt background là blue cho các thành phần thứ 3, 6, 9, 12,… của list.

nth-child hay được dùng để style cho các dòng chẵn, dòng lẻ của một table. nth-child được hỗ trợ bởi hầu hết các trình duyệt trừ IE8 trở xuống. Bạn có thể dùng nth-child selector của jQuery để thay thế.

22. Css shortthand

Sử dụng cách viết tắt này làm cho đoạn code của bạn ngắn gọn và sáng sủa hơn:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

margin: margin-top margin-right margin-bottom margin-left;        /* margin: 1px 2px 3px 4px; */        /* padding, border-width, outline-width tương tự */ border: width style color;        /* border: 1px solid red; */        /* border-top, border-bottom, border-right, border-left tương tự */ background: color image repeat position scroll;        /* background: red url('bg.png') repeat bottom right fixed; */ font: style variant weigth size/line-height family;        /* font: italic small-caps bold 1em/1.2em segoe ui, arial, tahoma; */ list-style: type position image;        /* list-style: square outside url('start.png'); */

23. Vẽ hình tròn với border-radius

Đặt giá trị cho width và height gấp đôi border-radius để tạo ra hình tròn:

?

1 2 3 4 5 6 7 8

.cirlce {     width: 300px;     height: 300px;     background-color: red;     border-radius: 150px;     -moz-border-radius: 150px;     -webkit-border-radius: 150px; }

24. Vẽ hình tam giác với css

?

1 2 3 4 5 6 7 8

.triangle {     border-color: transparent transparent green transparent;     border-style: solid;     border-width: 0px 300px 300px 300px;     height: 0px;     width: 0px; } <div class='triangle'></div>

Ngoài ra bạn cũng có thể tạo ra nhiều hình khác bằng cách kết hợp khéo léo các thuộc tính trên.

25. Thay thế chữ bằng ảnh

Trong một số trường hợp, bạn muốn sử dụng ảnh để làm cho đoạn chữ trở nên đẹp hơn, nhưng vẫn muốn giữ text để làm SEO, thì có thể sử dụng text-indent:

?

1 2 3 4 5 6

h1 {     text-indent:-9999px;     background:url("h1-image.jpg") no-repeat;     width:200px;     height:50px; }

26. Xóa thanh cuộn dọc của textarea trong IE

?

1 2 3

textarea{     overflow:auto; }

27. Cắt ngắn text cho vừa với chiều rộng

HTML:

?

1	<p class='ellipsis'>Nội dung này quá dài nên sẽ bị cắt ngắn ^^<p>

CSS

?

1 2 3 4 5 6

.ellipsis {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     width: 200px; }

nguồn: https://vietlq7.wordpress.com/2014/12/19/27-thu-thuat-css-khong-the-bo-qua/