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

יסודות CSS

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

מבנה כלל CSS

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

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

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

Value (ערך — הערך שמקבל המאפיין) הוא למשל blue (כחול).

שלוש דרכי שילוב

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

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

הערות

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

הערות אינן משפיעות על המראה והן משמשות לתיעוד הקוד.

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

תחביר CSS

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

כלל בסיסי

selector {
  property: value;
}

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

קבוצת בוררים

h1, h2, h3 {
  color: white;
}

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

מפל, ירושה וסדר עדיפויות

Cascade

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

Inheritance

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

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

!important

color: red !important;

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

בוררי CSS

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

בורר תגית

p {
  color: white;
}

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

בורר מחלקה

.card {
  padding: 20px;
}

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

בורר מזהה

#header {
  background: black;
}

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

בורר אוניברסלי

* {
  box-sizing: border-box;
}

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

בוררי קשר

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

רווח מציין צאצא בכל עומק; הסימן > מציין ילד ישיר; הסימנים + ו- ~ מתארים אחים סמוכים וכלליים.

Attribute Selector

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

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

בוררי מצב

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

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

Pseudo-element

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

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

p::after {
  content: "";
}

ערכים, יחידות ופונקציות

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

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

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

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

פונקציות

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

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

משתנים

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

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

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

מודל הקופסה

Box Model

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

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

box-sizing

* {
  box-sizing: border-box;
}

border-box גורם לרוחב ולגובה שהוגדרו לכלול גם Padding (ריפוד) ו- Border (גבול).

Margin ו-Padding

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

Margin (שוליים — מרווח מחוץ לגבול) ו- Padding (ריפוד — מרווח בין התוכן לגבול) הם מושגים שונים.

טיפוגרפיה

מאפייני טקסט מרכזיים

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-size (גודל גופן), font-weight (עובי גופן), line-height (גובה שורה).

גופנים מותאמים

@font-face {
  font-family: "MyFont";
  src: url("font.woff2") format("woff2");
}

body {
  font-family: "MyFont", sans-serif;
}

@font-face (כלל המאפשר להגדיר גופן חיצוני).

טקסט מתקדם

CSS מאפשר שליטה ביישור, שבירת שורות, ריווח בין אותיות, ריווח בין מילים, קישוטי טקסט, הצללות, חיתוך טקסט וכיוון כתיבה.

צבעים ורקעים

שיטות צבע

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, .5);
color: hsl(0 100% 50%);
color: transparent;

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

רקע

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

צללים

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

text-shadow:
  0 0 15px cyan;

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

Display

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

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

Position

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

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

Overflow

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

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

Z-index

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

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

Flexbox

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

Container

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

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

ציר ראשי וציר משני

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

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

פריטי 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;
}

Grid Container (מכולת רשת) מכילה Grid Items (פריטי רשת).

עמודות ושורות

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

grid-template-rows:
  auto 1fr auto;

מיקום פריט

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

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

יחידות כמו vw ו- vh מאפשרות התאמה לגודל חלון התצוגה.

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

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 ו-3D

CSS מאפשר גם טרנספורמציות תלת-ממדיות באמצעות perspective, rotateX, rotateY, translateZ ומאפיינים נוספים.

CSS מתקדם

Specificity

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

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

Cascade Layers

@layer reset, components, utilities;

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

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

Logical Properties

margin-inline: auto;
padding-block: 20px;
border-inline-start: 2px solid cyan;

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

Container Queries

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

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

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

CSS Nesting

.card {
  color: white;

  & .title {
    color: cyan;
  }

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

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

ארכיטקטורת 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 וביצועי הדף) מאפשרים לבדוק אלמנטים, לשנות ערכים בזמן אמת ולזהות כללים פעילים.

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

בדוק שהבורר באמת מתאים לאלמנט.
בדוק אם מאפיין נדרס על ידי כלל אחר.
בדוק ספציפיות.
בדוק ירושה.
בדוק אם הערך חוקי.
בדוק את מודל הקופסה.
בדוק פריסה, overflow ומיקום.
בדוק 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, נגישות וביצועים פועלים יחד.