غالبا ما يكون من الضروري تعيين نمط خاص لعناصر معينة من صفحة الويب. قد يكون هذا ضروريا للتأكيد على أهمية أو لتعزيز التأثير البصري. في هذه المقالة ، سنلقي نظرة على طريقة لتعيين لون النص الأخضر لجميع فقرات فئة أبك في ملف نمط.
بادئ ذي بدء ، سوف نحتاج إلى إنشاء ملف نمط سنحدد فيه نمط فقراتنا. للقيام بذلك ، نستخدم محدد فئة من شأنها أن تطابق الفقرات مع فئة أبك. على سبيل المثال ، لتعيين اللون الأخضر للنص ، يمكننا استخدام الكود التالي:
"'المغلق
.ايه بي سي {
اللون: أخضر;
}
«`
يخبر هذا الرمز المتصفح أنه بالنسبة لجميع العناصر مع فئة أبك ، تحتاج إلى تطبيق نمط يكون فيه النص أخضر. الآن ، لتطبيق هذا النمط على فقراتنا ، نحتاج إلى إضافة فئة أبك إلى كل فقرة.
على سبيل المثال ، إذا كان لدينا شفرة هتمل التالية:
"'أتش تي أم أل
الفقرة الأولى
الفقرة الثانية
الفقرة الثالثة
"`
ثم بعد تطبيق ملف النمط ، سيكون للفقرتين الأوليين لون نص أخضر ، وستبقى الفقرة الثالثة بلون النص القياسي.
- كيفية إعطاء اللون الأخضر لنص الفقرات في فئة "أبك" في ملف النمط
- تغيير لون النص في ملف النمط
- تطبيق التغييرات على فئة "أبك"
- التحقق من تأثير تغيير اللون
- سؤال وجواب
كيفية إعطاء اللون الأخضر لنص الفقرات في فئة "أبك" في ملف النمط
إذا كنت بحاجة إلى تغيير لون النص لجميع الفقرات مع فئة" أبك " إلى اللون الأخضر ، يمكنك استخدام ملف نمط كس. للقيام بذلك ، اتبع الخطوات التالية:
- افتح ملف نمط كس المرتبط بمستند هتمل الخاص بك.
- أضف الكود التالي إلى ملف النمط الخاص بك:
.ايه بي سي {
اللون: أخضر;
}
لاحظ النقطة أمام اسم الفئة-فإنه يشير إلى أنك تحدد أنماط لفئة" أبك".
بعد إجراء هذه التغييرات ، سيكون لجميع الفقرات التي تحتوي على فئة" أبك " لون نص أخضر.
تغيير لون النص في ملف النمط
في ملفات الأنماط ، يمكنك تعيين لون النص باستخدام خاصية اللون. يمكن تحديد اللون بالاسم باستخدام قيم محددة مسبقا ، على سبيل المثال ، الأحمر للأحمر ، أو باستخدام رمز لون سداسي عشري ، على سبيل المثال ، #00 و 00 للأخضر.
إذا كنت ترغب في تغيير لون النص لجميع عناصر فئة معينة ، يمكنك استخدام مجموعة من المحددات. للقيام بذلك ، حدد اسم الفئة ، متبوعا بمحدد للعناصر التي يحتاج نصها إلى التغيير. على سبيل المثال ، لتعيين لون النص الأخضر لجميع فقرات فئة أبك ، يمكنك استخدام المحدد التالي في ملف النمط:
.ايه بي سي {
اللون: أخضر;
}
سيتم ربط جميع العناصر مع سمة الفئة التي تحتوي على قيمة أبك مع فئة أبك. يتيح لك ذلك تطبيق الأنماط على عناصر متعددة في نفس الوقت.
يمكنك أيضا تغيير لون النص لعنصر معين عن طريق تحديد معرفه باستخدام الرمز#. على سبيل المثال ، لتعيين لون النص الأحمر لعنصر مع معرف العنوان العلوي ، يمكنك استخدام المحدد التالي:
# أعلى العنوان {
اللون: أحمر;
}
في هذه الحالة ، سيتم تطبيق النمط فقط على العنصر ذي المعرف المحدد.
يتيح لك تغيير لون النص باستخدام ملف نمط تحقيق مظهر موحد لجميع العناصر ذات الصلة على الصفحة وتبسيط صيانتها إذا لزم الأمر ، قم بتغيير اللون.
تطبيق التغييرات على فئة "أبك"
كما تعلمون بالفعل ، يتم استخدام الطبقات في هتمل لتجميع العناصر وتطبيق الأنماط عليها. إذا كنت بحاجة إلى تغيير نمط النص لجميع الفقرات مع فئة" أبك " ، يمكنك استخدام التصميم داخل ملف كس الخاص بك.
للقيام بذلك ، تحتاج إلى تحديد محدد من شأنها تحديد جميع العناصر مع فئة "أبك". في هذه الحالة ، لتحديد جميع الفقرات مع فئة "أبك" ، يمكنك استخدام محدد ".اي بي سي".
مثال على رمز ملف النمط:
.ايه بي سي {
اللون: أخضر;
}
في هذا المثال ، قمنا بتعيين لون النص الأخضر لجميع الفقرات مع فئة"أبك". يمكنك أيضا استخدام خصائص كس الأخرى مثل الخط وحجم النص وما إلى ذلك. لمزيد من تغيير نمط النص.
التحقق من تأثير تغيير اللون
للتحقق من تأثير تغيير لون النص في فقرات فئة أبك ، يجب عليك أولا إنشاء ملف نمط حيث سيتم تعيين اللون الأخضر للنص في فقرات هذه الفئة.
للقيام بذلك ، استخدم محدد الفئة في ملف النمط.اي بي سي وتعيين خاصية اللون مع قيمة الأخضر. وهكذا ، فإن جميع الفقرات مع فئة أبك يكون لون النص الأخضر.
مثال على ملف النمط:
.ايه بي سي {
اللون: أخضر;
}
بعد إنشاء ملف نمط ، يجب أن تكون متصلا إلى صفحة هتمل باستخدام علامة وتحديد السمة ريل مع ورقة أنماط القيمة ، فضلا عن السمة هريف مع قيمة المسار إلى ملف النمط.
مثال على توصيل ملف نمط:
بعد توصيل ملف نمط ، فإن النص في جميع الفقرات مع فئة أبك تكون خضراء.
مثال على كود هتمل:
النص 1
النص 2
النص 3
نتيجة لذلك ، نحصل على التأثير التالي:
- النص 1
- النص 2
- النص 3
وهكذا ، وذلك باستخدام ملف نمط يسمح لك لتغيير لون النص في جميع الفقرات من فئة أبك إلى اللون الأخضر.