ชีตสรุป CSS

เครื่องมือทั้งหมด
ฟรี

ข้อมูลอ้างอิง CSS ที่ค้นหาและพิมพ์ได้ — selectors โมเดล box flexbox grid การจัดวางตัวอักษร transitions และฟีเจอร์สมัยใหม่ ฟรี

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

7
box-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

8
display: 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

8
display: 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

8
font-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

7
color: #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

6
position: 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

5
transition: 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

ไม่มีรายการที่ตรงกับ “:q”

เกี่ยวกับ ชีตสรุป CSS

ชีทสรุป CSS นี้รวบรวมพร็อพเพอร์ตี้ที่ใช้ทุกวันไว้ในหน้าเดียวที่ค้นหาได้: selector, box model, flexbox, grid, typography, สีและพื้นหลัง การจัดตำแหน่ง transition และ animation รวมถึงหมวด responsive และ CSS สมัยใหม่

มันจัดระเบียบไว้เพื่อให้คำตอบของ "พร็อพเพอร์ตี้นั้นชื่ออะไรนะ?" อยู่ห่างแค่การค้นหาครั้งเดียว โดยเฉพาะหมวด flexbox และ grid ที่แสดงพร็อพเพอร์ตี้การจัดวางและการเรียงพร้อมค่าที่คัดลอกใส่สไตล์ชีทได้ทันที ส่วนหมวดสมัยใหม่ก็เก็บฟีเจอร์ใหม่ ๆ ไว้ให้เรียกใช้ได้เสมอ

ชีทนี้ฟรี โหลดฝั่งไคลเอนต์ กรองแบบเรียลไทม์ขณะพิมพ์ และให้คุณคัดลอกคำประกาศใด ๆ ได้ด้วยคลิกเดียว สารบัญแบบ sticky ช่วยกระโดดระหว่างหมวด และปุ่มพิมพ์สร้างเอกสารอ้างอิงกระดาษที่สะอาดตา

วิธีใช้ ชีตสรุป CSS

  1. ไล่ดูรายการหมวด — Selectors, Box model, Flexbox, Grid, Typography และอื่น ๆ
  2. พิมพ์พร็อพเพอร์ตี้หรือแนวคิดอย่าง grid, hover หรือ transition ลงในช่องค้นหาเพื่อกรองทุกแถว
  3. กระโดดไปยังหมวดอย่าง Positioning ผ่านสารบัญแบบ sticky
  4. คลิกโค้ดตัวอย่างหรือไอคอนคัดลอกเพื่อคัดลอกคำประกาศ CSS
  5. พิมพ์ชีทนี้ไว้เป็นเอกสารอ้างอิง CSS ไว้ข้างโต๊ะทำงาน

คำถามที่พบบ่อย

เก้าหมวด: selector, box model, flexbox, grid, typography, สีและพื้นหลัง การจัดตำแหน่ง transition และ animation รวมถึง responsive และฟีเจอร์ CSS สมัยใหม่

มี — ทั้งสองมีหมวดของตัวเองพร้อมพร็อพเพอร์ตี้ของ container และ item ค่าการจัดวาง และรูปแบบย่อ ซึ่งเป็นสิ่งที่นักพัฒนาค้นหาบ่อยที่สุด

ใช่ นอกจากพื้นฐานหลักที่มีมานาน ยังมีหมวด responsive และ modern เฉพาะที่ครอบคลุมฟีเจอร์ใหม่ ๆ ที่พบในสไตล์ชีทปัจจุบัน พร้อมรูปแบบ media query

ได้ คลิกที่โค้ดหรือไอคอนคัดลอกที่ปรากฏเมื่อ hover คำประกาศจะถูกวางลงคลิปบอร์ดพร้อมข้อความยืนยันสั้น ๆ ว่า "Copied!"

ใช่ ฟรีทั้งหมด — เป็นหน้าฝั่งไคลเอนต์ที่ค้นหาแบบเรียลไทม์ ไม่ต้องล็อกอิน และใช้งานได้ไม่จำกัด
แชร์สิ่งนี้
เครื่องมือที่เกี่ยวข้อง
ชีตสรุป JavaScript ข้อมูลอ้างอิงที่ค้นหาและพิมพ์ได้ของ JavaScript สมัยใหม่ — ไวยากรณ์ อาร์เรย์ สตริง ออบเจกต์ async/await DOM และฟีเจอร์ ES2022+ ฟรี ฟรี
ตัวแปลง HTML เป็น JSX วาง HTML แล้วได้ React JSX ที่สะอาด — class กลายเป็น className แอตทริบิวต์เป็น camelCase สตริง style กลายเป็นออบเจกต์ และแท็กปิดตัวเอง ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ฟรี ฟรี
ชีตสรุป PHP ข้อมูลอ้างอิง PHP 8.3+ ที่ค้นหาและพิมพ์ได้ — ไวยากรณ์ สตริง อาร์เรย์ ฟังก์ชัน คลาส enums แอตทริบิวต์ และฟีเจอร์สมัยใหม่ ฟรี ฟรี
ชีตสรุป MySQL ข้อมูลอ้างอิง MySQL ที่ค้นหาและพิมพ์ได้ — คิวรี joins ดัชนี ฟังก์ชัน ชนิดข้อมูล และคำสั่งจัดการระบบ ฟรี ฟรี
ชีตสรุป Python ข้อมูลอ้างอิง Python 3 ที่ค้นหาและพิมพ์ได้ — ไวยากรณ์ โครงสร้างข้อมูล comprehensions ฟังก์ชัน คลาส ไฟล์ และไลบรารีมาตรฐาน ฟรี ฟรี
ชีตสรุป Shell ข้อมูลอ้างอิง Bash / shell ที่ค้นหาและพิมพ์ได้ — การนำทาง ไฟล์ pipes ตัวแปร ลูป เงื่อนไข และ one-liners ที่มีประโยชน์ ฟรี ฟรี
การค้นหายอดนิยม
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
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา
รายงานปัญหา

เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง — คัดลอกและวางโค้ดด้านล่าง