CSS — קורס לימוד מלא

יסודות CSS

CSS (Cascading Style Sheets — גיליונות סגנון מדורגים) משמשת לעיצוב מסמכי HTML (HyperText Markup Language — שפת סימון להיפרטקסט) .

מבנה כלל CSS

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

Selector (בורר — קובע על אילו אלמנטים הכלל חל) .

Property (מאפיין — הדבר שאותו מעצבים) .

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

דרכי שילוב CSS

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

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

הערות

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

תתי-התחומים

תחביר CSS

Syntax (תחביר — הכללים לכתיבת קוד תקין) .

כלל בסיסי

selector {
  property: value;
}

קבוצת בוררים

h1, h2, h3 {
  color: white;
}

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

הצהרות

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

כל הצהרה מורכבת ממאפיין וערך ומסתיימת בדרך כלל בנקודה-פסיק.

מפל, ספציפיות והורשה

Cascade

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

Inheritance

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

Specificity

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

בדרך כלל מזהה חזק ממחלקה, ומחלקה חזקה מבורר תגית. כאשר המשקל שווה, כלל מאוחר יותר יכול לנצח.

!important

color: red !important;

!important (חשוב — סימון המעלה את עדיפות ההצהרה) .

בוררי CSS

Selector (בורר — מנגנון לבחירת אלמנטים) .

בורר תגית

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 (אחוז מגובה חלון התצוגה).

Functions

Function (פונקציה — ביטוי שמחשב או מייצר ערך) .

width: calc(100% - 40px);
width: min(90%, 1200px);
font-size: clamp(1rem, 3vw, 2rem);

Custom Properties

Custom Property (מאפיין מותאם אישית — משתנה לשימוש חוזר) .

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

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

מודל הקופסה

Box Model

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

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

box-sizing

* {
  box-sizing: border-box;
}

border-box גורם לרוחב ולגובה שהוגדרו לכלול את הריפוד והגבול.

Margin ו-Padding

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

Border

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

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

טיפוגרפיה

מאפייני טקסט

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: right;
}

font-family

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

font-size

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

font-weight

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

line-height

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

צבעים ורקעים

שיטות צבע

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: #05070c;

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

background-size: cover;
background-position: center;
background-repeat: no-repeat;

Gradient

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

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

Shadows

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

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

text-shadow:
  0 0 15px cyan;

פריסה וזרימת מסמך

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;
}

Flexbox

Flexbox (פריסה גמישה — מערכת לפריסה חד-ממדית) .

Container

Container (מכולה — האלמנט שמכיל את פריטי Flexbox) .

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

Main Axis

Main Axis (ציר ראשי — הציר שמוגדר על ידי flex-direction) .

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

Flex Items

Flex Item (פריט גמיש — ילד ישיר של מכולת Flex) .

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

CSS Grid

Grid (רשת — מערכת פריסה דו-ממדית) .

רשת בסיסית

.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;

מיקום פריט

.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 (נייד תחילה — תכנון בסיסי למסכים קטנים והרחבה למסכים גדולים) .

יחידות גמישות

width:
  min(100% - 2rem, 1200px);

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

Viewport

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

אפקטים ואנימציות

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;
}

3D

3D (תלת-ממד — טרנספורמציות המוסיפות עומק חזותי) יכול להשתמש ב- perspective, rotateX, rotateY ו- translateZ.

CSS מתקדם

CSS Layers

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

@layer reset, components, utilities;

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

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;
  }
}

CSS Nesting

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

.card {
  color: white;

  & .title {
    color: cyan;
  }

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

ארכיטקטורת CSS

ארגון קבצים

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

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;
}

נגישות ב-CSS

Focus

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

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

Contrast

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

Reduced Motion

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

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

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

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

בדיקה ופתרון תקלות

Developer Tools

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

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

בדוק שהבורר מתאים לאלמנט.
בדוק אם מאפיין נדרס.
בדוק ספציפיות.
בדוק ירושה.
בדוק אם הערך חוקי.
בדוק את מודל הקופסה.
בדוק פריסה ומיקום.
בדוק Media Queries.

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

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

מדריך מאפייני CSS

אינדקס מרכזי ומסודר של קבוצות מאפיינים נפוצות.

טבלת מאפיינים

תחום	מאפיינים	מטרה
צבע	color, opacity	צבע ושקיפות
רקע	background, background-color, background-image	עיצוב רקעים
טקסט	font-size, font-family, line-height, text-align	עיצוב טקסט
מודל קופסה	margin, padding, border, width, height	מידות ורווחים
פריסה	display, position, overflow, z-index	מיקום וזרימה
Flexbox	flex, flex-direction, justify-content, align-items	פריסה חד-ממדית
Grid	grid-template-columns, grid-template-rows, gap	פריסה דו-ממדית
אפקטים	transform, transition, animation	תנועה ואפקטים
רשימות	list-style, list-style-type	עיצוב רשימות
טבלאות	border-collapse, border-spacing, table-layout	עיצוב טבלאות
נגישות	outline, forced-color-adjust, prefers-reduced-motion	שיפור חוויית משתמש

עיקרון לימוד CSS

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