פרקים:הקדמה
ידע מקדים
מטרת המדריך
מהו CSS?
תחביר
יישום CSS בדפי HTML
צבעים
אורך ואחוזים
בוררים
Margin ו – Padding
מודל הקופסה ב- CSS
גבולות
דוגמאה סופית
סיכום
מקורות
המלצותהקדמהאני לא אוהב כשבמדרכים מתחילים לבלבל תשכל עם הרבה טקסט וכול מיני שטויות, בקיצור אני עצלן אז אל תצפו להרבה מלל .לדעתי הדרך הטובה ביותר ללמוד זה ע"י דוגמאות!ידע מקדיםאל מנת ללמוד CSS יש צורך ללמוד (רצוי לעומק) HTML.מטרת המדריךמטרת המדריך הוא לתת ידע בסיסי ב CSS.מהו CSS?css הינה ראשי תיבות של Cascading Style Sheets.CSS משמשת לעיצוב מסמכי HTML ויצירת תבניות לאתרי אינטרנט.תחביראני ישר מתחיל בדוגמאות והסברים (כך לאורך כול המדריך).[code]selector{ property : vaule;}[/code]selector- תג ה HTML לדוגמא שאליו התכונה משתייכת.property- תכונה, לדוגמא : גובה, רוחב, רקע.vaule- ערך במספרים או קישור לקובץ או צבע הרקע.יישום CSS בדפי HTMLישנם כמה דרכים לישום CSS בדפי HTML:דרך א'- יישום רציף= ישום חד פעמי לתג HTML.[code]<p>מדריך CSS למתחילים</p>[/code]דרך ב'- יישום פנימי= יישום CSS על דף ספיציפי (בתוך התגית HEAD).[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>CSS מדריך</title><style type="text/css"> p { color: red; } a { color: blue; }</style>[/code]דרך ג' - יישום חיצוני= יישום זה היעיל מבין כולם, יוצרים דף חדש עם סיומת name.css ומשלבים עם דף HTML.name.css[code] p { color: red; } a { color: blue; }[/code]name.html[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>CSS מדריך</title> <link rel="stylesheet" type="text/css" href="myfile.css" />[/code]ישנם עוד כמה דרכים אבל אני לא יפרט עליהם כי זה לא נחוץ כרגע.צבעיםב- CSS אפשר לציין צבעים בשמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.[code] red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00[/code]אורך ואחוזים 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 - יישור טקסטדוגמא מסכמת[code]font-family: "Times New Roman"font-weight: boldfont-weight: normalfont-style: italicfont-style: normalfont-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;[/code]בורריםכפי שלשפת HTML ישנן תגיות בשפת CSS ישנם בוררים (selectors). [code] body { font-size: 0.8em; color: navy; }[/code]בורר ה – body קיבל ערכים קבועים לגודל וצבע הפונט. גודל פונט 0.8 צבע navyMargin ו – Paddingתכונה לריווח בין אלמנטים.margin= ריווח מחוץ לאלמנטpadding= ריווח בתוך אלמנט[code]margin: 5em;padding: 11em;[/code]מודל הקופסה ב- CSSאחד הדברים החשובים ב CSS זהו מודל הקופסה, כאשר יש אלמנט מסויים מעלב שכבת ריפוד, גבול, ושוליים.בציור הבא (שמצאתי בגוגל :1smiley:) מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!)גבולותב CSS מגדירים גבולות ע"י border. [code] border-style: dashed;border-width: 3px; [/code]דוגמאה סופית[code]<!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> [/code]
מקורות השתמשתי בתוכן עניינים של האתר cssguide.סיכוםלסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS.קרדיט על המדריך הוא לי ולחברה
MyComp - תיקון ומכירת מחשבים נייחים וניידים טכנאי מחשבים מקור המדריךמקורות השתמשתי בתוכן עניינים של האתר cssguide.