חולמים על קריירה בהייטק?
בדקו את הקורסים שלנו:
מה זה CSS?
מה זה CSS?
CSS, קיצור של Cascading Style Sheets, היא שפה המשמשת לעיצוב דפי אינטרנט. בעוד ש-HTML מגדירה את מבנה התוכן, CSS אחראית על המראה והתחושה של האתר, כולל צבעים, טיפוגרפיה, פריסות, ואפקטים חזותיים. באמצעות CSS ניתן ליצור עיצובים מודרניים ואסתטיים המשפרים את חוויית המשתמש.
איך CSS עובדת?
CSS פועלת על ידי יישום סגנונות לאלמנטים ב-HTML באמצעות כללים (Rules). כל כלל מכיל בורר (Selector) שמציין את האלמנט, ותכונות (Properties) שמגדירות את העיצוב. לדוגמה:
1
2
3
4
h1 {
color: blue;
font-size: 24px;
}בדוגמה זו, כלל ה-CSS משנה את צבע הטקסט של כותרת <h1> לכחול ומגדיר את גודל הגופן ל-24 פיקסלים.
סוגי שימושים ב-CSS
CSS מאפשרת לעצב אתרים בדרכים שונות, כולל:
1. סגנונות טקסט
CSS משמשת לשליטה בטיפוגרפיה, כולל גופנים, גודל, צבע ומרווחים:
1
2
3
4
5
p {
font-family: Arial, sans-serif;
line-height: 1.5;
color: #333;
}בדוגמה זו, כל הפסקאות באתר יוגדרו בגופן Arial עם צבע טקסט אפור כהה ומרווח שורות נוח לקריאה.
2. פריסות ותצוגות
CSS מאפשרת ליצור פריסות רספונסיביות ותצוגות מורכבות באמצעות טכניקות כמו Flexbox ו-Grid:
1
2
3
4
5
.container {
display: flex;
justify-content: space-between;
align-items: center;
}Flexbox מאפשר יישור ותכנון של אלמנטים בצורה דינמית, מותאמת למכשירים שונים.
3. אנימציות ואפקטים
באמצעות CSS ניתן להוסיף אנימציות ואפקטים שובים לעין:
1
2
3
4
5
6
7
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 2s ease-in;
}בדוגמה זו, אלמנט עם המחלקה fade-in יופיע בהדרגה עם אפקט שקיפות.
הוספת CSS לדף HTML
ישנם שלושה דרכים להוסיף CSS לדף:
<style> בקובץ HTML.<link>.style.1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="title">כותרת מעוצבת</h1>
</body>
</html>דוגמה למבנה דף שלם עם CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>ברוכים הבאים!</h1>
<p>זהו עמוד לדוגמה עם עיצוב CSS.</p>
</div>
</body>
</html>
/* styles.css */
.container {
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #4CAF50;
}
p {
font-size: 16px;
}דוגמה זו מציגה מבנה דף פשוט עם קובץ CSS חיצוני.
קישורים שימושיים נוספים
כדי ללמוד עוד על CSS ולהעמיק את הידע שלכם:
לסיכום
CSS היא שפה הכרחית לכל מפתח אינטרנט. היא מאפשרת עיצוב מתקדם של אתרים, שילוב אפקטים חזותיים ואנימציות, והתאמה אישית של חוויית המשתמש. עם CSS תוכלו להפוך את האתר שלכם למודרני, רספונסיבי ומרשים.
למידע נוסף וללימוד מעמיק יותר, בקרו בקורס ה-CSS של אתר קודבוקס.
הצטרפו לאתר קודבוקס והתחילו ללמוד תכנות לבד.
אין צורך בידע מקדים, לומדים לתכנת מאפס.
פלטפורמת תכנות המוטמעת בדפדפן שתבדוק את הקוד שלכם בזמן אמת.
קודי, מורה הבינה המלאכותית של אתר קודבוקס שיעזור לכם בפתרון שאלות הקוד באתר.
צוברים מטבעות קודבוקס במהלך הלמידה,
