לימוד CSS » איך לכתוב קוד CSS באופן תקני (חוקי CSS)

איך לכתוב קוד CSS באופן תקני (חוקי CSS)

נכתב ע"י יוחאי ירמיהו

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

חוקי כתיבת קוד CSS

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

body {
    background: #000;
}

נתחיל מהקוד ה-body. הקוד הזה בעצם מסמל את הסלקטור/אלמנט בעמוד שאנחנו רוצים לבחור. זה יכול להיות כותרת בקוד HTML כמו H1, זה יכול להיות פסקה עם תגית P, זה יכול להיות אלמנט שאנחנו נגדיר לו שם מזהה (נלמד לעשות את זה במדריכים הבאים) וזה יכול להיות תגית body שזה בעצם קוד מעטפת לעמוד ומאפשר לנו לעשות שינויים מהותיים בעמוד.

לאחר שאנחנו בוחרים את האלמנט שאנחנו רוצים לשנות (במקרה הזה body) לפני שאנחנו מגדירים את הפקודות שאנחנו רוצים להעביר לדפדפן תחילה נצטרך לפתוח סוגריים. אז לאחר המילה body אפשר לראות את הסימן } ולאחר הקוד שמופיע בשורה מתחת אפשר לראות את הסגירה של הסוגריים עם הסימן }.

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

יצירת ערכים ופקודות לשינוי עיצוב בעמוד

לאחר שלמדנו איך לבחור אלמנטים בעמוד (במקרה שלנו מדובר על תגית body) כעת ננסה להבין איך אנחנו מוסיפים פקודות שיאפשרו לשנות את העיצוב של האלמנט שבחרנו.

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

background: #000;

השורה הזאת מתחלקת ל-2 חלקים. החלק הראשון הוא background וזה בעצם המשתנה שאנחנו רוצים ליצור והחלק השני הוא הערך שאנחנו רוצים להגדיר עבור background.

אם נהיה יותר מעשיים background מסמל את הרקע והחלק השני #000 מסמל את הצבע של הרקע באמצעות קוד צבע RGB (במקרה שלנו מדובר על צבע רקע שחור).

בדומה לרקע יש לנו אלמנטים נוספים שאנחנו יכולים להגדיר כמו: color (צבע של טקסט), font-size (גודל טקסט), text-align (מרכוז של טקסט), margin (מרווחים בין אלמנטים), padding (מרווח פנימי) וכו'…

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

לאחר הסימן של נקודתיים נגדיר את הערך שאנחנו רוצים להגדיר עבור הרקע ובמקרה הזה מדובר על קוד צבע שחור #000. ובסיום הקוד צבע שאנחנו מגדירים נוסיף את הסימן ; שבעצם מסמל על סיום הפקודה וסיום השורה.

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

body {
    background: #000;
    color: #fff;
    text-align: center;
    direction: rtl;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
}

ביצוע שינויי CSS לריבוי משתנים

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

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

h1, h2, h3, h4, h5, h6 {
   color: #444444;
   font-weight: bold;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
}

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

.div-class .another-div h1, 
.div-class .another-div h2,
.div-class .another-div h3, 
.div-class .another-div h4,
.div-class .another-div h5 {
   color: #444444;
   font-weight: bold;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
}

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

איך לכתוב קוד CSS באופן תקני (חוקי CSS)

חוקי כתיבת קוד CSS

יצירת ערכים ופקודות לשינוי עיצוב בעמוד

ביצוע שינויי CSS לריבוי משתנים

מדריכי HTML