اللون والخلفية
اللون والخلفية
اللون والخلفية درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.
مقدمة
مرحبًا،
يمكننا تغيير ألوان النص باستخدام الخاصية Color.
يمكننا تعيين قيم هذه الخاصية باستخدام الأنواع RGB أو HEX أو HSL أو RGBA أو HSLA.
لقد استخدمنا الخاصية color في العديد من الأمثلة حتى الآن. لنوضّح استخدامها الآن باستخدام أنواع مختلفة من القيم.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>الخلفية
يمكننا تعريف أنماط لخلفيات العناصر باستخدام خصائص Background.
لنتعلم الآن خصائص الخلفية الموضحة أدناه.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
هي خاصية تُستخدم لتغيير لون خلفية العنصر.
لنستعرض مثالًا.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opacity
هي خاصية تُستخدم لتغيير شفافية خلفية العنصر.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opacity - 2
يوضح الشكل أعلاه التغيير في CSS Opacity.
صورة الخلفية
تُستخدم الخاصية background-image لإضافة صور إلى خلفية العنصر.
لدينا الصورة على الرابط https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
لنعرّف الآن عنصر div ونضيف صورة إلى خلفيته.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
إذا لاحظتم في مثالنا أعلاه، فلن نتمكن من وضع الصورة بشكل صحيح لأن حجمها القياسي أكبر من المساحة التي سنضيفها إليها.
سنستخدم الخاصية background-size لحل هذه المشكلة.
يمكن أن تأخذ خاصية Background-size قيمًا مثل cover وcontain وauto، كما يمكننا تعيين قيمة محددة لها للعرض والارتفاع.
لنحدّث مثالنا مرة أخرى.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
لنعيّن الآن قيمة نسبية مئوية للخاصية background-position.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
لكن توجد مشكلة هنا. نظرًا إلى أن حجم الصورة أصغر من حجم خلفية العنصر، فقد استُخدمت أكثر من مرة لملء المساحة.
لتجنب ذلك، استخدم الخاصية background-repeat (مع قيم repeat أو repeat-x أو repeat-y أو initial أو inherit أو no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
من خصائص الخلفية الأخرى background-attachment. باستخدام هذه الخاصية، يمكننا تحديد ما إذا كانت صورة الخلفية ستتحرك عند التمرير في الصفحة.
تقبل هذه الخاصية القيمتين fixed أو scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>اختصار الخلفية
عندما نريد تطبيق خصائص الخلفية التي تعلمناها في الأمثلة السابقة، قد نحتاج إلى تعريف 4-5 أسطر من التعليمات.
نستخدم خاصية الاختصار background لتحديدها في سطر واحد.
هيا، لنلقِ نظرة على مثالنا.
في خاصية background، يتم تعريف no-repeat والحجم وموضع الصورة داخل الصفحة، وعنوان URL للصورة المصدر.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>تهانينا
تهانينا 🎉
في هذا القسم، تعلّمنا الألوان والخلفيات.
في القسم التالي، سنتعلّم مفاهيم Box وBlock وInline
الأسئلة الشائعة
هل درس «اللون والخلفية» مجاني؟
نعم — نص درس «اللون والخلفية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.
ماذا ستتعلم في «اللون والخلفية»؟
اللون والخلفية تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «اللون والخلفية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.