1- overflow (Hay sử dụng để che đi phần không mong muốn)
Kết quả ta được
2-Span (Hiển thị đoạn văn trên cùng dòng với thẻ p nói cách khác là can thiệp vào được thẻ p) -từ đó ta có thể css cho span thành chữ có style riêng biệt khác p
3- fist-leter (Chữ in hoa đầu tiên của đoạn văn) p::first-letter { font-size: 200%; color: #8A2BE2; }
Sử dụng thiết lập toàn cầu để loại bỏ các mặc định về margin và [padding] từ tất cả các phần tử [HTML] tuyệt đối không sử dụng. Nó không chỉ chậm mà còn không hiệu quả nhưng bạn phải xác định margin và padding cho mỗi yếu tố khi cần nó. Thay vì đó hãy sử dụng tập hợp các thiết lập CSS như của Eric Meyer.
Mặc dù CSS hacks có thể có ích cho việc duy trì một cái nhìn nhất quán của website trên các trình duyệt cũ như IE6, nhưng chúng có vấn đề ở những phiên bản mới của trình duyệt IE như IE8 hỗ trợ tiêu chuẩn CSS ở cấp độ cao và sử dụng hacks có thể loại bỏ các cách bố trí. Bạn nên sử dụng các bản trình bày có điều kiện thay vì nhắm đến các phiên bản cụ thể của IE. Ví dụ, bằng cách sử dụng dòng lệnh của code trong thẻ <head> bạn sẽ chỉ load tập tin iestypes.css khi trình duyệt là IE6 hoặc nhỏ hơn.
Đối với thông tin trong các comment có điều kiện, hãy tham khảo bài viết quirksmode trên CSS Conditional Comments.
Giả sử bạn định nghĩa style slidebar sử dụng [class] .leftbox và sau một vài lần thiết kế lại, bạn chuyển nó qua bên phải, sau đó nó sẽ có ý nghĩa để có leftbox như tên box mà bạn vừa chuyển. Bạn nên đặt ra một vài suy nghĩ trước khi tuyên bố các class và ID cho các phần tử để chúng có ý nghĩa và dễ hiểu sau này.
4. Tận dụng CSS inheritance
Nếu nhiều phần tử con của phần tử cha mẹ sử dụng cùng style trên một trang web. Nó sẽ tốt hơn khi xác định chúng cho các phần tử cha mẹ của chúng và để các CSS inheritance làm tất cả mọi việc. Bạn sẽ có thể dễ dàng update code của bạn sau này và nó sẽ làm giảm kích thước file CSS đáng kể
Không tốt
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
- See more at: http://webdeveloperplus.com/css/tips-to-write-better-css-code/#sthash.aDjR4UEP.dpuf
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
Tốt hơn
#container{ font-family:Georgia, serif; }
5. Kết hợp nhiều bộ chọn lọc
Bạn có thể kết hợp nhiều bộ lọc vào trong một nếu chúng có các style nhất định phổ biến. Nó sẽ giúp bạn tiết kiệm thời gian và không gian.
Sử dụng các thuộc tính viết tắt của CSS để viết code CSS nhanh hơn và giảm kích cỡ file. Các ký hiệu viết tắt có thể được sử dụng cho margin, padding, border, font, background và cũng như cho các giá trị màu sắc.
Tổ chức code CSS của bạn trong một khuôn khổ nhất định sẽ làm cho nó dễ dàng hơn khi tìm kiếm một điều gì đó sau này và giúp bạn tiết kiệm nhiều thời gian tìm kiếm một định nghĩa style cụ thể.
Đây là một tổ chức mẫu mà bạn có thể sử dụng
Tổ chức code CSS
/*-------------------------
CSS Reset
-------------------------*/
/*-------------------------
Generic Classes
-------------------------*/
/*-------------------------
Layout styles
-------------------------*/
/*-------------------------
Section specific styles
-------------------------*/
8. Làm cho CSS dễ đọc hơn
Viết CSS dễ đọc sẽ làm cho CSS dễ dàng được tìm kiếm và update các style trình bày sau này. Nhóm tất cả các style của một phần tử trong một dòng hay mỗi style trong dòng của nó với các thụt đầu dòng thích hợp. Bạn cũng có thể kết hợp 2 kỹ thuật này lại với nhau.
Điều này có thể là một cách khó khăn để viết CSS nhưng nó sẽ làm cho CSS của bạn dễ dàng tìm kiếm bất cứ dữ liệu nào ở những giai đoạn sau này
Đặt thuộc tính theo thứ tự chữ cái
div{
background-color:#3399cc;
color: #666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height: 300px;
margin: 10px 5px;
padding:5px 0 10px 5px;
width: 30%;
z-index:10;
}
11. Sử dụng Stylesheets bên ngoài
Nó luôn là cách thực hành thiết kế tốt để tách nội dung từ phần trình bày. Đặt tất cả code CSS của bạn trong stylesheet external và sử dụng <link> để tham chiếu đến stylesheet trong trang web. Bằng cách đặt CSS trong file external, bạn có thể update style sau này tại nơi này thay vì nhìn vào các [template] html hoặc file cho styles.
Đơn giản là vì mỗi trình duyệt nó sẽ có phong cách css riêng cho các button, textbox… Vì vậy bạn nên thay đổi phong cách cho các phần tử đó để có một phong cách chung trên các trình duyệt.
14. Use CSS comments
Đây là một cách tốt để tổ chức các mã của bạn và bạn nên làm điều đó đặc biệt là khi bạn có nhiều hơn 100 dòng mã css.
15. Center horizontally
Ở đây bạn có thể nhìn thấy như thế nào để canh giữa theo chiều ngang một phần tử bên trong
CSS
1
text-align:center;
Để canh giữa theo chiều ngang cho một đối tượng, bạn phải thiết lập chiều rộng cho nó và để lề trái và phải ở chế độ auto
CSS
1
2
width:200px;
margin:0auto;
16. Sử dụng nội tuyến và chặn các yếu tố một cách chính xác
Điều này có nghĩa là nó được đề nghị cho bạn như là một nhà thiết kế / phát triển để sử dụng các yếu tố khối như “div” khi bạn cần một yếu tố ngăn chặn và không sử dụng một “span” yếu tố ví dụ như với “display: block” phong cách. Điều này là có sẵn cũng cho các yếu tố nội tuyến như “b” hoặc “i”, họ phải được sử dụng như các yếu tố nội tuyến khi có thể. Tóm lại bạn chỉ cần hiểu thẻ “span”, “i”, “b” thì nên sử dụng yếu tố “inline” (nằm trên một dòng) chứ không dùng “block” như “div”
17. Thuộc tính CSS text-transform
Đơn giản là bạn nên tránh việc viết in các chữ trên html thay vì dùng thuộc tính tự động viết hoa trong css
Sử dụng sprites tránh gây nhấp nháy khi sử dụng hiệu ứng chuyển động, hãy thử sử dụng tất cả các thời gian kỹ thuật này vì nó là tuyệt vời. Hai bài báo xuất sắc về sprites CSS nền Tôi sẽ đề nghị là alistapart.com bài báo và một smashingmagazine.com.
19. Thuộc tính Font trong một khai báo
Thay vì viết 3 4 dòng code để ấn định kiểu font cho đối tượng nào đó, ví dụ:
CSS
1
2
3
4
font-family:Arial;
font-size:12px;
font-weight:bold;
line-height:20px;
Thì bạn chỉ cần viết một dòng duy nhất:
CSS
1
font:bold12px/20pxArial;
Như vậy vừa tiết kiệm thời gian viết css và dung lượng file css =)))
20. Validate, validate and validate again!
Dễ hiểu là bạn cần kiểm tra xem css bạn viết có hợp chuẩn của tổ chức W3C hay chưa. Nếu chưa thì hãy cố gắn sửa chữa nó để được một css tối ưu nhất.
21. KẾT HỢP CÁC THUỘC TÍNH
Ví dụ: Đối với margin, thay thế
1
margin-top: 8px
2
margin-right: 4px;
3
margin-bottom: 8px;
4
margin-left: 4px;
bạn có thể sử dụng
1
margin: 8px4px8px4px;
Đối với font, để thay thế
1
font-family: Tahoma;
2
font-weight: bold;
3
font-style: italic;
4
font-size: 12px;
bạn có thể sử dụng
1
font: italicbold12pxTahoma;
Đối với background, để thay thế
1
background-image: url(bk_main.jpg);
2
background-repeat: repeat-x;
3
background-color: #ccccff;
bạn có thể sử dụng
1
background: #ccccffurl(bk_main.jpg) repeat-x;
22. NHÓM CÁC ĐỊNH DẠNG CHUNG
Nếu bạn có 2 phần tử có những đặc tính chung bạn có thể nhóm chúng lại như ví dụ sau:
1
h2
2
{
3
font-size: 16pt;
4
color: #4169e1;
5
font-family: 'Trebuchet MS', Arial;
6
margin: 4px0px2px;
7
padding-left: 10px;
8
text-decoration: underline;
9
}
10
11
h3
12
{
13
font-size: 14pt;
14
color: #4169e1;
15
font-family: 'Trebuchet MS', Arial;
16
margin: 4px0px2px;
17
padding-left: 10px;
18
text-decoration: underline;
19
}
Hai thẻ h2, h3 có những đặc tính chung nên
1
h2, h3
2
{
3
color: #4169e1;
4
font-family: 'Trebuchet MS', Arial;
5
margin: 4px0px2px;
6
padding-left: 10px;
7
text-decoration: underline;
8
}
9
10
h2
11
{
12
font-size: 16pt;
13
}
14
15
h3
16
{
17
font-size: 14pt;
18
}
23. SỬ DỤNG SHORTHAND HEXADECIMAL ĐỂ ĐƠN GIẢN MÀU SẮC
3- fist-leter (Chữ in hoa đầu tiên của đoạn văn)
4 - Absolute (Absolute phải nghe theo body)
5- Animatable (Hiệu ứng bằng css nâng cao)
0 nhận xét:
Post a Comment