Tài liệu CSS
Tài liệu tham khảo CSS ngắn gọn, đi kèm ví dụ. Đọc khái niệm, xem code, rồi luyện tập trong một hành trình Coddy.
Bắt đầu khóa họcBắt đầu
- Inline CSSInline CSS đặt các khai báo ngay trên phần tử bằng thuộc tính style. Tìm hiểu cú pháp, khi nào inline style là lựa chọn đúng, vì sao nó thắng stylesheet, và so sánh nó với internal CSS và external CSS.
- CSS ngoàiCSS ngoài (external CSS) nằm trong một tệp .css mà mọi trang liên kết tới bằng <link rel="stylesheet">; CSS nội bộ (internal CSS) nằm trong phần tử <style> bên trong một trang. Tìm hiểu cả hai, cách đường dẫn tệp hoạt động, và quy tắc nào thắng khi chúng gặp nhau.
- Chú thíchCSS chỉ có một cú pháp chú thích, /* ... */, dùng cho cả một dòng lẫn nhiều dòng. Tìm hiểu chú thích được đặt ở đâu, cách vô hiệu hóa một quy tắc bằng chú thích, và vì sao // hay chú thích lồng nhau âm thầm làm hỏng quy tắc tiếp theo.
- !important!important giúp một khai báo thắng các khai báo bình thường, bất kể độ ưu tiên của chúng. Tìm hiểu chính xác nó thắng được gì, cái gì thắng được nó, độ ưu tiên selector hoạt động thế nào bên dưới, và những cách gọn gàng hơn để giải quyết xung đột kiểu.
- Biến CSSBiến CSS (custom property) lưu một giá trị một lần rồi dùng lại bằng var(). Tìm hiểu cách khai báo biến trong :root, phạm vi và ghi đè biến, đặt giá trị dự phòng, đổi giao diện bằng JavaScript, và tránh cái bẫy giá trị không hợp lệ.
Selector
- SelectorCSS selector chọn ra những phần tử mà một quy tắc sẽ định dạng. Tìm hiểu mọi loại selector, bốn combinator (descendant, child, adjacent sibling, general sibling), attribute selector, cách nhóm selector và thử selector trực tiếp.
- Class selectorClass selector (.name) định dạng mọi phần tử có class đó; ID selector (#name) định dạng đúng một phần tử có id đó. Tìm hiểu cú pháp, nhiều class và class nối liền, class khác id thế nào, quy tắc đặt tên và bật tắt class bằng JavaScript.
- Pseudo-classPseudo-class chọn phần tử theo vị trí hoặc trạng thái: :nth-child(), :first-child, :not(), :focus, :checked, :has() và nhiều hơn nữa. Tìm hiểu cú pháp, công thức an+b với công cụ thử trực tiếp, và khác biệt giữa nth-child và nth-of-type.
- ::before và ::after::before và ::after chèn nội dung sinh ra làm con đầu tiên và con cuối cùng của một phần tử, ngay từ CSS. Tìm hiểu thuộc tính content, vì sao bắt buộc phải có content rỗng, cách định vị chúng, tooltip bằng attr(), bộ đếm và những chỗ chúng không hoạt động.
- HoverPseudo-class :hover định dạng một phần tử khi con trỏ đang nằm trên nó. Tìm hiểu hiệu ứng hover cho nút và thẻ, chuyển động mượt bằng transition, màu liên kết với :link, :visited, :hover và :active theo đúng thứ tự, và hover trên màn hình cảm ứng.
Box model
- Box modelMọi phần tử đều là một hộp gồm bốn lớp: content, padding, border và margin. Tìm hiểu mỗi lớp cộng vào kích thước thế nào, box-sizing: border-box thay đổi cách tính ra sao, và xem từng lớp được đo trực tiếp.
- PaddingPadding là khoảng trống bên trong phần tử, giữa nội dung và viền của nó. Tìm hiểu cách viết tắt padding với từ 1 đến 4 giá trị, các thuộc tính cho từng cạnh, padding logic, giá trị phần trăm và cách padding thay đổi kích thước phần tử.
- MarginMargin là khoảng trống trong suốt bên ngoài viền của phần tử, đẩy các phần tử khác ra xa. Tìm hiểu cách viết tắt margin, căn giữa với margin: 0 auto, margin âm, margin auto trong flexbox và vì sao các margin dọc bị gộp.
- Margin và paddingPadding là khoảng trống bên trong viền của phần tử; margin là khoảng trống bên ngoài viền. Xem cả hai trên cùng một hộp, đặt cạnh nhau và chạy trực tiếp, rồi tìm hiểu nên dùng cái nào cho nền, vùng bấm, khoảng cách giữa các phần tử và căn giữa.
- BorderThuộc tính border vẽ một đường viền quanh vùng padding của phần tử. Tìm hiểu cách viết rút gọn border, mọi kiểu viền, màu và từng cạnh riêng, bo góc với border-radius, và border khác outline thế nào.
- Width và heightwidth và height đặt kích thước khung của một phần tử. Tìm hiểu kích thước cố định và phần trăm, vì sao height: 100% thường không có tác dụng, min-height và max-width cho bố cục linh hoạt, auto và 100%, cùng các từ khóa fit-content.
Văn bản và phông chữ
- Cỡ chữThuộc tính font-size quy định chữ to hay nhỏ. Tìm hiểu các đơn vị nó nhận (px, rem, em, %, từ khóa, vw), cách đổi cỡ chữ trong HTML, vì sao rem là lựa chọn mặc định an toàn và vì sao cỡ chữ em bị nhân dồn.
- Độ đậm chữThuộc tính font-weight làm chữ đậm, mảnh hoặc bất kỳ mức nào ở giữa. Tìm hiểu thang số từ 100 đến 900, normal và bold, hai giá trị tương đối bolder và lighter, và vì sao đôi khi đổi độ đậm mà không thấy gì thay đổi.
- Line heightline-height đặt chiều cao của mỗi dòng chữ, và qua đó quyết định khoảng cách giữa các dòng. Tìm hiểu vì sao số không đơn vị là mặc định đúng, giá trị px, em và % được kế thừa khác nhau thế nào, cùng các giá trị nên dùng cho văn bản và tiêu đề.
- Màu chữThẻ <font color> đã lỗi thời; màu chữ trong HTML được đặt bằng thuộc tính color của CSS. Tìm hiểu cách tô màu cả trang, một từ, một liên kết hay một tiêu đề, bằng tên màu, mã hex và rgb, và cách giữ cho chữ dễ đọc.
- Gạch chânGạch chân chữ bằng text-decoration, rồi tùy chỉnh đường gạch: màu, kiểu, độ dày và khoảng cách tới chữ. Kèm cách bỏ gạch chân của liên kết, và khi nào không nên bỏ.
- Đổ bóng chữtext-shadow vẽ một hoặc nhiều bóng phía sau chữ. Tìm hiểu bốn giá trị (độ lệch x, độ lệch y, độ nhòe, màu), cách xếp chồng nhiều bóng để tạo hiệu ứng phát sáng, viền chữ và chữ 3D, và cách dùng bóng để giữ chữ dễ đọc trên nền rối mắt.
Màu sắc và nền
- Màu sắcMọi cách viết màu trong CSS: tên màu, mã hex, rgb() và rgba(), hsl(), độ trong suốt với kênh alpha, currentColor, cùng oklch() và color-mix() mới hơn. Mỗi cách đều có ví dụ chạy trực tiếp và một công cụ chuyển đổi.
- Màu nềnbackground-color tô màu cho hộp của một phần tử. Tìm hiểu cách đặt màu nền cho cả trang, một div, một hàng trong bảng hay một từ, cách nền trong suốt hoạt động, vì sao bgcolor đã lỗi thời và background-color khác gì cách viết rút gọn background.
- Ảnh nềnbackground-image đặt một ảnh hoặc gradient phía sau nội dung của phần tử. Tìm hiểu url() và gradient, background-size (cover và contain), background-position, background-repeat, xếp chồng nhiều lớp nền và cách viết rút gọn background.
- GradientGradient trong CSS là hình ảnh mà trình duyệt vẽ từ các màu. Tìm hiểu radial-gradient (hình dạng, kích thước, vị trí), linear-gradient (hướng và góc), conic-gradient, điểm dừng màu, điểm dừng cứng để vẽ sọc, gradient lặp lại và chữ gradient.
- Box shadowbox-shadow vẽ bóng đổ quanh hộp của một phần tử. Tìm hiểu năm giá trị (x, y, blur, spread, màu), bóng inset, xếp chồng nhiều lớp bóng để có chiều sâu tự nhiên, vòng focus tạo bằng spread, và những lỗi làm bóng trông bẩn.
Bố cục
- DisplayThuộc tính display quyết định cách một phần tử tham gia vào bố cục. Tìm hiểu block, inline và inline-block qua các hộp đặt cạnh nhau có đo kích thước, display none khác visibility hidden thế nào, và vị trí của flex, grid, flow-root và contents.
- Positionposition: absolute đặt phần tử ở tọa độ chính xác bên trong phần tử tổ tiên được định vị gần nhất. Tìm hiểu absolute hoạt động cùng position: relative thế nào, rồi đến fixed và sticky, các thuộc tính top/right/bottom/left và inset, và vì sao sticky đôi khi không dính.
- Z-Indexz-index quyết định phần tử nào được vẽ nằm trên khi các phần tử chồng lên nhau. Tìm hiểu z-index hoạt động với những phần tử nào, cách stacking context gom nhóm phần tử khiến z-index 9999 vẫn có thể thua, thứ gì tạo ra stacking context và cách sửa z-index không hoạt động.
- Overflowoverflow quyết định điều gì xảy ra với nội dung không vừa hộp của nó: hiện ra ngoài, cắt bớt, hay thêm thanh cuộn. Tìm hiểu visible, hidden, scroll, auto và clip, overflow-x và overflow-y, dấu ba chấm cho chữ, và các tác dụng phụ của overflow lên bố cục.
- Float và clearfloat đẩy một phần tử sang một bên và cho chữ chảy bao quanh nó, giống cách tạp chí đặt ảnh. Tìm hiểu float left, right và inline-start, clear, vì sao phần tử cha bị co lại quanh các float và display: flow-root sửa lỗi đó thế nào, cùng lý do float không còn được dùng để dàn trang.
- Căn giữa divMọi cách căn giữa một div theo chiều ngang, chiều dọc hoặc cả hai: flexbox, grid, margin auto, position absolute kết hợp transform, inset với margin auto và align-content. Mỗi cách đều chạy trực tiếp và tự đo độ căn giữa của mình, kèm bảng cho biết khi nào nên dùng cách nào.
- Căn giữa ảnhThẻ <img> là phần tử inline, nên nó được căn giữa như chữ: text-align: center trên phần tử cha. Hoặc biến nó thành khối với margin: 0 auto, hay căn giữa bằng flexbox hoặc grid, kể cả theo chiều dọc. Mỗi cách đều chạy trực tiếp và đo kết quả.
Flexbox và Grid
- FlexboxFlexbox xếp các phần tử thành một hàng hoặc một cột và điều khiển cách chúng chia sẻ không gian và thẳng hàng với nhau. Tìm hiểu display: flex, trục chính và trục phụ, mọi thuộc tính của container, flex-grow, flex-shrink và flex-basis, với một playground trực tiếp đo xem từng item nằm ở đâu.
- Justify contentjustify-content đặt các flex item dọc theo trục chính, còn align-items đặt chúng dọc theo trục phụ. Xem mọi giá trị đặt cạnh nhau, có số đo, cùng lưới căn chỉnh bấm được, align-self và lý do đôi khi justify-content không có tác dụng.
- Flex wrapflex-wrap quyết định các flex item chen chúc trên một dòng hay chuyển xuống dòng tiếp theo, còn flex-direction quyết định chúng chạy theo hàng hay theo cột. Tìm hiểu cả hai qua ví dụ chạy trực tiếp, cách viết tắt flex-flow, align-content và một hàng thẻ responsive không cần media query.
- Grid layoutCSS grid xếp các phần tử theo hàng và cột cùng lúc. Tìm hiểu display: grid, grid-template-columns, đơn vị fr, repeat() và minmax(), auto-fill và auto-fit, đặt item bằng grid-column và grid-template-areas, với một grid trực tiếp để bạn sửa và đo.
Thiết kế responsive
- Media queryMedia query chỉ áp dụng CSS khi một điều kiện đúng, chẳng hạn màn hình rộng tối thiểu bao nhiêu, giao diện tối hay con trỏ chuột. Tìm hiểu cú pháp @media, breakpoint theo hướng mobile first, cú pháp khoảng, prefers-color-scheme, matchMedia trong JavaScript và container query.
- rem, em và pxrem tính theo cỡ chữ gốc, em tính theo cỡ chữ của chính phần tử, px là cố định, còn % tùy thuộc vào thuộc tính. Xem từng đơn vị được đo trong một ví dụ lồng nhau, vì sao em bị nhân dồn, khi nào dùng đơn vị nào, và vw, vh, dvh hoạt động ra sao.
- clamp()clamp(MIN, PREFERRED, MAX) trả về giá trị ưu tiên nhưng không bao giờ nhỏ hơn MIN hay lớn hơn MAX. Tìm hiểu cách nó giúp cỡ chữ và khoảng cách co giãn linh hoạt mà không cần media query, cách tính giá trị ở giữa, và quan hệ giữa nó với min() và max().
- calc()calc() cho phép bạn tính toán ngay trong CSS và kết hợp nhiều đơn vị, như 100% trừ đi thanh bên cố định 200px. Tìm hiểu quy tắc cú pháp (khoảng trắng rất quan trọng), calc() với biến CSS, các bố cục phổ biến mà nó giải quyết, và vì sao calc() không hợp lệ bị bỏ qua mà không báo lỗi.
Transition và hiệu ứng
- TransitionTransition trong CSS tạo chuyển động cho một thuộc tính từ giá trị cũ sang giá trị mới khi nó thay đổi, ví dụ lúc hover. Tìm hiểu cách viết gọn transition, so sánh mọi timing function, những gì có và không thể transition, mẹo cho height: auto và chế độ giảm chuyển động.
- AnimationAnimation trong CSS đưa một phần tử đi qua các bước bạn định nghĩa trong @keyframes, tự chạy và lặp bao nhiêu lần tùy ý. Tìm hiểu cú pháp @keyframes, cả tám thuộc tính animation, fill-mode và direction, hiệu ứng loading, tạm dừng và cách tôn trọng tùy chọn giảm chuyển động.
- TransformThuộc tính transform di chuyển, phóng to thu nhỏ, xoay và làm nghiêng một phần tử mà không thay đổi bố cục xung quanh. Tìm hiểu mọi hàm transform, vì sao thứ tự các hàm quan trọng, transform-origin, các thuộc tính riêng translate, scale và rotate, và mẹo căn giữa bằng translate(-50%, -50%).
- RotateXoay một phần tử bằng transform: rotate(45deg) hoặc thuộc tính rotate mới hơn. Tìm hiểu các đơn vị góc (deg, turn, rad), xoay quanh một góc với transform-origin, xoay chữ và icon, biểu tượng loading quay tròn, và xoay 3D với rotateX và rotateY.
- Opacityopacity làm cả phần tử và mọi thứ bên trong nó trong suốt, từ 0 (vô hình) đến 1 (đặc hoàn toàn). Tìm hiểu các giá trị, vì sao opacity làm mờ cả chữ và cách chỉ làm nền trong suốt, so sánh opacity: 0 với visibility và display, và hiệu ứng mờ khi rê chuột.
- Blur và filterfilter: blur(5px) làm mờ một phần tử, còn backdrop-filter: blur() làm mờ những gì nằm phía sau nó. Tìm hiểu mọi hàm filter (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) qua thanh trượt chạy trực tiếp, cách kết hợp chúng, và vấn đề viền bị mờ.
