Trang trí giao diện bằng CSS
Đã giới thiệu| English | Ý nghĩa |
|---|---|
| padding/ˈpædɪŋ/ | lề trong |
| border/ˈbɔːdə/ | viền |
| CSS/ˌsiː es ˈes/ | bảng样式 chồng lớp |
| selector/sɪˈlektə/ | trích chọn |
| declaration/ˌdekləˈreɪʃn/ | biểu thức |
| the box model/ðə bɒks ˈmɒdl/ | mô hình hộp |
| margin/ˈmɑːdʒɪn/ | lề ngoài |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | thiết kế thích ứng |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | truy vấn phương tiện |
Một thẻ card kích thước 320-pixel vẫn tràn ra ngoài màn hình 320-pixel
- Chiều rộng được khai báo của thẻ không phải lúc nào cũng là chiều rộng tổng thể. Padding và border có thể thêm khoảng trống bên ngoài độ rộng nội dung.
- CSS áp dụng các quy tắc trình bày. Một selector chọn phần tử; một declaration cung cấp một thuộc tính và giá trị, ví dụ như
color: navy.
Đưa ra một lý do thực tế để giữ các quy tắc trình bày có thể tái sử dụng trong một tập tin style.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Ví dụ: “Một tập tin style dùng chung cho phép chúng tôi cập nhật các thẻ phù hợp một cách nhất quán mà không cần chỉnh sửa từng phần tử HTML.”
Tính đến mọi phần của box
- Box model bao gồm content, padding, border và margin. Padding và border nằm bên trong box được vẽ; margin tách nó ra khỏi các phần tử lân cận.
- Với
content-box, width 320 px, padding 16 px ở cả hai bên và borders 2 px ở cả hai bên tạo thành 356 px trước khi có margins. Vớiborder-box,声明 width 320 px đã bao gồm cả padding và border đó.
Sắp xếp các vùng của mô hình hộp từ nội dung ra bên ngoài.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Độ chèn (padding) và viền (border) bao quanh nội dung; khoảng cách (margin) tách hộp khỏi các phần tử lân cận.
Với content-box, chiều rộng nội dung là 320 px, padding trái/phải là 16 px mỗi bên và border trái/phải là 2 px mỗi bên. Chiều rộng trước khi margin là bao nhiêu, tính theo pixel?
Difficulty 2/5 · 140 coins + a small bonus on first completion today
320 + 16 + 16 + 2 + 2 = 356 px.
Làm cho chiều rộng linh hoạt
- Responsive design điều chỉnh nội dung và bố cục theo không gian khả dụng. Thẻ này sẽ lấp đầy container của nó lên đến 400 px, bao gồm cả padding và border.
- Sử dụng rule trên một element với
class="card". Nội dung dài liền mạch, margins của parent và các rules khác vẫn cần được kiểm tra; một declaration không thể đảm bảo toàn bộ trang web vừa khít.
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
Bên trong một container 280 px, thẻ này rộng 280 px bao gồm cả padding và border. Bên trong một container 700 px, nó dừng lại ở 400 px. Margins bên ngoài của nó vẫn là khoảng trống bổ sung.
Một thẻ card có độ chèn nên chiếm đầy không gian chứa đến 400 px bao gồm cả viền. Bộ quy tắc (rule set) nào phù hợp nhất?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
border-box bao gồm độ chèn và viền vào chiều rộng đã khai báo. Bố cục cha và nội dung vẫn cần được kiểm tra.
Chỉ thay đổi layout khi thực sự cần thiết
- Một media query áp dụng các rule dưới một điều kiện cụ thể. Ví dụ: chuyển từ hai cột sang một cột khi chúng trở nên quá hẹp để đọc.
- Chọn breakpoint dựa vào nội dung, sau đó thử nghiệm nhiều độ rộng và kích thước chữ lớn hơn. Đừng giả định rằng tất cả điện thoại hay laptop đều có độ rộng khả dụng giống nhau.
Kiểm tra rule thực tế chiến thắng
- Cascade xem xét các yếu tố bao gồm origin, importance và layers trước khi xét selector specificity. Đối với các rules tương đương, ID có specificity cao hơn class; class có specificity cao hơn element selector.
- Khi các rules tương đương có equal specificity, thứ tự nguồn (source order) về sau có thể quyết định. Sử dụng developer tools của trình duyệt để kiểm tra các rules khớp, stylesheet đã tải và các giá trị computed.
!important tham gia vào cascade; nó không làm gãy CSS. Tránh sử dụng nó như một giải pháp vá dùm không rõ ràng. Hãy kiểm tra nguyên nhân trước: missing stylesheet, declaration không hợp lệ hoặc rule bị ghi đè đều có thể giải thích kết quả bất ngờ.
Hai quy tắc thường trong cùng nguồn gốc và lớp sử dụng cùng bộ chọn .card và đặt màu sắc xung đột. Không có yếu tố quyết định nào khác khác biệt. Màu nào sẽ chiến thắng?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Độ đặc hiệu bằng nhau không làm cho thứ tự trở nên không quan trọng. Đối với các quy tắc cân bằng tương đương, thứ tự nguồn sau sẽ quyết định.
!important là một phần của quy tắc cascade CSS, nhưng không nên được sử dụng như một bản vá không giải thích rõ ràng.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Tầm quan trọng ảnh hưởng đến thứ tự ưu tiên. Kiểm tra sự xung đột và sử dụng nó một cách có chủ đích thay vì tuyên bố rằng nó phá vỡ CSS.
Khớp quan sát với bước kiểm tra tiếp theo hữu ích.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Kiểm tra nguyên nhân thực tế thay vì giả định rằng tất cả các lỗi đều do độ đặc hiệu.
Kiểm tra box và trải nghiệm đọc
- Thử nghiệm với các container hẹp và rộng, focus bằng bàn phím và chữ được phóng to. Đảm bảo văn bản dễ đọc trong cả hai giao diện màu sắc và nội dung có thể tự động xuống dòng.
- Giải thích một cách sửa overflow sử dụng phép tính box và một xung đột style sử dụng các rules khớp thực tế.
Tính toán toàn bộ khối, ưu tiên kích thước linh hoạt, sau đó kiểm tra sự lan truyền. Tính đặc biệt quan trọng, nhưng không phải là yếu tố quyết định duy nhất.
Nguồn: W3C CSS cascade.
Một thẻ vừa khít ở kích thước chữ bình thường nhưng bị tràn khi chữ được phóng to. Bạn nên làm gì?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Hành vi responsive bao gồm việc thay đổi văn bản và giới hạn nội dung, không chỉ là một ảnh chụp màn hình của một màn hình.