מבנה כלל CSS

selector {
  property: value;
}

Selector (בורר — קובע על מה הכלל חל).

Property (מאפיין — מה מעצבים).

Value (ערך — הערך של המאפיין).

דרכי שילוב CSS

• Inline CSS (CSS בתוך האלמנט)
• Internal CSS (CSS בתוך מסמך HTML)
• External CSS (CSS בקובץ חיצוני)

<link rel="stylesheet" href="style.css">

תתי-התחומים של יסודות CSS

כלל בסיסי

p {
  color: blue;
  font-size: 18px;
}

קבוצת בוררים

h1, h2, h3 {
  color: white;
}

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

הצהרות

color: red;
margin: 20px;
padding: 10px;

הערות

/* זוהי הערה ב-CSS */

Cascade

Cascade (מפל — מנגנון הקובע איזה כלל מנצח כאשר קיימים כללים מתחרים) .

Inheritance

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

מקור הסגנון

הדפדפן משלב סגנונות ממקורות שונים, כגון סגנונות המחבר, סגנונות המשתמש וסגנונות ברירת המחדל של סוכן המשתמש.

Specificity

Specificity (ספציפיות — משקל הבורר המשמש בקביעת קדימות) .

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

דוגמה

p {
  color: white;
}

.article p {
  color: cyan;
}

#main p {
  color: violet;
}

!important

color: red !important;

!important (חשוב — סימון שמעניק להצהרה קדימות מיוחדת) . מומלץ להשתמש בו רק כאשר יש צורך אמיתי.

בורר תגית

p {
  color: white;
}

Class

Class (מחלקה — שם שניתן לאלמנטים לצורך עיצוב) .

.card {
  padding: 20px;
}

ID

ID (מזהה — מזהה ייחודי לאלמנט) .

#header {
  background: black;
}

Universal Selector

Universal Selector (בורר אוניברסלי — בחירת כל האלמנטים) .

* {
  box-sizing: border-box;
}

בוררי קשר

article p {}
article > p {}
h2 + p {}
h2 ~ p {}

Attribute Selector

Attribute Selector (בורר מאפיין — בחירה לפי מאפיין HTML) .

input[type="email"] {
  border-color: cyan;
}

Pseudo-class

Pseudo-class (מחלקת-דמה — בחירה לפי מצב או תנאי) .

a:hover {}
input:focus {}
button:disabled {}
input:checked {}
li:first-child {}
li:last-child {}

Pseudo-element

Pseudo-element (אלמנט-דמה — בחירה בחלק לוגי של אלמנט) .

p::before {
  content: "→";
}

p::after {
  content: "";
}

יחידות מוחלטות

px (פיקסל), cm (סנטימטר), mm (מילימטר), in (אינץ'), pt (נקודה טיפוגרפית).

יחידות יחסיות

% (אחוז), em (יחס לגודל גופן בהקשר הנוכחי), rem (יחס לגודל גופן השורש), vw (אחוז מרוחב חלון התצוגה), vh (אחוז מגובה חלון התצוגה).

calc

calc (חישוב — פונקציה לחישוב ערך) .

width: calc(100% - 40px);

min, max ו-clamp

width: min(90%, 1200px);

width: max(300px, 40%);

font-size: clamp(1rem, 3vw, 2rem);

Custom Properties

Custom Property (מאפיין מותאם אישית — משתנה CSS) .

:root {
  --main-color: #00f5ff;
}

.title {
  color: var(--main-color);
}

Box Model

Box Model (מודל הקופסה — הדרך שבה הדפדפן מחשב את שטח האלמנט) .

1. Content (תוכן)
2. Padding (ריפוד פנימי)
3. Border (גבול)
4. Margin (שוליים חיצוניים)

box-sizing

* {
  box-sizing: border-box;
}

border-box כולל את ה- Padding (ריפוד) ואת ה- Border (גבול) בתוך המידות שהוגדרו.

Margin ו-Padding

.box {
  margin: 20px;
  padding: 20px;
}

Border

.box {
  border: 1px solid cyan;
  border-radius: 16px;
}

Border Radius (רדיוס גבול — עיגול פינות) .

Width ו-Height

.box {
  width: 300px;
  min-height: 150px;
  max-width: 100%;
}

font-family

font-family (משפחת גופן — בחירת הגופן) .

body {
  font-family: Arial, sans-serif;
}

font-size

font-size (גודל גופן — גודל האותיות) .

body {
  font-size: 16px;
}

font-weight

font-weight (עובי גופן — מידת עובי הטקסט) .

strong {
  font-weight: 700;
}

line-height

line-height (גובה שורה — המרווח האנכי בין שורות) .

p {
  line-height: 1.7;
}

text-align

text-align: right;
text-align: center;
text-align: left;
text-align: justify;

letter-spacing

letter-spacing (ריווח אותיות — המרחק בין אותיות) .

text-decoration

a {
  text-decoration: none;
}

.link {
  text-decoration: underline;
}

צבעים

color: red;

color: #ff0000;

color: rgb(255, 0, 0);

color: rgba(255, 0, 0, .5);

color: hsl(0 100% 50%);

color: transparent;

Background

Background (רקע — העיצוב שמופיע מאחורי התוכן) .

background-color: #05070b;

background-image:
  linear-gradient(90deg, cyan, purple);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

Gradient

Gradient (מעבר צבע — שינוי הדרגתי בין צבעים) .

background:
  linear-gradient(
    135deg,
    #00f5ff,
    #9b5cff
  );

Shadow

Shadow (צל — אפקט עומק או זוהר) .

box-shadow:
  0 0 30px rgba(0,245,255,.25);

text-shadow:
  0 0 15px cyan;

Opacity

Opacity (אטימות — מידת הנראות) .

.element {
  opacity: .7;
}

Display

Display (תצוגה — קובע כיצד האלמנט משתתף בפריסה) .

display: block;
display: inline;
display: inline-block;
display: none;

Position

Position (מיקום — קובע את שיטת המיקום) .

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Overflow

Overflow (גלישה — טיפול בתוכן החורג מהגבולות) .

overflow: visible;
overflow: hidden;
overflow: auto;
overflow: scroll;

z-index

z-index (סדר שכבות — קובע איזו שכבה מופיעה מעל אחרת) .

.modal {
  position: relative;
  z-index: 10;
}

Float ו-Clear

.image {
  float: right;
}

.content {
  clear: both;
}

Flex Container

Flex Container (מכולה גמישה — אלמנט שהוגדר כ-Flex) .

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

Main Axis ו-Cross Axis

Main Axis (ציר ראשי — הציר שנקבע לפי כיוון הפריסה) .

Cross Axis (ציר משני — הציר המאונך לציר הראשי) .

Flex Items

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
  align-self: center;
  order: 2;
}

יישור

.container {
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

Gap

Gap (מרווח — המרחק בין פריטי הפריסה) .

.container {
  gap: 20px;
}

רשת בסיסית

.grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 20px;
}

Columns ו-Rows

Column (עמודה) ו- Row (שורה) הם שני ממדי הרשת.

grid-template-columns:
  200px 1fr 2fr;

grid-template-rows:
  auto 1fr auto;

Gap

gap: 20px;
row-gap: 10px;
column-gap: 30px;

מיקום פריט

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Auto Placement

Auto Placement (מיקום אוטומטי — מנגנון הממקם פריטים פנויים ברשת) .

Media Query

Media Query (שאילתת מדיה — תנאי להפעלת CSS לפי מאפייני התצוגה) .

@media (max-width: 700px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Mobile First

Mobile First (נייד תחילה — תכנון למסכים קטנים לפני הרחבה למסכים גדולים) .

Viewport Units

width: 80vw;
height: 80vh;

Viewport (חלון תצוגה — האזור הנראה של הדף) .

clamp

font-size:
  clamp(1rem, 3vw, 2rem);

מאפשר ערך גמיש עם גבול מינימלי ומקסימלי.

Transition

Transition (מעבר — שינוי הדרגתי בין ערכי CSS) .

.button {
  transition:
    transform .2s ease,
    color .2s ease;
}

Transform

Transform (התמרה — שינוי גאומטרי של אלמנט) .

transform: translateY(-4px);

transform: scale(1.05);

transform: rotate(5deg);

Animation

Animation (אנימציה — שינוי אוטומטי לאורך זמן) .

@keyframes glow {
  from {
    box-shadow: 0 0 5px cyan;
  }

  to {
    box-shadow: 0 0 30px cyan;
  }
}

.element {
  animation:
    glow 2s ease-in-out infinite alternate;
}

Perspective

Perspective (פרספקטיבה — יצירת תחושת עומק בתלת-ממד) .

.card {
  transform:
    perspective(700px)
    rotateY(5deg);
}

CSS Layers

Cascade Layer (שכבת מפל — מנגנון לניהול קדימות של קבוצות כללים) .

@layer reset, components, utilities;

@layer components {
  .card {
    padding: 20px;
  }
}

Logical Properties

Logical Properties (מאפיינים לוגיים — מתאימים לכיווני כתיבה שונים) .

margin-inline: auto;

padding-block: 20px;

border-inline-start:
  2px solid cyan;

Container Queries

Container Query (שאילתת מכולה — התאמת עיצוב לפי גודל המכולה) .

.card {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card-content {
    display: grid;
  }
}

Nesting

Nesting (קינון — כתיבת כללים בתוך כלל אחר) .

.card {
  color: white;

  & .title {
    color: cyan;
  }

  &:hover {
    transform: translateY(-3px);
  }
}

Functions

calc()
min()
max()
clamp()
var()
rgb()
hsl()
color-mix()

BEM

BEM (Block Element Modifier — מתודולוגיית שמות לרכיבי ממשק) .

.card {}

.card__title {}

.card--featured {}

Utility Classes

Utility Class (מחלקת כלי — מחלקה קטנה למשימת עיצוב מוגדרת) .

.text-center {
  text-align: center;
}

.mt-large {
  margin-top: 40px;
}

Design Tokens

Design Token (אסימון עיצוב — ערך עיצובי מרכזי לשימוש חוזר) .

:root {
  --color-primary: #00f5ff;
  --space-md: 1rem;
  --radius-md: 16px;
}

עקרונות תחזוקה

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

Focus

Focus (מיקוד — האלמנט שנמצא במיקוד מהמקלדת) .

button:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

Contrast

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

prefers-reduced-motion

prefers-reduced-motion (העדפת תנועה מופחתת — העדפה מערכתית לצמצום אנימציות) .

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

עקרונות נגישות

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

Developer Tools

Developer Tools (כלי פיתוח — כלים בדפדפן לבדיקת HTML ו-CSS) מאפשרים לבדוק אלמנטים ולשנות סגנונות בזמן אמת.

תהליך איתור תקלה

1. בדוק שהבורר מתאים לאלמנט.
2. בדוק אם המאפיין נדרס.
3. בדוק ספציפיות.
4. בדוק ירושה.
5. בדוק אם הערך חוקי.
6. בדוק את מודל הקופסה.
7. בדוק את הפריסה.
8. בדוק Media Queries.

שגיאות נפוצות

• סוגריים שאינם מאוזנים.
• נקודה-פסיק חסרה.
• בורר שאינו מתאים.
• יחידת מידה לא מתאימה.
• רוחב קבוע הגורם לגלישה.
• שימוש יתר ב-!important.
• ספציפיות גבוהה מדי.

Computed Style

Computed Style (סגנון מחושב — הערך הסופי שהדפדפן מחיל בפועל) .

מאפיינים מרכזיים

עקרון העבודה ב-CSS

כדי לשלוט ב-CSS יש להבין כיצד בוררים, Cascade, Specificity, Inheritance, Box Model, Flow, Flexbox, Grid, Responsive Design, נגישות, משתנים ואפקטים עובדים יחד.