dr.code();
הסבה לתכנות קורסים בלוג צור קשר

מה זה css ואיך מעצבים באמצעותה אתרי אינטרנט

עודכן לאחרונה: נובמבר 30, 2024 קריירה בהייטק, ללמוד תכנות, להיכנס להייטק, עיצוב אתרים, מה זה css
כותב: דוקטור קוד

header

אז מה זה בעצם השפה הזו css?


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

שפת css, היא שפה שנשתמש בה על מנת להסביר לדפדפן איך הוא אמור להציג אלמנטים על המסך, השפה תעזור לנו ליצור אתרי אינטרנט רספונסיביים ואף דפי אינטרנט שמתאימים להדפסה, היא תעזור לנו לשלוט בתצורה ובאילו אלמנטים שמופיעים על המסך.

באמצעות css נוכל ליצור גיליונות סגנונות, משמע הגדרות תצורה ולשמור אותם בקבצי css נפרדים פר עמוד.

אז למה מדורגים מה מדורג בזה?


שפת css משתמשת בלוגיקה שבה נבנים עיצובים זה על גבי זה, למשל נוכל לעצב אלמנט מסוג

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

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

טוב חלאס תראו לי תכנות בשפת css


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

כדי לגרום לדבר הזה לא להיות כזה PURE HTML מכוער נאלץ להשתמש בשפת css וליצור עיצוב עבור כל אלמנט

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

איך נראה הסינטקס של שפת css?


selector:{property:value}

אז מה יש לנו פה?

  • selector - סלקטור הוא שם האלמנט שאותו אנחנו רוצים לבחור מתוך המסמך ולהחיל עליו שינויים למשל אם היינו רוצים להחליט שכל הכפתורים שלנו יהיו בצבע כחול היינו משתמשים בסלקטור בשם button.
  • property - השם של הערך שנרצה לשנות, בשפת css יש המון ערכים קבועים מראש שנוכל להשתמש בהם על מנת לשנות את עיצוב האלמנטים, למשל אם היינו רוצים לשנות את צבע הרקע של דיב מסויים היינו משתמשים בפרופרטי בשם background-color:blue.
  • value - הוא הערך שאנחנו רוצים לתת לאותו property לדוגמה צבע אדום background-color:red

בואו נסתכל איך אפשר להגדיר עיצוב מסויים לאלמנט מסוג p

          
p {
   font-family: verdana, serif;
   font-size: 20px;
   color:blue;
}
          
        

הקוד הבא יוסיף צבע כחול לכל הטקסטים שנמצאים תחת תגיות p בכל מקום בעמוד שלנו.

רשימת כל ה properties האפשריים.

איך להוסיף css לאתר אינטרנט?


שלושה דרכים להוספת עיצוב לתגיות ה html שלנו.

inline css


הוספת עיצוב באמצעות attribute בשם style תעשה ישירות בתוך מסמך ה html שלנו וישירות על האלמנט הרצוי.

            
<div style="display: flex; flex-direction: column">
   <div style="padding: 10px">
       <div style="text-align: center">hero name</div>
   </div>
</div>
            
          

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

Internal css


הוספת תוכן עיצובי ישירות בתוך תגית ייעודית לכך בשם style.

את התגית הזו מוסיפים בסוף ראש המסמך הלא הוא ה head ומוסיפים אליו את הסלקטורים שאנחנו רוצים.

            
<head>
       <meta charset="UTF-8" />
       <title>Title</title>
         // פה באמצעות התגית סטייל נוסיף את הסלקטורים הנדרשים
       <style>
           body {
             margin: 0;
             background-color: #2860ff;
           }
           .hero-item{
             background-color: #0bc36b;
           }
       </style>
        // עד פה...
</head>
<body>
       <div class="hero-container">
           <div class="hero-item"></div>
       </div>
</body>
            
          

חיבור לקובץ חיצוני


באמצעות חיבור לקובץ חיצוני נוכל לבודד את החשש שבו כל תוכן ה html ועיצוב ה css נמצאים כולם באותו קובץ גדול ועמוס.

אם ניצור קובץ בשם index.css נוכל להוסיף אותו למסמך שלנו באמצעות תגית ה link ראו שורה 4.

          
<!DOCTYPE html>
<html lang="en">
   <head>
       <title>Title</title>
       <link rel="stylesheet" href="index.css">
   </head>
   <body>
       <div class="hero-container">
          <div class="hero-item"></div>
      </div>
   </body>
</html>
          
        

איך מוסיפים קלאס לאלמנט html?


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

            
.primary-button {
  property-name:value;
}
            
          

שימו לב שבשפת css הקונבנציה לכתיבת שמות משתנים היא kebab-case.

למשל אם היה לנו שם בעל שתי מילים למשל כפתור ראשי היינו רושמים את שם המשתנה כך

primary-button ולא primaryButton כנהוג בג'אווה סקריפט בקונבנציה של camelCase.

אז איך משתמשים בקלאס שיצרנו בתוך המסמך html שלנו?
            
 <div class="primary-button">My Best Title</div>
            
          
פשוט מוסיפים את האטריבוט קלאס ומשתמשים בשם שיצרנו בקובץ ה css שלנו.

היתרונות בשימוש בשפת css


לסיכום - כדי להיות אמני פיתוח פרונט עליכם לשלוט בשפת css


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

בהמשך הדרך גם תפגשו יצורים חדשים כמו שפת SCSS ו SASS ואפילו LESS שיאפשרו לכם אפילו מעט יותר ממה ש CSS הבסיסית מאפשרת, אבל זה כבר סיפור לפוסט אחר :)

רוצים ייעוץ חינם מהדוקטור?

צרו איתי קשר לכל שאלה ואשמח לעזור!


לכל המעוניינים ללמוד תכנות

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

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

דברו איתי
whatsapp
ווצאפwhatsapp דסקורדwhatsapp