לימוד CSS » מה זה CSS? ומה עושים עם זה?

מה זה CSS? ומה עושים עם זה?

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

שפת הקוד CSS או בשם המלא (Cascading Style Sheets) היא שפה שעוזרת לנו לשלוט על העיצוב של האתר ועל המיקומים של אלמנטים. במדריך הבא נלמד אתכם מה זה CSS וכיצד קוד CSS משפיעה על האתר שלכם באופן מעשי.

בסרטון הבא אפשר להבין מה זה CSS והאם עדיין זה שימושי?

מה זה CSS והאם זה עדיין שימושי?

איך לבנות אתר בחינם בשעה וחצי?

יש לי הצעה מעניינת עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.

מה זה CSS?

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

בשביל להבין כיצד נראה עמוד הבית שלנו המציג מדריכים ל-CSS ללא עיצוב בקוד CSS צפו בתמונה הבאה:

אתר לדוגמא ללא קוד CSS

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

אתר לדוגמא עם קוד CSS

איך משתמשים ב-CSS?

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

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

האפשרות השנייה היא על ידי טעינה של קוד CSS בתוך אזור ה-hader של האתר עם הקוד העיצובי שאתם רוצים בתוך העמוד וניתן לראות כיצד זה נראה בקוד לדוגמא מתחת (הקוד הבא אמור לשנות את הצבע של רקע העמוד):


<head> 
    <style>

        body {
            background: #c2c2c2;
        }

    </style>
</head>

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


<p style="color:red">טקסט עם צבע אדום</p>

טקסט עם צבע אדום

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

עוד לא צפיתם בהדרכה? זה בחינם!

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

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

2 תגובות

  1. רוני
    רוני

    הלוואי ותמשיך !!!

    1. יוחאי ירמיהו
      יוחאי ירמיהו

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

לא ניתן לפרסם תגובות

כלי נגישות