הגדרת ממדי אלמנטים בעזרת CSS

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

קביעת גובהם של אלמנטים

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

תכונה ערכים הסבר
height auto ערך ברירת המחדל. הדפדפן קובע בעצמו את גובה האלמנט עפ"י תוכנו.
inherit
האלמנט יורש את גובהו מהאלמנט שבתוכו הוא מקנן.
length ציון מפורש של גובהו של האלמנט בפיקסלים, סנטימטרים וכד'.
% גובה האלמנט נקבע כאחוז מהבלוק שבתוכו הוא נמצא.

בדוגמת הקוד הבאה אציג כיצד נשתמש בתכונה height כדי לקבוע מה יהיה גובהם של אלמנטים:

גובה האלמנט ייקבע על ידי הדפדפן על פי תוכן האלמנט
div.auto{height:auto}
גובה האלמנט יהיה 50 פיקסלים
div.length{height:50px}
גובה האלמנט נקבע כאחוז מהבלוק שבתוכו הוא שוכן
div.percent{height:150%}


הגדרת גובהם המקסימלי של אלמנטים

בתכונה max-height נשתמש כדי להגדיר את גובהו המקסימלי של אלמנט. תכונה זו מקבלת מספר ערכים שכל אחד מהם גורם להתנהגות שונה של האלמנט המקבל את התכונה. להלן רשימת הערכים שהתכונה max-height יכולה לקבל:

תכונה ערכים הסבר
max-height none ערך ברירת המחדל. הדפדפן קובע בעצמו את גובה האלמנט עפ"י תוכנו.
inherit
האלמנט יורש את גובהו המקסימלי מהאלמנט שבתוכו הוא מקנן.
length ציון מפורש של גובהו המקסימלי של האלמנט בפיקסלים, סנטימטרים וכד'.
% גובהו המקסימלי של האלמנט נקבע כאחוז מהבלוק שבתוכו הוא נמצא.

בדוגמת הקוד הבאה נגדיר גובה מקסימלי לכל האלמנטים מסוג div:

div
{
max-height:40px;
}

הגדרת גובהם המינימלי של אלמנטים

בתכונה min-height נשתמש כדי להגדיר את גובהו המינימלי של אלמנט. תכונה זו מקבלת מספר ערכים שכל אחד מהם גורם להתנהגות שונה של האלמנט המקבל את התכונה. להלן רשימת הערכים שהתכונה min-height יכולה לקבל:

תכונה ערכים הסבר
min-height inherit
האלמנט יורש את גובהו המינימלי מהאלמנט שבתוכו הוא מקנן.
length ציון מפורש של גובהו המינמלי של האלמנט בפיקסלים, סנטימטרים וכד'.
% גובהו המינימלי של האלמנט נקבע כאחוז מהבלוק שבתוכו הוא נמצא.

בדוגמת הקוד הבאה נגדיר בדרכים שונות מה יהיה גובהו המינמלי של אלמנט הפיסקה <p>:

גובהו המינימלי של האלמנט יהיה 50 פיקסלים
p.length{height:50px}
גובהו המינימלי של האלמנט נקבע כאחוז מהבלוק שבתוכו הוא שוכן
p.percent{height:20%}


קביעת רוחבם של אלמנטים

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

תכונה ערכים הסבר
width auto ערך ברירת המחדל. הדפדפן קובע בעצמו את רוחב האלמנט עפ"י תוכנו.
inherit
האלמנט יורש את רוחבו מהאלמנט שבתוכו הוא מקנן.
length ציון מפורש של רוחבו של האלמנט בפיקסלים, סנטימטרים וכד'.
% רוחב האלמנט נקבע כאחוז מהבלוק שבתוכו הוא נמצא.

בדוגמת הקוד הבאה אציג כיצד נשתמש בתכונה width כדי לקבוע מה יהיה גובהם של אלמנטים:

רוחב האלמנט ייקבע על ידי הדפדפן על פי תוכן האלמנט
div.auto{width:auto}
רוחב האלמנט יהיה 50 פיקסלים
div.length{width:50px}
רוחב האלמנט נקבע כאחוז מהבלוק שבתוכו הוא שוכן
div.percent{width:150%}


הגדרת רוחבם המקסימלי של אלמנטים

בתכונה max-width נשתמש כדי להגדיר את רוחבו המקסימלי של אלמנט. תכונה זו מקבלת מספר ערכים שכל אחד מהם גורם להתנהגות שונה של האלמנט המקבל את התכונה. להלן רשימת הערכים שהתכונה max-width יכולה לקבל:

תכונה ערכים הסבר
max-width none ערך ברירת המחדל. הדפדפן קובע בעצמו את רוחב האלמנט עפ"י תוכנו.
inherit
האלמנט יורש את רוחבו המקסימלי מהאלמנט שבתוכו הוא מקנן.
length ציון מפורש של רוחבו המקסימלי של האלמנט בפיקסלים, סנטימטרים וכד'.
% רוחבו המקסימלי של האלמנט נקבע כאחוז מהבלוק שבתוכו הוא נמצא.

בדוגמת הקוד הבאה נגדיר רוחב מקסימלי לכל האלמנטים מסוג div:

div
{
max-width:40px;
}

הגדרת רוחבם המינימלי של אלמנטים

בתכונה min-width נשתמש כדי להגדיר את רוחבו המינימלי של אלמנט. תכונה זו מקבלת מספר ערכים שכל אחד מהם גורם להתנהגות שונה של האלמנט המקבל את התכונה. להלן רשימת הערכים שהתכונה min-width יכולה לקבל:

תכונה ערכים הסבר
min-width inherit
האלמנט יורש את רוחבו המינימלי מהאלמנט שבתוכו הוא מקנן.
length ציון מפורש של רוחבו המינמלי של האלמנט בפיקסלים, סנטימטרים וכד'.
% רוחבו המינימלי של האלמנט נקבע כאחוז מהבלוק שבתוכו הוא נמצא.

בדוגמת הקוד הבאה נגדיר בדרכים שונות מה יהיה רוחבו המינמלי של אלמנט הפיסקה <p>

רוחבו המינימלי של האלמנט יהיה 50 פיקסלים
p.length{min-width:50px}
רוחבו המינימלי של האלמנט נקבע כאחוז מהבלוק שבתוכו הוא שוכן
p.percent{min-width:20%}


חישוב גובהם ורוחבם האמיתי של אלמנטים בדף HTML


ריכוז התכונות להגדרת ממדיהם של אלמנטים


תכונה הסבר
Height מאפשר להגדיר את גובהו של אלמנט נתון.
max-height הגדרת גובהו המקסימלי של אלמנט.
max-width קביעת רוחבו המקסימלי של אלמנט.
min-height קביעת גובהו המינימלי של אלמנט.
min-width קביעת רוחבו המינימלי של אלמנט.
width קביעת רוחבו של אלמנט נתון.

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש