Việc viết mã CSS cũng giống như bạn lập trình với ngôn ngữ PHP, C#,... tất cả đều cần có một bố cục khoa học, hệ thống để dễ dàng phát triển cũng như kiểm tra phát hiện lỗi (nếu có). Dưới đây là một vài hướng dẫn giúp bạn làm việc với CSS khoa học hơn: Chú thích cho mã CSS giúp người khác đọc file CSS sẽ biết thêm những thông tin cần thiết về file CSS nói riêng và về tác giả nói chung. Việc chú thích mã ở những ngôn ngữ khác quan trọng ra sao thì chú thích mã ở CSS cũng quan trọng như vậy. Sau đây là mẫu chú thích một đoạn mã CSS rất tốt; CSS: /*------------------------ Screen Stylesheet version: 1.0 date: 01/03/07 author: [your email] email: [you at domain dot com] website: [your domain] version history: [location of file] ---------------------*/ 2. Chia CSS ra thành nhiều phần Nếu mã CSS của bạn gồm nhiều phần và cho nhiều trang thì bạn nên chia thành nhiều file CSS để dễ quản lí và cũng để giúp cho file CSS của bạn không bị rối. Rất nhiều web developer chưa nhận thức được điều này. Họ gộp tất cả file CSS vào làm một. Và dĩ nhiên, hệ quả là họ mất nhiều thời gian hơn cho việc sửa file CSS của mình. Chia CSS ra thành nhiều file và sử dụng chúng cùng với CSS chính bằng phương thức sau: CSS: /* Import other stylesheets ---------------------------------------*/ @import url("typography.css"); Bên cạnh đó, phân chia ngay chính trong file CSS cũng quan trọng không kém. Hãy gộp chung những phần có cùng 1 đối tượng. CSS: /* Header ---------------------------------------*/ /* Navigation ---------------------------------------*/ /* Footer ---------------------------------------*/ /* Homepage ---------------------------------------*/ /* Your template ---------------------------------------*/ Xoá các định dạng mặc định Đây là điều cực kì cần thiết đối với bất kì Web developer nào. Như bạn đã biết thì mỗi trình duyệt (browser) đều hiển thị khác nhau. Phần lớn là do định dạng mặc định ở mỗi browser là khác nhau. Ví dụ sau sẽ giúp bạn xoá định dạng mặc định: CSS: *{margin: 0;padding: 0;border: 0;} 4. Định dạng các đối tượng cơ bản: Những đối tượng cơ bản hay được sử dụng như h1, h2, h3, ... form, table, cần phải được định dạng trước tiên khi bạn bắt đầu viết mã CSS. Thói quen này giúp bạn đồng bộ được giao diện của các trang web.[ CSS: /* Forms ---------------------------------------*/ input.text { padding: 3px; border: 1px solid #999999; } PLAIN TEXT CSS: /* Tables ---------------------------------------*/ table { border-spacing: 0; border-collapse: collapse; } td { text-align: left; font-weight: normal; } Chú ý: đây không phải là một chuẩn mực viết mã CSS. Vì hiện tại chưa có 1 chuẩn nào cho việc viết CSS. Dưới đây chỉ là cách viết mã CSS sao cho khoa học được tích luỹ từ những ngày tháng làm việc cùng với CSS. Hi vọng điều này sẽ bố ích cho các bạn. Bài này được trích dẫn của trang http://joomlabasic.com . Trang này của anh Chế Linh là một nhà phát triển mở rộng của web joomla. nếu các bạn hứng thú với web joomla thì vàotrang trên mà nghiên cứu cuối trang có địa chỉ liên lạc với anh Linh Nguồn: http://joomlabasic.com/
5 cách viết tắt thường dùng trong CSS Viết tắt trong CSS giúp bạn tiết kiệm khá nhiều thời gian, code gọn gàng hơn, dễ quản lý và chỉnh sửa hơn, giúp giảm dung lượng file CSS. Bên dưới là 5 cách viết tắt thường được sử dụng trong CSS 1, Viết tắt với thuộc tính Margin và Padding Trong bài viết Margin và Padding mình đã đề cập đến cách viết tắt đối với 2 thuộc tính này, bạn có thể tìm hiểu thêm trong bài viết Margin và Padding trong CSS. Cách viết tắt đối với Margin và Padding hoàn toàn giống nhau: .selector { margin: 2px 4px 6px 8px } Giá trị được tính từ vị trị Top Các vị trí tuân theo quy luật chiều kim đồng hồ (Top, Right, Bottom, Left) bắt đầu từ vị trí Top. Từ vị trí trên ta có thể tính được thành phần .selector có margin như sau: - margin-top: 2px - margin-right: 4px - margin-bottom: 6px - margin-left: 8px Khi có một cạnh nào đó bị khuyết, thì nó sẽ lấy giá trị của cạnh đối diện .selector { margin: 3px 4px 5px } Ở đây cạnh left bị khuyết, đo đó sẽ lấy giá trị của cạnh đối diện (right) làm giá trị => margin-left: 4px .selector { margin: 2px 4px } Ở đây cạnh left và right bị khuyết, do đó cạnh dưới sẽ lấy giá trị của cạnh trên (2px), cạnh left sẽ lấy giá trị của cạnh right (4px). .selector { margin: 5px } Ở ví dụ này chỉ có một cạnh được khai báo, thì tất cả các cạnh đều có margin là 5px 2, Viết tắt đối với thuộc tính Border Thứ tự để viết tắt cho thuộc tính border như sau: border-width » border-style » border-color a, Viết tắt cho tất cả các cạnh .selector { border: 1px solid #cfcfcf } a, Viết tắt cho từng cạnh riêng biệt .selector { border-top: 1px solid #cfcfcf } 3, Viết tắt với thuộc tính Background Quy tắc viết với thuộc tính background như sau: Selector { background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] } Tuy nhiên bạn không cần khai báo đầy đủ các giá trị trên, nếu một trong các giá trị bị khuyết, thì nó sẽ lấy giá trị mặc định của thuộc tính đó. Ví dụ: .mybox{bakground: url (background.gif) no-repeat top right } 4, Viết tắt với thuộc tính list-style Thứ tự viết tắt với thuộc tính list-style như sau: list-style-type » list-style-position » list-style-image Ví dụ: ul li{list-style: circle inside url(icon.gif) } 5, Viết tắt với thuộc tính font Quy tắc viết tắt đối với thuộc tính Font Selector {font :[font-style] [font-variant] [font-weight] [font-size] [font-family] } Ví dụ: h1 { font-style: bold 12px arial} KẾT LUẬN Có thể bạn sẽ hơi bỡ ngỡ khi làm quen với cách viết tắt trong CSS, Nhưng khi bạn nắm bắt được thì nó thật sự hữu ích đối với bạn. Nếu có bất kỳ khó khăn gì, bạn có thể comment lại, tôi sẽ giải đáp những thắc mắc của bạn. Nguồn: ewebvn.com
