פורסם 2012 במרץ 1013 שנים פרקים: ידע מקדים מטרת המדריך מהו 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""[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]<html><head><title>CSS מדריך</title><style type="text/css"> p { color: red; } a { color: blue; }</style> דרך ג' - יישום חיצוני= יישום זה היעיל מבין כולם, יוצרים דף חדש עם סיומת name.css ומשלבים עם דף HTML. name.css p { color: red; } a { color: blue; } name.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]<html><head> <title>CSS מדריך</title> <link rel="stylesheet" type="text/css" href="myfile.css" /> ישנם עוד כמה דרכים אבל אני לא יפרט עליהם כי זה לא נחוץ כרגע. צבעים ב- CSS אפשר לציין צבעים בשמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם. red 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: 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; בוררים כפי שלשפת HTML ישנן תגיות בשפת CSS ישנם בוררים (selectors). body { font-size: 0.8em; color: navy; } בורר ה – body קיבל ערכים קבועים לגודל וצבע הפונט. גודל פונט 0.8 צבע navy Margin ו – Padding תכונה לריווח בין אלמנטים. margin= ריווח מחוץ לאלמנט padding= ריווח בתוך אלמנט margin: 5em;padding: 11em; מודל הקופסה ב- CSS אחד הדברים החשובים ב CSS זהו מודל הקופסה, כאשר יש אלמנט מסויים מעלב שכבת ריפוד, גבול, ושוליים. בציור הבא (שמצאתי בגוגל :1smiley:) מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!) גבולות ב CSS מגדירים גבולות ע"י border. border-style: dashed;border-width: 3px; דוגמאה סופית <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]<html xmlns="[url]http://www.w3.org/1999/xhtml">[/url] <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> המלצות ממליץ בחום להמשיך ללמוד את השפה CSS כמה אתרים טובים ללמוד דרכם: לדוברי עברית: http://www.devschool.co.il לדוברי רוסית: http://htmlbook.ru/ לדוברי אנגלית: http://www.w3schools.com סיכום לסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS. קרדיט על המדריך הוא ל : MyComp - תיקון ומכירת מחשבים נייחים וניידים טכנאי מחשבים מקורות השתמשתי בתוכן עניינים של האתר cssguide. מקור המדריך
ארכיון
דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.