CSS là công nghệ trình bày chính được sử dụng trong thiết kế trang web.
CSS là viết tắt của Cascading Style Sheets. CSS là ngôn ngữ biểu định kiểu tiêu chuẩn được sử dụng để mô tả cách trình bày (nghĩa là bố cục và định dạng) của các trang web.
Trước CSS, gần như tất cả các thuộc tính trình bày của tài liệu HTML được chứa trong phần đánh dấu HTML (cụ thể là bên trong các thẻ HTML); tất cả các màu phông chữ, kiểu nền, sắp xếp phần tử, đường viền và kích thước phải được mô tả rõ ràng trong HTML.
Kết quả là, việc phát triển các trang web lớn trở thành một quá trình lâu dài và tốn kém, vì thông tin về phong cách được thêm nhiều lần vào từng trang của trang web.
Để giải quyết vấn đề này, CSS đã được giới thiệu vào năm 1996 bởi World Wide Web Consortium (W3C), tổ chức này cũng duy trì tiêu chuẩn của nó. CSS được thiết kế để cho phép tách biệt phần trình bày và nội dung. Giờ đây, các nhà thiết kế web có thể di chuyển thông tin định dạng của các trang web sang một biểu định kiểu riêng, điều này dẫn đến việc đánh dấu HTML đơn giản hơn đáng kể và khả năng bảo trì tốt hơn.
CSS3 là phiên bản mới nhất của đặc tả CSS. CSS3 bổ sung một số tính năng và cải tiến kiểu dáng mới để nâng cao khả năng trình bày web.
Lưu ý: Hướng dẫn CSS của chúng tôi sẽ giúp bạn tìm hiểu các nguyên tắc cơ bản của ngôn ngữ CSS3 mới nhất, từ các chủ đề cơ bản đến nâng cao theo từng bước. Nếu bạn là người mới bắt đầu, hãy bắt đầu với phần cơ bản và dần dần tiến lên bằng cách học một chút mỗi ngày.
Bạn có thể làm gì với CSS
Có rất nhiều điều bạn có thể làm với CSS.
- Bạn có thể dễ dàng áp dụng các quy tắc kiểu giống nhau trên nhiều phần tử.
- Bạn có thể kiểm soát việc trình bày nhiều trang của một trang web bằng một biểu định kiểu duy nhất.
- Bạn có thể trình bày cùng một trang khác nhau trên các thiết bị khác nhau.
- Bạn có thể tạo kiểu cho các trạng thái động của các phần tử như di chuột, tiêu điểm, v.v. điều này không thể thực hiện được bằng cách khác.
- Bạn có thể thay đổi vị trí của một thành phần trên trang web mà không cần thay đổi đánh dấu.
- Bạn có thể thay đổi cách hiển thị của các phần tử HTML hiện có.
- Bạn có thể chuyển đổi các yếu tố như tỷ lệ, xoay, nghiêng, v.v. trong không gian 2D hoặc 3D.
- Bạn có thể tạo hoạt ảnh và hiệu ứng chuyển tiếp mà không cần sử dụng bất kỳ JavaScript nào.
- Bạn có thể tạo phiên bản thân thiện với bản in của các trang web của mình.
Danh sách không kết thúc ở đây, còn rất nhiều điều thú vị khác mà bạn có thể làm với CSS. Bạn sẽ tìm hiểu về tất cả chúng một cách chi tiết trong các chương sắp tới.
Ưu điểm của việc sử dụng CSS
Ưu điểm lớn nhất của CSS là nó cho phép tách phong cách và bố cục khỏi nội dung của tài liệu. Dưới đây là một số lợi thế khác, tại sao người ta nên bắt đầu sử dụng CSS?
- CSS Tiết kiệm rất nhiều thời gian — CSS cung cấp rất nhiều tính linh hoạt để thiết lập các thuộc tính kiểu dáng của một phần tử. Bạn có thể viết CSS một lần; và sau đó cùng một mã có thể được áp dụng cho các nhóm phần tử HTML và cũng có thể được sử dụng lại trong nhiều trang HTML.
- Bảo trì dễ dàng — CSS cung cấp một phương tiện dễ dàng để cập nhật định dạng của tài liệu và để duy trì tính nhất quán trên nhiều tài liệu. Bởi vì nội dung của toàn bộ tập hợp các trang web có thể được kiểm soát dễ dàng bằng cách sử dụng một hoặc nhiều biểu định kiểu.
- Trang tải nhanh hơn — CSS cho phép nhiều trang chia sẻ thông tin định dạng, giúp giảm độ phức tạp và sự lặp lại trong nội dung cấu trúc của tài liệu. Nó làm giảm đáng kể kích thước truyền tệp, giúp tải trang nhanh hơn.
- Phong cách vượt trội so với HTML — CSS có khả năng trình bày rộng hơn nhiều so với HTML và cung cấp khả năng kiểm soát tốt hơn nhiều đối với bố cục trang web của bạn. Vì vậy, bạn có thể cung cấp giao diện tốt hơn cho các trang web của mình so với các phần tử và thuộc tính trình bày HTML.
- Khả năng tương thích với nhiều thiết bị — CSS cũng cho phép các trang web được tối ưu hóa cho nhiều loại thiết bị hoặc phương tiện. Sử dụng CSS, cùng một tài liệu HTML có thể được trình bày theo các kiểu xem khác nhau cho các thiết bị hiển thị khác nhau như máy tính để bàn, điện thoại di động, v.v.
Mẹo: Hiện tại, hầu hết các thuộc tính HTML không được dùng nữa và không nên sử dụng. Vì vậy, bạn nên sử dụng càng nhiều CSS càng tốt để tăng khả năng thích ứng cho trang web của mình và làm cho chúng tương thích với các trình duyệt trong tương lai.
Hướng dẫn này bao gồm những gì
Loạt bài hướng dẫn CSS này bao gồm tất cả các nguyên tắc cơ bản của CSS, bao gồm ý tưởng về bộ chọn, phương pháp đặt màu và nền, cách định dạng phông chữ và văn bản, tạo kiểu cho các thành phần giao diện người dùng như siêu liên kết, danh sách, bảng, v.v. cũng như khái niệm về mô hình hộp CSS, v.v.
Khi bạn cảm thấy thoải mái với những kiến thức cơ bản, bạn sẽ chuyển sang cấp độ tiếp theo giải thích cách đặt kích thước và căn chỉnh các phần tử, phương pháp định vị các phần tử trên trang web, sử dụng các họa tiết hình ảnh, cũng như khái niệm về tương đối và đơn vị tuyệt đối, mô hình định dạng trực quan, hiển thị và khả năng hiển thị, lớp, lớp giả và thành phần, biểu định kiểu phụ thuộc phương tiện, v.v.
Cuối cùng, bạn sẽ khám phá một số tính năng nâng cao được giới thiệu trong CSS3 như màu chuyển sắc, hiệu ứng bóng đổ, chuyển đổi 2D và 3D, độ trong suốt của alpha, cũng như phương pháp tạo hiệu ứng chuyển tiếp và hoạt ảnh, bố cục linh hoạt, hiệu ứng bộ lọc, khái niệm về phương tiện truy vấn, và nhiều hơn nữa.
Mẹo: Mỗi chương trong hướng dẫn này chứa rất nhiều ví dụ trong thế giới thực mà bạn có thể thử và kiểm tra bằng trình chỉnh sửa trực tuyến. Những ví dụ này sẽ giúp bạn hiểu rõ hơn về khái niệm hoặc chủ đề. Nó cũng chứa các cách giải quyết thông minh cũng như các mẹo hữu ích và ghi chú quan trọng.
