Khoá học này chia nhỏ các nguyên tắc cơ bản về CSS thành những phần rõ ràng và dễ hiểu. Trong vài mô-đun tiếp theo, bạn sẽ tìm hiểu cách hoạt động của các khía cạnh cốt lõi của CSS và cách sử dụng hiệu quả các khía cạnh này trong các dự án của bạn. Sử dụng ngăn trình đơn bên cạnh biểu trưng "Tìm hiểu CSS" để di chuyển trong các mô-đun.
Bạn sẽ tìm hiểu kiến thức cơ bản về CSS như mô hình hộp, tầng và độ đặc trưng, flexbox, lưới và chỉ mục z. Bạn cũng sẽ tìm hiểu về các hàm, loại màu, độ dốc, thuộc tính logic và tính kế thừa để giúp bạn trở thành một nhà phát triển giao diện người dùng đầy đủ, sẵn sàng tiếp cận mọi giao diện người dùng.
Mỗi học phần có đầy đủ các bản minh hoạ và bài tự đánh giá có tính tương tác để bạn kiểm tra kiến thức của mình. Ngoài việc tìm hiểu qua việc đọc và minh hoạ, chúng tôi cũng cung cấp một tập podcast đi kèm với từng chủ đề. Đây cũng là một cách để bạn tìm hiểu và tiếp tục mở mang kiến thức.
Khoá học này dành cho cả nhà phát triển CSS mới bắt đầu và nhà phát triển CSS nâng cao. Bạn có thể xem kỹ loạt video từ đầu đến cuối để hiểu rõ về CSS từ trên xuống dưới, hoặc bạn có thể dùng tài liệu này làm tài liệu tham khảo cho các chủ đề tạo kiểu cụ thể. Đối với những người mới làm quen với việc phát triển web, hãy tham khảo nội dung Tìm hiểu HTML để tìm hiểu cách viết mã đánh dấu và liên kết các biểu định kiểu của bạn.
Sau đây là những nội dung bạn sẽ tìm hiểu:
Kiểu hộp
Vì mọi nội dung CSS hiển thị đều là một hộp, nên việc hiểu rõ cách hoạt động của Mô hình hộp CSS là nền tảng cốt lõi của CSS.
Bộ chọn
Để áp dụng CSS cho một phần tử, bạn cần phải chọn phần tử đó. CSS cung cấp cho bạn nhiều cách để thực hiện việc này. Bạn có thể tìm hiểu các cách đó trong học phần này.
Thác thác
Đôi khi, hai hoặc nhiều quy tắc CSS cạnh tranh có thể áp dụng cho một phần tử. Tìm hiểu cách trình duyệt chọn dữ liệu để sử dụng và cách kiểm soát lựa chọn này.
Tính cụ thể
Học phần này sẽ tìm hiểu kỹ hơn về tính cụ thể, một phần quan trọng của dòng thác.
Tính kế thừa
Một số tài sản CSS sẽ kế thừa nếu bạn không chỉ định giá trị cho các tài sản đó. Hãy tìm hiểu cách hoạt động và cách khai thác tối đa lợi ích trong học phần này.
Màu
Có một số cách để chỉ định màu trong CSS. Mô-đun này kiểm tra các giá trị màu thường dùng nhất.
Đơn vị kích thước
Tìm hiểu cách định kích thước các phần tử bằng CSS, hoạt động với phương tiện linh hoạt của web.
Bố cục
Thông tin tổng quan về các phương thức bố cục mà bạn phải chọn khi tạo một thành phần hoặc bố cục trang.
Flexbox
Hộp linh hoạt là một cơ chế bố cục được thiết kế để sắp xếp các nhóm mục trong một chiều. Hãy tìm hiểu cách sử dụng công cụ này trong học phần này.
Lưới
CSS Grid Layout cung cấp một hệ thống bố cục 2 chiều, kiểm soát bố cục trong các hàng và cột. Khám phá mọi thứ trong lưới.
Thuộc tính logic
Thuộc tính và giá trị logic, tương đối với dòng dữ liệu được liên kết với dòng văn bản chứ không phải hình dạng vật lý của màn hình. Tìm hiểu cách tận dụng phương pháp mới này của CSS.
Khoảng trắng
Tìm hiểu cách chọn phương thức giãn cách tốt nhất cho các phần tử cho phương thức bố cục mà bạn đang sử dụng và thành phần bạn đang xây dựng.
Yếu tố giả
Phần tử giả giống như là thêm hoặc nhắm mục tiêu một phần tử bổ sung mà không phải thêm HTML khác. Họ có nhiều vai trò khác nhau và bạn có thể tìm hiểu về các vai trò đó trong mô-đun này.
Lớp học giả
Lớp giả cho phép bạn áp dụng CSS dựa trên các thay đổi về trạng thái. Điều này có nghĩa là thiết kế của bạn có thể phản ứng với hoạt động đầu vào của người dùng, chẳng hạn như một địa chỉ email không hợp lệ.
Đường viền
Đường viền tạo khung cho hộp. Tìm hiểu cách thay đổi kích thước, kiểu và màu của đường viền bằng CSS.
Bóng
Có một số cách để thêm bóng cho văn bản và phần tử trong CSS. Tìm hiểu cách sử dụng mỗi tuỳ chọn và các nhiệm vụ được thiết kế.
Tiêu điểm
Hiểu được tầm quan trọng của sự tập trung trong các ứng dụng web của bạn. Bạn sẽ tìm hiểu cách quản lý tiêu điểm và cách đảm bảo đường dẫn qua trang của bạn phù hợp với cả người dùng chuột và bàn phím để di chuyển.
Ngữ cảnh chỉ mục Z và xếp chồng
Tìm hiểu cách kiểm soát thứ tự các thành phần xếp chồng lên nhau bằng cách sử dụng chỉ mục z và ngữ cảnh xếp chồng.
Hàm
CSS có sẵn nhiều hàm. Hãy tìm hiểu về một số chức năng chính và cách sử dụng các chức năng đó.
Chuyển màu
Trong mô-đun này, bạn sẽ tìm hiểu cách sử dụng các loại chuyển màu có sẵn trong CSS. Hiệu ứng chuyển màu có thể tạo ra rất nhiều hiệu ứng hữu ích mà không cần dùng ứng dụng đồ hoạ để tạo hình ảnh.
Ảnh động
Ảnh động là một cách hiệu quả để làm nổi bật các yếu tố tương tác, đồng thời tạo ra sự hứng thú và thú vị cho các thiết kế của bạn. Tìm hiểu cách thêm và kiểm soát hiệu ứng ảnh động bằng CSS.
Bộ lọc
Với các bộ lọc trong CSS, bạn có thể áp dụng những hiệu ứng mà có thể bạn chỉ nghĩ là có thể thực hiện trong một ứng dụng đồ hoạ. Trong học phần này, bạn có thể khám phá các sản phẩm được cung cấp.
Chế độ trộn
Tạo hiệu ứng bố cục bằng cách trộn hai hoặc nhiều lớp và tìm hiểu cách tách riêng một hình ảnh có nền trắng trong mô-đun này về chế độ kết hợp.
Danh sách
Danh sách (theo cấu trúc) bao gồm một phần tử vùng chứa danh sách chứa các mục trong danh sách. Trong mô-đun này, bạn sẽ tìm hiểu cách tạo kiểu cho tất cả các phần của danh sách.
Chuyển đổi
Tìm hiểu cách xác định hiệu ứng chuyển đổi giữa các trạng thái của một phần tử. Sử dụng các hiệu ứng chuyển đổi để cải thiện trải nghiệm người dùng bằng cách đưa ra phản hồi bằng hình ảnh khi người dùng tương tác.
Luồng tràn
Mục bổ sung là cách bạn xử lý nội dung không phù hợp với kích thước tệp mẹ đã đặt. Trong học phần này, bạn sẽ suy nghĩ sáng tạo và tìm hiểu cách định kiểu cho nội dung tràn.
Thông tin cơ bản
Tìm hiểu cách tạo kiểu cho nền của hộp bằng CSS.
Văn bản và kiểu chữ
Tìm hiểu cách tạo kiểu cho văn bản trên web.
Tổng kết và các bước tiếp theo
Các tài nguyên khác giúp bạn thực hiện các bước tiếp theo.
Vậy bạn đã sẵn sàng tìm hiểu về CSS chưa? Hãy bắt đầu nào.