ألوان الخلفية وحجم الخط في CSS: فهم وحدات rem والتزيين النصي

في هذا الدرس من دبلومة تطوير الويب، سنتناول كيفية استخدام ألوان الخلفية وحجم الخط، مع التركيز على فهم وحدات القياس مثل rem وem، بالإضافة إلى تعلم كيفية استخدام text-decoration لتزيين النصوص أو إزالة التسطير من الروابط.

ما هو حجم الخط باستخدام rem؟

وحدة rem تعتمد على حجم الخط المخصص للعنصر الجذري root، والذي يكون عادةً body. لفهم ذلك بشكل أفضل، دعنا نقوم بالتمرين التالي:

• قم بإضافة عنصر small داخل علامة h1.


• قم بتعيين حجم الخط لعلامة h1 ليكون 30px.


• قم بتعيين حجم الخط لعلامة small ليكون 2em، مما يعني أن حجم الخط سيكون 60px، لأن em تعتمد على العنصر الأب.


• لكن إذا قمت بتعيين small ليكون 2rem، فسيكون حجم الخط 32px، لأن rem تعتمد على حجم خط body.

باستخدام rem، يمكنك التحكم في حجم الخط استنادًا إلى العنصر الجذري، مما يسهل التعامل مع التصميمات المتجاوبة التي تتطلب تعديلات دقيقة على أحجام النصوص.

ما هو التزيين النصي (Text Decoration)؟

خاصية text-decoration في CSS تتيح لك التحكم في تزيين النصوص. يمكنك استخدامها لتطبيق أو إزالة التسطير من النصوص والروابط على صفحة الويب.

• كيفية إضافة تسطير إلى النص: لاستخدام التسطير، قم بتعيين الخاصية text-decoration: underline; على العنصر المراد.


• كيفية إزالة التسطير من الروابط: لإزالة التسطير من الروابط، يمكنك تعيين الخاصية text-decoration: none;.

أهمية ألوان الخلفية وحجم الخط في تصميم الويب

تطبيق ألوان الخلفية وحجم الخط بشكل صحيح يجعل المواقع أكثر جاذبية وتفاعلية. باستخدام وحدات rem وem بشكل صحيح، يمكنك إنشاء تجربة مستخدم متوازنة ومتناسبة، بينما يمكن لـtext-decoration تحسين النصوص والعناصر المرئية بشكل كبير.

فوائد هذه الدورة:

• فهم كيفية استخدام وحدات rem وem لتحديد حجم الخط.


• تطبيق ألوان الخلفية المختلفة على العناصر باستخدام background-color في CSS.


• تعلم كيفية استخدام text-decoration لتزيين النصوص وإزالة التسطير من الروابط.


• احصل على شهادة معتمدة في تطوير الويب بعد إكمال الدورة.

انضم الآن واحصل على شهادتك!

ابدأ الآن في تعلم أساسيات CSS مثل ألوان الخلفية وحجم الخط، وانضم إلى دورتنا لتطوير الويب. احصل على شهادة معتمدة تساعدك في بناء مواقع ويب متقنة وتفاعلية.