Recommended
More Related Content
Featured
Featured (20)
המדריך המקיף ללמידה עיצוב עם css עבור מתחילים בשפה העברית
- 1. ללמוד CSS אמסלם ליאור ע"י נכתב במקור נכתב עבור Webmasters.co.il
- 2. עניינים תוכן 1 . הקדמה 2 . הבסיס של CSS 3 . איך מעצבים -ב CSS 4 . פונטים עיצוב 5 . מסגרות עיצוב 6 . טבלאות עיצוב 7 . אלמנטים בין מרווחים 8 . אלמנטים מרובה עיצוב הגדרת 9 . אלמנטים ורוחב גובה 10 . בדף אלמנטים מיקום 11 . בדף אלמנטים ריחוף 12 . לעברית והתאמה המלל יישור 13 . קישורים עיצוב 14 . ורשימה תפריט עיצוב
- 3. הקדמה HTML מאפשרת לנו לתכנן את מבנה ,הדף אך לרוב זה לא מספיק ועל מנת לשלוט יותר בעיצוב ובאופן שהאתר מוצג ללקוחות אנחנו צריכים להעזר -ב CSS . למעשה מדובר בשפה שנועדה לעצב את האתר ולדאוג לסגנון העיצובי .שלו למרות שיש אלמנטים שקיימים -ב HTML עצמה השאיפה היא ליצור קובץ CSS בסיומת הזו שבו יהיו כל ההגדרות של העיצוב נפרדות -מה HTML .שלנו -ה CSS עובד בצורה מאוד פשוטה בעזרת id (חד ,)שימושי בעזרת class (רב )שימושי וסלקטורים .)(למתקדמים נתן אז )אחת פעם רק בדף (קיים פעמי חד שהוא תפריט למשל באתר מסוים חלק לנו יש שאם הוא הרעיון לתפריט id שאנחנו נבחר ושם נגדיר לו אלמנטים של .עיצוב לעומת את עם בתפריט יש 20 קישורים (משמע רב )פעמי אז נעניק להם class עם שם מסויים והגדרות עיצוב .שונות לעומת זאת אם יש לנו תגי < p > בדף HTML ,טבלאות כמו אחר תג כל עם (וכך מסויים בסגנון יהיו הזה מהסוג התגים שכל להגדיר סלקטור בעזרת נוכל שלנו span .)ועוד לדעת חשוב ,מתפקד העסק כל איך של יותר גדולה והבנה בסיס לנו שיתנו פשוטים עיצוב מסגנונות נתחיל כעת -ש CSS אפשר להריץ גם בקובץ חיצוני בסיומת CSS וגם בתוך דף HTML בחלק של -ה head בתוך אזור תחום .הבא במדריך נלמד שעליו הבסיס של CSS כדי לכתוב קוד CSS בתוך דף HTML נצטרך לתחום אזור מסויים לקוד CSS ,שלנו את האזור הזה ניצור בין תגי -ה head שלנו -ב HTML . זו השיטה שאני אמליץ לכם לעבוד בה כרגע כי כך יהיה לנו נוח וקל יותר לעבוד - הכול שאנחנו חיצוני קובץ של לשיטה לקפוץ מומלץ יותר מתקדמים בשלבים ,בלבד ללמידה נועד וזה אחד בדף מרוכז .בהמשך כאן לכם נראה כך נראת דוגמא פשוטה להגדרה של עמוד עם עיצוב ב CSS : <html> <head> <title> שלום עולם ! - webmasters.co.il </title> <style type = "text/css"> //code here </style> </head>
- 4. <body> <p> תוכן הדף - webmasters.co.il </p> </body> </html> מעכשיו והלאה כל הקוד שנביא לכם יכנס באזור של תגי -ה style שנמצאים בתוך -ה head . מכאן והלאה לא נציג לכם את כל הקוד של -ה HTML אלא רק CSS ואתם תטמיעו אותו במקום שכתוב " code here "// (מטעמי נוחות .)ושוב שוב הקוד כל את לכתוב נצטרך שלא מנת על אם תשימו לב השתמשנו בתג < p > כדי לאחסן מידע של מלל שבהמשך נתייחס כיצד לעצב ולסגנן את התג .הזה חיצוני עיצוב קובץ בדוגמא הקודמת הראנו כיצד להגדיר עיצוב CSS בתוך ,העמוד זה נועד למטרות למידה והתנסות בלבד - במערכות גדולות יותר בסקאל גדול יותר - עליכם לנהל את קוד -ה CSS בקובץ מיועד (עם סיומת CSS ) ולייבא :הבאה בצורה לעמוד אותו <html> <head> <title> שלום עולם ! - webmasters.co.il </title> <link rel = "stylesheet" type = "text/css" href = "/styles.css" /> </head> <body> <p> תוכן הדף - webmasters.co.il </p> </body> </html> בשיטה הזו אנחנו יוצרים קובץ (בדומה ליצירת קובץ HTML ) אבל שומרים אותו בסיומת שם - נקודה -ו CSS בסוף כך יווצר לנו קובץ STYLE למטרות .עיצוב ובעזרת שורת הקוד למעלה אנחנו מייבאים את הקובץ העיצובי (במקרה הזה style.css ) לתוך דף -ה HTML ועורכים אותו במקביל לדף -ה HTML . שימו לב ששתי הדרכים שהראתי שונות רק במיקום של הקוד CSS , אחד בקובץ חיצוני ואחד בדף .עצמו בשורה התחתונה הקוד CSS זהה גם כאן וגם ,כאן רק שלמתחילים מומלץ לכתוב קוד CSS בדף HTML עצמו (שיטה .בלבד למידה למטרות וזה יותר נוח זה כי )שהראנו ראשונה
- 5. ID -ו CLASS כמו שכבר אמרנו קודם יש לנו מספר אפשרויות עקריות להגדיר עיצוב לאלמנט כלשהו וזה ID (חד )פעמי או CLASS רב פעמים או דרך בחירת שם האלמנט באופן .ספציפי ההבדל הוא באיך שקובעים את שמם ובפונקציונליות .שלהם בעוד -ש ID ישמש אלמנטים יחודיים בעיצוב כמו ,תפריט אזור תוכן ,עיקרי לוגו 'וכו בזמן -ש CLASS יאפיין אלמנטים שחוזרים על עצמם פעמים רבות כמו ,קישורים אזורי תוכן רב פעמיים .ועוד :לדעת חשוב - את -ה ID מגדירים עם סולמית ( name )# בתוך קוד -ה CSS ובתוך קוד -ה HTML מגדירים אותו :כך id="name " - את -ה CLASS מגדירים עם נקודה ( name ). בתוך קוד -ה CSS ובתוך קוד -ה HTML מגדירים אותו :כך class="name " מגדירים איך ההגדרה שם מה האלמנט -כ HTML .test Class selector <span class=”test”></span> #test Id selector <span id=”test”></span> p Name selector <p></p> זו הדוגמא לקוד HTML שנעצב שלקוחה מהמדריך :הקודם <html> <head> <title> שלום עולם ! </title> <style type = "text/css"> //code here </style> </head> <body> <p> תוכן הדף </p> </body> </html>
- 6. יותר לא נראה את כל הדף HTML הזה אלא נתיחס רק למה -שב BODY ולמה שבתגיות STYLE איפה שכתוב CODE HERE . שימוש -ב ID ניצור אלמנט עם ID שיש לו את השם pStyle ובתוך הקובץ CSS נכתוב ""סלקטור ( Selector ) וכך יראה קוד -ה CSS : #pStyle { //code here } כך יראה -ה HTML : <p id = "pStyle" > תוכן הדף </p> הגדרנו id שווה לשם שהמצאנו pStyle -וב CSS השתמשו בסולמית ( # ) כדי להתייחס אל ההגדרה ,הזו שהיא ID , כך אנו יכולים בעצם לעצב את צמד המילים "תוכן "הדף איך שנרצה בתוך -ה CSS .שלנו שימוש -ב CLASS בחרתי להשאיר את השם כמו ,שהוא רק מה שהשתנה זה הסולמית והשימוש -ב ID שבמקומו בא CLASS . כך זה יראה בקוד CSS : . pStyle { color : red; } וזה החלק של -ה HTML : <p class = "pStyle" > תוכן הדף </p> פשוט ,מאוד במקום ID החלפנו -ל CLASS ובקוד CSS החלפנו את הסולמית בנקודה ואלו ההבדלים הטכניים בין .הללו האלמנטים שני בהמשך נלמד קצת פקודות עיצוב כדי שנוכל לסגנן את הפסקה שלנו בצורה שתהיה יותר מוחשית בפלט HTML כך שנראה שינוי משמעותי שאנחנו כן עושים משהו ומשפיעים על הדף עם CSS .
- 7. איך מעצבים -ב CSS אז ככה עד כה למדנו כיצד להשתמש -ב ID יחודי או -ב CLASS רב פעמי ועכשיו אנחנו רוצים לעצב באופן מעשי ?זאת נעשה איך .שלנו המלל את פשוט ,מאוד הקוד CSS שלנו עיקרו נראה :כך העיצוב-האלמנט-שם : העיצובי-האלמנט-של-הערך ולבסוף נקודה פסיק . חלק מהערכים מקבלים נתונים שונים למשל גודל פונט יקבע בעזרת פיקסלים ( px ,) גודל לרוחב או לאורך גם כן יקבעו ע"פ ,פיקסלים צבע יכול להיקבע על ידי שמות (למשל red ) או ע"י קוד צבע HEX עם סולמית לפניו למשל ff000c # (שזה )אדום ויש עוד מספר דרכים שעליהם נלמד תוך כדי .ובהמשך נשתמש בקוד עם הפסקה הקודמת שלנו אבל הפעם לא נשתמש -ב ID או -ב CLASS אלא בסלקטור כללי שיקבע כמו לנו מוכרות תגיות של בשמות נשתמש הזו בשיטה ,סוג מאותו האלמנטים לכל העיצוב את div,p,span,table,td ..ועוד כך יראה קוד -ה CSS : P { Color : red; } בקוד CSS הזה אנחנו מגדירים שהצבע של המלל יהיה ,אדום חשוב לשים לב לנקודה .פסיק וכך יראה קוד -ה HTML : <p> תוכן הדף </p> בקוד -ה HTML לא הצבנו בכלל שום התייחסות למה שמתרחש בתוך קוד -ה CSS , לא ID וללא CLASS ובכל זאת הוא יצבע בצבע אדום - זה קורה בשל העובדה שאנחנו משתמשים -ב Selector שמבוסס על Name (שם ,האלמנט במקרה הזה p .) :המלא הקוד קטע ברקע ,להמחשה תמונה
- 8. למרות שאין אזכור בתוך קוד -ה HTML , האלמנט עדיין מעוצב בסגנון הרצוי - מכוון שאנו משתמשים -ב named selector . כל שימצא ,הסלקטור את הגדרנו כך כי באדום צבוע עצמו המלל .בפוטושופ זה את סמנתי ,המלל מסומן בצהוב קוד שהוא פסקה (תג p ) ויגדיר שהצבע של המלל שבה יהיה .אדום יצירת Selector מורכבים אותם ולשייך עיצוב סגנונות ליצור לנו ומאפשרים שלנו האתר לעיצוב יותר רב חופש לנו מאפשרים אלמנטים תת לכמה אלמנטים בדף -ה HTML . כאן נציג כמה דוגמאות שונות שיאפשרו לנו לעצב את הדף בקלות רבה .יותר על מנת להחיל חוקי CSS )(עיצוב על אלמנטים במבנה דף ,מורכב יש באפשרותנו לייצר Selectors שמורכבים ממספר שונה של ,אפשרויות החלק ,מקלאסים -ל ID ולשמות של אלמנטים ( named selectors .) קלאסים של שילוב הנה דוגמא לקוד Selector הכי :בסיסי . colorRed{ color : red; } . bigText{ font - size : 32px; }
- 9. יש לנו כאן שני (קלאסים Class ) אחד צובע את המלל באדום ( colorRed ) והשני קובע את המלל לגודל של 32 .)מאוד לגדול (נחשב פיקסלים כדי להשתמש בכל אחד מהם רק צריך לכתוב class ולהזין לתוכו את השם של הקוד CSS למשל colorRed . ואז המלל יהיה בצבע ,אדום אבל מעבר לזה אם נרצה שהמלל יהיה אדום וגם בגודל 32 פיקסלים ( bigText ) אז :הבאה בשיטה נשתמש <p class = "colorRed bigtext" > התוכן יהיה בצבע אדום ובפונט גדול </p> בדוגמא הזו אנחנו מכניסים שני (קלאסים Class ) ומפרידים בניהם בעזרת רווח על מנת ששניהם יחולו על האלמנט < p .> שימו לב שהשיטה הזו עובדת רק עם ,קלאסים אם נרצה לבצע את זה על ID , אז לא נוכל לעשות .זאת :התוצאה וזו אלמנטים תת למשל ,האתר את או שלנו המלל את ספציפית יותר בצורה לעצב לנו שמאפשרים אלמנטים תתי ישנם זאת מלבד עיצוב של האות .הראשונה על מנת לעשות זאת נוסיף תת אלמנט בשם first-letter עם נקודותיים שמפריד בין .שבחרנו עיצוב הסגנון של לשם אלמנט התת קוד CSS :
- 10. . colorRed : first - letter{ color : red; } . bigText : first - letter{ font - size : 32px; } בעזרת הקוד הזה האות ראשונה במלל בקוד HTML שלנו ,(למעלה הוא לא )השתנה תהיה בגודל 32 פקסלים :להמחשה תמונה הנה .אדום ובצבע (הסלקטור Selector ) הזה נקרא פסודו סלקטור ( Pseudo class ) שמאפשר לנו לעצב דברים בסיטואציות מיוחדות .מהרגיל שימו לב שפה האות הראשונה ""ת צבועה באדום ובגודל 32 .פיקסלים אבל ,מה היא לא האות הראשונה שאנחנו בגלל אבל מסובך קצת זה נכון .)עצמו קוד בעורך רואים כן שאנחנו במה לא (גם עצמו בקוד אלא ,בעין רואים בקוד טוב סידור לא הוא )לימין (משמאל האנגלית אל )לשמאל (מימין עברית שבין והשילוב הכתיבה של שהסידור .כאלה מבעיות להמנע ניתן ,הנכונה בצורה המלל של והתאמה נכון קידוד עם הזו הבעיה את יש לכן הזה התת אלמנטים האלו פחות שימושיים אבל ישנם תת אלמנטים שימושיים יותר למשל hover, link, active, visited ועוד שיאפשרו לנו למשל לעצב קישורים .באתר אבל עליהם נלמד בהמשך .בנפרד עיצוב לפי Class Name
- 11. כמו שכבר אמרנו -ב CSS אפשר לעצב לפ מזהה (יחודי ID ) או (קלאסים Class ) אבל גם אפשר לעצב לפי שם של ,תגית כאן נלמד את זה בצורה הכי מוחשית על התגית של -ה body . למשל לתגית הזו נוסיף צבע רקע או תמונה .דברים ועוד האתר את ולמרכז להקטין או עצמה על שתחזור ,לרקע עיצוב לפי Class Name מאפשר לנו לבחור אלמנטים שרירותיים בעמוד ולבנות Selector שמורכבים יצירת ידי על שלנו הפסקאות כל את לעצב יכולים אנחנו למשל ,העמוד של הרגיילים מהאלמנטים (סלקטור Selector ) שמגדיר עיצוב מסויים לתג אלמנט של < p .> עוד דוגמא היא אם נרצה לעצב את כל הקישורים באתר שלנו נוכל לעשות זאת עם Class Name ואז נוכל לקבוע צבע פונט אחיד לכל הקישורים שמתמשים בתג < a .> צבע של רקע :באדום האתר רקע צביעת ,הפשוט בדבר נתחיל body{ background - color : red; } כפי שאתם רואים אנחנו משתמשים -ב background-color ומגדירים לו צבע אדום ולתגית עצמה אנחנו קוראים בשם שלה - body ללא נקודה או סולמית .לפני וכך העיצוב של הרקע יהיה .אדום תמונה של רקע שחוזרת "פטרן"(תבנית ליצור היא טובה מאוד שיטה ?מתמונה עשוי שהוא לאתר רקע לעצב נרצה אם מה אבל .בדף מהר ונטען תעבורה חוסך זה .טוב תראה ובשלמותה עצמה על לחזור שיכולה תמונה שזו )עצמה על הקוד CSS : body{ background - image : url ( bg . gif ); } :להמחשה תמונה
- 12. שימו לב שאנו משתמשים כאן בתמונה bg.gif על מנת ליצור את האפקט ברקע של .העמוד עיקר האפקט הוא ,בתמונה הקוד גורם לתמונה בת -ה 12 )פיקסלים(גובה ופיקסל אחד רוחב להיות משוכפלת שוב .אחידה בצורה ישמר עדיין האפקט שם כי ,שונה רזולוציה מסך בעלי לאנשים טוב גם זה .הדף לרוחב ושוב העיצוב מירכוז ידבק לא שהוא כדי אז המסך מכל קטן שהאתר מכוון ,שוליים ויש באמצע מרוכז האתר אינטרנט באתרי לפעמים לצד ימין או צד שמאל אנחנו נמרכז את העיצוב עם -ה body אבל זו לא השיטה הכי .מומלצת כרגע זה למטרת .לימוד קוד CSS : body{ background - image : url ( bg . gif ); margin : 0px 20 % 0px 20 %; border : 1px solid black; }
- 13. אנחנו משתמשים כאן -ב margin שיוצר ""רווח בין התוכן (למשל )מלל לבין הצדדים של האובייקט במקרה הזה -ה body . למשל -ה 0 פיקסלים הראשונים זה הרווח ,למעלה -ה 20% זה רווח בצד ,שמאל -ה 0 פיקסלים זה רווח מלמטה -וה 20% זה הרווח מצד שמאל (לפי כיוון .)השעון בנוסף הוספתי border )(מסגרת בגודל פיקסל אחד כדי שנראה איך זה רחוק מהצדדים .עכשיו :להמחשה תמונה רואים בתמונה להמחשה רק את -ה margin שבצד שמאל אבל גם בצד ימין יש .רווח פונטים עיצוב פונטים אפשר לעצב בצורות שונות למשל סוג הפונט ( font-family ,) צבע הפונט ( color ,) גודל הפונט ( font-size ) .ועוד את הניסויים והלמידה פה נבצע עם (סלקטור Selector ) על התג של הפסקה p כך שעל מנת להתחיל הייתי ממליץ לכם ליצור עמוד HTML שמכיל דף פשוט עם אפשרות להכניס CSS ומכיל פסקה של < p > עם קצת מלל .בפנים הפונט סוג למרות שבדרך כלל עדיף להשאיר את סוג הפונט על Arial זה לא אומר שלא נצטרך לשנות את הפונט מדי .פעם .הלקוח של המשתמש חווית את לשפר ויכול העיצוב של הכללי לסגנון מוסיף זה
- 14. קוד CSS : p{ font - family : Arial Black; } מלל על יותר משפיע וזה ייתכן אז לכם עובד לא זה אם .בולט שחור אבל אריאל ,שונה מסוג פונט הגדרנו כאן .באנגלית הפונט צבע צבע הפונט יוגדר עם " color " ,בלבד שזה לא יבלבל אתכם בעתיד מדובר בהגדרת צבע אך ורק לפונט עצמו והנה הקוד CSS : p{ color : darkblue; } הקטע קוד כאן מקבל מילים של צבע למשל darkblue (קצת קשה לראות את ההבדל ,)משחור או למשל צבע במסגרת RGB או צבע במספר HEX עם סולמית לפני - מה שנוח .לכם הפונט גודל את הגודל נוכל לשנות בהתאם לצרכים ,שלנו לרוב גודל הפונט במלל עיקרי נע בין 12 -ל 14 .פיקסלים אבל כדי לקבוע גודל של כותרת או משהו בסגנון הזה נצטרך להגדיל את המלל למספרים יותר גדולים (לרוב בין 30 -ל 34 .לשליטתכם נתון הגודל אבל )פיקסלים קוד CSS : p{ font - size : 24px; } עכשיו המלל יהי בגודל של 24 פיקסלים בשביל כותרת הדף או משהו .בסגנון :להמחשה תמונה
- 15. בתמונה .כאן שלמדנו פונט עיצוב של האלמנטים כל את מימשנו בולט כתב פונט -ב CSS אפשר לעשות משהו שדומה לתג -ה b או -ה strong -ב HTML , שזה כתב .בולט באופן כללי ישנם מספר תגי HTML שיש להם יכולת ברירת מחדל שאותה ניתן להגדיר גם -ב CSS . זה שימושי למצבים שבהם האלמנט שאיתו אנו עובדים הוא לא bstrong שההתנהגות הטבעית שלהם היא להיות במצב של Bold (כתב .)בולט קוד CSS : p{ font - weight : bold; } התוצאה זהה לתג -ה b של -ה HTML , נועד להחליף אותו באופן מוחלט .בעתיד אפשר להכניס עוד אלמנטים מלבד bold :והם lighter שקצת פחות בולט -ו normal שזה מלל רגיל - אפילו ניתן להגדיר את משקל הפונט במספרים הנעים בין 100 -ל 900 . איטלקי כתב כתב איטלקי -ב CSS נועד להחליף את התג i שאנחנו כבר מכירים -מ HTML . קוד CSS : p{
- 16. font - style : italic; } האלמנט font-style מקבל גם normal -ו oblique תנסו ותראו .בעצמכם מסגרות עיצוב למרות שאפשר לעצב מסגרות ( border ) -ב HTML רגיל -ב CSS זה יהיה הרבה יותר קל ונוח לעצב מסגרות לכל אלמנט .שתבחרו כאן נעבוד על עיצוב מסגרת של הפסקה שאיתה עבדנו עד ,כה התגית p . זה -ה HTML שאיתו :נעבוד <p> תוכן הדף </p> על גבי הקוד HTML העליון אנחנו נשתמש -ב CSS ונעצב .אותו המסגרת סגנון עיצוב נתחיל עם עיצוב סגנון המסגרת בעזרת border-style שאליו נזין את הערך solid ובהמשך אראה לכם עוד .שונים סגנונות p{ border - style : solid; } עיצוביים אלמנטים של רשימה הנה .ועוד קווים ,נקודות של מסגרת ,ישרה תהיה המסגרת את קובעים אנו כך שאתם יכולים לנסות :בעצמכם dotted ,)(נקודות dashed ,)קווים-(קו solid (קו )ישר את כל האפשרויות תוכלו .למטה בטבלה למצוא ערך תיאור None .למסגרת עיצוב יהיה לא ,ריק ערך Hidden זהה לערך None רק מתנהג קצת שונה עבור (טבלאות Table ) dotted נקודות dashed .קטועים קצרים קווים מסגרת solid .כולם מבין שימושי הכי ,סולידי סגנון
- 17. double .כפולה מסגרת groove .המסגרת עבור פנימי עבה סגנון ridge המסגרת עבור עבה סגנון inset סגנון 3D פנימי עבור ,המסגרת הערך תלוי בצבע של המסגרת ( border-color .) outset סגנון 3D עבור ,המסגרת הערך תלוי בצבע של המסגרת ( border-color .) initial .המחדל ברירת לערך המסגרת את מגדיר המסגרת רוחב שימו לב שאת האלמנט הבא של רוחב המסגרת ( border-width ) אפשר לקבוע אך ורק אםיש הגדרה של סגנון .המסגרת של העיצוב קוד CSS : p{ border - style : solid; border - width : 5px; } את ההגדרה של רוחב המסגרת קובעים ,בפיקסלים במקרה הזה 5 .פיקסלים וכך זה :יראה לרוב עדיף לקבוע מסגרת בגדלים יותר סבירים למשל 1-3 ,פיקסלים אבל זה ניתן .לבחירתכם
- 18. המסגרת צבע הצבע את .כלום יוצג לא אחרת המסגרת של הסטייל את ליצור צריך המסגרת צבע את לקבוע מנת על כאן גם נקבע עם border-color . קוד CSS : p{ border - style : solid; border - color : red; } אפשר גם כאן לקבוע צבעים ,בשמות קוד HEX עם סולמית בהתחלה וקוד RGB . סגנונות של שילוב מהצדדים אחד בכל הסטייל את נעצב למשל ככה ,שונה בצורה במסגרת צד כל ולאפיין שילוב ליצור באפשרותנו .שונה בצורה המסגרת של p{ border - top - style : dotted; border - right - style : solid; border - bottom - style : dotted; border - left - style : solid; } כאן הכנסנו את המילים top ,)(למעלה right ,)(ימינה bottom ,)(למטה left )(שמאלה וכך קבענו כל סגנון וסגנון .)ורגיל ישר קו מול אל (נקודות צד לכל שונה דרך קיצור :אותו שתכירו כדאי לכן אחרים של בקודים הבא דרך בקיצור להתקבל אולי לכם יצא לפעמים p{ border : 5px solid red; }
- 19. כאן אנחנו משתמשים באלמנט border ובפנים הסדר של הערכים צריך :להיות ,רוחב ,סגנון .צבע זה נועד להקל במקרה חשוב הערכים של שהסידור לדעת חשוב .חדשה בשורה ודבר דבר כל להגדיר שתצטרכו במקום עליכם .לעשות מיועד ערך כל מה קובע והוא הזה טבלאות עיצוב טבלאות משמשות אותנו להצגת מידע טבלאי ( Tabular data ,) למשל במקרים שבהם המידע שלנו צריך להיות מחולק לשורות ולרשומות .כלשהן לכן יש לנו אפשרויות מגוונות -ב CSS שנותנות לנו את היכולת לעצב .טבלאות זהו קוד -ה HTML שעומד ,לרשותנו שתי ,רשומות שלוש :שורות <table> <tr> <th> Site Name </th> <th> Site Url </th> </tr> <tr> <td> Webmasters </td> <td> webmasters.co.il </td> </tr> <tr> <td> GMX </td> <td> gmx.co.il </td> </tr> </table> יהיה לנו שיהיה העיצוב אך טבלה של בצורה מסודר התוכן מחדל כברירת אז שהוא כמו הקוד את נריץ אם - לדפדפן דפדפן בין שונה להראות עלולה והיא לטלבה שונה עיצוב סגנון יתן דפדפן שכל לב שימו .מאוד מצומצם .בעצמכם הטבלה את לעצב חשוב לכן :למשל אליהם ישירה התייחסות ע"י נעצב התאים של והתגים הטבלאות את table , th , td { border : 1px solid black; } הקוד .פסיק בעזרת ותג תג כל בין להפריד צריך .להמשך הבסיס יהיה וזה כרגע ביחד הכול את לעצב רוצים אנחנו הזה יוצר מסגרת לטבלה של פיקסל אחד בצבע .שחור אם היינו יוצרים את הקוד CSS הזה ללא -ה td -וה th אז
- 20. לכל מסביב רק מסגרת רואים היינו שלנו במקרה למשל ,עצמם התאים על ולא הטבלה על רק חל היה העיצוב .השדות לבין בין ולא הטבלה מסגרות איחוד מסגרת יוצר הקוד .המסגרות בין רווח אלא כפולה מסגרת בדיוק לא זה ,כפולה מסגרת של סוג שיש לב שמתם להוריד אפשר שאותם רווחים שנוצרים כך .לטבלה ונפרד שדה לכל נפרד באופן הטבלה לתג ומסגרת תא לכל :הבא הקוד בעזרת table , th , td { border - collapse : collapse; border : 1px solid black; } :יראה זה כך .אחד פיקסל של ברוחב פשוטה מסגרת עם ,רע לא נראת הטבלה עכשיו המרווחים גודל
- 21. המרווחים זו התיחסות אל margin -ו padding שמטרתם היא לקבוע את המרחק מהמסגרת ( border - גם אם מיוצרים שאנו ריקים ברווחים מדובר בגדול אבל זה את להבין קשה קצת .החוצה ומהמסגרת התוכן אל )קיימת לא טוב זה את להבין תוכלו הפרמטרים עם קצת תשחקו אם .בדף מסויימים אלמנטים למקם מנת על יזום באופן .יותר קוד CSS : table , th , td { border - collapse : collapse; border : 1px solid black; padding : 0px; margin : 0px; } היא המרווחים הגדרות של מחדל הברירת .ההבדל את לראות שתוכלו מנת על מקודם האלמנטים את השארנו גדולה -מ 0 פיקסלים לכן בכך שהגדרנו אותם לאפס הרווחים יצטמצמו לרווח .מינימלי תמונה להמחשה עם ההגדרה של 0 פיקסלים למרווחים (בצד )שמאל וללא הגדרת מרווחים בכלל (ברירת המחדל .)ימין בצד - במרווחים נשתמש כן אנחנו לרוב לכן ,טוב פחות להראות עלו וזה למסגרות מאוד צמוד שהמלל לראות ניתן רואים שבברירת מחדל בצד ימין יש רווח קטן מאוד בין המילה GMX אל המסגרת וכאן מתבטא ההבדל של padding . לעומת זאת המרחק שבין המסגרת החוצה שם מתבטא ההבדל של ה margin . עליהם נלמד עוד .בהמשך
- 22. אלמנטים בין מרווחים במדריך הזה נלמד על (מרווחים Margin, Padding ) ,באתר חשוב ללמוד עליהם כדי ליצור עיצוב נוח לעין ותהיה לנו יותר שליטה במיקום של אלמנטים .בעמוד המרווחים הם margin ,חיצוני -ו padding .פנימי ההתיחסות אל פנימי וחיצוני באה מנקודת התחלה של ,המסגרת border שלנו גם אם היא לא קיימת והיא על אפס או .מוסתרת :)דבר כל של גודל מבחינת בהגזמה (קצת נראה זה איך לכם ותפרט שתדגים אילוסטרציה הנ התמונה הזו מתארת בעצם box model שהוא בעצם המודל של כל אלמנט .בדף למעשה כל אלמנט מורכב מהדוגמא הזו שאתם רואים .בתמונה נתחיל בואו .יותר ברור להיות צריך הרעיון אבל המחשה בשביל רק מאוד גדול הכול כאן ,המסגרת זה סגול-הכחול גובה ידי על ונקבע קבוע או בגודלו ומשתנה דינאמי להיות שיכול התוכן את לנו יש בהתחלה ,החוצה מבפנים ורוחב ( Height & Width ,) לאחר מכן מתחיל המרווח הפנימי שנקרא Padding ולאחר מגיע המסגרת של (האלמנט Border ) מיד אחרי המסגרת בא המרווח החיצוני Margin וזה בעצם -ה box model של .האלמנט המרווחים של הגדרה מכוון שההגדרה של המרווחים היא זהה מאוד כרגע נלמד על padding אך זה תקף גם -ל margin באותה .מידה בנוסף צריך לזכור שברירת המחדל בעיצוב יכולה להיות שונה -מ 0 בתגים מסויימים ועל זה נלמד .בהמשך למשל .ועוד מסויימים בתגים רצויים לא רווחים
- 23. יש לנו תג HTML פשוט של p עם מלל וקוד -ה CSS יכילה הגדרה אחת שלא רלוונטית למדריך אבל נועדה לעזור .שנבצע השינויים את לראות לנו p { border : 1px solid black; padding - top : 10px; } בקוד למעלה הגדרנו מרווח פנימי מלמעלה של 10 .פיקסלים להגדרה של הצד אפשר להוסיף left, right, bottom בשורה שכור בצבע אחד פיקסל של מסגרת הגדרנו בנוסף .כלשהו מרווח ליצור אפשר שמהם הכיוונים כל שאלו הראשונה על מנת שנוכל לראות את המרווח הפנימי משתנה בהתאם להגדרה של padding-top . המרווח את לרשום אפשר אז ,מרווח של אחד מכיוון יותר להגדיר ונרצה ובמידה העבודה על להקל כדי זאת מלבד :הבאה בצורה p { border : 1px solid black; padding : 10px 8px 3px 20px; } המרווח פה נכתב ללא הגדרה של כיוון אבל ההגדרה של הכיוון נקבעת ע"י כך שכתבנו 4 ערכים של 10 , 8 'וכו והם מתפקדים לפי כיוון השעון כאשר 10 זה ,למעלה 8 זה ,ימינה 3 זה למטה -ו 20 זה צד .שמאל מרווחים של מחדל ברירת לפעמים מומלץ לאפס את כל התגי HTML וההגדרות שלהם בעזרת CSS מכוון שיש מרווחים לא רצויים בכלל בקוד למשל בדוגמא הבאה בתג של H1 יש מרווח margin תחתון של כמה פיקסלים והוא לא תמיד .רצוי :למחשה תמונה
- 24. בתמונה ניתן לראות את האזור שסימנתי עם החץ והקוו הכחולבהיר - זהו הרווח ברירת המחדל של האלמנט H1 . הברירת זאת ובכל !דבר שום ואין שורה ירידת אין עצמו שבקוד לב שימו ,המרווח של האזור מסומן בהיר בכחול .רצוי תמיד שלא גדול מרווח פלוס שורה ירידת היא כאן מחדל נוכל לטפל בזה ע"י הגדרה של margin לאפס .פיקסלים h1 { margin : 0px; } שהזכרתי כמו לכן ,מחדל ברירת שהם ערכים מקבלים אשר נוספים אלמנטים מספר ישנם .יעלם המרווח - וזהו קודם כדאי לאפס את ההגדרות של -ה CSS . אלמנטים מרובה עיצוב הגדרת -ב CSS יצא לנו להתקל בכך שנצטרך להגדיר הגדרות מסויימות למספר רב של אלמנטים ,במקביל ייתכן ונתקלתם בזה כבר אך חשוב לדעת שיש לנו את היכולת -ב CSS להגדיר עיצוב עבור כמה אלמנטים .במקביל כך .האלמנטים לכל העיצוב את להגדיר ונוכל אחת ממפעם יותר העיצוב של ההגדרה על לחזור נצטרך שלא :כך למשל תחזור עליהם שההגדרה תגים יש לפעמים h1 {
- 25. color : green; } h2 { color : green; } p { color : green; } זה במקום .ירוק יהיה המלל של שהצבע קובעות ההגדרות כשכל במיוחד ,צריך שבאמת ממה קוד מדי יותר זה :יראה זה וכך פסיק בעזרת בניהן ולהפריד הגדרות של אחד תא לכדי התגיות כל את לאחד אפשר h1 , h2 , p { color : green; } שבו השני הקוד לעומת ,אחד אזור רק נערוך אז זה של הכלליות ההגדרות את לשנות נצטרך אם ?טוב זה למה ואפילו שורות מאות לכדי מגיעה העריכה כמות מורכבים יותר בקודים .פעמים שלוש אזור אותו את לערוך נצטרך .חשוב הזה הייעילות שתהליך כך יותר קינון -ב CSS לפגוע ועלולים זה עם זה שחופפים מהלכים לתקן הוא הרעיון אבל שנבצע הבא למהלך כך כל טוב שם לא זה נרצה אם מה אבל .טובה קונטרה זו ,לבן והרקע שחור היא המלל של המחדל ברירת למשל .מסויים באזור בעיצוב ליצור DIV עם רקע שחור - גם המלל בו יהיה .שחור אז כדי לתקן את הסיטואציה נעזר בשיטה :הבאה קוד HTML : <p> Text Text Text </p> <div class = "background-black" > CAN'T SEE ME <p> Text Text Text </p></div> קוד CSS : . background - black { background - color : black; } . background - black p { color : white; }
- 26. יצרנו כאן שני (קלאסים Class ) אחד שצובע את הרקע של הפסקה בשחור ואחד שאומר דבר :פשוט אם יש מלל גם יהיה לא שהמלל וצריך לשחור מוגדר הרקע כי ללבן )המלל (של שלו הצבע את תגדיר אז פסקה של תג בתוך כן .בשחור אפשר פשוט להגדיר -שב CLASS הראשון המלל יהיה לבן אבל המטרה פה כרגע היא ללמוד את .בלבד האפשרות אלמנטים ורוחב גובה שני הגדרות מאוד חשובות במהלך כתיבת קוד CSS הם גובה ,ורוחב מלבד גובה ורוחב רגילים ניתן להגדיר גם (מקסימלי-רוחב max-with ,) (מקסימלי-גובה max-height ,) (מינימלי-רוחב min-width ) וגובה (מינימלי min-height .) :מלל עם פשוט פסקה קוד לנו שיש נניח <p> Text Text Text Text Text Text Text Text Text Text Text Text </p> :וגובה רוחב לו ונקבע נעבוד אנחנו ואיתו p { border : 1px solid black; width : 80px; height : 80px; } בשורה הראשונה הגדרנו לנו מסגרת כדי לראות את הגובה והרוחב באופן .מוחשי הגדרנו כאן גובה ( height ) ורוחב ( width ) של 80 פיקסלים עבור שניהם .)(ריבוע אבל מה בגלל כל המלל שלנו התוכן גולש החוצה ופורץ .למטה לכן בדרך כלל לא נהוג להגביל את הגובה באזור תוכן רב למשל מאמר וכברירת המחדל הם על auto .בעמוד התוכן לכמות בהתאם לרוב גדל הגובה ובעצם )(אוטומטי
- 27. .האלמנט של מהמסגרת יוצא התוכן גובה שהגדרנו שמכוון לראות ניתן בתמונה זה להזין שאפשר נוספים ערכים .לצד ולא מטה יגלוש הוא אבל , שלנו להגדרות מחוץ גולש שהמלל רואים ,באחוזים פיקסלים או כלום כאשר ברירת המחדל של כלום זה auto - הגודל יקבע אוטומטית לרוב יגלוש לצד עד .למטה לרדת יתחיל ואז הסוף ומינימום מקסימום במקרה ,שלנו האלמנט של והרוחב הגובה של והמינימום המאקסימום את לקבוע לנו יאפשרו ומינימום מקסימום .שבפנים מהתוכן מושפע זה כיצד ונראה מקסימום על נלמד הזה p { border : 1px solid black; max - width : 180px; max - height : 180px; } המקסימום שקבענו פה זה 180 פיקסלים לגובה ,ורוחב אבל מה ייתכן והאלמנט שלנו יהיה הרבה יותר !קטן זה תלוי בכמות המלל .שבפנים כאן רק הגדרנו לו מקסימום ומינימום אבל הגודל יכול לנוע מאפס ועד 180 .פיקסלים
- 28. בתמונה רואים שלמרות שהגדרנו 180 פיקסלים לגובה התוצאה היא 60 פיקסלים גובה ,בלבד זאת מכוון שהגדרנו את המספר 180 פיקסלים כמקסימום ולא כערך .אבסולוטי בדף אלמנטים מיקום הדף של הזרימה מחדל כברירת .הדף של הזרימה את להבין מנת על חשוב בדף שלנו האלמנטים של מיקומם הטבעית ההתנהגות זוהי ,הלאה וכן שורה ירידת תתרחש ואז להמשיך לאן שאין עד ימין לצד שמאל מצד תהיה של אלמנטים ברחבי עמוד -ה HTML . כמובן שאם משנים את כיוון המלל בדף -ל rtl אז הצדדים .נהפכים בנוסף הגדרת המיקום ברירת המחדל של אלמנט בדף היא static שזה מה שהסברנו .עכשיו מיקום Fixed לדוגמא אם ננסה להגדיר אלמנט שהמיקום שלו " fixed " בצד ימין למעלה נשתמש בהגדרות CSS :הבאות p { position : fixed; top : 30px; right : 0px; } קוד -ה HTML :
- 29. <p> Fixed to the right top corner </p> Text < br > Text < br > ... במקום הנקודות אני רוצה שתיצרו עוד 500 שורות (אפילו 2,000 שורות עם ירידת )שורה של text עם ירידת שהמיקום תראו אותו תגוללו אם ועכשיו .למטה הדף את לגולל לאן שיהיה היא המטרה )למה תבינו (תכף שורה .למטה תגוללו אם גם !שהוא מצב בכל במסך ונשאר ימין בצד ""נתקע הפסקה שבתוך המלל של :להזכיר חשוב - אם לא תגדירו position אז right, top, bottom או left לא .יעבדו - באינטרנט אקספלורר 7 -ו 8 -ה position יעבוד רק אם תגדירו בראש הדף DOCTYPE ! יחסי מיקום כאשר אנחנו יוצרים אלמנט למשל תג פסקה יש לו מיקום סטטי כברירת ,מחדל כאן בא המיקום היחסי ( relative ,) אפשר לשחק איתו ביחס למיקום ברירת .המחדל זאת אומרת שאם המיקום ברירת המחדל הוא X והגדרנו LEFT של 50 פיקסלים אז המיקום החדש יהיה X ועוד 50 פיקסלים (תלוי מה נחליט אפשר גם לכתוב .)מינוס :לקוד דוגמא p { position : relative; top : 30px; right : 0px; } פשוט הגדרנו שאת התגית פסקה מיקומה יהיה יחסי וקבענו שהמרחק שלה מלמעלה יהיה X (מיקומה כברירת )מחדל פלוס 30 .פיקסלים ואת ימין קבענו -ל 0 .פיקסלים :להמחשה תמונה
- 31. :להמחשה ימין בצד .והתוצאה הקוד את בעצמכם שתראו כדי מהתמונה בחצי אותו ומסגרתי הקוד של החלק את גזרתי רואים את התוצאה עם מרווח של 30 פיקסלים מלמעלה ומרווח של 0 פיקסלים מצד .ימין בנוסף בצד ימין למעלה תוכלו לראות שיש לי 3 הודעות במייל שלא קראתי זמן .רב בואו ננסה להבין את הקטע עם -ה parent ניצור לפסקה שלנו DIV שתהיה "ה"האב ולה נגדיר דברים .בהמשך קוד HTML : Text < br > Text < br > <div> div <p> Fixed to the right top corner </p> div </div> Text < br > Text < br > עכשיו מסביב לפסקה יש DIV את הדיב הזה נגדיר כמיקום שהוא שונה מסטטי זאת אומרת ""יחסי ( relative ) או ""ודאי ( absolute ) כך שהמיקום של הפסקה שלנו יושפע מהאלמנט DIV ולא -מה body (כברירת .)מחדל קוד CSS :