Grid box

1. Eng. Anas Alpure
‫الدرس‬
‫الثام‬
‫ن‬
(8)

2. Universal Selector
‫العام‬ ‫المحدد‬
Attribute Selector
‫الخاصية‬ ‫عبر‬ ‫المحدد‬
*{
border: 1px solid red;
}
a[href][title="google"]{
color: black;
}
a[href][title="php"]{
color: blue;
}
‫استثناء‬ ‫بال‬ ‫العناصر‬ ‫كل‬ ‫على‬ ‫يطبق‬
‫الخاصية‬ ‫تطابق‬ ‫على‬ ً‫ا‬‫اعتماد‬ ‫يطبق‬

3. Box Properties
‫خواص‬ ‫جميع‬
box module
‫موروثة‬ ‫غير‬

4. Elements “flow” by default
•
Block level
‫جديد‬ ‫سطر‬ ‫في‬ ‫ا‬ً‫م‬‫دائ‬ ‫يبدأ‬
‫ويأخذ‬
‫المتاح‬ ‫الكامل‬ ‫العرض‬
100
%
‫عناصر‬ ‫يحوي‬ ‫ان‬ ‫يمكن‬
inline
‫أو‬
block
‫ضمنه‬
•
Inline level
‫جديد‬ ‫سطر‬ ‫في‬ ‫العنصر‬ ‫يبدأ‬ ‫ال‬
‫ويأخذ‬
‫فقط‬ ‫يحتاجه‬ ‫الذي‬ ‫العرض‬
‫عناصر‬ ‫تقسم‬
HTML
‫هما‬ ‫رئيسيين‬ ‫لقسمين‬
:
block-level elements : <div>, <section>, <p>, <h1> through <h6>, <form>, <ol>, <ul>, <li>, etc.
inline-level elements : <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, etc.
‫مالحظة‬
:
‫خواص‬
Box Module
‫عناصر‬ ‫على‬ ‫تطبق‬
Block
‫أساسي‬ ‫بشكل‬
‫عناصر‬ ‫على‬ ‫تطبيقها‬ ‫عند‬ ‫الكن‬
inline
‫مختلفة‬ ‫النتائج‬ ‫فتكون‬

5. ✓ height
✓ min-height
✓ max-height
✓ width
✓ min-width
✓ max-width
Content
‫التالية‬ ‫الخواص‬ ‫باستخدام‬ ‫العنصر‬ ‫بأبعاد‬ ‫التحكم‬ ‫يتم‬
‫ال‬ ‫عناصر‬
inline
ً‫ا‬‫ابد‬ ‫الخواص‬ ‫لهذه‬ ‫تستجيب‬ ‫ال‬

6. ‫العنصر‬ ‫ضمن‬ ‫فارغة‬ ‫مساحة‬ ‫لعمل‬ ‫الداخلي‬ ‫الحشو‬ ‫يستخدم‬
.box-1{
/* padding: Top Right Bottom Left; */
padding: 5px 10px 15px 20px;
}
padding

7. .box {
border: none;
border: 5px hidden red;
border: 5px solid orange;
border: 5px dashed orange;
border: 5px dotted orange;
border: 5px double orange;
border: 5px groove orange;
border: 5px ridge orange;
border: 5px inset orange;
border: 5px outset orange;
}
border
border: <border-width> || <border-style> || <color>

8. Box-sizing
*{
box-sizing: border-box;
}
*{
box-sizing: content-box;
}

9. .box-2{
/* margin: Top Right Bottom Left; */
margin: 5px 10px 15px 20px;
}
margin
‫العناصر‬ ‫بين‬ ‫تباعد‬ ‫لعمل‬ ‫الخارجي‬ ‫الهامش‬ ‫يستخدم‬

10. .btn {
background-color: purple;
border: 3px solid transparent;
color: #FFFFFF;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: cursive;
border-radius: 3px;
}
.btn:hover {
color: purple;
border-color: purple;
background-color: #FFFFFF;
}
.btn:focus {
border-color: #d60610;
outline: none;
}
<input type="button" value="Button" class="btn btn-1">
<button class="btn btn-2">Button</button>

11. Eng. Anas Alpure