CSS Cheat Sheet: דף עזר מהיר
עודכן לאחרונה
סלקטורים
איך לבחור את האלמנטים שרוצים לעצב.
| סלקטור | תואם ל |
|---|---|
* | כל האלמנטים |
p | כל אלמנטי <p> (לפי תגית) |
.btn | אלמנטים עם class="btn" |
#main | האלמנט עם id="main" |
div p | כל <p> שנמצא בתוך <div> (צאצא) |
div > p | ילדים ישירים בלבד |
a:hover | קישורים שהעכבר מעליהם (pseudo-class) |
li:first-child | ה-<li> הראשון בתוך ההורה שלו |
li:nth-child(2n) | כל <li> זוגי |
input[type="text"] | שדות קלט עם המאפיין הזה |
p::before | תוכן שנוצר לפני <p> (pseudo-element) |
מודל הקופסה (Box model)
כל אלמנט הוא קופסה: תוכן, padding, border, margin.
| מאפיין | מה הוא עושה |
|---|---|
width / height | גודל קופסת התוכן |
padding | ריווח בתוך המסגרת |
border | 1px solid #333: עובי, סגנון, צבע |
margin | ריווח מחוץ למסגרת |
box-sizing: border-box | גורם לרוחב לכלול padding + border |
margin: 0 auto | מירכוז אופקי של אלמנט בלוק |
overflow: hidden | חיתוך תוכן שגולש החוצה |
טיפוגרפיה וצבע
| מאפיין | דוגמה |
|---|---|
color | color: #333: צבע הטקסט |
background | background: #fff או תמונה/גרדיאנט |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (או rem, em) |
font-weight | 400 (רגיל) … 700 (מודגש) |
line-height | 1.5: מרווח בין שורות |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
פריסה חד-ממדית: שורות או עמודות. הגדירו display: flex על ההורה.
| מאפיין (על המכל) | מה הוא עושה |
|---|---|
display: flex | הופך את הילדים לפריטי flex |
flex-direction | row (ברירת מחדל) או column |
justify-content | יישור לאורך הציר הראשי (center, space-between) |
align-items | יישור לאורך הציר הניצב (center, stretch) |
gap | ריווח בין פריטים, למשל gap: 16px |
flex-wrap | wrap מאפשר לפריטים לעבור לשורות חדשות |
flex: 1 (על ילד) | הפריט גדל ומתמלא בשטח הפנוי |
Grid
פריסה דו-ממדית. הגדירו display: grid על ההורה.
| מאפיין | מה הוא עושה |
|---|---|
display: grid | הופך את הילדים לפריטי grid |
grid-template-columns | 1fr 1fr 1fr או repeat(3, 1fr) |
grid-template-rows | הגדרת גודלי השורות |
gap | ריווח בין שורות ועמודות |
grid-column | 1 / 3: פריסת פריט על פני כמה עמודות |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) ל-grid רספונסיבי |
place-items: center | מירכוז כל פריט בתא שלו |
מיקום ותצוגה
| מאפיין / ערך | מה הוא עושה |
|---|---|
position: static | ברירת מחדל: בזרימה הרגילה |
position: relative | הזזה ביחס למיקום הרגיל שלו |
position: absolute | ממוקם ביחס לאב הקדמון הממוקם הקרוב ביותר |
position: fixed | מקובע לחלון התצוגה |
position: sticky | נדבק כשגוללים עד לסף מסוים |
top / right / bottom / left | היסטים לאלמנטים ממוקמים |
z-index | סדר השכבות (גבוה יותר = למעלה) |
display: none | מסיר את האלמנט מהפריסה |
display: inline-block | זורם בשורה אבל מקבל width/height |
Transitions ו-transforms
| מאפיין | דוגמה |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0): הזזה |
transform: scale | scale(1.1): שינוי גודל |
transform: rotate | rotate(45deg) |
opacity | 0 (בלתי נראה) … 1 (אטום) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px: פינות מעוגלות |
יחידות ועיצוב רספונסיבי
| יחידה / יכולת | משמעות |
|---|---|
px | פיקסלים מוחלטים |
% | יחסית להורה |
rem | יחסית לגודל הגופן של השורש |
em | יחסית לגודל הגופן הנוכחי |
vw / vh | 1% מרוחב / גובה חלון התצוגה |
fr | חלק מהשטח הפנוי (grid) |
@media (max-width: 600px) { … } | החלת כללים מתחת לנקודת שבירה |
סלקטורים, מודל הקופסה, flexbox, grid והמאפיינים שתמיד שוכחים, בעמוד אחד. ה-CSS cheat sheet הזה הוא דף עזר מהיר לעיצוב ולפריסה של דפי אינטרנט, מבחירת אלמנטים ועד מירכוז שלהם.
כל מה שכאן הוא CSS סטנדרטי שעובד בדפדפנים מודרניים. העתיקו כלל, או נסו אותו בזמן אמת בעורך האונליין של HTML, שבו אפשר לערוך CSS עם תצוגה מקדימה מיידית. שלבו אותו עם דף העזר של HTML בשביל ה-markup, או למדו פריסה מאפס בקורס CSS האינטראקטיבי והחינמי של Coddy.
שאלות נפוצות על ה-CSS cheat sheet
האם ה-CSS cheat sheet הזה בחינם?
כן. ה-CSS cheat sheet הזה חינמי, בלי צורך בהרשמה. שמרו אותו במועדפים והשתמשו בו בכל פעם שצריך לבדוק סלקטור, מאפיין או דפוס פריסה.
כדאי להשתמש ב-flexbox או ב-grid?
השתמשו ב-flexbox לפריסות חד-ממדיות: שורת כפתורים, תפריט ניווט, פריטים בשורה או בעמודה אחת. השתמשו ב-grid לפריסות דו-ממדיות שבהן שולטים גם בשורות וגם בעמודות בבת אחת, כמו פריסת עמוד או גלריית כרטיסים. השניים עובדים טוב יחד: grid של כרטיסים שבו כל כרטיס משתמש ב-flexbox בפנים הוא דבר נפוץ.
איך ממרכזים div עם CSS?
הדרך המודרנית הפשוטה ביותר היא flexbox על ההורה:
display: flex; justify-content: center; align-items: center; ממרכז ילד גם אופקית וגם אנכית. למירכוז אופקי בלבד של אלמנט בלוק עם רוחב מוגדר, margin: 0 auto עדיין עובד.אפשר לתרגל CSS אונליין?
כן. פתחו את עורך האונליין של HTML כדי לכתוב HTML ו-CSS יחד עם תצוגה מקדימה חיה. כשתרצו מסגרת מסודרת, קורס CSS האינטראקטיבי והחינמי של Coddy מלמד סלקטורים, מודל הקופסה, flexbox ו-grid צעד אחר צעד.
האם דף העזר הזה מתאים למתחילים?
כן. הוא מתקדם מסלקטורים וממודל הקופסה (היסודות) אל flexbox, grid ו-transitions, כך שאפשר להתחיל בחלקים העליונים ולהתקדם לפריסה מודרנית.
משאבים קשורים
עוד דפי עזר
