CSS LEARNING ACADEMY

CSS

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

תחומי הלימוד

⌂ דף הבית

01 — יסודות CSS

תחביר CSS — Syntax

Syntax — תחביר: מערכת הכללים שקובעת כיצד כותבים הוראות CSS. 
selector {
  property: value;
}
  • Selector — בורר: קובע לאיזה אלמנט ההוראה מתייחסת.
  • Property — מאפיין: התכונה שאותה רוצים לשנות.
  • Value — ערך: הערך שניתן למאפיין.
  • Declaration — הצהרה: זוג של מאפיין וערך.
  • Rule — כלל: בורר יחד עם קבוצת ההצהרות שלו.
p {
  color: blue;
  font-size: 18px;
}

חיבור CSS ל־HTML

Inline CSS — CSS מוטמע בשורה

כתיבת CSS ישירות בתוך מאפיין style של אלמנט. מתאים למקרים נקודתיים אך פחות מתאים לפרויקטים גדולים. 

<p style="color: cyan;">טקסט</p>

Internal CSS — CSS פנימי

כתיבת כללי CSS בתוך תגית style במסמך HTML.

<style>
  p {
    color: cyan;
  }
</style>

External CSS — CSS חיצוני

קובץ CSS נפרד שמקושר למסמך HTML.

<link rel="stylesheet" href="style.css">
בפרויקט אמיתי בדרך כלל עדיף CSS חיצוני משום שהוא מאפשר הפרדה בין מבנה התוכן לעיצוב, שימוש חוזר ותחזוקה טובה יותר.

מאפיינים וערכים

color: white;
background-color: black;
margin: 20px;
padding: 15px;

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

הערות — Comments

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

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

⌂ דף הבית

02 — בוררים

בוררים בסיסיים

תחביר שם משמעות
p Type Selector — בורר סוג כל האלמנטים מסוג p.
.card Class Selector — בורר מחלקה אלמנטים בעלי class בשם card.
#main ID Selector — בורר מזהה אלמנט בעל מזהה main.
* Universal Selector — בורר אוניברסלי כל האלמנטים. 
p { color: white; }

.card { padding: 20px; }

#main { max-width: 900px; }

* { box-sizing: border-box; }

Combinators — שילוב בוררים

.card p
.card > p
h2 + p
h2 ~ p
  • space — Descendant — צאצא בכל עומק.
  • > — Child — ילד ישיר.
  • + — Adjacent Sibling — אח ישיר הבא.
  • ~ — General Sibling — אחים מאוחרים באותו הורה.

Attribute Selectors — בוררי מאפיינים

[disabled]
[type="text"]
[href^="https"]
[href$=".pdf"]
[class*="card"]

בוררים אלה מאפשרים לבחור אלמנטים לפי נוכחות או ערך של מאפיין HTML.

Pseudo-classes ו־Pseudo-elements

Pseudo-class — מחלקה מדומה

a:hover { color: cyan; }
button:focus-visible { outline: 2px solid cyan; }
input:disabled { opacity: .5; }

Pseudo-element — אלמנט מדומה

.card::before {
  content: "";
  display: block;
}
⌂ דף הבית

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

Cascade — המפל

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

מפל — Cascade: מנגנון שמכריע אילו הצהרות CSS ינצחו כאשר קיימות הצהרות מתחרות.