פרקים:
הקדמה
ידע מקדים
מטרת המדריך
מהו CSS?
תחביר
יישום CSS בדפי HTML
צבעים
אורך ואחוזים
בוררים
Margin ו – Padding
מודל הקופסה ב- CSS
גבולות
דוגמאה סופית
סיכום
מקורות
המלצות
הקדמה
אני לא אוהב כשבמדרכים מתחילים לבלבל תשכל עם הרבה טקסט וכול מיני שטויות, בקיצור אני עצלן אז אל תצפו להרבה מלל .
לדעתי הדרך הטובה ביותר ללמוד זה ע"י דוגמאות!
ידע מקדים
אל מנת ללמוד CSS יש צורך ללמוד (רצוי לעומק) HTML.
מטרת המדריך
מטרת המדריך הוא לתת ידע בסיסי ב CSS.
מהו CSS?
css הינה ראשי תיבות של Cascading Style Sheets.
CSS משמשת לעיצוב מסמכי HTML ויצירת תבניות לאתרי אינטרנט.
תחביר
אני ישר מתחיל בדוגמאות והסברים (כך לאורך כול המדריך).
קוד:
selector{ property : vaule;}
selector- תג ה HTML לדוגמא שאליו התכונה משתייכת.
property- תכונה, לדוגמא : גובה, רוחב, רקע.
vaule- ערך במספרים או קישור לקובץ או צבע הרקע.
יישום CSS בדפי HTML
ישנם כמה דרכים לישום CSS בדפי HTML:
דרך א'- יישום רציף= ישום חד פעמי לתג HTML.
קוד:
<p style="color: red">מדריך CSS למתחילים</p>
דרך ב'- יישום פנימי= יישום CSS על דף ספיציפי (בתוך התגית HEAD).
קוד:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
דרך ג' - יישום חיצוני= יישום זה היעיל מבין כולם, יוצרים דף חדש עם סיומת name.css ומשלבים עם דף HTML.
name.css
קוד:
color: red;
}
a {
color: blue;
}
name.html
קוד:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
ישנם עוד כמה דרכים אבל אני לא יפרט עליהם כי זה לא נחוץ כרגע.
צבעים
ב- CSS אפשר לציין צבעים בשמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.
קוד:
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00
אורך ואחוזים
em – לציון, גודל מחושב של פונט. כך ש – 2em יגדיל את הטקסט פי 2 מהמצב הקיים.
px – לציון, פיקסלים.
pt – לציון, נקודות.
% - לציון, אחוזים.
טקסט
font-family - סוג פונט
font-size - גודל פונט
font-weight -הדגשה
font-style - נטוי
text-decoration - קו תחתון
text-transform - אותיות גדולות (לא שימושי בעברית)
letter-spacing - רווח בין הטקסט
word-spacing - רווח בין הטקסט
line-height - גובהה שורה
text-align - יישור טקסט
דוגמא מסכמת
קוד:
font-family: "Times New Roman"
font-weight: bold
font-weight: normal
font-style: italic
font-style: normal
font-size: 2em;
text-decoration: none;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
בוררים
כפי שלשפת HTML ישנן תגיות בשפת CSS ישנם בוררים (selectors).
קוד:
font-size: 0.8em;
color: navy;
}
בורר ה – body קיבל ערכים קבועים לגודל וצבע הפונט.
גודל פונט 0.8
צבע navy
Margin ו – Padding
תכונה לריווח בין אלמנטים.
margin= ריווח מחוץ לאלמנט
padding= ריווח בתוך אלמנט
מודל הקופסה ב- CSS
אחד הדברים החשובים ב CSS זהו מודל הקופסה, כאשר יש אלמנט מסויים מעלב שכבת ריפוד, גבול, ושוליים.
בציור הבא (שמצאתי בגוגל :1smiley
מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!)
גבולות
ב CSS מגדירים גבולות ע"י border.
קוד:
border-style: dashed;
דוגמאה סופית
קוד:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
קוד:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>יישור באמצע</title>
<style type="text/css">
#centerLayer {
position: absolute; /* יישור אבסלוטי */
width: 280px; /* אובי בפיקסלים */
height: 180px; /* אורך בפיקסלים */
left: 50%; /* מיקום משמאל */
top: 50%; /* מיקום מלמעלה */
margin-left: -150px; /* הזחה שמאלית */
margin-top: -100px; /* הזחה מלמעלה */
background: #fc0; /* צבע רקע */
border: solid 1px black; /* גבול מסביב */
padding: 10px; /* ריפוד מסביב הטקסט */
overflow: auto; /* הוספת גלילה */
}
</style>
</head>
<body>
<div id="centerLayer">
texttexttexttexttexttexttexttexttexttexttexttextt exttext<br>
texttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttext<br>
<>
</body>
</html>
סיכום
לסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS.
אם אתם רוצים שאני ארכיב/יסביר יותר על תתבישו להגיב :1wink:.
אנא ציינו שגיאות כתיב/תוכן.
קרדיט על המדריך הוא לי ולחברה MyComp.
מקורות
השתמשתי בתוכן עניינים של האתר cssguide.
המלצות
ממליץ בחום להמשיך ללמוד את השפה CSS
כמה אתרים טובים ללמוד דרכם:
לדוברי עברית: http://www.devschool.co.il
לדוברי רוסית: http://htmlbook.ru/
לדוברי אנגלית: http://www.w3schools.com
סיכום
לסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS.
אם אתם רוצים שאני ארכיב/יסביר יותר על תתבישו להגיב
אנא ציינו שגיאות כתיב/תוכן.
קרדיט על המדריך הוא לי ולחברה MyComp.
מקורות
השתמשתי בתוכן עניינים של האתר cssguide.
CSS למתחילים
ציטוט ההודעה
