بيانات كاتب الموضوع | الدرس 10: الحاشية والحشو CSS |
| كاتب الموضوع | رسالة |
|---|
| المعلومات | الكاتب: | | اللقب: | | الرتبه: | | | الصورة الرمزية | | | البيانات | | عدد المشاركات : | 200 |
| الإتصالات | | الحالة: | | | وسائل الإتصال: | |
| موضوع: الدرس 10: الحاشية والحشو CSS  16/11/2014, 17:47 |
| اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي 
الدرس 10: الحاشية والحشو
في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية
- الكود:
-
margin و
- الكود:
-
padding .
- تعديل خاصية margin لعنصر ما
- تعديل خاصية padding لعنصر ما
تعديل خاصية margin لعنصر ماكل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية
- الكود:
-
margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في الدرس 9 للمزيد من التوضيح.
في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر
- الكود:
-
<body> ، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة.
في ملف CSS سنكتب التالي:
- الكود:
-
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق:
- الكود:
-
body {
margin: 100px 40px 10px 70px;
}
يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر
- الكود:
-
<p> :
- الكود:
-
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
تعديل خاصية padding لعنصر ماالحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار.
استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية:
- الكود:
-
h1 {
background: yellow;
}
h2 {
background: orange;
}
بتحديد الحشو لكل عنوان يمكن تغيير حجم العنصر الداخلي الذي يحيط بالعنوان من كل جهة:
- الكود:
-
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
![]() الموضوع الأصلي : الدرس 10: الحاشية والحشو CSS // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie
|
|
| | |
| المعلومات | الكاتب: | | اللقب: | مؤسس الموقع | الرتبه: | | | الصورة الرمزية | | | البيانات | | رسالة SMS : | الحمد لله علي كل حال | |  | |  | | العمر : | 33 | | عدد المشاركات : | 1609 |
| الإتصالات | | الحالة: | | | وسائل الإتصال: | |
| موضوع: رد: الدرس 10: الحاشية والحشو CSS 2/12/2014, 19:12 |
| اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي
جزاك الله كل خيرا علي الموضوع
المفيد والرقي
![]() الموضوع الأصلي : الدرس 10: الحاشية والحشو CSS // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous
|
|
| | |
| | الدرس 10: الحاشية والحشو CSS | |
|
23/8/2017, 21:53
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة 
