CSS - מושגי יסודות

תמלול ההרצאה: CSS - מושגי יסודות

הטקסט המלא של הדקות הראשונות בהרצאה «CSS - מושגי יסודות» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:01

   ברוכים הבאים לחלק של ה-CSS בנוגע לפיתוח אתרים באינטרנט. CSS זה קיצור של Cascading Style Sheet, או בעברית גיליון עיצוב מדורג. הרעיון הוא שאנחנו רוצים בעצם לעצב את דף ה-HTML שבנינו ככה שנוכל לתת לו בעצם צבעים, גופנים, מיקומים, גדלים, כל מיני צורות, אייקונים, כל הדברים האלה אנחנו יכולים להוסיף לדף ה-HTML שלנו על ידי

2. 00:32

   FAT CSS. מה שקרה בעבר זה שכל העיצובים האלה היו כחלק משפת ה-HTML. מה שזה גרם בעצם זה לתסבוכות בפיתוח של דפי אינטרנט, מפני שדף ה-HTML הכיל את המבנה של איזה אלמנטים מוכלים בדף שלנו, ובנוסף הוסיפו עליהם גם את העיצובים שלהם, גם את הצבעים,

3. 00:59

   גם את הגופנים, גם את הגדלים. בפועל מה שקרה זה שפתאום נהיו שני תפקידים בעולם, אלה שבנו את דף ה-HTML זה תפקיד אחד ואלה שעיצבו את הדף ה-HTML זה תפקיד שני.

4. 01:11

   מה שקרה זה ששניהם עבדו על אותו קובץ HTML וכל אחד מה שנקרא נכנס בתוך הרגליים של השני. לכן בשלב מסוים הפרידו את זה למעין שתי שפות נפרדות.

5. 01:23

   HTML נשארה HTML טהורה ללא עיצוב והוסיפו את שפת CSS שניתנת לכתיבה בדף נפרד. ככה מעצב בעצם לא נכנס לרגליים של המתכנת HTML והמתכנת לא נוגע בעיצוב. אז מה שאנחנו הולכים לראות בווידאו הזה בסדרת הווידאוים הבאים זה איך לבנות דף html בנוסף לעיצוב כך שנוכל לעצב אותו אחרי שבנינו את הדף.

6. 01:49

   אז בואו נתחיל. דבר ראשון נצרף דף html ונשמור אותו. הדבר הראשון שאנחנו הולכים לראות בנוגע לcss זה כל הנושא של טרמינולוגיה, כלומר מונחים שקיימים ב-fat css.

7. 02:21

   בואו נניח שיש לי כאן איזה שהיא פרגרף פסקה. אני עכשיו רוצה לראות איך בעצם דף ה-HTML שלי נראה. נפתח אותו ונריץ אותו. אני רואה כרגע שהדף שלי כמובן לא מעוצב מפני שהפסקה לא נתתי לה שום עיצובים.

8. 02:53

   עכשיו אני רוצה להוסיף עיצוב לדוגמא גודל, לדוגמא גופן, לדוגמא צבע הגופן וכולי ואני עושה את זה על ידי שפת CSS ולא על ידי HTML כמו שהיה ניתן בעבר. אז דבר ראשון אנחנו הולכים לראות איפה אני כותב CSS.

9. 03:12

   ישנם שלושה מקומות שבהם אני יכול לכתוב עיצוב על ידי CSS. המקום הראשון זה בתגית עצמה כאטריביוט. האטריביוט נקרא סטייל.

10. 03:29

    שימו לב שכרגע לא נפתחו לי גרשיים ונפגרו לי גרשיים. בואו נטפל בבעיה הזאת. נלך ל-text editor, html, formatting ונסמן insert attribute value quotes when typing.

11. 03:51

    בואו נסתכל על זה שוב פעם. או, עכשיו נפתחו לי גרשיים. מה שאני מיד רואה זה בעצם את החלון ההצעות של Visual Studio שנקרא IntelliSense. סטייל ואטריביוט שמאפשר לכתוב עיצוב ב-CSS.

12. 04:09

    כל מה שאתם רואים כרגע זה כל מיני תכונות ששייכות ל-CSS. ניתן לראות כאן גופנים, פונטים, ניתן לראות כאן צבעים, background color, ניתן לראות גבולות, בורדר, את כל הדברים האלה ויותר אנחנו נראה בהמשך.

13. 04:28

    אז איך אני בעצם נותן עיצוב לדוגמה צבע גופן? אז אני בוחר את התכונה שאני רוצה, צבע גופן זה תכונת color, רושם נקודותיים ומיד אחר כך אני בוחר את הצבע הרצוי לדוגמה green ונקודה פסיק.

14. 04:46

    מה שעשיתי כרגע ורשמתי משהו שנקרא css property נקודותיים ומיד אחר כך css value. יש לי את התכונה של הcss נקודותיים ואת הערך שבחרתי. בואו נסתכל מה הדבר הזה גרם לעיצוב של הדף.

15. 05:06

    נחזור לדפדפן, נרפרש ונראה שהגופן התחלף לצבע ירוק. בואו נחזור חזרה. נניח שאני רוצה עכשיו לתת לאותה פסקה עוד תכונה מסוימת.

16. 05:23

    מה שאני עושה, אני הולך אחרי הנקודה פסיק, רושם רווח ואני יכול להגדיר עוד תכונה. לדוגמה font size נקודותיים extra extra large נקודה פסיק. כל פעם אני רושם את אותו הפורמט.

17. 05:40

    css property נקודותיים css value נקודה פסיק ואחר כך אני חוזר על זה בואו נבדוק מה עכשיו קרה לעיצוב נחזור לדפדפן נרפרש ונראה שכמובן הטקסט גדל כ-extra extra large אז השיטה הזאתי בעצם זה עיצוב בתוך התגית והעיצוב הספציפי הזה נקרא ניתן לו פה את השם inline styling inline סטיילינג זה בעצם עיצוב

18. 06:23

    שמתבצע ספציפית לתגית וניתן כאטריביוט סטייל בתגית, בנוי על ידי cssproperty.cssvalue.psic אני יכול לחזור על כמה פרופרטיז שאני רוצה ולספק כמה פרופרטיז שאני רוצה והוא תקף אך ורק לתגית שבה נתתי את העיצוב.

19. 06:46

    כלומר אם אני פותח עכשיו פה עוד פסקה שומר את זה הולך לדפדפן מרפרש אני יכול לראות שהפסקה השנייה לא נהנתה מהעיצוב של הפסקה הראשונה.

20. 07:04

    אז עד עכשיו ראינו מקום אחד שבו אני יכול לכתוב CSS. מה המקום השני? אני עכשיו רוצה שלדף שלי כל הפסקאות יהיה להם איזה שהיא סוג מסוים של עיצוב. בואו נוסיף פה עוד איזה פסקה או שתיים ואני עכשיו רוצה לתת עיצובים לכל הפסקאות אבל אני לא רוצה לחזור על העיצוב מחדש לכל פסקה.

21. 07:28

    אני לא רוצה לעשות שום קופי פייסט לגבי כל פסקה מחדש. אז מה שאני יכול לעשות זה להגדיר עיצוב ברמת כל הדף שלי. העיצוב ברמת כל הדף מתבצע באזור ה-Head, תחת תגית מיוחדת שנקראת style.

22. 07:44

    בתגית style אנחנו מגדירים אטריביוט שנקרא type, ונותנים לו טקסט css בכדי שדפדפנים ידעו שאני עכשיו נותן עיצוב cff לכל הדף שלי.

23. 07:56

    עכשיו, בתוך תגית style אני מגדיר את כל העיצובים שאני רוצה, והעיצובים האלה יהיו תקפים לכל התגיות באותו דף בלבד.

24. 08:05

    אז אם אני רוצה לתת עיצוב ספציפי לתגית, בואו נניח לתגית p, אני עכשיו צריך לבנות משהו שנקרא css rule. בואו נגדיר את זה.

25. 08:29

    נגדיר כאן הערה, יש לנו css rule. css rule זה כלל css, שאומר דבר כזה. לכל התגיות שנקראות p אני פותח בלוק ומגדיר את העיצוב שאני רוצה. לדוגמה, בואו נגדיר שה-background color שלהם הוא red, שהפונט family זה הפונט הזה ושהפונט weight הוא bold, מודגש.

26. 09:26

    בואו נבצע שמירה, עזור לדפדפן, נרפרש ונראה עכשיו שהעיצוב הצליח להינתן לכל תגיות ה-p בדף שלי. עכשיו השאלה היא מה קורה אם יש לי בתגית הראשונה פרט עיצובי שדורס את התגית, את העיצוב הקודם, איזה עיצוב לוקח?

27. 09:56

    האם העיצוב ברמת הדף לוקח? או האם העיצוב בתגית לוקח. בשביל לעשות את זה בואו ניתן color, color שניתן blue. עכשיו ניתן לראות שיש לי color, כלומר צבע גופן כחול לכל התגיות שנחשבות כפרגרף, וכאן אני רואה שנתתי לתגית ספציפית צבע ירוק.

28. 10:22

    בואו נשמור את זה, נחזור לדפדפן ונרפרש. עכשיו אני רואה שהפסקה העליונה עדיין צבועה בצבע ירוק, פסקאות האחרות קיבלו כחול. כאן אנחנו רואים שככל שהעיצוב יותר קרוב לתגית, ככה העיצוב לוקח במידה ויש סתירה בין עיצובים קודמים.

29. 10:49

    בהמשך אנחנו נראה עוד כמה נתונים בקשר לדריסה של עיצוב אחד על ידי עיצוב אחר. מה שאנחנו ראינו כרגע זה סך הכל שני מקומות שבהם אפשר לכתוב עיצוב CSS. המקום הראשון ראינו נקרא Inline Styling והוא נמצא בתגית עצמה.

30. 11:07

    המקום השני תקף לכל התגיות בדף והוא נמצא באזור ההד תחת תגית סטייל. לחלק הזה קוראים אמבדד סטיילינג. אם כך אמבדד סטיילינג זה החלק של העיצוב באזור ההד שתקף לכל התגיות בדף.

31. 11:38

    אז מה זה המקום השלישי? מה קורה אם אני רוצה לתת איזשהו עיצוב מיוחד לכל הפסקאות שנמצאות בכל הדפים שלי? כמובן שהעיצוב הזה שנמצא באמבדד סטיילינג תקף רק לדף הנוכחי.

32. 11:55

    מה קורה אם אני רוצה לתת את העיצוב לכל הפסקאות בכל הדפים. במצב כזה יש לנו אפשרות לצרף קובץ CSS חיצוני. אז אני הולך ל-new file ובוחר style sheet, מבצע open, וחשוב מאוד לשמור אותו באותו מקום של ה-HTML כדי שהעיצוב יהיה תקף.

33. 12:26

    בואו נקרא לזה mystyles. הקובץ הזה זה קובץ עם סיומת CSS. אני שומר אותו ביחד עם ה-HTML, ועכשיו בואו נגדיר כאן את אותו הדבר. הגדרתי עבור כל הפסקאות, כלומר תגית שנקראת p ובואו נגדיר להם border color ניתן black, border style solid ו-border width שני px, px וקיצור של פיקסלים.

34. 13:18

    עכשיו אני רוצה שהדף שלי יכיר את כל העיצובים שנמצאים בקובץ הcss, mystyles.css בשביל זה אני צריך לבצע הפניה מיוחדת מדף ה-HTML אל דף ה-CSS.

35. 13:37

    ההפניה מתבצעת גם כן בתגית ה-Head על ידי תגית מיוחדת שנקראת לינק. לתגית לינק יש שלושה מאפיינים רל זה קיצור של ריליישן שיפ.

36. 13:55

    האטריביוט הזה מגדיר את היחס שאני רוצה להתייחס אליו. כלומר אני רוצה קישור ל-State שיפ. תגית הבא, האטריביוט הבא שקיים לי נקרא טייפ.

37. 14:10

    כאן שוב פעם אני בוחר טקסט CSF בכדי שדפדפנים ידעו שמדובר בקובץ CSF. והאטריביוט השלישי href ופה אני נותן לו בעצם את הדף עצמו.

38. 14:24

    התגית לינק זו תגית ריקה ולכן אני מגדיר אותה בצורה כזאתי על ידי סיומת של תגית ריקה. בואו נשמור את זה, נחזור לדפדפן ונרפרש. ועכשיו ניתן לראות שמאחורי כל פסקה או מסביב לכל פסקה יש לי גבול מושחר, בורדר.

39. 14:47

    את הגבול המושחר הזה בצבע שחור סוליד שני פיקסלים אנחנו הגדרנו בקובץ css חיצוני. צוות css חיצוני זה המקום הכי נפוץ לכתיבת