CopyCode
יסודות HTML
💡 מה זה HTML?
HTML - HyperText Markup Language. שפת הסימון של האינטרנט!לא שפת תכנות! HTML מגדיר את המבנה והתוכן של הדף.
Tags (תגיות) - אבני הבניין של HTML. כל תג מתחיל ב-< ונגמר ב->
למה ללמוד? כל אתר באינטרנט בנוי מ-HTML!
טיפ: HTML5 הוא הגרסה המודרנית - תמיד השתמשו בה!
מבנה בסיסי
דף HTML מינימלי:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>שם הדף</title>
</head>
<body>
<h1>שלום עולם!</h1>
</body>
</html>
<!DOCTYPE html> - אומר לדפדפן שזה HTML5
<html> - שורש המסמך
<head> - מידע על הדף (לא נראה למשתמש)
<body> - התוכן שנראה בדף
<html> - שורש המסמך
<head> - מידע על הדף (לא נראה למשתמש)
<body> - התוכן שנראה בדף
תגיות נפוצות ב-Head
Meta tags חשובים:
<head>
<!-- קידוד תווים (חובה לעברית!) -->
<meta charset="UTF-8">
<!-- Responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- תיאור לגוגל -->
<meta name="description" content="תיאור האתר">
<!-- כותרת הדף -->
<title>שם האתר</title>
<!-- קישור ל-CSS -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
</head>
הערות
הערות ב-HTML:
<!-- זו הערה - לא תוצג בדף -->
<!--
הערה
מרובת
שורות
-->
מבנה דף
💡 ארגון הדף
Semantic HTML - תגיות שמתארות את התוכן שלהן.למה זה חשוב? עוזר לגוגל להבין את האתר, נגישות, קריאות קוד.
טיפ: השתמשו ב-header, nav, main, footer במקום div בלבד!
Divs ו-Containers
תגיות מכילות:
<!-- div - מכל כללי -->
<div class="container">
תוכן כלשהו
</div>
<!-- span - מכל inline -->
<p>זה <span class="highlight">טקסט מודגש</span> בפסקה</p>
div - בלוק (תופס שורה שלמה)
span - inline (בתוך שורה)
span - inline (בתוך שורה)
טקסט ופסקאות
💡 עיצוב טקסט
כותרות - h1 עד h6 (h1 הכי חשוב)פסקאות - <p> לטקסט רגיל
חשוב! רק כותרת h1 אחת בדף (SEO)
טיפ: אל תדלגו רמות כותרות (h1 → h3 ❌)
כותרות
6 רמות כותרות:
<h1>כותרת ראשית</h1>
<h2>כותרת משנית</h2>
<h3>כותרת רמה 3</h3>
<h4>כותרת רמה 4</h4>
<h5>כותרת רמה 5</h5>
<h6>כותרת רמה 6</h6>
פסקאות ושורות
טקסט רגיל:
<p>זו פסקה רגילה של טקסט.</p>
<p>פסקה נוספת.</p>
<!-- שבירת שורה -->
<p>שורה ראשונה<br>שורה שנייה</p>
<!-- קו אופקי -->
<hr>
עיצוב טקסט
תגיות עיצוב:
<!-- מודגש (bold) -->
<strong>טקסט חשוב</strong>
<b>טקסט מודגש</b>
<!-- נטוי (italic) -->
<em>טקסט מודגש</em>
<i>טקסט נטוי</i>
<!-- קו תחתון -->
<u>טקסט עם קו תחתון</u>
<!-- קו חוצה -->
<s>טקסט מחוק</s>
<!-- קטן -->
<small>טקסט קטן</small>
<!-- מסומן -->
<mark>טקסט מסומן</mark>
<!-- קוד -->
<code>console.log("Hello")</code>
<!-- כתב עליון/תחתון -->
H<sub>2</sub>O
x<sup>2</sup>
strong/em - משמעות סמנטית (מומלץ)
b/i - רק עיצוב ויזואלי
b/i - רק עיצוב ויזואלי
קישורים ותמונות
💡 קישורים ומדיה
קישור - <a> (anchor) מקשר בין דפים.תמונה - <img> מציגה תמונות.
חשוב! תמיד הוסיפו alt לתמונות (נגישות + SEO)
טיפ: השתמשו ב-target="_blank" לפתיחה בטאב חדש
קישורים
סוגי קישורים:
<!-- קישור חיצוני -->
<a href="https://www.google.com">גוגל</a>
<!-- קישור פנימי -->
<a href="about.html">אודות</a>
<!-- פתיחה בטאב חדש -->
<a href="https://example.com" target="_blank">קישור</a>
<!-- קישור למייל -->
<a href="mailto:email@example.com">שלח מייל</a>
<!-- קישור לטלפון -->
<a href="tel:+972501234567">התקשר</a>
<!-- עוגן (anchor) -->
<a href="#section1">קפוץ לסעיף</a>
<div id="section1">תוכן הסעיף</div>
תמונות
הוספת תמונות:
<!-- תמונה בסיסית -->
<img src="image.jpg" alt="תיאור התמונה">
<!-- עם גודל -->
<img src="image.jpg" alt="תיאור" width="300" height="200">
<!-- תמונה קליקבילית -->
<a href="page.html">
<img src="image.jpg" alt="תיאור">
</a>
<!-- תמונה responsive -->
<img src="image.jpg" alt="תיאור" style="max-width: 100%; height: auto;">
src - נתיב לתמונה
alt - תיאור (חובה!)
width/height - גודל בפיקסלים
alt - תיאור (חובה!)
width/height - גודל בפיקסלים
וידאו ואודיו
מדיה מתקדמת:
<!-- וידאו -->
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
הדפדפן לא תומך בוידאו
</video>
<!-- אודיו -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
הדפדפן לא תומך באודיו
</audio>
<!-- YouTube embed -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allowfullscreen>
</iframe>
רשימות
💡 סוגי רשימות
רשימה ממוספרת - <ol> (Ordered List)רשימה עם תבליטים - <ul> (Unordered List)
רשימת הגדרות - <dl> (Description List)
טיפ: אפשר לקנן רשימות אחת בתוך השנייה!
רשימה ממוספרת
Ordered List:
<ol>
<li>פריט ראשון</li>
<li>פריט שני</li>
<li>פריט שלישי</li>
</ol>
<!-- התחלה ממספר אחר -->
<ol start="5">
<li>פריט חמישי</li>
<li>פריט שישי</li>
</ol>
<!-- סוגי מספור -->
<ol type="A"> <!-- A, B, C -->
<ol type="a"> <!-- a, b, c -->
<ol type="I"> <!-- I, II, III -->
<ol type="i"> <!-- i, ii, iii -->
רשימה עם תבליטים
Unordered List:
<ul>
<li>פריט ראשון</li>
<li>פריט שני</li>
<li>פריט שלישי</li>
</ul>
<!-- רשימה מקוננת -->
<ul>
<li>פריט ראשי
<ul>
<li>תת-פריט 1</li>
<li>תת-פריט 2</li>
</ul>
</li>
<li>פריט שני</li>
</ul>
רשימת הגדרות
Description List:
<dl>
<dt>HTML</dt>
<dd>שפת סימון לבניית דפי אינטרנט</dd>
<dt>CSS</dt>
<dd>שפת עיצוב לדפי אינטרנט</dd>
<dt>JavaScript</dt>
<dd>שפת תכנות לאינטראקטיביות</dd>
</dl>
טבלאות
💡 טבלאות ב-HTML
טבלה - מבנה של שורות ועמודות.מתי להשתמש? רק לנתונים טבלאיים! לא לעיצוב דף.
מבנה: table → tr (שורה) → td (תא)
טיפ: השתמשו ב-thead, tbody, tfoot למבנה נכון!
טבלה בסיסית
מבנה טבלה:
<table>
<thead>
<tr>
<th>שם</th>
<th>גיל</th>
<th>עיר</th>
</tr>
</thead>
<tbody>
<tr>
<td>אליס</td>
<td>25</td>
<td>תל אביב</td>
</tr>
<tr>
<td>בוב</td>
<td>30</td>
<td>ירושלים</td>
</tr>
</tbody>
</table>
th - תא כותרת (מודגש)
td - תא רגיל
tr - שורה
td - תא רגיל
tr - שורה
מיזוג תאים
colspan ו-rowspan:
<table>
<tr>
<th colspan="2">שם מלא</th>
<th>גיל</th>
</tr>
<tr>
<td>אליס</td>
<td>כהן</td>
<td rowspan="2">25</td>
</tr>
<tr>
<td>בוב</td>
<td>לוי</td>
</tr>
</table>
טפסים (Forms)
💡 טפסים ב-HTML
טופס - אוסף שדות קלט לקבלת מידע מהמשתמש.למה זה חשוב? כל אתר עם התחברות, הרשמה, חיפוש משתמש בטפסים!
input types - יש המון סוגים: text, email, password, number...
טיפ: תמיד הוסיפו label לכל input (נגישות!)
טופס בסיסי
מבנה טופס:
<form action="/submit" method="POST">
<!-- שדה טקסט -->
<label for="name">שם:</label>
<input type="text" id="name" name="name" required>
<!-- אימייל -->
<label for="email">אימייל:</label>
<input type="email" id="email" name="email" required>
<!-- סיסמה -->
<label for="password">סיסמה:</label>
<input type="password" id="password" name="password" required>
<!-- כפתור שליחה -->
<button type="submit">שלח</button>
</form>
סוגי Input
כל סוגי ה-input:
<!-- טקסט -->
<input type="text" placeholder="הכנס טקסט">
<!-- מספר -->
<input type="number" min="0" max="100" step="5">
<!-- אימייל -->
<input type="email" placeholder="email@example.com">
<!-- טלפון -->
<input type="tel" placeholder="050-1234567">
<!-- URL -->
<input type="url" placeholder="https://example.com">
<!-- תאריך -->
<input type="date">
<!-- זמן -->
<input type="time">
<!-- צבע -->
<input type="color">
<!-- קובץ -->
<input type="file" accept="image/*">
<!-- טווח (slider) -->
<input type="range" min="0" max="100" value="50">
Checkbox ו-Radio
בחירה מרובה ויחידה:
<!-- Checkbox - בחירה מרובה -->
<label>
<input type="checkbox" name="hobbies" value="reading">
קריאה
</label>
<label>
<input type="checkbox" name="hobbies" value="sports">
ספורט
</label>
<!-- Radio - בחירה יחידה -->
<label>
<input type="radio" name="gender" value="male">
זכר
</label>
<label>
<input type="radio" name="gender" value="female">
נקבה
</label>
Select ו-Textarea
רשימה נפתחת וטקסט מרובה שורות:
<!-- רשימה נפתחת -->
<label for="city">עיר:</label>
<select id="city" name="city">
<option value="">בחר עיר</option>
<option value="tlv">תל אביב</option>
<option value="jlm">ירושלים</option>
<option value="hfa">חיפה</option>
</select>
<!-- טקסט מרובה שורות -->
<label for="message">הודעה:</label>
<textarea id="message" name="message" rows="5" cols="30">
</textarea>
תכונות שימושיות
Attributes חשובים:
<!-- חובה -->
<input type="text" required>
<!-- לא ניתן לעריכה -->
<input type="text" readonly value="לא ניתן לשינוי">
<!-- מושבת -->
<input type="text" disabled>
<!-- ערך ברירת מחדל -->
<input type="text" value="ברירת מחדל">
<!-- Placeholder -->
<input type="text" placeholder="הכנס טקסט כאן">
<!-- אורך מינימלי/מקסימלי -->
<input type="text" minlength="3" maxlength="20">
<!-- Pattern (Regex) -->
<input type="text" pattern="[0-9]{3}-[0-9]{7}">
<!-- Autofocus -->
<input type="text" autofocus>
HTML5 Semantic Elements
💡 Semantic HTML
Semantic - תגיות שמתארות את המשמעות שלהן.למה זה חשוב? SEO, נגישות, קריאות קוד.
במקום div - השתמשו ב-header, nav, main, article, section, footer
טיפ: גוגל אוהב Semantic HTML!
מבנה דף סמנטי
דף מלא עם תגיות סמנטיות:
<body>
<!-- כותרת עליונה -->
<header>
<h1>שם האתר</h1>
<nav>
<ul>
<li><a href="#">בית</a></li>
<li><a href="#">אודות</a></li>
<li><a href="#">צור קשר</a></li>
</ul>
</nav>
</header>
<!-- תוכן ראשי -->
<main>
<article>
<h2>כותרת מאמר</h2>
<p>תוכן המאמר...</p>
</article>
<section>
<h2>סעיף</h2>
<p>תוכן הסעיף...</p>
</section>
</main>
<!-- סרגל צד -->
<aside>
<h3>מידע נוסף</h3>
<p>תוכן צדדי...</p>
</aside>
<!-- כותרת תחתונה -->
<footer>
<p>© 2025 כל הזכויות שמורות</p>
</footer>
</body>
header - כותרת עליונה
nav - תפריט ניווט
main - תוכן ראשי (רק אחד בדף!)
article - תוכן עצמאי
section - קטע בדף
aside - תוכן צדדי
footer - כותרת תחתונה
nav - תפריט ניווט
main - תוכן ראשי (רק אחד בדף!)
article - תוכן עצמאי
section - קטע בדף
aside - תוכן צדדי
footer - כותרת תחתונה
תגיות נוספות
תגיות שימושיות:
<!-- פרטים נפתחים -->
<details>
<summary>לחץ לפתיחה</summary>
<p>תוכן נסתר שנפתח בלחיצה</p>
</details>
<!-- סימון זמן -->
<time datetime="2025-01-01">1 בינואר 2025</time>
<!-- ציטוט -->
<blockquote cite="https://example.com">
<p>זהו ציטוט ארוך</p>
</blockquote>
<!-- קוד -->
<pre><code>
function hello() {
console.log("Hello!");
}
</code></pre>
יסודות CSS
💡 מה זה CSS?
CSS - Cascading Style Sheets. שפת העיצוב של האינטרנט!למה זה חשוב? HTML = מבנה, CSS = עיצוב. ביחד הם יוצרים אתר יפה!
3 דרכים להוסיף CSS: Inline, Internal, External
טיפ: תמיד השתמשו ב-External CSS (קובץ נפרד)!
דרכים להוסיף CSS
1. Inline CSS (לא מומלץ):
<p style="color: red; font-size: 20px;">טקסט אדום</p>
2. Internal CSS:
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
3. External CSS (מומלץ!):
<!-- ב-HTML -->
<head>
<link rel="stylesheet" href="style.css">
</head>
/* בקובץ style.css */
p {
color: red;
font-size: 20px;
}
תחביר CSS
מבנה כלל CSS:
/* Selector */
selector {
property: value;
another-property: value;
}
/* דוגמה */
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
/* הערה ב-CSS */
/* זו הערה */
Selector - מה לעצב
Property - איזה מאפיין
Value - איזה ערך
Property - איזה מאפיין
Value - איזה ערך
CSS Selectors
💡 מה זה Selector?
Selector - איך בוחרים איזה אלמנט לעצב.סוגים עיקריים: Element, Class, ID
כלל חשוב: Class לשימוש חוזר, ID לאלמנט יחיד!
טיפ: השתמשו ב-class יותר מ-ID!
Selectors בסיסיים
סוגי Selectors:
/* Element Selector - כל ה-p */
p {
color: blue;
}
/* Class Selector - כל מי שיש לו class="highlight" */
.highlight {
background-color: yellow;
}
/* ID Selector - האלמנט עם id="header" */
#header {
font-size: 24px;
}
/* Universal Selector - הכל */
* {
margin: 0;
padding: 0;
}
/* Multiple Selectors */
h1, h2, h3 {
color: navy;
}
Combinators
שילוב Selectors:
/* Descendant - כל p בתוך div */
div p {
color: red;
}
/* Child - רק p ישיר של div */
div > p {
color: blue;
}
/* Adjacent Sibling - p מיד אחרי h2 */
h2 + p {
font-weight: bold;
}
/* General Sibling - כל p אחרי h2 */
h2 ~ p {
color: gray;
}
Pseudo-classes
מצבים מיוחדים:
/* Hover - כשעוברים עם העכבר */
a:hover {
color: red;
}
/* Active - בזמן לחיצה */
button:active {
background-color: darkblue;
}
/* Focus - כשהאלמנט בפוקוס */
input:focus {
border-color: blue;
}
/* First/Last child */
li:first-child {
font-weight: bold;
}
li:last-child {
color: red;
}
/* Nth child */
li:nth-child(2) {
color: blue;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: white;
}
Pseudo-elements
חלקים מיוחדים:
/* Before - הוספת תוכן לפני */
p::before {
content: "→ ";
color: blue;
}
/* After - הוספת תוכן אחרי */
p::after {
content: " ←";
color: red;
}
/* First letter */
p::first-letter {
font-size: 2em;
font-weight: bold;
}
/* First line */
p::first-line {
color: blue;
}
/* Selection - טקסט מסומן */
::selection {
background-color: yellow;
color: black;
}
Attribute Selectors
בחירה לפי תכונות:
/* יש תכונה */
[disabled] {
opacity: 0.5;
}
/* ערך מדויק */
[type="text"] {
border: 1px solid gray;
}
/* מתחיל ב */
[href^="https"] {
color: green;
}
/* מסתיים ב */
[href$=".pdf"] {
color: red;
}
/* מכיל */
[class*="btn"] {
padding: 10px;
}
צבעים ורקעים
💡 צבעים ב-CSS
4 דרכים להגדיר צבע: שם, HEX, RGB, HSLHEX - הנפוץ ביותר (#FF0000)
RGBA/HSLA - עם שקיפות (Alpha)
טיפ: השתמשו במשתני CSS לצבעים חוזרים!
דרכים להגדיר צבע
פורמטים שונים:
/* שם צבע */
color: red;
color: blue;
color: transparent;
/* HEX */
color: #FF0000; /* אדום */
color: #00FF00; /* ירוק */
color: #0000FF; /* כחול */
color: #F00; /* קיצור ל-#FF0000 */
/* RGB */
color: rgb(255, 0, 0); /* אדום */
color: rgb(0, 255, 0); /* ירוק */
/* RGBA - עם שקיפות */
color: rgba(255, 0, 0, 0.5); /* אדום 50% שקוף */
/* HSL */
color: hsl(0, 100%, 50%); /* אדום */
/* HSLA - עם שקיפות */
color: hsla(0, 100%, 50%, 0.5);
רקעים
Background properties:
/* צבע רקע */
background-color: #f0f0f0;
/* תמונת רקע */
background-image: url('image.jpg');
/* חזרה */
background-repeat: no-repeat; /* ללא חזרה */
background-repeat: repeat-x; /* חזרה אופקית */
background-repeat: repeat-y; /* חזרה אנכית */
/* מיקום */
background-position: center;
background-position: top right;
background-position: 50% 50%;
/* גודל */
background-size: cover; /* מכסה את כל השטח */
background-size: contain; /* מתאים לגודל */
background-size: 100% auto;
/* קיבוע */
background-attachment: fixed; /* קבוע בגלילה */
/* קיצור דרך */
background: #f0f0f0 url('image.jpg') no-repeat center/cover;
Gradients
מעברי צבע:
/* Linear Gradient */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, yellow, green);
background: linear-gradient(to bottom, #ff0000, #00ff00);
/* Radial Gradient */
background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at center, red, blue);
/* Multiple stops */
background: linear-gradient(
to right,
red 0%,
yellow 50%,
green 100%
);
עיצוב טקסט
💡 Typography ב-CSS
Typography - עיצוב הטקסט באתר.חשוב! טקסט קריא = חוויית משתמש טובה.
Google Fonts - פונטים בחינם!
טיפ: גודל פונט מינימלי: 16px למובייל
פונטים
Font properties:
/* משפחת פונט */
font-family: Arial, Helvetica, sans-serif;
font-family: 'Times New Roman', serif;
font-family: 'Courier New', monospace;
/* גודל */
font-size: 16px;
font-size: 1.5em;
font-size: 1.2rem;
/* משקל (עובי) */
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 300; /* דק */
font-weight: 900; /* עבה מאוד */
/* סגנון */
font-style: normal;
font-style: italic;
font-style: oblique;
/* קיצור דרך */
font: italic bold 16px/1.5 Arial, sans-serif;
עיצוב טקסט
Text properties:
/* יישור */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
/* קישוט */
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
/* טרנספורמציה */
text-transform: uppercase; /* אותיות גדולות */
text-transform: lowercase; /* אותיות קטנות */
text-transform: capitalize; /* אות ראשונה גדולה */
/* צל */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* רווח בין אותיות */
letter-spacing: 2px;
letter-spacing: 0.1em;
/* רווח בין מילים */
word-spacing: 5px;
/* גובה שורה */
line-height: 1.5;
line-height: 24px;
/* הזחה */
text-indent: 20px;
Google Fonts
שימוש בפונטים מגוגל:
<!-- ב-HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
rel="stylesheet">
/* ב-CSS */
body {
font-family: 'Roboto', sans-serif;
}
Box Model
מה זה Box Model?
Box Model - כל אלמנט הוא קופסה עם: Content, Padding, Border, Marginחשוב להבין! זה הבסיס לעיצוב ב-CSS.
box-sizing: border-box - מקל על החישובים (מומלץ!)
טיפ: השתמשו ב-DevTools כדי לראות את ה-Box Model
Margin, Padding, Border
המרווחים:
/* Margin - מרווח חיצוני */
margin: 20px;
margin: 10px 20px; /* אנכי אופקי */
margin: 10px 20px 30px 40px; /* למעלה ימין למטה שמאל */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
margin: 0 auto; /* מרכוז */
/* Padding - מרווח פנימי */
padding: 20px;
padding: 10px 20px;
padding: 10px 20px 30px 40px;
/* Border - מסגרת */
border: 1px solid black;
border-width: 2px;
border-style: solid; /* solid, dashed, dotted */
border-color: red;
border-radius: 10px; /* פינות מעוגלות */
/* Box sizing */
box-sizing: border-box; /* מומלץ! */
Flexbox
מה זה Flexbox?
Flexbox - מערכת לסידור אלמנטים בשורה או בעמודה.למה זה מהפכני? מקל מאוד על יישור ומרכוז!
Container + Items - יש תכונות למכל ותכונות לפריטים.
טיפ: Flexbox מושלם לניווט, כפתורים, כרטיסים
Container Properties
תכונות למכל:
.container {
display: flex;
/* כיוון */
flex-direction: row; /* שורה (ברירת מחדל) */
flex-direction: column; /* עמודה */
/* יישור אופקי */
justify-content: flex-start;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
/* יישור אנכי */
align-items: flex-start;
align-items: center;
align-items: stretch;
/* מעבר שורה */
flex-wrap: wrap;
flex-wrap: nowrap;
/* רווח בין פריטים */
gap: 20px;
}
CSS Grid
מה זה Grid?
Grid - מערכת דו-ממדית (שורות ועמודות).למה זה חזק? מושלם ללייאאוטים מורכבים!
Grid vs Flexbox: Grid = 2D, Flexbox = 1D
טיפ: Grid מושלם ללייאאוט כללי של הדף
Grid Container
יצירת Grid:
.container {
display: grid;
/* עמודות */
grid-template-columns: 200px 200px 200px;
grid-template-columns: 1fr 1fr 1fr; /* שווה */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* שורות */
grid-template-rows: 100px 200px;
/* רווחים */
gap: 20px;
row-gap: 10px;
column-gap: 20px;
}
Responsive Design
מה זה Responsive?
Responsive - אתר שמתאים לכל גודל מסך.Mobile First! תכננו קודם למובייל, אחר כך למחשב.
Media Queries - CSS שונה לגדלים שונים.
טיפ: נקודות שבירה נפוצות: 768px, 1024px, 1440px
Media Queries
CSS לגדלים שונים:
/* Mobile First */
.container {
width: 100%;
padding: 10px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
/* Large Desktop */
@media (min-width: 1440px) {
.container {
width: 1200px;
}
}
Animations & Transitions
אנימציות ב-CSS
Transition - מעבר חלק בין מצבים.Animation - אנימציה מורכבת עם keyframes.
למה זה מגניב? הופך את האתר לחי ואינטראקטיבי!
טיפ: אל תגזימו - אנימציות עדינות הן הטובות ביותר
Transitions
מעברים חלקים:
.button {
background-color: blue;
transition: all 0.3s ease;
}
.button:hover {
background-color: red;
transform: scale(1.1);
}
/* מפורט יותר */
.box {
transition-property: background-color, transform;
transition-duration: 0.3s, 0.5s;
transition-timing-function: ease, ease-in-out;
transition-delay: 0s, 0.1s;
}
Animations
אנימציות מורכבות:
/* הגדרת אנימציה */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* שימוש */
.element {
animation: fadeIn 1s ease-in;
}
/* אנימציה מורכבת */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.bouncing {
animation: bounce 1s infinite;
}
ספריות CSS פופולריות
למה להשתמש בספריות?
ספריות CSS - קוד מוכן שחוסך זמן!למתחילים: מקל על יצירת אתרים יפים מהר.
למתקדמים: בסיס טוב להתאמה אישית.
טיפ: למדו CSS טהור לפני שעוברים לספריות!
Bootstrap
הספרייה הפופולרית ביותר:
<!-- CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- דוגמה -->
<div class="container">
<div class="row">
<div class="col-md-6">עמודה 1</div>
<div class="col-md-6">עמודה 2</div>
</div>
</div>
<button class="btn btn-primary">כפתור</button>
Tailwind CSS
Utility-first framework:
<!-- CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- דוגמה -->
<div class="flex items-center justify-center h-screen bg-gray-100">
<div class="bg-white p-8 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-blue-600">כותרת</h1>
<p class="text-gray-600 mt-4">תוכן</p>
</div>
</div>
ספריות נוספות
אפשרויות פופולריות:
/* Bulma - פשוט ומודרני */
https://bulma.io
/* Foundation - גמיש ומתקדם */
https://get.foundation
/* Materialize - Material Design */
https://materializecss.com
/* Semantic UI - קריא וסמנטי */
https://semantic-ui.com
/* Pure CSS - קל משקל */
https://purecss.io