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

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

כותב: דוקטור קוד

אז מה זה בעצם השפה הזו 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 - הוספת עיצוב css ישירות על תגית ה HTML באמצעות ה attribute בשם style.
external css - הוספת עיצוב באמצעות תגית העיצוב בראש המסמך שלנו לרוב בתוך תגית ה head.
internal css - הוספת עיצוב באמצעות לינק לקובץ חיצוני באמצעות לינק חיבור שנוסף לראש המסמך שלנו.

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 אנחנו יכולים להפריד את העיצוב שאנחנו מחילים על כל עמוד ועמוד, למשל אם באתר שלנו היו שני עמודי אינטרנט אחד בשם עמוד הבית והשני אודות, באמצעות יצירת שני קבצים שונים אנחנו יכולים להפריד את העיצוב של כל עמוד , למה הדבר הזה טוב ? זה טוב כאשר אתר האינטרנט שלנו גדול ואנחנו צריכים שהעיצוב יהיה מופרד בין העמודים השונים.
עיצוב משותף - אם באותם עמודים ישנו עיצוב משותף , במקום להחיל את העיצוב בתצורת INLINE על כל אלמנט אנחנו יכולים באמצעות css ליצור Class ולהשתמש בו היכן שנרצה, למשל אם יש לנו איזה כפתור מגניב שחוזר על עצמו בכל מיני מקומות ועמודים נוכל להשתמש ב class של הכפתור הזה על מנת לשחזר את אותם תנאי עיצוב על אלמנטים שונים.
רספונסיביות - כפי ששמתם לב כל אתר היום חייב להיות תואם לגלישה מהנייד, לכן, שפת css עוזרת לנו להתאים את העיצובים שלנו בתנאי לאיזה משתמש ואיזה גודל מסך צופה באתר! ה אתם והפיתוח האישי שלכם, ולכן כדאי שתדעו אילו מקצועות יעזרו לכם להתקדם, ותעבדו באחד מהמקצועות שלא ישאירו אתכם מאחור - לא מבחינת שכר ולא מבחינת השכלה.

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

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

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