في هذا الدرس 12تصفّح المواضيع
- content بداية box model هو محتوي عنصر HTML سواء هذا المحتوي نصي أو صوره أو فيديو الخ.
- padding أعلي المحتوي هو الهامش الداخلي وهي المساحة التي تكون بين content المحتوي وبين border الإطار الداخلي.
- border إطار الزي يأتي بعد padding الهامش الداخلي.
- outline offset المسافة بين border الإطار الداخلي outline والإطار الخارجي.
- outline وهو الإطار الخارجي للعنصر وهو بعد border الإطار الداخلي.
- margin وهي الهامش الخارجي للعنصر وهي الزي يلامس هوامش عناصر HTML الأخري المحيطة حولة.
- height وهو طول العنصر الزي يتم ضبطة بواسطة CSS أو HTML.
- width وهو عرض العنصر الزي يتم ضبطة بواسطة CSS أو HTML.
CSS Box Model create element
إنشاء عنصر نصي في صفحة الويب.
CSS Box Model Add border
إضافة إطار للعنصر عن طريق خاصية border.
CSS Box Model Add background color
إضافة خلفية لون عن طريق background.
CSS Box Model Add background color
إضافة خلفية لون عن طريق background.
CSS Box Model Add outline
إضافة إطار خارجي للعنصر عن طريق خاصية outline.
CSS Box Model Add outline
إضافة إطار خارجي للعنصر عن طريق خاصية outline.
CSS Box Model Add padding
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
}CSS Box Model Add margin
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
}CSS Box Model Add outline offset
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
}CSS Box Model Add height
إضافة هامش داخلي للعنصر عن طريق خاصية padding.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
height:100px;
}CSS Box Model Add width
إضافة عرض للعنصر عن طريق خاصية width.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px;
outline-offset:15px;
height:100px;
width:50%;
}CSS Box Model center
توسيط العنصر عن طريق خاصية margin بقيمة auto.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin:20px auto;
outline-offset:15px;
height:100px;
width:50%;
}CSS Box Model center margin sides
توسيط العنصر عن طريق خاصية margin بقيمة auto.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
outline-offset:15px;
height:100px;
width:50%;
}CSS two box model
توسيط العنصر عن طريق خاصية margin بقيمة auto.
p
{
border:red solid 1px;
background:yellow;
outline:blue dashed 2px;
padding:20px;
margin-top:20px;
margin-bottom:120px;
margin-left:auto;
margin-right:auto;
outline-offset:15px;
height:100px;
width:70%;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات9
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Model قالب
- للمراجعة
- 02 Box صندوق
- للمراجعة
- 03 Elements عناصر
- للمراجعة
- 04 Boxes صناديق
- للمراجعة
- 05 Border حد
- للمراجعة
- 06 Padding حشو
- للمراجعة
- 07 Margin هامش
- للمراجعة
- 08 Element عنصر
- للمراجعة
- 09 Outline حدود عريضة خارجية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.