لكتابة Page Layout صحيح يجب دائما ان يكون لدينا Semantic Web صحيح.
يساعد على كتابة Page Layout هناك خمس خصائص CSS جد مهمة
في كتابة ال Layout :
* ما هو display وكيفية استعماله :
display : يحول العناصر من block الى inlene و العكس صحيح.
لديه ثلاثة قيم Values وهي كالتالي inlene و block و inlene-block
block : يجعل العناصر جميعها في سطر واحد و يترك سطر فوقها وسطر تحتها.
inlene : تاخد فقط حجم العنصر الطبيعي وتسمح بوضع عناصر اخرى تحمل نفس خاصية (inlene) بجانبها.
inlene-block : هي حالة متوسطة مابين block element و inlene element يجعل جميع العناصر inlene ويرتبها عنصر جانب الاخر يسمح لنا بوضع خاصيتي ال margin و ال padding .
margin هي المسافة التي تفصل بين tag و tag الاخر. بمعنى المسافة التي تريد ان يتركها المتصفح بينج tag و tag في الاربع اتجاهات top اعلى و right اليمين و bottom الاسفل و left اليسار
مثال اذا اردنا ان نعطي نفس القيمة لي الاتجاهات الاربعة نكتب css على هذا النحو :
header{margin:20px;}
و اذا اردنا ان نعطي قيمة مختلفة لي الاتجاهات الاربعة نكتب css على هذا النحو :
header{margin-top:40px;}
header{margin-right:30px;}
header{margin-bottom:20px;}
header{margin-left:10px;}
* ما هو ال padding وكيفية استعماله :
padding هي حدود المحتوى الموجود داخل tag وله نفس values ال margin ويكتب بنفس الطريقة :
مثال اذا اردنا ان نعطي نفس القيمة لي الاتجاهات الاربعة نكتب css على هذا النحو :
header{padding:20px;}
و اذا اردنا ان نعطي قيمة مختلفة لي الاتجاهات الاربعة نكتب css على هذا النحو :
header{padding-top:40px;}
header{padding-right:30px;}
header{padding-bottom:20px;}
header{padding-left:10px;}
* ما هو float :
ال float من اجل وضع عناصر الصفحة على اليمين او على اليسار.
و لذيه قيمتان right و left.
header{float:right;}
header{float:left;}
ولها سلبية معينة انها تزيل لي element الذي تعطيه ال float من ال float الطبيعي لي الصفحة ومن اجل ازالة هذا المشكل نستعمل خاصية clear.
header{clear:both;}
لديه ثلاث قيم top و middle و bottom تجعلى العناصر على نفس مستوى الصفحة
header{vertical-align: top;}
header{vertical-align: middle;}
header{vertical-align: bottom;}
مسموح بنقل الموضوع بشرط ذكر المصدر :
الدرس الثاني : Page Layout
|
مكتبتي حياتي
