מדריך CSS - Cascading Style Sheets

למה CSS? CSS היא שפת עיצוב המשמשת לשליטה על המראה והפריסה של מסמכי HTML. היא מאפשרת להפריד בין התוכן (HTML) לעיצוב, מה שהופך את האתרים לקלים יותר לתחזוקה ולרספונסיביות.

פקודות בסיסיות ב-CSS:

color - צבע טקסט

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

p {
  color: #ADD8E6; /* כחול בהיר */
}
background-color - צבע רקע

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

div {
  background-color: #555;
}
font-family - גופן

מגדיר את משפחת הגופנים.

body {
  font-family: 'Verdana', sans-serif;
}
font-size - גודל גופן

קובע את גודל הטקסט.

h1 {
  font-size: 2em;
}
font-weight - עובי גופן

קובע את עובי הגופן (normal, bold, או ערך מספרי).

strong {
  font-weight: bold;
}
text-align - יישור טקסט

מיישר טקסט בתוך אלמנט (left, right, center, justify).

h2 {
  text-align: center;
}
margin - רווח חיצוני

מגדיר רווח מסביב לאלמנט.

img {
  margin: 10px;
}
padding - ריפוד פנימי

מגדיר רווח בתוך האלמנט.

button {
  padding: 8px 12px;
}
border - גבול

מגדיר גבול סביב אלמנט.

div {
  border: 1px solid #777;
}
border-radius - פינות מעוגלות

מעגל את פינות האלמנט.

img {
  border-radius: 5px;
}
box-shadow - צל

מוסיף צל לאלמנט.

div {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
width, height - רוחב וגובה

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

img {
  width: 100px;
  height: auto;
}
display - סוג תצוגה

קובע כיצד אלמנט יוצג (לדוגמה, block, inline, flex).

.container {
  display: flex;
}
position - מיקום אלמנטים

קובע את שיטת המיקום (static, relative, absolute, fixed).

.fixed-element {
  position: fixed;
  top: 10px;
  left: 10px;
}
opacity - שקיפות

קובע את רמת השקיפות (בין 0 ל-1).

img:hover {
  opacity: 0.6;
}
transition - אנימציות מעבר

מאפשר ליצור אנימציה חלקה בין מצבים שונים של מאפיין CSS.

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: darkblue;
}
transform - טרנספורמציות

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

div:hover {
  transform: scale(1.05); /* הגדלה קלה */
}
@media - שאילתות מדיה

מאפשר ליישם סגנונות שונים בהתאם למאפייני המכשיר (לדוגמה, רוחב מסך).

@media (max-width: 600px) {
  body {
    background-color: #444; /* רקע שונה במסכים קטנים */
  }
}
:hover - פסאודו-קלאס

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

a:hover {
  text-decoration: underline;
}
flex-direction - כיוון Flexbox

קובע את הכיוון של פריטים בתוך מיכל flex (row, column).

.container {
  display: flex;
  flex-direction: column;
}
justify-content - יישור Flexbox

מיישר את הפריטים לאורך הציר הראשי ב-flexbox.

.container {
  display: flex;
  justify-content: center; /* מרכוז */
}
align-items - יישור Flexbox (ציר משני)

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

.container {
  display: flex;
  align-items: center; /* מרכוז */
}
cursor - סמן העכבר

מגדיר את סמן העכבר שיופיע מעל אלמנט (pointer, default, text).

a {
  cursor: pointer;
}
text-decoration - קישוט טקסט

קובע קישוטים לטקסט (none, underline, overline, line-through).

a {
  text-decoration: none;
}
list-style-type - סוג תבליטי רשימה

קובע את סוג התבליטים עבור פריטי רשימה (none, disc, circle, square).

ul {
  list-style-type: none; /* הסרת תבליטים */
}
overflow - גלילה

קובע מה יקרה כאשר התוכן של אלמנט חורג מהמימדים שלו (visible, hidden, scroll, auto).

.scroll-box {
  width: 150px;
  height: 80px;
  overflow: auto;
}