تغيير لون النص text color باستخدام لغة css

  في هذا الدرس سنتناول الطرق المختلفة لتنسيق النصوص بلغة CSS

أولاً: تنسيق وتغيير لون النصر text color

لدينا ملف index.html به div بداخلة عدد 2  فقرة الفقرة الأولى لها اسم الكلاس first والفقرة الثانية لها اسم الكلاس second

في ملف main.css نريد تغيير لون النص وذلك عن طريق كتابة الكود 

Color:blue;

وهنا كما هو ملاحظ يمكننا كتابة اسم اللون مباشرة مثل red or blue or green or yellow او غير ذلك من أسماء الألوان المعروفة

نلاحظ أن لون النص يظهر فى المتصفح باللون الأزرق كما هو موضح أمامنا فى المثال.

كما يمكن كتابة لون النص باستخدام نظام الألوان السداسي عشر

Hexadecimal

عن طريق كتابة الرمز # والتي يُرمز لها بالأعداد من 0 و9 ثمّ بين a وf، حيث تُشير الحروف بين a وf إلى القيم 10-15:

وكما هو موضح يمكننا كتابة اللون الأحمر بالطريقة الآتية

الأسود: #000‎‎‏   ‎‎ ‎

الأحمر الخالص: #f00 

الأخضر الخالص: ‎  #0f0‎

الأزرق الصّافي: ‎ #00f‎ ‎

الأبيض: ‎#000‎ 

نلاحظ أن لون النص يظهر باللون الأحمر كما يظهر فى المتصفح أمامنا

كما يمكن كتابة اللون باستخدام عددين سداسي عشر لكل لون لزيادة التنوع

حيث يمكننا كتابة اللون بهذا الشكل 

#ff aabb حيث أول حرفين يمثلا ن نسبة اللون الأحمر والحرفين الأوسطين يمثلان نسبة اللون الأخضر وآخر حرفين يمثلان نسبة تمثيل اللون الأزرق 

الأسود: ‎ #000000‎‎‏‎ ‎

الأحمر الخالص: #ff0000 

الأخضر الخالص: ‎  #00ff00‎ ‎

الأزرق الصّافي: ‎  #0000ff‎ ‎

الأبيض: ‎  #ffffff‎ ‎

نلاحظ أن لون النص كما يظهر فى المتصفح 

كما يمكن كتابة لون النص باستخدام نظام 

RGB 

حيث r اللون الأحمر red

G اللون الأخضر green

B اللون الأزرق blue

كما هو موضح بالمثال

لون النص كما يظهر عند كتابته بنظام rgb كما يظهر فى المتصفح

كما يمكن كتابة لون النص باستخدام نظام الألوان rgba حيث تمثل a الرمز الفا وهو نسبة الشفافية فى اللون

مثال يوضح طريقة كتابة لون النص بنظام rgba كما هو موضح بالمثال

لون النص كما يظهر في المتصفح 

كما يمكن كتابة عن طريق الكلاس كتابة لون مختلف لكل فقرة

فالفقرة الأولى لها اللون الأحمر

والفقرة الثانية لها لون النص الأررق

كما نلاحظ اللون الأحمر للفقرة الأولى واللون الأزرق للفقرة الثانية كما يظهر فى المتصفح

شرح خاصية Overflow في CSS

ماهو Overflow 

يمكن تعريف overflow بأنه تجاوز حجم البيانات عن المساحة المخصصة لها.

وهي إحدى خواص CSS وتستخدم عندما تزيد مساحة المحتوى عن مساحة المنطقة المخصصة له. 

تتيح لنا الخاصية overflow  ما إذا كنا نريد إخفاءالمحتوى الزائد أو عرض أشرطة التمرير  scroll  أو إظهار المحتوى الزائد أو غير ذلك من الخيارات التى سنتعرض لها بالشرح في هذا الدرس.

مثال:

لدينا ملف index.html به div بداخلة عدد فقرة كبيرة المحتوى كما يظهر فى المثال

وفي ملف main.css نقوم بتنسيق div كما هو موضح وذلك بإعطائه لون خلفية محدد وهامش داخلي padding وهامش خارجي margin وحد border وعرض محدد وارتفاع معين كما هو موضح بالمثال.

نلاحظ أن المحتوى يظهر في المتصفح بهذا الشكل وهو أكبر من الـDiv  كما يظهر فى المثال 

القيمة الافتراضية للخاصية overflow هي visible اى اظهار المحتوى الزائد .

ولاخفاء المحتوى الزائد نعطي الخاصية  overflow  القيمة Hidden

نلاحظ أنه عند إعطاء الـoverflow القيمة Hidden انه تم اخفاء المحتوى الزائد كما يظهر فى المتصفح في هذا المثال.

ولدينا القيمة scroll وعندما نعطي هذه القيمة للخاصية Overflow تعمل على إظهار شريط انزلاق لعرض المحتوى الزائد 

نلاحظ أنه عندما تم إعطاء الخاصية overflow: scroll ظهور شريط انزلاق يمكن تحريكه لإظهار المحتوى الزائد كما يظهر فى المتصفح 

ولكن يعيب الـoverflow: scroll أن شريط الانزلاق دائم الظهور حتى لو كان المحتوى أقل من  العرض أو الارتفاع المخصص له مما يعطى مظهر غير مستحب .

القيمة auto عندما يتم إعطاؤها للخاصية overflow تعمل على إظهار شريط انزلاق فقط في حالة أن يكون المحتوى أكبر من المساحة المخصصة له وفي حالة كون المحتوى أقل من المساحة المخصصة له لا يظهر شريط الانزلاق .

نلاحظ أنه عند إعطاء الخاصية overflow: auto لا يظهر هنا أى شريط انزلاق لكون المحتوى أقل من المساحة المخصصة له 

وفي حالة كون المحتوى أكبر من المساحة المخصصة له يظهر شريط الانزلاق مما يجعل الخاصية overflow: auto خاصية أكثر مرونة ومفيدة عند الحاجة.

نلاحظ هنا أن overflow ممكن أن يكون أفقي x أو رأسي y كما يظهر فى المتصفح هنا أن زيادة المحتوى ممكن تكون افقية بحيث أن المحتوى أكبر من width أو المحتوى أكبر من height كما يظهرفى المتصفح هنا

يمكن تنسيق خاصية overflow  افقيا أو رأسيا

Overflow-y:hidden 

يعمل على اخفاء المحتوى الرأسي الزائد ولكن المحتوى الأفقي الزائد سيظهر شريط انزلاق لإظهاره.

نلاحظ هنا انه عند اعطاء الخاصية overflow-y:hidden  انه تم إخفاء المحتوى الرأسي الزائد وظهر شريط انزلاق لإظهار المحتوى الأفقي كما نلاحظ أن شريط الانزلاق الأفقي ظاهر في المتصفح أمامنا.

عند إعطاء خاصية الـoverflow-x وضع الأخفاء Hidden

Overflow-x: hidden 

يعمل على اخفاء المحتوى  الأفقي الزائد ولكن المحتوى الرأسي الزائد سيظهر شريط انزلاق رأسي  لإظهاره.

نلاحظ هنا انه عند اعطاء الخاصية overflow-x:hidden  انه تم إخفاء المحتوى الأفقي الزائد وظهر شريط انزلاق رأسي لإظهار المحتوى الرأسي كما نلاحظ أن شريط الانزلاق الرأسي ظاهر في المتصفح أمامنا.

ويمكنك تجريب الخاصية بنفسك بالضغط على هذا الرابط

التحكم في الأبعاد width, height باستخدام CSS

 تحدثنا فى الدروس الماضية عن الأبعاد العرض width والارتفاع Height ولكن في هذا الدرس سنتناول خصائص الطول والعرض 

في العناصر الـblock القيمة الافتراضية للـwidth هى full width

أي يكون العرض الافتراضي للمحتوى في العناصر الكتلية blocks هو عرض الصفحة بالكامل .

لدينا ملف index.html به div بداخلة عدد 3 div وبداخل كل div فقرة  وكل فقرة لها عدد كلمات مختلفة عن الفقرة الأخرى.

وبين كل فقرة وأخرى يوجد خط أفقي hr

وفي ملف main.css نقوم بتنسيق div كما هو موضح وذلك بإعطائه لون خط معين ولون خلفية محدد وهامش داخلي padding وهامش خارجي margin وحد border كما هو موضح بالمثال.

شكل التنسيقات كما تظهر فى المتصفح ونلاحظ أن العرض الافتراضي لكل div هو عرض الصفحة بالكامل full width كما هو موضح بالمثال.

نقوم بتغيير نوع العرض  للـdiv إلى inline-block حيث أن هذا النوع من العرض يجعل عرض كل div مناسب للمحتوى الموجود به فقط ولا يعطيه عرض الصفحة بالكامل مثل العرض الكتلي block

الـdiv كما يظهر فى المتصفح عند تغيير نوع عرضه إلى inline-block  نلاحظ أن عرض كل div يناسب المحتوى الموجود به.

ويمكن تحديد عرض كل div بعرض محدد وذلك عن طريق اعطاء العرض قيمة معينة 

Width: 500px;

نلاحظ شكل الـdiv بعد تحديد العرض بقيمة معينة width أن جميع div لها نفس العرض كما يظهر فى المتصفح في المثال الذي أمامنا.

نقوم هنا بزيادة طول الفقرة الأخيرى الموجود في  الـdiv الأخير كما بالشكل

نلاحظ أن عرض الـdiv لم يزد بل هو ثابت كما هو موضح بالمثال.

لدينا خاصية فى العرض تسمى min-width وهى تعنى أقل عرض بمعنى أقل قيمة للعرض ثم نحدده بقيمة معينة كما نريد.

نلاحظ هنا أن اقل عرض للـdiv هو 500 بكسل كما يظهر فى المتصفح ولكن أقصى قيمة للعرض لا توجد كما يظهر أمامنا بالمثال.

لتحديد أقصى قيمة للعرض لدينا خاصية max-width ثم نكتب القيمة التى نريدها.

نلاحظ هنا أن أقل قيمة للعرض هي 500  بكسل 

Min-width:500px;

واقصى قيمة للعرض هي 600 بكسل كما يظهر فى المتصفح. 

Max-width:600px;

من المزايا الجميلة أنه يمكن بقاء طريقة العرض block للـdiv كما هي ثم من العرض نختار 

Width: fit-content;

نلاحظ أن عرض divيتناسب طرديا مع المحتوى كما يظهر أمامنا فى المتصفح 

كما قمنا بتحديد عرض الـdiv يمكن تحديد ارتفاع الـdiv وذلك عن طريق الخاصية height:  ثم نقوم بإعطائها قيمة معينة.

نلاحظ هنا ان عرض الـdiv هو 50  بكسل ولذلك ظهرت باقى كلمات الفقرة بعيدة عن الـdiv كما يظهر فى المثال حيث أن ارتفاع الصفحة أكبر من ارتفاع الـdiv كما يظهر فى المتصفح

يمكن إعطاء أقل قيمة للارتفاع min-height ثم نقوم بإعطائه قيمة معينة كما يظهر هنا 50 بكسل

شكل المتصفح بعد ما قمنا بإعطاء الـdiv أقل قيمة للارتفاع هي 50 بكسل

Min-height:50px;

كما يظهر أمامنا فى المتصفح.

ويمكن ايضا اعطاء اعلى قيمة للارتفاع بقيمة معينة مثل

Max-height ثم نكتب قيمة معينة. كما يظهر امامنا فى المتصفح.

نلاحظ شكل الـdiv بعد ما قمنا بإعطاء أعلى قيمة للارتفاع له 40 بكسل 

ونلاحظ أن مكونات الفقرة أكبر من ارتفاع الـdiv مما يجعل باقي مكونات الفقرة تظهر خارج div كما يظهر أمامنا فى المتصفح.

القيمة الافتراضية للـheight هى auto اى ان الارتفاع يتناسب تلقائيا مع المحتوى فكلما زاد المتحتوى زاد الارتفاع وهكذا .

نلاحظ أنه عند جعل الارتفاع تلقائي height: auto ان ارتفاع الـdiv يتناسب طرديا مع محتواه كما يظهر أمامنا فى المتصفح.

يمكنك تجريب الكود بنفسك بالضغط هنا