דף עזר CSS

כל הכלים
חינם

מדריך עיון של CSS ניתן לחיפוש ולהדפסה — בוררים, מודל הקופסה, flexbox, grid, טיפוגרפיה, מעברים ותכונות מודרניות. חינם.

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 מרכז את המאפיינים (properties) שבהם אתם משתמשים מדי יום בעמוד אחד שניתן לחפש בו: סלקטורים, מודל הקופסה (box model), flexbox,‏ grid, טיפוגרפיה, צבעים ורקעים, מיקום (positioning), מעברים (transitions) ואנימציה, וקטע על CSS רספונסיבי ומודרני.

הוא בנוי כך שהתשובה ל"איך קראו לאותו מאפיין?" נמצאת חיפוש אחד משם — קטעי flexbox ו-grid בפרט מפרטים את מאפייני היישור והפריסה עם ערכים שאפשר להעתיק ישירות לגיליון סגנונות, וקטע ה"מודרני" שומר את התכונות החדשות יותר בהישג יד.

הדף חינמי, נטען בצד הלקוח, מסנן בזמן אמת תוך כדי הקלדה, ומאפשר להעתיק כל הצהרה בלחיצה אחת. תוכן עניינים דביק מאפשר לקפוץ בין הקטעים וכפתור ההדפסה מפיק עיון נקי לנייר.

כיצד להשתמש ב-דף עזר CSS

  1. עברו על רשימת הקטעים — סלקטורים, מודל הקופסה, Flexbox,‏ Grid, טיפוגרפיה ועוד.
  2. הקלידו מאפיין או מושג כמו grid,‏ hover או transition בתיבת החיפוש כדי לסנן כל שורה.
  3. קפצו לקטע כמו מיקום (Positioning) דרך תוכן העניינים הדביק.
  4. לחצו על קטע קוד או על סמל ההעתקה שלו כדי להעתיק את הצהרת ה-CSS.
  5. הדפיסו את הדף לעיון CSS לצד שולחן העבודה.

שאלות נפוצות

תשעה קטעים: סלקטורים, מודל הקופסה, flexbox,‏ grid, טיפוגרפיה, צבעים ורקעים, מיקום, מעברים ואנימציה, ותכונות רספונסיביות ומודרניות של CSS.

כן — לשניהם יש קטעים משלהם עם מאפייני הקונטיינר והפריט, ערכי יישור וצורות מקוצרות (shorthand), שהם החיפושים הנפוצים ביותר בקרב מפתחים.

כן. מעבר לליבה הוותיקה, קטע רספונסיבי ומודרני ייעודי מכסה תכונות חדשות יותר שאתם פוגשים בגיליונות סגנונות עדכניים, לצד תבניות של media query.

כן. לחצו על הקוד או על סמל ההעתקה שמופיע בריחוף, וההצהרה מועתקת ללוח, עם אישור קצר "הועתק!".

כן, לגמרי חינם — עמוד בצד הלקוח עם חיפוש חי, ללא התחברות ושימוש ללא הגבלה.
שתף זאת
כלים קשורים
דף עזר JavaScript מדריך עיון של JavaScript מודרני, ניתן לחיפוש ולהדפסה — תחביר, מערכים, מחרוזות, אובייקטים, async/await, DOM ותכונות ES2022+. חינם. חינם
ממיר HTML ל-JSX הדבק HTML וקבל JSX נקי של React — 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
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.