Helaian Rujukan CSS
Rujukan CSS yang boleh dicari dan dicetak — pemilih, model kotak, flexbox, grid, tipografi, peralihan dan ciri moden. Percuma.
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
Tiada entri sepadan dengan “:q”.
Mengenai Helaian Rujukan CSS
Helaian rujukan CSS ini memuatkan sifat (property) yang anda gunakan setiap hari dalam satu halaman yang boleh dicari: selector, model kotak, flexbox, grid, tipografi, warna dan latar belakang, positioning, transisi dan animasi, serta bahagian mengenai CSS responsif dan moden.
Ia disusun supaya jawapan kepada "apakah nama sifat itu tadi?" hanya sejauh satu carian — bahagian flexbox dan grid khususnya menyenaraikan sifat penjajaran dan susun atur dengan nilai yang boleh anda salin terus ke dalam helaian gaya, dan bahagian moden menyimpan ciri-ciri terkini agar mudah didapati.
Helaian ini percuma, dimuatkan di sisi klien, menapis secara langsung semasa anda menaip, dan membenarkan anda menyalin mana-mana deklarasi dengan satu klik. Jadual kandungan yang melekat melompat antara bahagian dan butang cetak menghasilkan rujukan kertas yang kemas.
Cara menggunakan Helaian Rujukan CSS
- Imbas senarai bahagian — Selector, Model kotak, Flexbox, Grid, Tipografi dan banyak lagi.
- Taip sifat atau konsep seperti grid, hover atau transition ke dalam kotak carian untuk menapis setiap baris.
- Lompat ke bahagian seperti Positioning melalui jadual kandungan yang melekat.
- Klik snippet atau ikon salinnya untuk menyalin deklarasi CSS.
- Cetak helaian untuk rujukan CSS di sisi meja.
Soalan lazim
Sembilan bahagian: selector, model kotak, flexbox, grid, tipografi, warna dan latar belakang, positioning, transisi dan animasi, serta CSS responsif dan moden.
Ya — kedua-duanya mempunyai bahagian tersendiri dengan sifat kontena dan item, nilai penjajaran dan bentuk shorthand, iaitu carian yang paling kerap dibuat oleh pembangun.
Ya. Selain teras yang telah lama wujud, bahagian responsif dan moden yang khusus merangkumi ciri-ciri terbaru yang anda temui dalam helaian gaya semasa, bersama corak media query.
Ya. Klik kod atau ikon salin semasa hover dan deklarasi itu berada pada papan klip anda, disahkan dengan mesej ringkas "Copied!".
Ya, sepenuhnya percuma — halaman sisi klien dengan carian langsung, tanpa log masuk dan penggunaan tanpa had.
Carian popular
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
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.