ראשי » תרגילים ופתרונות CSS

    מלאו פרטים לקבלת ייעוץ





    אני מאשר קבלת מבצעים ועדכונים מחברת RT-GROUP בכפוף לprivacy

    [honeypot Email id:email class:email]

    תרגילים ופתרונות בשפת CSS

    מדריך CSS מקיף עם תרגילים ופתרונות

     

    צוות Real Time College הכין במיוחד בשבילכם סט שאלות של תרגילים + פתרונות בשפת CSS לבדיקת הידע, הסרת חלודה 🙂 או כביצוע הכנה לראיונות עבודה בתכנות CSS

     
     

    שאלה 1:

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

    תשובה 1

     
     

    שאלה 2:

    מה זה FLEXBOX?
     
    תשובה 2

     
     

    שאלה 3:

    מה זה GRID?
     
    תשובה 3

     
     

    שאלה 4:

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

     
     

    שאלה 5:

    פרטו מהם הערכים הקיימים שניתן לשייך ל position שקיימים CSS3
     
    תשובה 5

     
     

    שאלה 6:

    מה ההבדל בין fixed ל static?
     
    תשובה 6

     
     

    שאלה 7:

    מה ההבדל בין rem לem?

     
    תשובה 7

     
     

    שאלה 8:

    בעת הגדרת גדלים מהו היתרון להשתמש ב VM לעומת שימוש ביחידת px?
     
    תשובה 8

     

     

    להלן פתרונות תרגילי CSS

     

    תשובה לתרגיל 1- עיצוב כפתור

    
    
    .btn{
                border-radius: 25px;
                border-width: 5px;
                border-block-color: red;
                background: rgb(255, 166, 0);
                padding: 20px;
                width: 200px;
                height: 200px; 
            }
    
     
    

    חזרה למעלה

     

    תשובה לתרגיל 2 – FLEXBOX

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

    חזרה למעלה

     

    תשובה לתרגיל 3 – GRID

    GRID זאת מערכת דו-מימדית שמאפשרת לנו לנהל ולעצב את הרכיבים המוצגים בעמוד על ידי שורות ועמודות המוגדרות לפי גדלים מסויימים, זאת בניגוד ל FLEXBOX.

    חזרה למעלה

     

    תשובה 4 – צביעת אי זוגי

    element:nth-child(odd){
    background: red;
    }

    חזרה למעלה

     

    תשובה לתרגיל 5 – ערכים אפשריים לחוק Position

    
    
    position: relative;
                position: absolute;
                position: fixed;
                position: initial;
                position: static;
                position: sticky;
    
    
    
    

    חזרה למעלה

     

    תשובה 6 – Static VS Fixed

    Static – ברירת המחדל
    Fixed –האלמנט יישאר במקום קבוע על גבי המסך כפי שהוצג עם טעינת העמוד גם עם נגלול על העכבר.

    חזרה למעלה

     

    תשובה 7 – em, Rem

    
     	 
    Rem – יחידת מידע יחסית שנקבעת בroot - . (אם נשנה את ערך הפיקסל ב Root בכל מקום שרשום ערך rem הוא ישנה בהתאם)
    Em – יחידת מידע יחסית לאלמנט האב בלבד.
    
    
    

    חזרה למעלה

     

    תשובה לתרגיל 8 – vm vs px ?

    vm זאת יחידת מידע יחסית לרוחב החלון של הדפדפן, בעזרתה אנחנו נקבל מבנה שמתאים את עצמו לרוחב החלון (לא תמיד יוצא כמו שציפינו מסיבות שונות, חשוב לוודא ולעשות בדיקות רספונסיביות) לעומת px שמתאים לרזולוציה וגודל המסך הספציפי שבו נמצאים.
    מבחינה רספונסיבית נעדיף להשתמש ב VM, (צריך לוודא שנתמך ע"י כל גרסאות הדפדפנים לפי רצוננו).

    חזרה למעלה

     

     
    מעוניינים לשפר את הידע בכתיבת CSS ובעיצוב ובניית אתרים ולפתוח המון אפשרויות פיתוח חדשות בעולם ההייטק?
    בוא ללמוד Full Stack עם צוות Real Time College
    לפרטים נוספים > קורס CSS3 + Bootstrap
     

    אולי יעניין אותך גם: