السلام عليكم، سنرى في هذا الدرس الخاصية 'WIDTH' و الخاصية 'HEIGHT'، و سنتطرق كذلك إلى الخاصيتين 'MAX-WIDTH' و 'MIN-WIDTH'، و أيضاً الخاصيتين 'MAX-HEIGHT' و 'MIN-HEIGHT'.
الخاصية WIDTH
التنسيق التلقائي للـ HTML يعطي عرض للعناصر حسب نوعها، فإذا كانت عناصر من نوع Inline ستأخذ عرض حسب محتواها، أما إذا كانت من نوع Block فستأخذ عرض العنصر المحتوي لها، هنا يأتي دور الخاصية 'WIDTH'، فهي خاصية تحدد عرض للعناصر HTML بـ CSS كيفما كان نوعها، و تقبل قيمة خاصة واحدة، القيم المطلقة (Absolute Lengths)، القيم النسبية (Relative Lengths) و قيمتين من القيم الشاملة :
• القيمة الخاصة : لدى الخاصية 'WIDTH' قيمة خاصة واحدة تسمى 'AUTO'، و تُصنف كقيمتها التلقائية حيث في تواجدها تقوم بأمر متصفح الإنترنت لكي يتكفل بتحديد عرض للعنصر.
• القيم المطلقة : تقبل الخاصية 'WIDTH' جميع القيم المطلقة.
• القيم النسبية : تقبل الخاصية 'WIDTH' جميع القيم النسبية.
• القيم الشاملة : تقبل الخاصية 'WIDTH' من القيم الشاملة قيمتين و هما :
- INHERIT : قيمة تورِّث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'WIDTH'، تورث القيمة 'INHERIT' للعنصر العرض من العنصر المحتوي له.
- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصية 'WIDTH'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'AUTO'.
في حالة تواجد عرض أكبر من عرض نافذة المتصفح، فهذا الأخير يضيف Scrollbar أفقية أسفل نافذته.
الخاصية HEIGHT
التنسيق التلقائي للـ HTML يعطي ارتفاع للعناصر حسب محتواها، هنا يأتي دور الخاصية 'HEIGHT'، فهي خاصية تحدد ارتفاع للعناصر HTML بـ CSS، و تقبل قيمة خاصة واحدة، القيم المطلقة، القيم النسبية و قيمتين من القيم الشاملة :
• القيمة الخاصة : لدى الخاصية 'HEIGHT' قيمة خاصة واحدة تسمى 'AUTO'، و تُصنف كقيمتها التلقائية حيث في تواجدها تقوم بأمر متصفح الإنترنت لكي يتكفل بتحديد ارتفاع للعنصر.
• القيم المطلقة : تقبل الخاصية 'HEIGHT' جميع القيم المطلقة.
• القيم النسبية : تقبل الخاصية 'HEIGHT' جميع القيم النسبية.
• القيم الشاملة : تقبل الخاصية 'HEIGHT' من القيم الشاملة قيمتين و هما :
- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'HEIGHT'، تورث القيمة 'INHERIT' للعنصر الإرتفاع من العنصر المحتوي له.
- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصية 'HEIGHT'، ترجع القيمة 'INITIAL' العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'AUTO'.
الفيديو التوضيحي للدرس
الخاصيتين MAX-WIDTH و MIN-WIDTH
الخاصية 'MAX-WIDTH' هي خاصية تحدد العرض الأقصى للعناصر HTML، و الخاصية 'MIN-WIDTH' هي خاصية تحدد العرض الأدنى للعناصر HTML، يمكن إقحام كلتاهما في كود CSS أو إقحام سوى خاصية واحدة منهما، و تقبلان جميع القيم المطلقة و جميع القيم النسبية و قيمة خاصة تُصنف كقيمتهما التلقائية بإسم 'NONE' حيث تواجدها في الخاصية 'MAX-WIDTH' ينعدم العرض الأقصى للعنصر، و تواجدها في الخاصية 'MIN-WIDTH' ينعدم العرض الأدنى للعنصر، و تقبلان الخاصيتين أيضاً من القيم الشاملة قيمتين و هما :
- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'MAX-WIDTH' فالقيمة تورث للعنصر العرض الأقصى من العنصر المحتوي له، أما في حالة الخاصية 'MIN-WIDTH'، القيمة تورث للعنصر العرض الأدنى من العنصر المحتوي له.
- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصيتين 'MAX-WIDTH' و 'MIN-WIDTH'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'NONE'.
الخاصيتين MAX-HEIGHT و MIN-HEIGHT
الخاصية 'MAX-HEIGHT' هي خاصية تحدد الإرتفاع الأقصى للعناصر HTML، و الخاصية 'MIN-HEIGHT' هي خاصية تحدد الإرتفاع الأدنى للعناصر HTML، يمكن إقحام كلتاهما في كود CSS أو إقحام سوى خاصية واحدة منهما، و تقبلان جميع القيم المطلقة و جميع القيم النسبية و قيمة خاصة تُصنَّف كقيمتهما التلقائية بإسم 'NONE' حيث تواجدها في الخاصية 'MAX-HEIGHT' ينعدم الإرتفاع الأقصى للعنصر، و تواجدها في الخاصية 'MIN-HEIGHT' ينعدم الإرتفاع الأدنى للعنصر، و تقبلان أيضاً من القيم الشاملة قيمتين و هما :
- INHERIT : قيمة تورث للعناصر ستايل الخواص من العناصر المحتوية لها، و في حالة الخاصية 'MAX-HEIGHT' فالقيمة تورث للعنصر الإرتفاع الأقصى من العنصر المحتوي له، أما في حالة الخاصية 'MIN-HEIGHT'، القيمة تورث للعنصر الإرتفاع الأدنى من العنصر المحتوي له.
- INITIAL : قيمة تُرجع العناصر إلى القيم التلقائية للخواص، و في حالة الخاصيتين 'MAX-HEIGHT' و 'MIN-HEIGHT'، القيمة ترجع العنصر إلى القيمة التلقائية للخاصية، أي ترجعه إلى القيمة 'NONE'.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس