חלק ג’: איך להשתמש ב-CSS?

חלק ג’: איך להשתמש ב-CSS?

אם ה-HTML הוא הגוף של כל אתר, ה-CSS הוא הבגדים. מה זה 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{ color:green; }

כעת כל אלמנט שאגדיר אותו עם קלאס the-green יקבל את הצבע הירוק.

צעד חמישי: לשייך CSS בעזרת ID

מלבד class אפשר להגדיר אלמנט בעזרת ID. ה-ID, בשונה מ-Class, הוא ייחודי לאלמנט הספציפי שאתה מגדיר עבורו.

דוגמה: אני רוצה להגדיר div עם גודל מסויים.

#my_div { width:800px; height:600px}

מה עוד?

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

עדיין מתלבט?
שוחח עם יועצת לימודים

קבל מידע על קורס בניית אתרים

למידע על קורס בניית אתרים
1
מלא את הפרטים ונציג לימודים יחזור אליך עם מידע על קורס בניית אתרים, חינם וללא התחייבות!
2
בחר מוסדות לימוד
3

אנו מכבדים את פרטיותך | בכפוף לתקנון האתר

חלק ג’: איך להשתמש ב-CSS?: שאלות ותשובות

 רחל רחל

מחפשת קורס קצר עד 5 ימים ל css ו html מתקדם!!
איפה ניתן למצוא באיזור ירושלים?

במכון לנדר

8 בספטמבר 2013
יש לך שאלה? רוצה לדעת עוד? זה המקום לשאלות

קבל מידע על קורס בניית אתרים
מלא פרטים לקבלת מידע מנציג טלפוני חינם וללא התחייבות!
בחר מוסדות לימוד

אנו מכבדים את פרטיותך | בכפוף לתקנון האתר