שיעורי CSS3

לאחר שיש לכם ידע בHTML וכיצד נראה שלד של אתר כלשהו עם תגיות מובנות מראש, ניתן לקחת את אותן תגיות מובנות מראש (body , div , header , footer , h1, span, p , input ועוד...) ולשנות להן את תכונות ברירת המחדל שהגדירו המתכנתים של הHTML.
לצורך העניין, תכונות ברירת המחדל של p זה: צבע שחור, פונט משעמם, גודל מסוים, מרחק ממי שמעל הפסקה ומרחק ממי שמתחת לפסקה. למעשה דרך הCSS ניתן להשתלט על התכונות הללו ולשנות אותן.

כל שצריך לעשות הוא להוסיף בתוך כל תגית פותחת את המילה style. מיד לאחריה לרשום שווה (=) ואז בתוך גרשיים את כלל התכונות ואת הערכים שלהן (למשל תכונה: צבע, ערך: כחול) בהפרדה של נקודה פסיק בין עיצוב לעיצוב. למשל, שם התכונה של צבע הטקסט הוא color וצבע הרקע הוא background-color. אם נרצה שצבע הטקסט של כל הכיתוב בdiv שלנו יהיה אדום, נצטרך לרשום זאת כך - color:red.

זה הזמן שלכם - נסו ליצור קובץ HTML עם head,body ובתוך הbody לשים div כמו בדוגמא הבאה: <div style="color:red;background-color:pink"><⁄div>

בדיוק כמו בדוגמא הקודמת, כך תוכלו בעצמיכם ליצור אלמנטים שונים בbody שלכם ולשנות להם תכונות שונות. עוד מעט מן התכונות הבסיסיות בcss:

  • font-size:15px - גודל הפונט. תמיד אחרי הנקודותיים נציין את הגודל בצירוף px.
  • font-weight:bold - טקסט בולט בדף
  • text-decoration:underline - הוספת קו מתחת לטקסט
  • text-align:center- יישור הטקסט שבתוך הdiv למרכז.
  • height:50px - הוספת גובה לdiv
  • width:100% - הוספת רוחב. ניתן במקום בpx לדבר באחוזים.

שימו לב, במקום כל הערכים שהזנתי מראש (למשל ה100% או הצבע האדום) אתם יכולים לשנות את הערכים כרצונכם, כל עוד הcss מכיר את התכונה ואת הערך. למשל, במקום red תכתבו blue או yellow. במקום 100% אפשר גם 50% וכך הלאה... כנ"ל לגבי center , אפשר גם left/right. או underline יש גם קו חותך אמצע וקו עליון על טקסט... פשוט לחקור את הנושא עוד ועוד ברשת...

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





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

ראשית, נתחיל מmargin:
כאשר אנו רוצים להרחיק את האלמנט שלנו מאלמנטים אחרים בדף נשתמש בmargin. דמיינו, שאני עומד בכיתה ומתרחק מהכיסא. הכיסא נשאר במקום אך אני מתרחק. אותו דבר גם כאן. צרו ריבוע עם תכונות של גובה, רוחב וצבע רקע. כמו בדוגמא:
<div style="height:25px;width:25px;background-color:yellow"><⁄div>

יש לנו ריבוע ואנחנו יכולים כעת להתחיל לשחק איתו. אם נמשיך להזין תכונות בתוך הגרשיים בstyle ונרשום שם את התכונות הבאות, הריבוע יתרחק כמספר שנזין:
  • margin-top:15px
  • margin-right:15px
  • margin-bottom:15px
  • margin-left:15px
ניתן גם לכתוב זאת כתכונה אחת כאשר יש לה 4 ערכים כסיבוב השעון: margin:15px, 0px, 5px, 10px
כלומר, יהיה מרחק של 15 פיקסלים מלמעלה, 0 מימין, 5 מלמטה , 10 משמאל (כסיבוב השעון).

בתכונת הpadding, אנו גורמים לdiv שלנו להיות שמן יותר או רזה יותר. זה יהיה כמו לכתוב height או width במובן מסוים. שימו לב:
  • padding-top:15px
  • padding-right:15px
  • padding-bottom:15px
  • padding-left:15px
  • או לחלופין: padding:15px, 0px, 5px, 10px
כעת, בדרך הpadding הdiv שלנו יקבל מרחק מלמעלה ב15 בכך שהוא השמין ולא התרחק כמו בmargin. כנ"ל לגבי שאר התכונות. נסו בעצמיכם.

זהו ההבדל בין margin לpadding.
margin מרחיק את האלמנט, padding משמין את האלמנט ומנפח אותו.



בשיעור זה אלמד על שלושה אלמנטים שונים בcss:

נתחיל מdisplay:
לdisplay יש מספר ערכים שניתן להזין ולכל אחד שימוש אחר...
למשל, הdefault של כל אלמנט הוא display:block כלומר - תהיה גלוי. תופיע במסמך.
אבל אפשר גם להעלים אובייקט כלשהו. כלומר, ליצור אותו, לכתוב בHTML הכל אבל שהוא לא יופיע. נכתוב זאת כך: display:none
יש גם את display:inline-block שמשמעותו היא לגרום לdiv שלנו, שאליו ייחסנו את התכונה הזו, לעמוד ליד אלמנטים אחרים. מפני שמצב ברירת המחדל של הdiv הוא שהוא עומד איתן לבדו. ניתן לגרום לשים לידו אלמנטים נוספים.

נמשיך לנושא הfloat:
גם float גורם לאלמנטים "לצוף" ולהיות אחד ליד השני. אמנם, תוך כדי תכנות, יש הבדלים בין inline-block לבין float. נסו בעצמיכם:
float:right
float:left
על מנת לבטל את הfloat הקיים, ניתן להשתמש אם תרצו ב clear:both

לסיום, נושא הpositions:
יש בcss אפשרות לגרום לאלמנטים "לרחף" על גבי הדף ללא תלות או קשר לאלמנטים אחרים. ניתן להגדיר לאלמנט את המיקום היחסי שלו בדף. צריך לזכור, כי כל האתרים בדפדפנים השונים מתחילים במצב הdefault בנקודת 0,0 . כמו מערכת צירים. ציר הy (גובה) הוא 0, ציר הx (רוחב) הוא 0.
גם כאן, בהנחה שאין לכם בbody דבר ותצרו div בצורת ריבוע הוא יהיה אוטומטית בנקודת ה0,0 בצד שמאל למעלה. ניתן לשנות זאת! ראשית, עליכם להגדיר לdiv שהוא position:absolute ולאחר מכן את המיקום היחסי שלו בדף קרי הדוגמא:
  • top:15px
  • bottom:15px
  • right:15px
  • left:15px
במידה ונרצה שהאלמנט שלנו יהיה מתחת לטקסט ולא מעליו, כמו שכבה נוספת שכזו - הכירו את z-index . זוהי תכונה אשר משמשת לשכבות שונות על הדף. מצב הברירת מחדל הוא 0.
z-index:-1 מלבד absolute יש גם את fixed. הוא נפוץ ביותר ומופיע כמעט בכל אתר!

כאשר נגדיר לאלמנט מסוים את אותן התכונות כמו לעיל, אך עם השינוי הקל ונהפוך אותו לfixed נקבל מצב בו האלמנט "צף"/"מרחף" כל הזמן באותה נקודה באתר לא משנה איפה אנחנו בדף. נסו בעצמיכם!



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

  • border-radius: 25px;
    במקום ריבוע, תוכלו לעגל את פינות הdiv. ניתן לפרק ל4 ערכים לפי סיבוב השעון.
  • opacity: 0.6;
    הערכים נעים על סקלה בין 0 ל1. מציג את הצבע/תמונה במצב של שקיפות יחסית.
  • text-shadow: 2px 2px 5px red;
    הוספת צל לטקסט. מכיל כ4 ערכים. הראשון זה המרחק מהtop, השני המרחק משמאל, השלישי חדות הצל והאחרון צבע הצל.
  • box-shadow: 10px 10px 5px grey;
    אותו דבר כמו צל לטקסט, הפעם צל לdiv עצמו.
הערה חשובה: מפני שהרבה דפדפנים לא תומכים בCSS3 ניתן לבצע כתיבת קוד למצב ברירת מחדל. כלומר, מה קורה במצב בו הדפדפן לא תומך בgradient? ניצור גם background-color רגיל.
    background: red;
    background: linear-gradient(red, yellow);

לאחר שאתם יודעים כבר מהו CSS וכיצד כותבים ומעצבים, לא תהיה בעיה עבורכם לחקור ברשת המלאה במידע ולהטמיע את התכונה לאתרכם.



הפעם, נלמד על אנימציות ושינויים דינאמיים בCSS.
ראשית, נצטרך לכתוב הכל בcss חיצוני.
css חיצוני הכוונה היא שניתן לפתוח בnotepad++ קובץ חדש ובסרגל העליון תחת "שפה" לבחור ב"css" או "גליונות סגנון מדורגים". כעת, תוכלו לכתוב שם את כל העיצוב שלכם בצורה מסודרת להפליא. כל שעליכם לעשות הוא להגדיר 'איזור' לכל אלמנט. למשל, אם נרצה שיהיה לנו צבע רקע כחול, צבע טקסט אדום וקו מתחת לטקסט בכל תגית h1 נבצע זאת בcss החיצוני כך:

    h1 {
    background-color:blue;
    color:red;
    text-decoration:underline;
    }

לסיום, כל שנצטרך לעשות הוא לתת הפנייה לcss החיצוני שלנו בתוך הhead. בדרך הבאה:
<link href="style.css" rel="stylesheet">
כאשר נרצה לבצע מצב בו האלמנט שלנו יהפוך מצבע צהוב לאדום בצורה מהירה ודינאמית אל נגד עיני המשתמש שלנו בצורת אנימציה, נוכל לבצע זאת כך:
כעת, עלינו להגדיר בcss החיצוני איזור חדש לחלוטין :
    @keyframes tal {
    from {background-color: red;}
    to {background-color: yellow;}
    }
כפי שניתן לראות בסוגריים המסולסלים יש את הfrom והתכונות של מצב ברירת המחדל ואת המצב העתידי אליו אנו רוצים להגיע בto.
נצטרך גם להגדיר מראש @keyframes tal שהtal יכול להשתנות (שם האנימציה למעשה, לבחירתכם) אולם ה@keyframes חייב להיות כמו שהוא (קריאה לאנימציה).

בתוך הdiv עצמו תקראו לאנימציה ותוכלו להוסיף עוד תכונות כמו כמה זמן היא תימשך? האם לנצח? וכדומה.
    animation-name: tal;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;



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

לאחר שעיצבתם אתר משלכם המותאם למחשב דרך css חיצוני, פיתחו עוד css חיצוני חדש וצרו בו את הקוד הבא:

    @media screen and (min-width: 480px) {
    body {
    background-color: yellow;
    }
    }
על פי הקוד הנ"ל, כל פעם שהמסך שלנו יהיה פחות מ480 פיקסלים, צבע הרקע ישתנה לצהוב.
נסו בעצמיכם: צרו אתר עם h1 וdiv. כאשר האתר בגודל קטן מ480, שנו את הצבעים של כל האלמנטים בדף (גם של הרקע). תוכלו להקטין את המסך ולהיווכח בעצמכם שאכן יש שינויים בדפדפן.

למכשירים שונים יש גדלים שונים ולכן מומלץ לחפש בgoogle את הגודל הרלוונטי שאתם רוצים לאתרכם.
צפו בסרטון ההסברה והתאימו את האתר שלכם לגדלים שונים.



ניתן לדבר עם אלמנטי html שונים דרך הcss שלנו. ראינו מספר דרכים לכך. ניתן דרך התגית עצמה, ניתן דרך css חיצוני ואפשר דרך תגית style בתוך הHead.
כאשר נרצה לפנות לdiv ספציפי למשל ולא לכלל הdiv שיש לנו בדף, נצטרך לתת לו שם ייחודי. הדבר נקרא id. אנו פונים לid בcss דרך סולמית #.

    <div id="tal"><⁄div>

    <style>
    #tal {
    color: blue;
    }
    <⁄style>


כאשר נרצה לפנות לחבורת div ספציפיים למשל ולא לכלל הdiv שיש לנו בדף, נצטרך לתת לקבוצה הזו שם ייחודי. הדבר נקרא class. אנו פונים אל הclass בcss דרך נקודה.
    <div class="tal"><⁄div>
    <div class="tal"><⁄div>
    <div class="tal"><⁄div>

    <style>
    .tal {
    color: blue;
    }
    <⁄style>
נסו בעצמיכם!
עוד מן עולם הסלקטורים והאפשרויות לקרוא לאלמנטים שונים בcss לפניכם:
  • * - בחירת כלל האלמנטים
  • div > h1 - בחירת רק תגיות הh1 שהן הילדים של הdiv
  • div:hover - במעבר עכבר על הdiv תבצע משהו
  • div:eq(0) - בתוך הסוגריים נזין מספר (הספירה מתחילה מ0) ונקרא לאלמנט הdiv במקום הראשון, השני וכו'



ישנה חבורת מתכנתים שכתבו עבורינו ספריות שלמות של css המכילות classes שונים, קריאות לid בשמות ספציפיים וגם לתגיות Html רגילות כמו Button, input וכדומה... בתוך קובץ הcss החיצוני שהם יצרו, הם שינו את מצבי ברירת המחדל לתכונות עיצוביות מרהיבות משלהם ואנו כמתכנתים משתמשים בכך.
כל שעלינו לעשות הוא להזין את שורת הcss החיצוני (ניתן גם להוריד את קובץ הcss של הbootstrap למחשב) בתוך הHead שלנו ולהתחיל לחקור ולבדוק איך לעצב על פי ההגדרות שלהם.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


למשל אחד הכלים השימושיים ביותר הוא class ה<div class="container"><⁄div> אשר גורם לאלמנטים שלנו להיות במרכז הדף. גם במצב של גודל מסך גדול או גודל מסך קטן - האלמנט עדיין יישאר באמצע. נסו בעצמיכם.
עוד מן האפשרויות השכיחות יותר על bootstrap היא גם שימוש בכפתורים מעוצבים אשר מכילים כבר סימנים מוטבעים מראש בתוך הbutton או הinput (למשל, input שמכיל חיפוש בדף).
בנוסף לאלה, יש גם אפשרות לחלק את הדף ל12 חלקים כמעין טבלה. מאוד שימושי ונוח לסדר קצת אלמנטים זה לצד זה. כל שצריך לעשות זה להגדיר בclass הרלוונטי כמה נפח הוא תופס מתוך ה12. למשל, אם זה 6 אז בדיוק חצי... אם 1 אז זה 1/12 מן הדף (איזור קטנטן) וכדומה...
זהו למשל קוד אשר מציג class של נפח 4. כל אחד מהשלושה תופס את אותו class והם מגיעים בדיוק ל12.

.col-sm-4
.col-sm-4
.col-sm-4



מערכת תגובות

טלי : מעולה תודה לך
תומר : תודה טל
יהיו עוד שיעורים? : בבקשה

שם:
ההודעה:
🔝