Khoá học này chia nhỏ các kiến thức cơ bản về CSS thành những phần rõ ràng, dễ hiểu. Trong vài học phần 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 đó trong dự án của mình. Sử dụng ngăn trình đơn bên cạnh biểu trưng "Tìm hiểu về CSS" để di chuyển giữa các mô-đun.
Bạn sẽ tìm hiểu những kiến thức cơ bản về CSS như mô hình hộp, tầng và độ cụ thể, 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, gradient, thuộc tính logic và tính kế thừa để trở thành một nhà phát triển giao diện người dùng toàn diện, sẵn sàng đảm nhận mọi giao diện người dùng.
Mỗi mô-đun đều có nhiều bản minh hoạ tương tác và bài tự đánh giá để bạn kiểm tra kiến thức của mình. Ngoài việc học qua đọc và xem bản minh hoạ, bạn cũng có thể học và tiếp tục mở rộng kiến thức bằng cách nghe một tập podcast đi kèm với mỗi chủ đề.
Khoá học này được tạo 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 toàn bộ loạt bài này để hiểu chung về CSS từ đầu đến cuối, hoặc bạn có thể dùng loạt bài 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 nói chung, hãy xem Tìm hiểu về HTML để biết cách viết mã đánh dấu và liên kết biểu định kiểu.
Sau đây là những điều bạn sẽ học được:
Mô hình hộp
Vì mọi thứ mà CSS hiển thị đều là một hộp, nên việc hiểu 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 chọn phần tử đó. CSS cung cấp cho bạn một số cách để thực hiện việc này và bạn có thể khám phá các cách đó trong mô-đun này.
Lồng ghép
Việc lồng các quy tắc kiểu CSS có thể giúp biểu định kiểu của bạn được sắp xếp gọn gàng hơn, dễ đọc hơn và dễ duy trì hơn.
Thác nướ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 sử dụng tiện ích nào và cách kiểm soát lựa chọn này.
Mức độ cụ thể
Mô-đun này sẽ xem xét kỹ hơn về tính cụ thể, một phần quan trọng của tầng.
Tính kế thừa
Một số thuộc tính CSS sẽ kế thừa nếu bạn không chỉ định giá trị cho các thuộc tính đó. Tìm hiểu cách hoạt động của tính năng này và cách tận dụng tính năng này trong mô-đun này.
Màu
Có một số cách để chỉ định màu trong CSS. Mô-đun này xem xét các giá trị màu thường dùng nhất.
Đơn vị đo kích thước
Tìm hiểu cách định cỡ các phần tử bằng CSS, làm việc với phương tiện linh hoạt của web.
Bố cục
Tổng quan về nhiều phương thức bố cục mà bạn phải chọn khi tạo bố cục thành phần hoặc trang.
Flexbox
Flexbox là một cơ chế bố cục được thiết kế để bố trí các nhóm mục theo một chiều. Tìm hiểu cách sử dụng trong mô-đun này.
Lưới
CSS Grid Layout cung cấp một hệ thống bố cục hai chiều, kiểm soát bố cục theo hàng và cột. Khám phá mọi nội dung trên lưới.
Thuộc tính logic
Các thuộc tính và giá trị logic, tương đối theo luồng được liên kết với luồng văn bản, chứ không phải hình dạng thực của màn hình. Tìm hiểu cách tận dụng phương pháp mới hơn này đối với CSS.
Thuộc tính tuỳ chỉnh
Thuộc tính tuỳ chỉnh hoặc biến CSS cho phép bạn sắp xếp và sử dụng lại các giá trị trong CSS, nhờ đó, kiểu của bạn sẽ linh hoạt hơn và dễ hiểu hơn.
Khoảng cách
Tìm hiểu cách chọn phương pháp giãn cách các phần tử phù hợp nhất cho phương pháp bố cục mà bạn đang sử dụng và thành phần bạn đang tạo.
Phần tử giả
Phần tử giả giống như việc thêm hoặc nhắm đến một phần tử bổ sung mà không cần thêm HTML. Họ có nhiều vai trò và bạn có thể tìm hiểu về họ trong mô-đun này.
Lớp giả
Các 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 hồi hoạt động đầu vào của người dùng, chẳng hạn như địa chỉ email không hợp lệ.
Đường viền
Đường viền tạo khung cho các hộp của bạn. 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 vào văn bản và các phần tử trong CSS. Tìm hiểu cách sử dụng từng lựa chọn và những việc mà các lựa chọn đó được thiết kế để thực hiện.
Tiêu điểm
Hiểu được tầm quan trọng của tiêu điểm trong các ứng dụng web. 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 trên trang của bạn hoạt động cho cả người dùng chuột và người dùng bàn phím để điều hướng.
Con trỏ và điểm đánh dấu
Con trỏ là một cách cần thiết để người dùng biết họ đang tương tác với nội dung nào. Trong mô-đun này, hãy tìm hiểu cách tạo kiểu cho con trỏ trong những trường hợp cụ thể.
Chỉ mục Z và ngữ cảnh xếp chồng
Tìm hiểu cách kiểm soát thứ tự xếp lớp các phần tử lên nhau bằng cách sử dụng chỉ mục z và ngữ cảnh xếp chồng.
Vị trí cố định
Tính năng định vị phần tử neo bằng CSS cung cấp một cách để khai báo vị trí của một phần tử tương ứng với một phần tử khác.
Cửa sổ bật lên và hộp thoại
Popover là mọi phần tử có thuộc tính popover và hữu ích cho nhiều mẫu tương tác, bao gồm cả chú giải công cụ, cảnh báo, thông báo và nhiều mẫu khác.
Hàm
CSS có một loạt các hàm tích hợp. 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 đó.
Đường dẫn, hình dạng, đường viền và mặt nạ
Đường dẫn, hình dạng, thao tác cắt và che phủ giúp nhà phát triển có thể kết xuất các hình dạng phức tạp trong CSS thông qua nhiều hàm có thể tạo ra trải nghiệm đáng nhớ cho người dùng.
Chuyển màu
Trong mô-đun này, bạn sẽ tìm hiểu cách sử dụng nhiều loại chuyển màu có trong CSS. Gradient có thể tạo ra vô số hiệu ứng hữu ích mà không cần đến các ứ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 phần tử tương tác, đồng thời tăng thêm sự thú vị và vui nhộn cho thiết kế của bạn. Tìm hiểu cách thêm và kiểm soát hiệu ứng hoạt ảnh bằng CSS.
Bộ lọc
Bộ lọc trong CSS có nghĩa là bạn có thể áp dụng các hiệu ứng mà bạn có thể chỉ nghĩ là có thể trong một ứng dụng đồ hoạ. Trong học phần này, bạn có thể khám phá những nội dung có sẵn.
Chế độ hoà trộn
Tạo hiệu ứng kết hợp bằng cách trộn hai hoặc nhiều lớp, đồng thời tìm hiểu cách tách biệt hình ảnh có nền trắng trong mô-đun này về chế độ hoà trộn.
Danh sách
Về cấu trúc, danh sách bao gồm một phần tử vùng chứa danh sách chứa đầy 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.
Bộ đếm
CSS cung cấp một số cách để kiểm soát bộ đếm trong danh sách cho các trường hợp sử dụng khác nhau. Trong học phần này, bạn sẽ tìm hiểu cách kiểm soát bộ đếm trong danh sách.
Chuyển đổi
Tìm hiểu cách xác định các hiệu ứng chuyển đổi giữa các trạng thái của một phần tử. Sử dụng hiệu ứng chuyển đổi để cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan cho hoạt động tương tác của người dùng.
Hiệu ứng chuyển đổi chế độ xem cho SPA
Hiệu ứng chuyển đổi chế độ xem giúp bạn thể hiện tính liên tục hoặc bối cảnh giữa các trang trong SPA.
Overflow
Tràn nội dung là cách bạn xử lý nội dung không vừa với kích thước gốc đã đặt. Trong mô-đun này, bạn sẽ tư duy sáng tạo và tìm hiểu cách tạo kiểu cho nội dung tràn.
Hình nền
Tìm hiểu cách tạo kiểu cho nền của các 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.
Truy vấn vùng chứa
Không giống như các truy vấn nội dung nghe nhìn, truy vấn vùng chứa cho phép bạn điều chỉnh các phần tử cụ thể hơn dựa trên kích thước và trạng thái của các phần tử mẹ hoặc vùng chứa.
Kết luận 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 học CSS chưa? Hãy bắt đầu nào.