פונקציות css

Background (רקע)

background

הגדרת רקע לאלמנט, כולל צבע, תמונה, מיקום, גודל, חזרה ועוד.

background-color

קובע את צבע הרקע של האלמנט.

background-image

קובע תמונה כרקע של האלמנט.

background-position

קובע את מיקום תמונת הרקע בתוך האלמנט.

background-size

קובע את גודל תמונת הרקע ביחס לאלמנט.

background-repeat

קובע אם ואיך תמונת הרקע תחזור על עצמה.

background-attachment

קובע אם הרקע יזוז עם הדף או יישאר קבוע.

background-origin

קובע את מיקום התחלת הרקע ביחס לקופסת האלמנט.

background-clip

קובע את האזור שבו יופיע הרקע.

Border (גבול/מסגרת)

border

קובע את סוג, רוחב וצבע של הגבול של אלמנט.

border-width

קובע את רוחב הגבול של אלמנט.

border-style

קובע את סוג הגבול של אלמנט.

border-color

קובע את צבע הגבול של אלמנט.

border-radius

קובע את עיגול הפינות של הגבול.

Box Model (מודל הקופסה)

box-sizing

קובע כיצד מחשבים את הרוחב והגובה של אלמנט.

margin

קובע את המרחק בין גבולות האלמנט לבין אלמנטים אחרים.

padding

קובע את המרחק בין התוכן לבין גבולות האלמנט.

border-box

שיטה לחישוב רוחב וגובה אלמנט, כולל גבולות וריפוד.

width

קובע את רוחב האלמנט.

height

קובע את גובה האלמנט.

max-width

קובע את הרוחב המקסימלי של האלמנט.

min-width

קובע את הרוחב המינימלי של האלמנט.

max-height

קובע את הגובה המקסימלי של האלמנט.

min-height

קובע את הגובה המינימלי של האלמנט.

Color (צבע)

color

מגדיר את צבע הטקסט של האלמנט.

background-color

מגדיר את צבע הרקע של האלמנט.

opacity

מגדיר את שקיפות האלמנט.

Font and Text (גופן וטקסט)

font-family

מגדיר את משפחת הגופנים שמשמשת את הטקסט של האלמנט.

font-size

מגדיר את גודל הגופן של הטקסט של האלמנט.

font-weight

מגדיר את משקל הגופן (עובי) של הטקסט של האלמנט.

line-height

מגדיר את גובה השורה של הטקסט.

text-align

מגדיר את יישור הטקסט בתוך האלמנט.

text-transform

מגדיר את טרנספורמציית הטקסט, כגון הפיכת הטקסט לאותיות רישיות או קטנות.

letter-spacing

מגדיר את המרחק בין אותיות הטקסט.

text-indent

מגדיר את הזחה של הטקסט מהשוליים הימניים של האלמנט.

Positioning (מיקום)

position

מגדיר את שיטת המיקום של אלמנט בדף.

top

מגדיר את המרחק בין הקצה העליון של האלמנט לאלמנט האב שלו.

right

מגדיר את המרחק בין הקצה הימני של האלמנט לאלמנט האב שלו.

bottom

מגדיר את המרחק בין הקצה התחתון של האלמנט לאלמנט האב שלו.

left

מגדיר את המרחק בין הקצה השמאלי של האלמנט לאלמנט האב שלו.

z-index

מגדיר את סדר השכבות של האלמנט ביחס לאלמנטים אחרים.

Display & Visibility (תצוגה ונראות)

display

מגדיר איך אלמנט מוצג בדף.

visibility

מגדיר אם אלמנט נראה או מוסתר, אך שומר על המקום בדף.

contain

מגדיר כיצד האלמנט צריך להיות מבודד מהסביבה שלו ומתי הוא יחשב כיחידה נפרדת לצורך ביצועים.

opacity

קובע את השקיפות של האלמנט.

overflow

מגדיר כיצד תוכן החורג מגבולות האלמנט יתנהג.

clip

מגדיר אזור גזירה של אלמנט שאותו ניתן לראות.

Animation & Transition (אנימציה ומעבר)

animation

מגדיר אנימציה עבור אלמנט.

transition

מגדיר את השפעת המעבר בין ערכים של מאפיינים שונים.

Transform (טרנספורמציה ושינוי צורה)

transform

מיישם שינויי גיאומטריה על אלמנט.

Flexbox (מודל פריסה גמיש)

display

מגדיר את הקונטקסט של אלמנטים גמישים.

flex-direction

מגדיר את כיוון הפריסה של האלמנטים הגמישים.

flex-wrap

מגדיר אם האלמנטים הגמישים צריכים לעטוף את עצמם כאשר הם יוצאים מהשורה.

flex-flow

מאגד את המאפיינים flex-direction ו-flex-wrap יחד.

justify-content

מיישר את האלמנטים לאורך ציר ה-main.

align-items

מיישר את האלמנטים לאורך ציר ה-cross.

align-self

מגדיר איך אלמנט מסוים ייושר לאורך ציר ה-cross באופן עצמאי מהאלמנטים האחרים.

align-content

מיישר את הקווים בתיבת הגמישות לאורך ציר ה-cross כאשר יש יותר מקו אחד.

Grid (מודל פריסת רשת)

display

מגדיר את סוג התצוגה של אלמנט כ-Grid.

grid-template-columns

מגדיר את מספר וגדלי העמודות בתבנית ה-Grid.

grid-template-rows

מגדיר את מספר וגדלי השורות בתבנית ה-Grid.

grid-template-areas

מגדיר את אזורי התצוגה בתבנית ה-Grid.

grid-auto-columns

מגדיר את הגודל האוטומטי של העמודות שנוספות אוטומטית בתבנית ה-Grid.

grid-auto-rows

מגדיר את הגודל האוטומטי של השורות שנוספות אוטומטית בתבנית ה-Grid.

grid-auto-flow

מגדיר את הסדר שבו ממלאים את התאים בתבנית ה-Grid כאשר התאים אינם מוגדרים במפורש.

justify-items

מגדיר כיצד ליישר את התוכן בתוך תאי ה-Grid על ציר הרוחב.

align-items

מגדיר כיצד ליישר את התוכן בתוך תאי ה-Grid על ציר האורך.

justify-content

מגדיר כיצד ליישר את התוכן של מיכל ה-Grid על ציר הרוחב.

align-content

מגדיר כיצד ליישר את התוכן של מיכל ה-Grid על ציר האורך.

Tables (טבלאות)

border-collapse

מגדיר אם קווי הגבול של התאים יתמזגו לקו גבול אחד או יישארו נפרדים.

border-spacing

מגדיר את המרווח בין קווי הגבול של התאים כאשר border-collapse מוגדר כ-separate.

caption-side

מגדיר את מיקום התווית של הטבלה (caption) ביחס לטבלה.

table-layout

מגדיר כיצד מחשבים את הרוחב של העמודות בטבלה.

empty-cells

מגדיר אם תאים ריקים בטבלה יוצגו עם גבולות או לא.

Lists (רשימות)

list-style

מגדיר את סוג התו של רשימה לא מסודרת או את המספרים של רשימה מסודרת.

list-style-type

מגדיר את סוג התו או המספר של פריטי הרשימה.

list-style-position

מגדיר אם התו של פריטי הרשימה יהיה בתוך התוכן או מחוצה לו.

list-style-image

מגדיר תמונה שתשמש כתו הרשימה.

Media Queries (עיצוב רספונסיבי)

media

מגדיר סוגי מדיה ותנאים לעיצוב בהתאם לתנאים שונים של מדיה.

min-width

מגדיר את הרוחב המינימלי של המסך שבו החוקים יוחלו.

max-width

מגדיר את הרוחב המרבי של המסך שבו החוקים יוחלו.

min-height

מגדיר את הגובה המינימלי של המסך שבו החוקים יוחלו.

max-height

מגדיר את הגובה המרבי של המסך שבו החוקים יוחלו.

orientation

מגדיר את הכיווניות של המסך (פורטראיט או לנדסקייפ).

aspect-ratio

מגדיר את יחס ההיבט של המסך.

Cursor & Pointers (הסמן ומצביע עכבר)

cursor

מגדיר את סוג הסמן שיוצג כאשר המשתמש מעביר את העכבר מעל אלמנט.

Filters (פילטרים)

filter

מיישם אפקטים ויזואליים על אלמנט, כגון סינון צבעים, הבהרה או שינוי גובה.

Miscellaneous (שונות)

opacity

מגדיר את שקיפות האלמנט.

visibility

מגדיר אם האלמנט יהיה גלוי או מוסתר.

pointer-events

מגדיר אם אלמנט מגיב לאירועי עכבר.

Variables (משתני css)

var

מכיל את ערך המשתנה שנקבע באמצעות CSS Custom Properties.

Pseudo-Classes and Pseudo-Elements (מצבים מיוחדים של אלמנטים וחלקים ספציפיים של אלמנט)

:hover

מיישם עיצוב על אלמנט כאשר העכבר מרחף עליו.

:focus

מיישם עיצוב על אלמנט כאשר הוא מקבל את הפוקוס.

:nth-child()

מיישם עיצוב על אלמנטים לפי המיקום שלהם בקבוצת אחים.

::before

מוסיף תוכן לפני התוכן של האלמנט.

::after

מוסיף תוכן אחרי התוכן של האלמנט.