CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản. HTML không được thiết kế để gắn tag để giúp định dạng trang web. Bạn chỉ có thể dùng nó để “đánh dấu” lên site.

Những tag như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiều rắc rối cho lập trình viên. Vì website có nhiều font khác nhau, màu nền và phong cách khác nhau. Để viết lại code cho trang web là cả một quá trình dài, cực nhọc. Vì vậy, CSS được tạo bởi W3C là để giải quyết vấn đề này.

Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác.

Ưu điểm của CSS là gì

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>,

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