Cascading Style Sheets (CSS) là phong cách trang sử dụng để xác định các yếu tố HTML. Điều này cũng có thể được áp dụng cho bất kỳ loại tài liệu XML, bao gồm cả đồng bằng XML, SVG và XUL. Những phong cách thường được lưu trong file .css bên ngoài. Những tấm phong cách bên ngoài có thể tiết kiệm rất nhiều thời gian của bạn trong khi chỉnh sửa các bố trí của tất cả các trang trong website.
Dưới đây là một số mẹo CSS quan trọng và hữu ích và thủ thuật mà có thể hữu ích cho các nhà phát triển.
1. Sử dụng reset.Css
Khi nói đến việc diễn tả phong cách CSS, các trình duyệt như Firefox và Internet Explorer đều có những cách xử lý khác nhau cho họ. reset.css reset tất cả các phong cách cơ bản, do đó, bạn bắt đầu với một stylesheets mới trống.
2. Sử dụng CSS Shorthand
Shorthand CSS cung cấp cho bạn một cách ngắn hơn của việc viết mã CSS của bạn, và quan trọng nhất của tất cả - nó làm cho mã rõ ràng và dễ hiểu hơn.
Thay vì tạo ra CSS như thế này
Nó có thể là viết gọn lại như sau:.header {background-color: #fff;background-image: url(image.gif);background-repeat: no-repeat;background-position: top left;}
.header { background: #fff url(image.gif) no-repeat top left }
3. Hiểu Lớp Và ID
Hai bộ chọn thường nhầm lẫn người mới bắt đầu. Trong CSS, lớp được biểu diễn bằng một dấu chấm "." Trong khi id là một hash "#". Trong một nutshell id được sử dụng vào phong cách đó là duy nhất và không lặp lại chính nó, lớp ở phía bên kia, có thể được tái sử dụng.
4. Quên <Table>, Hãy thử <Div>
Một trong những lợi thế lớn nhất của CSS là việc sử dụng <div> để đạt được tổng số linh hoạt về kiểu dáng. <div> là không giống như <table>, nơi mà nội dung được 'nhốt' trong một <td> 's cell. Nó là an toàn để nói rằng hầu hết <table> bố trí này là có thể đạt được với việc sử dụng <div> và tạo kiểu tóc thích hợp, cũng có thể trừ các nội dung bảng lớn.
5. CSS Debugging Công cụ
Nó luôn luôn tốt để có được xem trước tức thì của bố trí trong khi tinh chỉnh các CSS, nó giúp phong cách hiểu và gỡ lỗi CSS tốt hơn. Dưới đây là một số công cụ gỡ lỗi CSS miễn phí, bạn có thể cài đặt trên trình duyệt của bạn: FireFox Web Developer, DOM Inspector, Developer Toolbar Internet Explorer, và Firebug.
6. Biết! Quan trọng
Bất kỳ phong cách đánh dấu bằng! Quan trọng sẽ được đưa vào sử dụng regardlessly nếu có một quy tắc ghi đè dưới nó.
Trong ví dụ trên, background-color: màu xanh sẽ được điều chỉnh bởi vì nó đánh dấu quan trọng, ngay cả khi có một background-color: red;! dưới nó. ! Quan trọng được sử dụng trong các tình huống mà bạn muốn ép buộc một phong cách mà không một cái gì đó ghi đè lên nó, tuy nhiên nó có thể không làm việc trong Internet Explorer..page {background-color:blue !important; background-color:red;}
7. CSSimport Vs <Link>
Có 2 cách để gọi một file CSS bên ngoài - tương ứng sử dụngimport và <link>. Nếu bạn không chắc chắn những phương pháp để sử dụng, đây là vài bài viết để giúp bạn quyết định.
8. Typography Đo lường: Px Vs Em
Có vấn đề lựa chọn khi sử dụng đơn vị đo lường px hoặc em? Những điều sau đây có thể cung cấp cho bạn một sự hiểu biết tốt hơn về các đơn vị typography.
9. Các loại phương tiện hiểu biết
Có vài loại phương tiện truyền thông khi bạn khai báo CSS với <link>. in, máy chiếu và màn hình là vài trong số những loại thường được sử dụng. Hiểu và sử dụng chúng trong những cách thích hợp cho phép người dùng tốt hơn khả năng tiếp cận.
10. Giữ CSS Codes sạch
Chúng tôi có một số CSS đó đã lẻn vào của bạn <head>. Đây là lỗi đau thương vì nó không chỉ đánh dấu bùn của chúng tôi nhưng nó chỉ có thể áp dụng cho các trang HTML đơn này. Giữ CSS của bạn tập tin phương tiện riêng biệt mà các trang trong tương lai có thể liên kết với họ và sử dụng mã tương tự, do thay đổi thiết kế trên nhiều trang trở nên dễ dàng.
