שיעור: איך להשתמש ב-CSS?
בשיעור זה נסביר לכם איך להשתמש ב-CSS ולעבוד על עיצוב האתר
אם ה-HTML הוא הגוף של כל אתר, ה-CSS הוא הבגדים. מה זה CSS? מדובר על החלק שקובע את העיצוב של האתר: באילו פונטים יופיעו המילים? מה יהיה הרקע של העמוד? עד סוף שיעור זה תבינו כיצד להוסיף רכיבי עיצוב לעמוד אינטרנט, כדי שהוא לא יראה פשוט כמו אוסף לא מעוצב של מלים.
מה צריך?
- להוריד את תוכנת NOTEPAD++
- לבדוק את העיצוב בעזרת דפדפן
- לרצות להבין איך אתרים בנויים
צעד ראשון: להבין מהו CSS
CSS הוא ראשי תיבות של גליונות עיצוב מדורגים, או Cascading Style Sheets. זוהי השפה בעזרתה הדפדפן מבין איך העמוד שלך אמור להיראות. CSS הוא קוד פשוט שמאפשר לך לקבוע רוחב ואורך של אלמנטים שונים בעמוד, צבע, סוג גופן, ריווח ועוד.
צעד שני: לשייך CSS בתוך הקובץ עצמו
נאמר שאתה רוצה לקבוע שהפיסקה הראשונה בעמוד שלך תהיה בצבע ירוק, איך עושים את זה בCSS? הקוד יראה- color:green. מאוד פשוט, נכון?
איך העיצוב שכתבת יהיה משוייך לצבע הירוק? פשוט נגדיר בקובץ את העיצוב לפי השם של הפיסקה. אם הפיסקה נקראת "first", אז נגדיר את הצבע לפיסקה "first".
יש שתי אפשרויות לשייך CSS לאלמנט בעמוד:
- נוכל להגדיר את זה בתוך הקובץ עצמו, או inline: <p style="color: green;">
- אפשרות שנייה היא להגדיר זאת בקובץ חיצוני.
באותה שיטה נוכל להגדיר את סוג הגופן וגודלו בפיסקה: <p style="color: red; font-family: Helvetica; font-size: 20px;">
צעד שלישי: לשייך CSS בקובץ חיצוני
אם כל קוד ה-CSS יהיה בתוך הקובץ, הקובץ יהיה גדול מדי, ויהיה מאוד קשה לקרוא אותו. בדיוק בשביל זה רוב האתרים כוללים קובץ CSS חיצוני שמכיל את כל הגדרות ה-CSS.
איך זה עובד? אם אתה רוצה שכל פסקאות H2 יהיו בפונט אריאל, כל מה שאתה צריך לעשות זה לכתוב בקובץ:
h2 { font-type:arial; }
כל H2 שתכתוב בעמוד יהיה בפונט אריאל.
צעד רביעי: לשייך CSS בעזרת Class
בעזרת CSS אפשר לשייך class מסויים לאלמנט בעמוד. למשל, אני יכול להחליט שלפיסקה יהיה class שנקרא the-green (יכולתי לתת לו כל שם). בזמן שאגדיר את הפיסקה בעמוד אכתוב:
<p class="green">
כעת, בקובץ החיצוני אכתוב:
כעת כל אלמנט שאגדיר אותו עם קלאס the-green יקבל את הצבע הירוק.
צעד חמישי: לשייך CSS בעזרת ID
מלבד class אפשר להגדיר אלמנט בעזרת ID. ה-ID, בשונה מ-Class, הוא ייחודי לאלמנט הספציפי שאתה מגדיר עבורו.
דוגמה: אני רוצה להגדיר div עם גודל מסויים.
#my_div { width:800px; height:600px}
מה עוד?
בגדול, זהו! כמובן שאפשר ללמוד עוד על CSS, אבל זהו רק מדריך בסיסי. תוכלו להתמקד על CSS אם תרצו ללמוד עיצוב גרפי או בניית אתרים מקצועית.
תן ליועצי הלימודים שלנו לחזור אליך
שיעור: איך להשתמש ב-CSS?: שאלות ותשובות
מחפשת קורס קצר עד 5 ימים ל css ו html מתקדם!!
איפה ניתן למצוא באיזור ירושלים?
במכון לנדר