לפני שמתחילים שלב 1 - רקע שלב 2 - גופן שלב 3 - פסקה שלב 4 - תיבה שלב 5 - מיון עיצוב קישורים שונות CSS ב-JS

קופסא

גליונות סגנון מאפשרים לך להגדיר גבולות, שולים ומילוי של רכיבים בעמוד. לדוגמא: תוכל לגרום לגבול לגלוש סביב כותרת, או לשנות את השוליים של P כדי שבכל מופע שלו יוכנס הטקסט ימינה בעמוד. להלן סקירה של המאפינים בהם תוכל להשתמש כדי לשנות את התיבות של רכיב.
Border - גבול ימני, שמאלי, עליון ותחתון של רכיב. תוכל לקבוע את רוחבו, צבעו וסגנונו.
Margin - שולי הדף
Padding - מילוי - השתמש בו כדי להגדיר את הרוח בין הגבול לתוכן של הרכיב

נוכל לסכם את המאפינים הקשורים ליצירת תיבה באופן הבא:

  • המאפינים height ו-width קובעים את הגודל הכללי של התיבה המכילה את הרכיב
  • מאפיניי השולים - margin קובעים את שולי הרכיב בתיבה
  • מאפיני הגבול קובעים את הגבול בתוך שולי הרכיב
  • מאפיני המילוי - padding קובעים את המיקום של הגבול בתוך שולי הרכיב
    אנו, במקום לתאר כל מאפיין ומאפיין, החלטנו לקבץ את המאפינים בצורה הזו:
    border-top-property
    margin-left-property
    padding-right-property
    border-bottom-property
    או בזו שמשפיעה על כל 14 הצדדים: 
    border-property, margin-property, padding-property

    לדוגמא: 
    
P {Border-Top-Color:navy}
    קוד זה קובע שבכל איזכור של P, צבעו של הקו העליון יהיה כחול כהה

    
P {Border-Color:navy}
    קוד זה קובע שבכל איזכור של P, צבעו של כל קו יהיה כחול כהה

    Border-Color

    המאפין Color קובע את צבע הגבול של רכיב,והוא מקבל שם של צבע או ערך RGB
    משתמשים בו

    דוגמא להצהרה הזו: 
    P {Border-Color:navy}
P {Border-Top-Color:red}

    Border-Width

    המאפין Width קובע את הרוחב של הגבול (4 הגבולות או אחד מהם),והוא מקבל ערך מטבלת הגדלים ו-Auto

    דוגמא להצהרה הזו: 
    P {Border-Width: 10pt}
P {Border-Top-Width:1pt}

    Border-Style

    המאפין Style קובע את העיצוב של הגבול (4 הגבולות או אחד מהם),והוא מקבל ערך מהטבלה:

    הערךתיאורו
    noneללא גבול
    dottedקו מנוקד
    solidקו מלא - רגיל
    double

    קו כפול. הרוחב של 2 הקוים הרווח ביניהם שווה לערך של width

    grooveמצויר חריץ תלת מימדי בצבעים המבוססים על Color
    ridgeמצויר חריץ תלת מימדי בצבעים המבוססים על Color
    insetמצירת תוספת תלת מימדית בצבעים המבוססים על Color
    outsetמצירת פתיחה תלת מימדית בצבעים המבוססים על Color
    dashedקו מקווקו
    דוגמא להצהרה הזו: 
    P {Border-Style: inset}
P {Border-Top-Style: inset}

    הערה: אם לא תגדיר את Border-Style, ותגדיר רוחב, או כל מאפין אחר של גבול, הגבול לא יוצג.

    Margin

    המאפין Margin קובע את הרוחב של השולים (4 השולים או אחד מהם),והוא מקבל ערך מטבלת הגדלים.

    דוגמא להצהרה הזו: 
    P {Margin: 10pt}
P {Margin-Right:1pt}
P {Margin-Left:1pt}

    Height ו-Width

    המאפיינים Height ו-Width קובעים את גודלו (Height - גובה ו-Width רוחב) של הרכיב ,והם מקבלים ערך מטבלת הגדלים. ו-Auto

    דוגמא להצהרה הזו: 
    P {Border-Width: 10pt}
P {Border-Right-Height:1pt}
P {Border-Left-Width:1pt}

    Padding

    המאפיין Padding קובע את מידת הרוח בין הקצה לבין התוכן (יחסי ל-Height ו-Width) של הרכיב ,והם מקבלים ערך מטבלת הגדלים. ו-Auto

    דוגמא להצהרה הזו: 
    P {Padding: 10pt}
P {Padding-Right:1pt}
P {Padding-Left:1pt}

    Visibility

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

    דוגמא להצהרה הזו: 
    visibility:hidden

    OverFlow

    המאפיין OverFlow מציין אם מלבן הגזירה (Height ו-Width) חותך את הפריט, או שיש בתוך הפריט פסי גלילה. הוא מקבל את Scroll, Clip ו-None

    דוגמא להצהרה הזו: 
    OverFlow: scroll

    דוגמא

    לשלב הבא, מאפיני מיון

    • לוח שנה עברי ולועזי