Mẫu CSS
- Trang trước Mục lưới CSS
- Trang tiếp theo Kiểm tra CSS
Chọn phần tử CSS
Sử dụng CSS
Màu CSS
BG CSS
- Đặt màu nền cho trang
- Đặt màu nền cho các phần tử khác nhau
- Đặt hình ảnh làm nền cho trang
- Cách lặp lại hình ảnh nền chỉ theo hướng ngang
- Cách định vị hình ảnh nền
- Hình ảnh nền cố định (hình ảnh này sẽ không cuộn cùng với phần còn lại của trang)
- Tất cả các thuộc tính nền trong một dòng khai báo
- Ví dụ nền cao cấp
Biên CSS
- Đặt độ rộng viền cho bốn cạnh
- Đặt độ rộng viền bên trên
- Đặt độ rộng viền bên dưới
- Đặt độ rộng viền bên trái
- Đặt độ rộng viền bên phải
- Đặt样品 viền cho bốn cạnh
- Đặt样品 viền bên trên
- Đặt样品 viền bên dưới
- Đặt样品 viền bên trái
- Đặt樣式 viền bên phải
- Đặt màu viền cho bốn cạnh
- Đặt màu viền bên trên
- Đặt màu viền bên dưới
- Đặt màu viền bên trái
- Đặt màu viền bên phải
- Tất cả các thuộc tính viền trong một dòng khai báo
- Thêm góc tròn cho phần tử
- Đặt viền khác nhau cho mỗi cạnh
- Tất cả các thuộc tính viền bên trên trong một dòng khai báo
- Tất cả các thuộc tính viền bên dưới trong một dòng khai báo
- Tất cả các thuộc tính viền bên trái trong một dòng khai báo
- Tất cả các thuộc tính viền bên phải trong một dòng khai báo
Marge CSS
- Đặt lề ngoài khác nhau cho các cạnh của phần tử
- Sử dụng thuộc tính margin viết tắt với bốn giá trị
- Sử dụng thuộc tính margin viết tắt với ba giá trị
- Sử dụng thuộc tính margin viết tắt với hai giá trị
- Sử dụng thuộc tính margin viết tắt với một giá trị
- Đặt lề ngoài là auto để trung tâm hóa phần tử trong khối chứa
- Cho phép lề ngoài trái kế thừa từ phần tử cha
- Kết hợp lề ngoài
Khoảng cách trong CSS
- Đặt lề trong khác nhau cho các cạnh của phần tử
- Sử dụng lề trong viết tắt với bốn giá trị
- Sử dụng lề trong viết tắt với ba giá trị
- Sử dụng lề trong viết tắt với hai giá trị
- Sử dụng lề trong viết tắt với một giá trị
- Lề trong và chiều rộng phần tử (không đặt box-sizing)
- Lề trong và chiều rộng phần tử (đặt box-sizing)
- Đặt lề trái trong của phần tử
- Đặt lề phải trong của phần tử
- Đặt lề trên trong của phần tử
- Đặt lề dưới trong của phần tử
Chiều cao/Chiều rộng CSS
Mô hình hộp CSS
Cân đường CSS
Văn bản CSS
- Đặt màu văn bản của các phần tử khác nhau
- Đặt văn bản
- Xóa đường dưới của liên kết
- Trang trí văn bản
- Kiểm soát chữ cái viết hoa/chữ thường trong văn bản
- Cắn văn bản
- Định nghĩa khoảng cách ký tự
- Định nghĩa khoảng cách dòng
- Đặt hướng văn bản của phần tử
- Tăng khoảng cách giữa các ký tự
- Định nghĩa bóng văn bản của phần tử
- Tắt việc đổi hàng văn bản trong phần tử
- Đặt hình ảnh trong văn bản thẳng đứng
Font CSS
Ícon CSS
Liên kết CSS
Danh sách CSS
Bảng CSS
- Định nghĩa viền đen của table, th và td
- Sử dụng border-collapse
- Viền một bên của bảng
- Định nghĩa chiều rộng và chiều cao của bảng
- Đặt đối齐 ngang của nội dung
- Đặt đối齐 dọc của nội dung
- Định nghĩa lề nội bộ của th và td
- Chia ngang
- Bảng trôi
- Bảng dãy
- Định nghĩa màu viền bảng
- Đặt vị trí tiêu đề bảng
- Bảng phản hồi
- Tạo bảng đẹp
Hiển thị CSS
Định vị CSS
- Đặt phần tử dựa trên cửa sổ trình duyệt
- Đặt phần tử dựa trên vị trí bình thường của phần tử
- Định vị phần tử bằng giá trị tuyệt đối
- Định vị dính
- Lấp chồng phần tử
- Đặt hình dạng của phần tử
- Đặt giá trị pixel để xác định cạnh trên của hình ảnh
- Đặt giá trị pixel để xác định cạnh dưới của hình ảnh
- Đặt giá trị pixel cho cạnh trái của hình ảnh
- Đặt giá trị pixel cho cạnh phải của hình ảnh
- Định vị văn bản hình ảnh (góc trái trên)
- Định vị văn bản hình ảnh (góc phải trên)
- Định vị văn bản hình ảnh (góc phải dưới)
- Định vị văn bản hình ảnh (góc phải dưới)
- Định vị văn bản hình ảnh (canh giữa)
CSS Tràn
- Sử dụng overflow: visible - Nội dung tràn không bị cắt. Nó được vẽ bên ngoài khung của yếu tố.
- Sử dụng overflow: hidden - Nội dung tràn bị cắt, nội dung còn lại bị ẩn.
- Sử dụng overflow: scroll - Nội dung tràn bị cắt, nhưng thêm thanh cuộn để xem nội dung còn lại.
- Sử dụng overflow: auto - Nếu nội dung tràn, hãy thêm thanh cuộn để xem nội dung còn lại.
- Sử dụng overflow-x và overflow-y
CSS Trôi
- Sử dụng đơn giản thuộc tính float
- Hình ảnh có viền và cạnh ngoài trôi sang phải của đoạn văn
- Hình ảnh có tiêu đề trôi sang phải
- Cho phép ký tự đầu tiên của đoạn văn trôi sang trái
- Tắt trôi (sử dụng thuộc tính clear)
- Tắt trôi (sử dụng hack clearfix)
- Tạo khung trôi
- Tạo hình ảnh song song
- Tạo khung đồng cao (qua flexbox)
- Tạo menu ngang
- Tạo ví dụ về布局 web
CSS Inline-block
Canh các yếu tố CSS
- Canh giữa thông qua cạnh ngoài
- Canh giữa văn bản
- Canh giữa hình ảnh
- Thực hiện canh trái/phải thông qua position
- Thực hiện canh trái/phải thông qua position - Giải pháp tương thích nhiều trình duyệt
- Thực hiện canh trái/phải thông qua float
- Thực hiện canh trái/phải thông qua float - Giải pháp tương thích nhiều trình duyệt
- Thực hiện canh giữa dọc thông qua padding
- Canh giữa ngang và dọc
- Thực hiện canh giữa dọc thông qua line-height
- Thực hiện canh giữa ngang và dọc thông qua position
Kết hợp CSS
pseudo-class CSS
pseudo-element CSS
Tạo nội dung CSS
Độ trong suốt CSS
Thanh điều hướng CSS
- Thanh dẫn dọc có phong cách đầy đủ
- Thanh dẫn ngang có phong cách đầy đủ
- Thanh dẫn cố định theo hướng dọc chiếm toàn cao
- Thanh dẫn cố định theo hướng ngang
- Thanh dẫn dính (không hoạt động trong IE hoặc Edge 15 và các phiên bản trước)
- Thanh dẫn đầu tiên phụ thuộc vào kích thước màn hình
- Thanh dẫn phụ thuộc vào kích thước màn hình
Danh sách cuộn CSS
Thư viện hình ảnh CSS
Image sprite CSS
Chọn phần tử thuộc tính CSS
- Chọn tất cả các phần tử <a> có thuộc tính target
- Chọn tất cả các phần tử <a> có thuộc tính target="_blank"
- Chọn tất cả các phần tử có thuộc tính title chứa danh sách từ phân cách bằng dấu cách, trong đó một từ là "flower"
- Chọn tất cả các phần tử có giá trị thuộc tính class bắt đầu bằng "top" (phải là từ khóa toàn bộ)
- Chọn tất cả các phần tử có giá trị thuộc tính class bắt đầu bằng "top" (không phải từ khóa toàn bộ)
- Chọn tất cả các phần tử có giá trị thuộc tính class kết thúc bằng "test"
- Chọn tất cả các phần tử có giá trị thuộc tính class chứa "te"
Hình thức CSS
- Khu vực nhập liệu chiếm toàn rộng
- Khu vực nhập liệu được lấp đầy
- Khu vực nhập liệu có viền
- Khu vực nhập liệu có viền dưới
- Khu vực nhập liệu có màu
- Khu vực nhập liệu được tập trung
- Khu vực nhập liệu được tập trung 2
- Khu vực nhập liệu có biểu tượng
- Hộp tìm kiếm có hiệu ứng hoạt hình
- Đặt phong cách hộp văn bản
- Đặt phong cách menu chọn
- Đặt phong cách nút
- Biểu mẫu tương ứng
Lưới trang web CSS
Góc bo tròn CSS
Hình ảnh biên CSS
BG CSS
Dịch chuyển màu CSS
- Dải màu thẳng - từ trên xuống
- Dải màu thẳng - từ trái qua phải
- Dải màu thẳng - đường chéo
- Dải màu thẳng - góc đặc định
- Dải màu thẳng - nhiều điểm màu
- Dải màu thẳng - màu sắc cầu vồng + văn bản
- Dải màu thẳng - độ trong suốt
- Dải màu thẳng - dải màu thẳng lặp lại
- Dải màu tia ngang - các điểm màu phân bố đều
- Dải màu tia ngang - các điểm màu cách nhau khác nhau
- Dải màu tia ngang - thiết lập hình dạng
- Dải màu tia ngang - từ khóa kích thước khác nhau
- Dải màu tia ngang - dải màu tia ngang lặp lại
Hiệu ứng bóng CSS
- Hiệu ứng bóng đơn giản
- Thêm màu sắc vào bóng
- Thêm hiệu ứng mờ vào bóng
- Text trắng với bóng đen
- Bóng phát sáng neon đỏ
- Bóng phát sáng neon đỏ và xanh
- Text trắng với bóng đen, xanh và xanh đậm
- Thêm box-shadow đơn giản vào phần tử
- Thêm màu sắc vào box-shadow
- Thêm màu sắc và hiệu ứng mờ vào box-shadow
- Tạo类似于纸质卡片(text)
- Tạo类似于纸质卡片(hình ảnh Polaroid)
Hiệu ứng văn bản CSS
Chữ web CSS
CSS Chuyển đổi 2D
- translate() - xóa phần tử từ vị trí hiện tại
- rotate() - xoay theo chiều kim đồng hồ phần tử
- rotate() - xoay ngược chiều kim đồng hồ phần tử
- scale() - Tăng kích thước phần tử
- scale() - Giảm kích thước phần tử
- skewX() - Nghiêng phần tử theo trục X
- skewY() - Nghiêng phần tử theo trục Y
- skew() - Nghiêng phần tử theo trục X và Y
- matrix() - Quay, phóng to, di chuyển và nghiêng phần tử
CSS Chuyển đổi 3D
CSS Chuyển đổi
- Transition - Thay đổi chiều rộng của một phần tử
- Transition - Thay đổi chiều rộng và chiều cao của một phần tử
- Định nghĩa đường cong tốc độ khác nhau cho transition
- Định nghĩa thời gian chậm trễ cho transition
- Thêm变换 vào hiệu ứng transition
- Định nghĩa tất cả các thuộc tính transition trong một thuộc tính viết tắt
CSS Hoạt hình
- Kết hợp animation với một phần tử
- Animation - Thay đổi màu nền của một phần tử
- Animation - Thay đổi màu nền và vị trí của một phần tử
- Animation với thời gian chậm trễ
- Chạy animation ba lần trước khi animation dừng
- Animation hoạt động mãi mãi
- Animation hoạt động từ hướng ngược lại
- Animation hoạt động thay đổi
- Đường cong tốc độ animation
- Thuộc tính viết tắt của animation
CSS Công cụ chú thích
Hình ảnh có phong cách CSS
- Hình ảnh bo tròn
- Hình ảnh tròn
- Tóm tắt hình ảnh
- Tóm tắt hình ảnh như liên kết
- Hình ảnh response
- Text hình ảnh (góc trên trái)
- Text hình ảnh (góc trên phải)
- Text hình ảnh (góc dưới trái)
- Text hình ảnh (góc trên phải)
- Text hình ảnh (giữa)
- Hình ảnh Polaroid
- Bộ lọc hình ảnh xám
- Cao cấp - Hình ảnh mô đun được thực hiện thông qua CSS và JavaScript
CSS Object-fit
CSS Nút
CSS Phân trang
CSS Đa cột
- Tạo nhiều cột
- Định nghĩa khoảng cách giữa các cột
- Định nghĩa kiểu của quy tắc giữa các cột
- Định nghĩa độ rộng của quy tắc giữa các cột
- Định nghĩa màu sắc của quy tắc giữa các cột
- Định nghĩa độ rộng, kiểu và màu sắc của quy tắc giữa các cột
- Định nghĩa phần tử nên chiếm bao nhiêu cột
- Định nghĩa độ rộng tốt nhất cho cột
CSS Giao diện người dùng
CSS Biến
Box Sizing CSS
CSS hộp弹力
- Hộp弹力 với ba mục弹力
- Hộp弹力 với ba mục弹力 - hướng rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Sắp xếp mục弹力
- Margin-right: auto;
- Margin: auto; = Căn giữa hoàn hảo
- Đặt align-self trên mục弹力
- Định nghĩa độ dài của mục弹力, so với phần còn lại của mục弹力
- Tạo thư viện hình ảnh tương ứng với hộp弹力
- Tạo trang web tương ứng với hộp弹力
Truy vấn truyền thông CSS
Truy vấn truyền thông CSS - Các mẫu khác
- Đặt màu nền khác nhau dựa trên chiều rộng màn hình
- Menu điều hướng response
- Dùng float để tạo cột response
- Dùng box flex để tạo cột response
- Giấu phần tử bằng truy vấn truyền thông
- Kích thước chữ response
- Thư viện hình ảnh response
- Trang web response
- Thay đổi bố cục trang web dựa trên hướng trình duyệt
- Chiều rộng nhỏ nhất đến chiều rộng lớn nhất
Thiết kế trang web response CSS
Lưới CSS
- Trang trước Mục lưới CSS
- Trang tiếp theo Kiểm tra CSS