تنزيل المقال
تنزيل المقال
على الرغم من إمكانية تغيير لون الخط باستخدام الوسم <font> في لغة اتش تي ام ال، لم تعد هذه الخاصية مدعومة في لغة اتش تي ام ال 5، لذا تحتاج للاعتماد على حل آخر وهو استخدام رموز سي اس اس بسيطة لتحديد لون الخط الذي يظهر في عناصر الصفحة المختلفة. يضمن استخدام رموز سي اس اس كذلك توافق الصفحة مع كل متصفحات الإنترنت.
الخطوات
-
افتح ملف اتش تي ام ال. استخدام سي اس اس هي الطريقة الأفضل لتغيير لون النص حيث لم يعد وسم لغة اتش تي ام ال القديم <font> مدعومًا في لغة اتش تي ام ال 5 والطريقة الأفضل هي استخدام رموز سي اس اس لضبط تنسيق العناصر.
- تعمل هذه الطريقة مع ملفات سي اس اس الخارجية أيضًا وستجد في الأمثلة التالية ملف اتش تي ام ال يستخدم ملف سي اس اس خارجي.
-
ضع مؤشر الكتابة بداخل الوسم <head> . ستقوم بتعريف رموز سي اس اس بداخل هذا الوسم إن كنت ستستخدم الرموز داخل الصفحة.
-
اكتب الوسم <style> لإنشاء رموز سي اس اس. تؤدي كتابة الوسم <style> بداخل الوسم <head> ومن ثم كتابة رموز سي اس اس بداخل الوسم <style> إلى تطبيق الرموز على أي عناصر محددة في الصفحة. يفترض أن تكون بداية ملف اتش تي ام ال على الشكل التالي بعد الانتهاء: [١] X مصدر بحثي
<!DOCTYPE html> < html > < head > < style > </ style > </ head >
-
اكتب العنصر الذي ترغب بتغيير لون الخط فيه. ستقوم باستخدام القسم <style> لتحديد مظهر عناصر الصفحة المختلفة. على سبيل المثال، يمكنك كتابة الكود التالي لتغيير لون الخط في جسم الصفحة:
<!DOCTYPE html> < html > < head > < style > body { } </ style > </ head >
-
اكتب الخاصية color: في وسم العنصر . تخبر الخاصية color: الصفحة بلون الخط الذي ترغب باستخدامه مع هذا العنصر. ستقوم في المثال التالي بتغيير لون الخط في جسم الصفحة، وهو تنسيق العنصر الافتراضي لكل النصوص في الصفحة:
<!DOCTYPE html> < html > < head > < style > body { color : } </ style > </ head >
-
اكتب لون الخط. هناك ثلاث طرق لإدخال لون الخط: كتابة اللون باللغة الإنجليزية أو إدخال قيمة الخط الست عشرية أو إدخال قيمة الخط بوحدة أر جي بي. يمكن مثلًا اختيار اللون الأزرق عن طريق كتابة blue أو rgb(0, 0, 255) أو #0000FF .
<!DOCTYPE html> < html > < head > < style > body { color : red ; } </ style > </ head >
-
أضِف معرّفات أخرى لتغيير لون الخط لعناصر أخرى في الصفحة. يمكنك استخدام معرّفات مختلفة لتغيير لون الخط لأي نص في أي جزء من أجزاء الصفحة المختلفة:
<!DOCTYPE html> < html > < head > < style > body { color : red ; } h1 { color : #00FF00 ; } p { color : rgb ( 0 , 0 , 255 ) } </ style > </ head > < body > < h1 > تظهر هذه الترويسة باللون الأخضر الآن. </ h1 > < p > تظهر هذه الفقرة باللون الأزرق الآن. </ p > يظهر لون النص في جسم الصفحة هنا باللون الأحمر. </ body > </ html >
-
حدد فئة سي اس اس عوضًا عن تعديل عنصر ما. يمكنك تحديد فئة ومن ثم تطبيقها على أي عنصر ترغب بتعديله في الصفحة لإضافة تنسيق الفئة إليه على الفور. على سبيل المثال، تقوم الفئة ".redtext" في الملف التالي بتحويل النص إلى اللون الأحمر في أي عنصر تطبّق عليه:
<!DOCTYPE html> < html > < head > < style > . redtext { color : red ; } </ style > </ head > < body > < h1 class = "redtext" > تظهر هذه الترويسة باللون الأحمر الآن </ h1 > < p > تظهر هذه الفقرة بشكل طبيعي. </ p > < p class = "redtext" > تظهر هذه الفقرة باللون الأحمر </ p > </ body > </ html >
-
افتح ملف اتش تي ام ال. يمكنك استخدام خصائص التنسيق المباشرة لتغيير تنسيق أي عنصر فردي داخل الصفحة ويمكن أن يفيدك ذلك عند إحداث تغيير أو تغييرين في تنسيق الصفحة، ولكن لا يُنصح باستخدام هذه الطريقة بشكل موسّع. استخدم الطريقة السابقة عوضًا عن ذلك لإحداث تغييرات موسّعة في الصفحة. [٢] X مصدر بحثي
-
ابحث عن العنصر الذي ترغب بتعديله في الملف. يمكنك استخدام خصائص التنسيق المباشرة لتغيير لون النص في أي عنصر فردي داخل الصفحة. إن كنت ترغب مثلًا بتغيير لون النص في ترويسة محددة، ابحث عن الترويسة في الملف:
<!DOCTYPE html> < html > < body > < h1 > هذه هي الترويسة التي ترغب بتغييرها </ h1 > </ body > </ html >
-
أضف خاصية التنسيق للعنصر. اكتب style="" بداخل الوسم الافتتاحي للعنصر الذي ترغب بتعديله:
<!DOCTYPE html> < html > < body > < h1 style = "" > هذه هي الترويسة التي ترغب بتعديلها </ h1 > </ body > </ html >
-
اكتب الخاصية color: بداخل علامتي التنصيص "" . على سبيل المثال:
<!DOCTYPE html> < html > < body > < h1 style = "color:" > هذه هي الترويسة التي ترغب بتعديلها </ h1 > </ body > </ html >
-
اكتب اللون الذي ترغب بتغيير لون الخط إليه. هناك ثلاث طرق يمكن من خلالها تحديد لون حيث يمكنك كتابة اسم اللون باللغة الإنجليزية أو كتابة قيمته بوحدة أر جي بي أو إدخال قيمته الست عشرية. يمكن مثلًا اختيار اللون الأصفر عن طريق كتابة yellow أو rgb(255,255,0); أو #FFFF00; :
<!DOCTYPE html> < html > < body > < h1 style = "color:#FFFF00;" > تظهر هذه الترويسة باللون الأصفر الآن </ h1 > </ body > </ html >
أفكار مفيدة
- يمكنك الاطلاع على قائمة بأسماء الألوان المدعومة وقيمها الست عشرية من خلال الرابط التالي http://www.w3schools.com/colors/colors_names.asp .
