Chín ưu điểm của việc sử dụng CSS

25/03/2010 | 1586 views

Khi những website đầu tiên ra đời cách đây gần 20 năm, các nhàthiết kế web thường dùng các thẻ HTML để phân bố các mảng nội dung trên webpage. Tuy vậy, công nghệ web phát triển nhanh chóng vàsự cập nhật mang tính liên tục vàlinh động hơn rất nhiều của nội dung website đã khiến việc dàn trang bằng thẻ HTML bất tiện. Công nghệ CSS (Cascading stylesheet – tạm dịch làbảng các kiểu định dạng xếp chồng) được W3C đưa ra vào năm 1996 làmột giải pháp tối ưu cho vấn đề này.
CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó như fonts (phông chữ), color (màu sắc), margins (canh lề), background (ảnh nền/ màu nền)… CSS đã phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS (có định dạng là“*.css”) có thể cho phép bạn quản lí định dạng layout trên nhiều trang khác nhau vàcó thể sử dụng lại nhiều lần. FPTARENA sẽ chia sẻ với bạn chín ưu điểm của việc sử dụng CSS:
1. Tiết kiệm băng thông (bandwith)
Các nhàthiết kế ưa thích sử dụng CSS để định dạng cấu trúc của webpage hơn dạng table layout vì nó giúp giảm dung lượng webpage, qua đó tiết kiệm băng thông một cách đáng kể. Khi sử dụng CSS, các bạn chú ý làExternal CSS (CSS ngoài) ưu việt hơn cả. Thay vì phải gõ đi gõ lại nhiều lần một thuộc tính (property name), các bạn hãy định dạng nó trong một file css rồi liên kết về webpage của mình. File CSS sẽ được tải duy nhất một lần rồi được lưu trong bộ nhớ cache. Do đó, webpage sẽ được tải về nhanh hơn và tiết kiệm bandwith cho host.
2. Kết hợp và làm tăng sức mạnh cho HTML
CSS ra đời năm 1997 vàtạo ra một cuộc cách mạng lớn trong việc thiết kế web. Trước đây các nhàthiết kế web có thể chỉ sử dụng HTML đơn thuần nhưng giờ CSS đã trở thành điều không thể thiếu trong bất kỳ webpage nào. CSS kết hợp với HTML tạo ra webpage có tính kỹ thuật mạnh hơn vàgiao diện đẹp hơn. Ngoài ra, trong một trang HTML của bạn sẽ có rất nhiều các thành phần khác nhau như BODY, HEADER, DIV, HEADLINE… Khi bạn sử dụng CSS, nó sẽ giúp bạn sắp xếp các thành phần này một cách khoa học hơn, logic hơn vàdễ theo dõi hơn.
3. Có thể “đặt” các đối tượng ở bất cứ vị trí nào trên webpage
Nếu định dạng cấu trúc webpage bằng table layout, các nhàthiết kế web sẽ gặp khó khăn trong việc phân bố các mảng.
Thứ nhất làcấu trúc bảng biểu khá cứng nhắc, các kích thước chiều ngang vàchiều dọc bị ảnh hưởng bởi nhau nên khó thay đổi vàcập nhật nội dung webpage.
Thứ hai làcác đối tượng chèn vào bảng đều độc lập vàkhông thể “đè” lên nhau được. CSS giúp bạn có thể “đặt” các đối tượng text, ảnh, form, bảng, flash… ở bất cứ vị trí nào, dễ dàng trong việc phân bố các mảng vàgiảm rủi ro trong việc bảo trì trang web.

Css property name – các thuộc tính được sử dụng trong cú pháp của Css
4. CSS tương thích với hầu hết các trình duyệt
CSS được hỗ trợ bởi hầu hết các trình duyệt. Khi xem webpage trên các trình duyệt khác nhau, nội dung hiển thị vàgiao diện webpage được thể hiện khá nhất quán. (Vẫn có những trường hợp thuộc tính này được hỗ trợ bởi trình duyệt này nhưng không được hỗ trợ bởi trình duyệt khác. Người thiết kế web phải xác định rõ đối tượng người dùng tiềm năng đa phần sẽ sử dụng loại trình duyệt nào vàrút ra những kinh nghiệm cho bản thân trong quá trình kiểm tra tính accessibility cho từng trình duyệt)
5. Hỗ trợ cho việc in ấn webpage
CSS giúp tạo ra một giao diện thân thiện vàdễ dàng in ấn. Các thuộc tính màu sắc trong CSS hỗ trợ tên màu hoặc mã màu dưới dạng mã hệ thập lục phân (hexadecimal code), giúp thể hiện màu sắc chính xác vàan toàn.
6. Hỗ trợ tối đa việc tùy biến webpage
Ngày nay, một số website có tính năng cho phép người dùng thay đổi layout hoặc giao diện của webpage màkhông làm ảnh hưởng tới nội dung. Những thao tác thay đổi màu nền, ảnh nền, font chữ… của người dùng sẽ được ghi vào file css vàrất linh hoạt trong việc cập nhật thay đổi.
7. Hỗ trợ các công cụ tìm kiếm
Với một nhàthiết kế web ít kinh nghiệm bao giờ webpage cũng xuất hiện những đoạn code HTML thừa. CSS sẽ giúp bạn loại bỏ code thừa, những đoạn code được lặp lại nhiều lần như thẻ <font>, <p> <FONT size=+0>… hay các thuộc tính không quan trọng được tự động sinh ra bởi công cụ lập trình… Điều này giúp tăng tính accessibility của trang web vàhỗ trợ tốt hơn cho các công cụ tìm kiếm (search engine).
8. Giúp các webpage có sự đồng bộ tuyệt đối, dễ dàng nâng cấp giao diện
Cho dù làwebsite của bạn có 100 trang hay 1000 trang thì bạn chỉ phải định dạng cho nó trong một file CSS duy nhất. Khi bạn muốn nâng cấo giao diện website, bạn chỉ phải sửa một lần duy nhất file CSS, toàn bộ giao diện các webpage sẽ tự động thay đổi theo.
Bài: LinhTH

Leave a Reply

avatar
  Subscribe  
Notify of