Bảng tra cứu CSS
Một tài liệu tham khảo CSS có thể tìm kiếm và in được — selector, box model, flexbox, grid, kiểu chữ, transition và các tính năng hiện đại. Miễn phí.
Selectors
13.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list
Box model
7box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows
Flexbox
8display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item
Grid
8display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)
Colors & background
7color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors
Positioning
6position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order
Transitions & animation
5transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize
Responsive & modern
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query
Không có mục nào khớp với “:q”.
Giới thiệu về Bảng tra cứu CSS
Bảng tra cứu CSS này gói gọn các thuộc tính bạn dùng hằng ngày vào một trang có thể tìm kiếm: selector, box model, flexbox, grid, typography, màu sắc và nền, định vị, transition và animation, cùng một phần về CSS hiện đại và responsive.
Nó được tổ chức sao cho câu trả lời cho câu hỏi "thuộc tính đó tên là gì nhỉ?" chỉ cách một lần tìm kiếm — đặc biệt các phần flexbox và grid liệt kê các thuộc tính căn chỉnh và bố cục cùng giá trị mà bạn có thể sao chép thẳng vào stylesheet, và phần hiện đại luôn có sẵn các tính năng mới.
Bảng này miễn phí, tải phía client, lọc trực tiếp khi bạn gõ, và cho phép sao chép bất kỳ khai báo nào chỉ bằng một cú click. Mục lục cố định nhảy giữa các phần và nút in tạo ra một tài liệu tham khảo giấy gọn gàng.
Cách sử dụng Bảng tra cứu CSS
- Lướt qua danh sách các phần — Selectors, Box model, Flexbox, Grid, Typography và nhiều hơn nữa.
- Gõ một thuộc tính hoặc khái niệm như grid, hover hoặc transition vào ô tìm kiếm để lọc mọi dòng.
- Nhảy đến một phần như Positioning qua mục lục cố định.
- Nhấp vào một đoạn mã hoặc biểu tượng sao chép của nó để sao chép khai báo CSS.
- In bảng để có tài liệu tham khảo CSS bên bàn làm việc.
Câu hỏi thường gặp
Chín phần: selector, box model, flexbox, grid, typography, màu sắc và nền, định vị, transition và animation, cùng các tính năng CSS responsive và hiện đại.
Có — cả hai đều có phần riêng với các thuộc tính container và item, giá trị căn chỉnh và các dạng viết tắt, đây là những nội dung mà lập trình viên tra cứu nhiều nhất.
Có. Ngoài phần cốt lõi lâu đời, một phần riêng về responsive và CSS hiện đại bao gồm các tính năng mới hơn bạn gặp trong các stylesheet hiện nay, cùng các mẫu media-query.
Có. Nhấp vào đoạn mã hoặc biểu tượng sao chép hiện khi rê chuột và khai báo sẽ nằm trong clipboard của bạn, được xác nhận bằng thông báo ngắn "Copied!".
Có, hoàn toàn miễn phí — một trang chạy phía client với tìm kiếm trực tiếp, không cần đăng nhập và sử dụng không giới hạn.
Tìm kiếm phổ biến
css cheat sheet
css selectors list
css flexbox properties
css grid properties
css box model reference
css position values
css transition and animation syntax
css properties reference
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.