מה זה CSS? ומה עושים עם זה?
נכתב ע"י יוחאי ירמיהו 2 תגובות
שפת הקוד CSS או בשם המלא (Cascading Style Sheets) היא שפה שעוזרת לנו לשלוט על העיצוב של האתר ועל המיקומים של אלמנטים. במדריך הבא נלמד אתכם מה זה CSS וכיצד קוד CSS משפיעה על האתר שלכם באופן מעשי.
בסרטון הבא אפשר להבין מה זה CSS והאם עדיין זה שימושי?
מה זה CSS?
אז כפי שצוין לעיל שפת CSS מאפשרת לנו לעצב את העמוד ולהפוך אותו ליותר מעניין. כאשר אנחנו כותבים עמוד באמצעות קוד HTML אז מה שמופיע בעמוד זה רק קוד HTML נקי בצורה הבאה.
בשביל להבין כיצד נראה עמוד הבית שלנו המציג מדריכים ל-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 על מנת לעצב את האתרים שלכם באופן מקצועי.
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
2 תגובות
לא ניתן לפרסם תגובות
הלוואי ותמשיך !!!
תודה רבה על התגובה, המטרה היא להמשיך אבל זה ייקח קצת זמן.
אני מתאר לעצמי שזה ייקח כמה חודשים עד שיהיה לי הזדמנות וזמן להקדיש להמשך האתר.