Giới Thiệu CSS

Trung Nguyen
01/04/2020
7 min read

Nội dung chính của bài viết

CSS được sử dụng để kiểm soát phong cách của một tài liệu web một cách đơn giản và dễ dàng.

CSS là từ viết tắt của "Cascading Style Sheet". Hướng dẫn này bao gồm các phiên bản CSS1, CSS2 và CSS3 và cung cấp sự hiểu biết đầy đủ về CSS, bắt đầu từ những điều cơ bản đến các khái niệm nâng cao.

Tại sao phải học CSS?

Cascading Style Sheets được gọi tắt là CSS, là một ngôn ngữ thiết kế nhằm đơn giản hóa quá trình xử lý giao diện cho các trang web.

CSS là BẮT BUỘC cho sinh viên và các chuyên gia để trở thành một kỹ sư phần mềm tuyệt vời đặc biệt khi họ đang làm việc trong lĩnh vực thiết kế web. Tôi sẽ liệt kê một số lợi thế chính của việc học CSS:

Tạo trang web tuyệt đẹp: CSS xử lý giao diện của một trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột có kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, phiên bản hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như một loạt các hiệu ứng khác.
Trở thành một nhà thiết kế web: Nếu bạn muốn bắt đầu sự nghiệp như một nhà thiết kế web chuyên nghiệp thì HTML và CSS là những kỹ năng bắt buộc.
Kiểm soát web: CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ đối với việc trình bày một tài liệu HTML. Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML.
Tìm hiểu các ngôn ngữ khác: Một khi bạn hiểu cơ bản về HTML và CSS thì các công nghệ liên quan khác như javascript, php hoặc angular sẽ trở nên dễ hiểu hơn.

Chương trình đầu tiên bằng CSS

Để cho bạn có một chút hứng thú về CSS, tôi sẽ cung cấp cho bạn một chương trình CSS Hello World nho nhỏ:

<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
      <style>
      h1 {
         color: #36CFFF; 
      }
      </style>
   </head>	
   <body>
      <h1>Hello World!</h1>
   </body>	
</html>

Đây là kết quả:

Đối tượng độc giả

Hướng dẫn CSS này sẽ giúp cả sinh viên cũng như các chuyên gia những người muốn làm cho trang web của họ hoặc blog cá nhân hấp dẫn hơn.

Điều kiện tiên quyết

Bạn nên làm quen với:

Xử lý văn bản cơ bản bằng cách sử dụng bất kỳ trình soạn thảo văn bản.
Biết cách tạo thư mục và tập tin.
Biết cách điều hướng qua các thư mục khác nhau.
Duyệt web bằng các trình duyệt phổ biến như Chrome hoặc Firefox.
Biết thiết kế các trang web đơn giản bằng HTML hoặc XHTML.

Nếu bạn chưa quen với HTML và XHTML, thì chúng tôi khuyên bạn nên xem qua Hướng dẫn HTML hoặc Hướng dẫn XHTML của chúng tôi trước.

CSS là gì?

Cascading Style Sheets được viết tắt là CSS là một ngôn ngữ thiết kế đơn giản nhằm đơn giản hóa quá trình xử lý giao diện khi tạo các trang web.

CSS xử lý giao diện của một trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột có kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như một loạt các hiệu ứng khác.

CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ đối với việc trình bày một tài liệu HTML. Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML.

Ưu điểm của CSS

CSS giúp tiết kiệm thời gian: Bạn có thể viết CSS một lần và sau đó sử dụng lại trong nhiều trang HTML. Bạn có thể tạo phong cách cho từng thành phần HTML và áp dụng nó cho nhiều trang web mà bạn muốn.
Trang tải nhanh hơn: Nếu bạn đang sử dụng CSS, bạn không cần phải viết thuộc tính thẻ HTML mỗi lần. Chỉ cần viết một quy tắc CSS của một thẻ và áp dụng nó cho tất cả các lần xuất hiện của thẻ đó. Vì vậy, ít mã hơn có nghĩa là thời gian tải xuống nhanh hơn.
Bảo trì dễ dàng: Để thực hiện thay đổi phong cách cho toàn bộ trang web, bạn chỉ cần thay đổi phong cách trong CSS và tất cả các thành phần trong tất cả các trang web sẽ được cập nhật tự động.
Các phong cách vượt trội so với HTML: CSS có một loạt các thuộc tính rộng hơn nhiều so với HTML, vì vậy bạn có thể cung cấp cái nhìn tốt hơn nhiều cho trang HTML của mình so với các thuộc tính HTML.
Tương thích nhiều thiết bị: CSS cho phép nội dung được tối ưu hóa cho nhiều loại thiết bị. Bằng cách sử dụng cùng một tài liệu HTML, các phiên bản khác nhau của trang web có thể được trình bày cho các thiết bị từ máy tính đến tablet, điện thoại di động.
Các tiêu chuẩn web toàn cầu: Hiện có một số thuộc tính HTML đang bị phản đối và nó được khuyến nghị sử dụng CSS. Vì vậy, nên bắt đầu sử dụng CSS trong tất cả các trang HTML để làm cho chúng tương thích với các trình duyệt trong tương lai.

Ai tạo và duy trì CSS?

CSS được tạo và duy trì thông qua một nhóm người trong W3C được gọi là Nhóm làm việc CSS. Nhóm làm việc CSS tạo ra các tài liệu gọi là thông số kỹ thuật.

Khi một đặc điểm kỹ thuật đã được thảo luận và phê chuẩn chính thức bởi các thành viên W3C, nó sẽ trở thành một khuyến nghị.

Các thông số kỹ thuật được phê chuẩn này được gọi là khuyến nghị vì W3C không kiểm soát việc triển khai thực tế ngôn ngữ. Các công ty và tổ chức độc lập tạo ra phần mềm đó.

LƯU Ý: World Wide Web Consortium, hoặc W3C là một nhóm đưa ra các khuyến nghị về cách Internet hoạt động và cách thức phát triển.

Phiên bản CSS

Cascading Style Sheets phiên bản 1 (CSS1) được W3C đề xuất vào tháng 12 năm 1996. Phiên bản này mô tả ngôn ngữ CSS cũng như một mô hình định dạng trực quan đơn giản cho tất cả các thẻ HTML.

CSS2 được W3C đề xuất vào tháng 5 năm 1998 và được xây dựng trên CSS1. Phiên bản này thêm hỗ trợ cho các phiên bản dành riêng cho phương tiện truyền thông, ví dụ như máy in và thiết bị âm thanh, phông chữ có thể tải xuống, định vị thành phần và bảng.

CSS3 được W3C đề xuất vào tháng 5 năm 2001 dựa trên CSS2.1. Phiên bản này bổ sung các tính năng mới để giúp các nhà phát triển giải quyết một số vấn đề mà không cần đánh dấu phi ngữ nghĩa, tập lệnh phức tạp hoặc hình ảnh bổ sung.