ליצירת קשר
whatsapp
לימודי הייטק ב-INT LIVE
טלפון

מה זה css

INT College
מה זה css

תדמיינו לעצמכם תהליך בנייה של בית. בהתחלה מניחים את היסודות, ולאחר מכן יוצקים עליהם את הבטון, עד לקבלת ה"שלד" של הבית. לאחר מכן, על השלד" יוסיפו את הצבע והגימורים, אלו שיעניקו לו את המראה הסופי של בית. כך בדיוק עובד עולם התכנות הבסיסי, המורכב משפת היסוד "HTML" (יסודות הבית) ולאחר מכן מוסיפים את שפת ה-"CSS", האחראית על הענקת הצורה, הצבע והעיצוב לבית. אז מהי בדיוק שפת "CSS"? ומדוע כל כך חשוב ללמוד אותה? כל המידע לפניכם.

להכיר את CSS

המשמעות של ראשי התיבות "CSS" היא "Cascading Style Sheets", משמע "גיליונות סגנון מדורגים". זוהי השפה האחראית על עיצוב אתרי האינטרנט, והיא נלווית לכל עמודי ה-HTML. תפקידה של ה-css לקבוע את הגדרות העיצוב של העמוד, החל ממיקום האלמנטים, הגופן, הצבע, הגודל וההתאמה לסוגי המסכים השונים. שפת ה-CSS נוצרה במטרה להפריד בין תוכן דפי האינטרנט לבין העיצוב שלהם.

איך מטמיעים CSS?

קיימות שלוש דרכים עיקריות להטמעת גיליונות סגנון מדורגים (CSS):

גיליון עיצוב חיצוני

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

גיליון עיצוב פנימי

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

הגדרת עיצוב בכל שורה

הוספת הגדרות עיצוב לכל אלמנט בנפרד, על ידי הוספת Attribute בשם "Style" ישירות על האלמנט הרצוי בתוך שורת הקוד של מסמך ה-HTML. מדובר בדרך המסורבלת ביותר, משום שנעשה "ערבוב" של שתי השפות, בנוסף מדובר בעבודה מרובה המצריכה כתיבת תכונות עיצוב נפרדות לכל אלמנט מחדש.

כיצד שפת CSS בנויה?

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

נבצע זאת באמצעות כתיבת קוד CSS בצורה הבאה:

h2 {

color: blue;

font-size: 20px;

}

הקוד נפתח עם "סלקטור", הסלקטור הוא בעצם האלמנט שאותו אנחנו הולכים לסגנן (H2 לצורך הדוגמה).
סלקטור יכול להיות פסקה (p), בלוק טקסט (div), קטע טקסט (span), כותרת (h1, h2, h3…), שדה-קלט (input) ועוד.. במקרה שלנו בחרנו לעצב כותרת H2.

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

יתרונות CSS

נפרדות וסדר

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

אפשרויות עיצוב בלתי נגמרות

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

הנפשות ואפקטי תנועה

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

לקביעת שיחת ייעוץ חינם

    שיחה עם נציג

    דילוג לתוכן