Phương pháp viết mã CSS

[hetchiunoi]

Nguồn : website :
http://www.letunglam.com


Phương pháp viết mã CSS








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:
1. Chú thích cho mã CSS:
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;PLAIN TEXT
CSS:

1. /*------------------------
   
2. Screen Stylesheet
   
3. version: 1.0
   
4. date: 01/03/07
   
5. author: [your email]
   
6. email: [you at domain dot com]
   
7. website: [your domain]
   
8. version history: [location of file]
   
9. ---------------------*/
   

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:PLAIN TEXT
CSS:

1. /* Import other stylesheets
   
2. ---------------------------------------*/
   
3. @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.PLAIN TEXT
CSS:

1. /* Header
   
2. ---------------------------------------*/
   
3. /* Navigation
   
4. ---------------------------------------*/
   
5. /* Footer
   
6. ---------------------------------------*/
   
7. /* Homepage
   
8. ---------------------------------------*/
   
9. /* Your template
   
10. ---------------------------------------*/
    

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:PLAIN TEXT
CSS:

1. *{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.[PLAIN TEXT
CSS:

1. /* Forms
   
2. ---------------------------------------*/
   
3. input.text
   
4. {
   
5. padding: 3px;
   
6. border: 1px solid #999999;
   
7. }
   

PLAIN TEXT
CSS:

1. /* Tables
   
2. ---------------------------------------*/
   
3. table
   
4. {
   
5. border-spacing: 0;
   
6. border-collapse: collapse;
   
7. }
   
8. </li>
   
9. td
   
10. {
    
11. text-align: left;
    
12. font-weight: normal;
    
13. }
    

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. :face:

[CPFounder]

vui lòng ghi rõ nghuồn gốc vào bạn nhé.

[CPFounder]

Cộng 5 đ

[Sponsored content]