يوفر هتمل إمكانيات مختلفة لخلق التفاعل على صفحات الويب ، وأحد العناصر الرئيسية هو زر. غالبا ما تكون هناك مواقف تحتاج فيها إلى تغيير لون الزر وفقا لتصميم الموقع أو للتأكيد على حالة العنصر. في هذا الدليل التفصيلي ، سننظر في عدة طرق لتغيير لون زر في هتمل.
أولا وقبل كل شيء ، لتعيين لون الزر في هتمل ، يمكنك استخدام سمة النمط مع خاصية كس المقابلة. على سبيل المثال ، لتعيين لون الزر إلى اللون الأحمر ، يمكنك استخدام الكود التالي:
نمط الزر = "لون الخلفية: أحمر؛" > الزر < / زر >
في هذا المثال ، قمنا بتعيين الخلفية الحمراء للزر باستخدام خاصية لون الخلفية المغلق. هذه طريقة سهلة ، ولكن لا ينصح باستخدامها في كثير من الأحيان ، لأن خلط هتمل و كس يمكن أن يعقد دعم التعليمات البرمجية.
يمكنك أيضا استخدام ملف كس منفصل لتعيين أنماط زر. في هذه الحالة ، يمكن توصيل ملف خارجي به أنماط باستخدام علامة & لينك> في قسم & ليثيد> من صفحة الويب. على سبيل المثال:
لينك ريل=" ورقة الأنماط"هريف =" الأنماط.المغلق">
بعد توصيل ملف كس ، يمكنك استخدام فئات للأزرار وتطبيق الأنماط عليها. على سبيل المثال ، يمكنك إنشاء فئة باسم "زر مخصص" وتطبيقه على الزر باستخدام سمة الفئة:
فئة الزر = "زر مخصص"> الزر </زر >
في ملف كس الذي قمنا بتوصيله سابقا ، يمكنك تعيين أنماط لزر مع فئة "زر مخصص" ، بما في ذلك لون الخلفية ولون النص وخصائص الزر الأخرى. قد يبدو مثال على أنماط فئة "الزر المخصص" كما يلي:
.زر مخصص {
لون الخلفية: أخضر;
اللون: أبيض;
الحشو: 10 بكسل 20 بكسل;
الحدود: لا شيء;
}
وبالتالي ، فقد نظرنا في طريقتين رئيسيتين لتغيير لون زر في هتمل: استخدام سمة النمط وربط ملف كس منفصل. كلتا الطريقتين لها مزاياها وعيوبها ، ويعتمد الاختيار بينهما على المتطلبات المحددة للمشروع.
- أساسيات أتش تي أم أل
- ما هو أتش تي أم أل وكيف يعمل?
- أتش تي أم أل العناصر والسمات
- مفهوم عناصر هتمل
- السمات الرئيسية لعناصر هتمل
- هل معرف
- فئة
- نمط
- العنوان
- البديل
- معاق
- مختارة
- هريف
- سرك
- العرض
- الارتفاع
- كولسبان
- روسبان
- البيانات-*
- الأسلوب في هتمل
- الأنماط المضمنة باستخدام سمة "النمط"
- الأنماط الخارجية باستخدام كس
- تغيير لون الزر في هتمل
- سؤال وجواب
- كيف يمكنني تغيير لون زر في أتش تي أم أل?
- كيف يمكنني تغيير لون الزر على تحوم?
- كيف يمكنني تغيير لون زر عند الضغط عليه?
- هل من الممكن تغيير لون زر باستخدام فئة?
- كيف يمكنني تغيير لون النص على زر?
- هل من الممكن تطبيق لون التدرج إلى زر?
أساسيات أتش تي أم أل
أتش تي أم أل (لغة ترميز النص التشعبي) هي لغة ترميز تستخدم لإنشاء صفحات الويب وهيكلها. يمكنك استخدامه لتعيين بنية ومحتوى الصفحة ، وكذلك وضع الصور والروابط والعناصر الأخرى عليها.
العناصر الرئيسية لأتش تي أم أل هي العلامات. يتم وضع العلامات في أقواس زاوية وإخبار المتصفح بكيفية عرض المحتوى.
فيما يلي بعض العلامات الشائعة الاستخدام:
- تستخدم لإنشاء الفقرات.
- - يصادف النص أهمية خاصة ويجعلها جريئة.
- - يسلط الضوء على النص بخط مائل ، مشيرا إلى أنها معلمة أو مهمة.
- - إنشاء قائمة مرقمة.
- - إنشاء قائمة نقطية.
- - تستخدم لتحديد عنصر القائمة.
- يخلق الجدول.
أتش تي أم أل كما يسمح لك لخلق وصلات ، تضمين الصور ، وأكثر من ذلك. هذه مجرد عناصر هتمل أساسية ، وهناك تصميمات وسمات أكثر تعقيدا تسمح لك بإنشاء صفحات ويب أكثر تعقيدا وتفاعلية.
بدء ممارسة استخدام هذه العناصر هتمل الأساسية والخوض تدريجيا في ميزات أكثر تقدما من اللغة. حظاً موفّقاً!
ما هو أتش تي أم أل وكيف يعمل?
أتش تي أم أل (لغة ترميز النص التشعبي) هي لغة ترميز تستخدم لإنشاء البنية وعرض محتوى صفحات الويب. يتكون من عناصر مختلفة تسمى العلامات التي تحدد كيفية تنسيق المحتوى وعرضه.
يتكون مستند هتمل من مجموعة من العلامات والنص بينهما. كل علامة لها معنى محدد وتؤدي وظيفة محددة. على سبيل المثال ، يتم استخدام العلامة لتمييز النص بالخط العريض ، ويتم استخدام العلامة لتمييز النص بخط مائل.
يمكن أن تتداخل عناصر هتمل داخل بعضها البعض ، وتشكيل هيكل هرمي. يتم تمثيل المستوى الأعلى من المستند بواسطة و العلامات ، والتي تحدد بداية ونهاية المستند ، على التوالي. يتم وضع جميع العناصر المرئية لصفحة الويب ، مثل النصوص والصور والروابط وغيرها ، داخل العلامة.
لديه هتمل أيضا القدرة على إنشاء قوائم باستخدام العلامات
- (قائمة غير مرقمة) و
عناصر وسمات أتش تي أم أل هي العناصر الأساسية لأتش تي أم أل وتساعد في تحديد بنية ومحتوى صفحة الويب.
مفهوم عناصر هتمل
عناصر هتمل هي اللبنات الأساسية لمستند هتمل. كل عنصر له غرضه الخاص والغرض ، ويعطي هيكل ودلالات لصفحات هتمل.
عناصر هتمل الرئيسية هي:
- إلى ، والتي تستخدم للإشارة إلى عناوين من مستويات مختلفة
- يستخدم لتصميم فقرة منفصلة من النص
- التي يتم استخدامها لجعل النص غامقا أو مائلا
- ، والتي تستخدم لإنشاء قوائم ذات تعداد نقطي ومرقمة
- التي تستخدم لإنشاء الجداول وعناصرها
يجب إغلاق عناصر هتمل باستخدام العلامات المناسبة ، على سبيل المثال:
- ، ويغلق مع علامة
- ، ويغلق مع علامة
وهي تحتوي على عناصر إضافية خاصة بها ، والتي ينبغي استخدامها لتحديد عناصر القائمة أو تجميع الجدول ، على التوالي.
بمعرفة عناصر هتمل الأساسية وقواعد استخدامها ، يمكنك إنشاء صفحات هتمل منظمة ودلالية يسهل قراءتها وفهمها من قبل كل من الأشخاص ومحركات البحث.
السمات الرئيسية لعناصر هتمل
عناصر هتمل هي اللبنات الأساسية لجميع صفحات الويب ولها العديد من السمات التي تخبر المتصفح كيفية عرض محتوى العنصر. في هذا القسم ، سنلقي نظرة على بعض السمات الرئيسية لعناصر هتمل.
معرف تسمح لك سمة المعرف بتعيين معرف عنصر فريد. يمكن استخدامه للارتباط بعناصر محددة باستخدام روابط الربط أو لتصميم عنصر باستخدام كس. يجب أن يكون المعرف فريدا داخل صفحة ويب واحدة.
فئة
تسمح لك سمة الفئة بتعيين فئة كس واحدة أو أكثر لعنصر. يمكن استخدام الفئات لتجميع العناصر وتطبيق نمط مشترك عليها باستخدام كس.
نمط
تسمح لك سمة النمط بتعيين أنماط كس المضمنة لعنصر ما. هذا يعني أنه يمكنك تحديد الأنماط مباشرة داخل عنصر هتمل. ومع ذلك ، فمن المستحسن تجنب استخدام هذه السمة لصالح كس الخارجية لفصل أفضل من الأساليب والمحتوى.
العنوان
توفر سمة العنوان معلومات إضافية حول العنصر ، والتي يتم عرضها عندما يحوم المؤشر فوق العنصر. يمكن أن يكون هذا مفيدا لتوفير معلومات أكثر تفصيلا حول محتوى العنصر أو الغرض منه.
البديل
يتم استخدام السمة ألت لتحديد النص البديل الذي سيتم عرضه إذا لم يتم تحميل الصورة أو لا يمكن عرضها. هذا مهم لإمكانية الوصول وتحسين محرك البحث.
معاق
يتم استخدام السمة المعطلة لتعيين حالة المعطل للعنصر. على سبيل المثال ، سيقوم زر بإنشاء زر معطل لا يمكن النقر عليه.
مختارة
يتم استخدام السمة المحددة في عناصر قائمة التحديد للإشارة إلى أنه يجب تحديد الخيار الافتراضي عند تحميل الصفحة لأول مرة.
هريف
يتم استخدام سمة هريف في الروابط () ويشير إلى عنوان ورل الذي سيتم النقر عليه عند النقر فوق الارتباط.
سرك
يتم استخدام السمة سرك في عناصر لتحديد المسار إلى الصورة ليتم عرضها.
العرض
تحدد سمة العرض عرض العنصر. على سبيل المثال ، سيقوم بتعيين عرض الصورة على 300 بكسل.
الارتفاع
تحدد سمة الارتفاع ارتفاع العنصر. على سبيل المثال ، سيضبط ارتفاع الصورة على 200 بكسل.
كولسبان
يعني أن هذه الخلية موزعة على عمودين.
روسبان
يعني أن هذه الخلية موزعة على صفين.
البيانات-*
البيانات - * السمات هي سمات مخصصة تسمح لك بتخزين بيانات المستخدم في عنصر. على سبيل المثال,
النص
يضيف سمة مستخدم بيانات مخصصة بالقيمة " 123 " إلى العنصر
.
هذه ليست سوى بعض من السمات الأساسية لعناصر هتمل. يوفر هتمل العديد من السمات الأخرى التي يمكن استخدامها لتحقيق أهداف مختلفة على صفحة ويب. ستساعدك معرفة السمات الأساسية على إدارة ترميز صفحات الويب ومظهرها بمرونة أكبر.
الأسلوب في هتمل
يعد الأسلوب جزءا مهما من تطوير صفحات الويب ويسمح لك بمنحها مظهرا جماليا وتسهيل إدراك المستخدم للمعلومات. كس (أوراق الأنماط المتتالية) ، والذي يستخدم جنبا إلى جنب مع هتمل ، هو المسؤول عن عناصر التصميم على صفحات الويب.
أتش تي أم أل هي لغة الترميز الرئيسية لصفحات الويب وتحدد بنية ومحتوى العناصر. ومع ذلك ، فإنه لا يوفر وسيلة لتصميم العناصر. للقيام بذلك ، يتم استخدام كس ، والذي يحدد مظهر وموقع العناصر على الصفحة.
يمكن تعريف الأنماط في كس لعناصر وفئات مختلفة من عناصر صفحة الويب. طريقة سهلة لتعيين أنماط للعناصر هي استخدام سمة النمط في علامة هتمل. على سبيل المثال ، لتغيير لون النص ، يمكنك استخدام التعليمات البرمجية التالية:
زر