بسم الله , الحمد لله
في الدرس السابق شرحنا خاصية الخلفية او background على هذا الرابط ( هنا )اما الليلة إن شاء الله نقوم بشرح خواص أخرى من هذه الخاصية وهي تنتمي الى CSS3
تعلمنا ايضاً في الدرس السابق كيف نقوم بإنشاء صفحة جديدة ونعطيها امتداد html من خلال برنامج المفكرة المتطورة ولمن لم يرى هذا الشرح فعليه بالدخول للرابط في اول سطر , والآن فلنبدأ درسنا على بركة الله.
خاصية شرحنا اليوم كالتالي
background-clipخاصية background-clip يتفرع منها ثلاثة أكواد هُما كالتالي
background-clip: padding-box;حسناً ما هي هذه الأكواد ؟؟ هي كالتالي
background-clip: border-box;
background-clip: content-box;
بالنسبة لهذا الكود padding -box فهو يقوم بجعل الخلفية سواء كانت صورة أو لون تغطي كل الجزء المطلوب إلا الأطراف وهذا مثال علي ذلك
<!DOCTYPE html>ضع هذا الكود السابق في صفحة html واحفظها وجرب فتحها على المتصفح لتجدها كالتالي..
<html>
<head>
<style>
div{
width: 300px;
padding: 50px;
background-color :yellow;
background-clip: padding-box;
border: 10px dotted #92b901;
}
</style>
</head>
<body>
<div>
Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,
</div>
</body>
</html>
 |
| لاحظنا ان الخلفية جميعها تلونت بالاصفر إلا الأطراف والمسئول عن اللون الاصفر كمان نعلم background-color |
<!DOCTYPE html>وبعد التجربة على صفحة html نجد الشكل كالتالي
<html>
<head>
<style>
div{
width: 300px;
padding: 50px;
background-color :yellow;
background-clip: border-box;
border: 10px dotted #92b901;
}
</style>
</head>
<body>
<div>
Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,
</div>
</body>
</html>
 |
| لاحظنا هنا أن الخلفية جميعها تلونت بما في ذلك الأطراف |
<!DOCTYPE html>بعد وضعه في صفحة html وتطبيقه على المتصفح نجد المثال كالتالي ..
<html>
<head>
<style>
div{
width: 300px;
padding: 50px;
background-color :yellow;
background-clip: content-box;
border: 10px dotted #92b901;
}
</style>
</head>
<body>
<div>
Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,
</div>
</body>
</html>
 |
| لاحظنا أن الجزء المظلل فقط هو المحتوى عن الإطار الابيض الكبير ما بين المحتوى والإطار الأخضر مسئول عنه padding:50px |
يجب أن تعرف أن هناك يجب فهمها بالعربية حتى يتنسى لك الفهم أكثر وهي كالتالي ..
المحتوى = content
الحشوة او الجسم الداخلي = padding
الحدود = border
وبهذا ينتهي درسنا لهذه الليلة ,, نترككم في رعاية الله
إرسال تعليق Blogger Facebook