هناك عدة طرق لتعيين فئة لصورة في هتمل. الفئة هي سمة تسمح لك بتحديد اسم واحد لعنصر هتمل واحد أو أكثر.
الطريقة الأولى هي استخدام سمة "الفئة" من علامة إمغ. للقيام بذلك ، حدد اسم الفئة بين علامتي اقتباس بعد كلمة "فئة" وقبل علامة يساوي. على سبيل المثال:
بعد ذلك ، يمكنك إنشاء أنماط لهذه الفئة في ملف كس أو مباشرة داخل مستند هتمل باستخدام ".فئة "محدد ، حيث" فئة " هو اسم الطبقة.
الطريقة الثانية هي استخدام علامة الشكل وسمة" الفئة " الخاصة بها. تسمح لك علامة" الشكل " بدمج الصورة وتوقيعها معا. مثال على الكود:
شرح الصورة
- تعيين فئة لصورة أتش تي أم أل
- المفاهيم الأساسية للفصول في كس
- كيفية استخدام فئة لصورة في هتمل
- إنشاء فئة خاصة بك لصورة في أتش تي أم أل
- مزايا استخدام فئة للصورة
- مثال على تصميم الصورة باستخدام فئة كس
- كيفية اختيار اسم الفئة الصحيح للصورة
- استخدام فئات متعددة لصورة واحدة
- لماذا استخدام فئات للصور في أتش تي أم أل?
- سؤال وجواب
- كيف يمكنني تعيين فئة لصورة في أتش تي أم أل?
- ما بناء الجملة يستخدم لتعيين فئة الصورة في أتش تي أم أل?
- هل من الممكن تعيين فئات متعددة لصورة واحدة في أتش تي أم أل?
- ما هي السمات الأخرى التي يمكن استخدامها للعمل مع فئات الصور في أتش تي أم أل?
- هل من الممكن تطبيق أنماط كس إلى فئة صورة في هتمل?
تعيين فئة لصورة أتش تي أم أل
في هتمل ، يمكنك تعيين فئة لصورة باستخدام سمة الفئة. الفئة هي اسم يمكنك اختياره لتحديد صورة أو مجموعة من الصور على صفحة الويب الخاصة بك. من خلال تعيين فئة لصورة ، يمكنك بعد ذلك استخدامه للتصميم أو للعمل مع عنصر باستخدام جافا سكريبت.
لتعيين فئة إلى صورة ، تحتاج إلى استخدام علامة إمغ وسمة الفئة مع قيمة الفئة التي تريد تعيينها. على سبيل المثال:
في هذا المثال ، سيتم تعيين فئة "صورتي" للصورة. يمكنك اختيار أي اسم آخر للفئة.
لتطبيق الأنماط على صورة مع فئة معينة ، يمكنك استخدام ملف كس أو استخدام سمة النمط مباشرة داخل العلامة. على سبيل المثال:
في هذا المثال ، سيكون عرض الصورة وارتفاعها 200 بكسل. يمكنك تغيير قيم خصائص النمط لتحقيق النتيجة المرجوة.
يمكنك أيضا استخدام فئة الصورة لتغيير سلوكها باستخدام جافا سكريبت. للقيام بذلك ، تحتاج إلى الوصول إلى العنصر باستخدام أساليب دوم وتطبيق التغييرات اللازمة على شفرة جافا سكريبت.
ونتيجة لذلك ، من خلال تعيين فئة إلى صورة ، يمكنك الحصول على فرصة لتحديد والعمل معها أكثر سهولة ومرونة.
المفاهيم الأساسية للفصول في كس
الطبقات في كس هي مجموعات من الأنماط التي يمكن تطبيقها على عناصر هتمل. إنها تسمح لك بتحديد أنماط مختلفة لعناصر مختلفة من صفحة الويب ، مما يجعل من السهل التحكم في مظهر العناصر وموقعها.
يتم تعريف الفئات باستخدام سمة الفئة في عنصر هتمل. يمكن أن يكون اسم الفئة تعسفيا ، ولكن يجب أن يكون فريدا داخل صفحة واحدة. لاستخدام فئة في كس ، تتم إضافة نقطة إلى اسم الفئة ، على سبيل المثال:".
لتطبيق فئة على عنصر هتمل ، أضف سمة الفئة إلى علامة عنصر هتمل وقم بتعيين اسم فئة لها ، على سبيل المثال:
.
في كس ، يتم تعريف الطبقات باستخدام محددات. تتيح لك المحددات تحديد عنصر معين أو مجموعة من العناصر لتطبيق الأنماط. لتحديد عنصر مع فئة معينة ، يتم إضافة نقطة إلى اسم الفئة:
داخل العنصر مع فئة"صفي".
داخل العنصر مع فئة"صفي".
داخل العنصر مع فئة"صفي".
وداخل العنصر مع فئة" صفي".
باستخدام الطبقات في كس يسمح لك لخلق رمز مرنة وحدات التي هي سهلة لتحديث وصيانة. إنها تبسط هيكلة الأنماط وتنظيمها ، وتسمح لك بإعادة استخدام التعليمات البرمجية وجعل تطوير صفحة الويب أكثر كفاءة.
كيفية استخدام فئة لصورة في هتمل
تسمح لك الفصول بالتحكم في أنماط وسلوك العناصر على صفحة الويب. يمكن استخدامها أيضا لإضافة التصميم والوظائف إلى الصور الموجودة على موقعك.
لتعيين فئة لصورة في هتمل ، يجب عليك استخدام سمة الفئة. يمكن إضافة هذه السمة إلى علامة إمغ.
مثال على استخدام فئة:
في هذا المثال ، تتم إضافة فئة " صفي " إلى علامة إمغ. الآن يمكننا استخدام هذه الفئة في كس لنمط الصورة.
لنمط صورة باستخدام فئة ، تحتاج إلى كتابة قاعدة كس لفئة" صفي".
مثال على قاعدة كس:
. صفي {
الحدود: 1 بكسل أسود صلب;
الهامش: 10 بكسل;
الحشو: 5 بكسل;
}
في هذا المثال ، قمنا بتعيين إطار حول الصورة ، وتعيين الهوامش وإضافة مسافة بادئة داخلية صغيرة.
بالإضافة إلى التصميم ، يمكن أيضا استخدام الفصول لإضافة وظائف إلى الصور. على سبيل المثال ، يمكنك استخدام فئات لمسج أو شفرة جافا سكريبت التي سيتم تنفيذها عند النقر على صورة.
لإضافة شفرة جافا سكريبت إلى صورة باستخدام فئة ، يجب تعيين هذه الفئة للصورة ، ثم العثور على هذه الفئة في البرنامج النصي وتحديد التعليمات البرمجية التي يجب تنفيذها عند النقر على الصورة.
مثال على استخدام فئة للوظائف:
شفرة جافا سكريبت:
<url> / <url> / <url>
تنبيه ('لقد نقرت على الصورة!');
});
في هذا المثال ، نستخدم طريقة كيريسيليكتور للبحث عن عنصر على صفحة مع فئة "بلدي-كلاس" ، وإضافة حدث النقر الذي يسبب نافذة منبثقة مع الرسالة " قمت بالنقر فوق الصورة!"
حتى تتمكن من استخدام الطبقات إلى نمط وظيفة الصور الخاصة بك في هتمل. الطبقات تعطيك المزيد من المرونة والسيطرة على العناصر الخاصة بك.
إنشاء فئة خاصة بك لصورة في أتش تي أم أل
من أجل تعيين فئة لصورة في هتمل ، يجب عليك استخدام سمة الفئة. يسمح لك الفصل بتطبيق الأنماط أو البرامج النصية على عناصر معينة من صفحة الويب ، بما في ذلك الصور.
| لإنشاء فئة خاصة بك لصورة ، يجب عليك أولا تعيين الفئة في علامة هتمل إمغ. للقيام بذلك ، أضف قيمة الفئة في سمة الفئة التي تريد تطبيقها على الصورة. على سبيل المثال: | كود أتش تي أم أل: |
|---|---|
| النتيجة: |
في هذا المثال ، يتم تعيين فئة "صورتي"صورة موجودة في الملف" صورة.جبغ". يمكنك استخدام أي قيمة في سمة الفئة ، ولكن يوصى باختيار القيمة المرتبطة بتعيين الفئة لتسهيل التنقل في الكود.
| بعد تعيين فئة لصورة ، يمكنك استخدامها لتطبيق الأنماط أو البرامج النصية على تلك الصورة. يمكنك استخدام كس لنمط صورة عن طريق إضافة الخصائص المطلوبة إلى فئة "بلدي صورة". على سبيل المثال: | رمز المغلق: |
|---|---|
| النتيجة: | } |
في هذا المثال ، يتم تعيين الأنماط باستخدام رمز كس. يتم تعيين فئة "صورتي" قيمة عرض 200 بكسل وحدود بسماكة 1 بكسل بلون أسود. تنطبق هذه الأنماط فقط على صورة تحتوي على فئة" صورتي".
إنشاء فئة خاصة بك لصورة هتمل يمكن أن تكون مفيدة إذا كان لديك العديد من الصور التي تحتاج إلى تطبيق نفس الأنماط أو البرامج النصية. ومع ذلك ، لا تسيء استخدام الفئات بحيث تظل الصفحة سهلة التحميل ويكون رمزها قابلا للقراءة.
مزايا استخدام فئة للصورة
يسمح استخدام فئة لصورة في هتمل بتصميم أكثر دقة ومرونة للعنصر ، فضلا عن توفير الراحة عند العمل مع صور مختلفة على صفحة ويب. يتم سرد المزايا الرئيسية لاستخدام فئة للصورة أدناه:
الراحة-يتيح لك استخدام فئة للصورة إنشاء قالب نمط قياسي بخصائص محددة وتطبيقه على صور مختلفة دون الحاجة إلى إعادة كتابة الرمز من البداية. هذا يقلل من وقت التطوير ويبسط دعم صفحة الويب.
إعادة الاستخدام-يتيح لك إنشاء فئة لصورة إعادة استخدامها في أماكن مختلفة على موقع الويب ، مما يجعل الشفرة أكثر معيارية وسهلة الصيانة. يمكنك بسهولة تطبيق فئة على صور متعددة دون نسخ نفس الرمز مرارا وتكرارا.
المرونة-يمكن أن تحتوي فئة الصورة على أنماط وخصائص مختلفة ، مثل الأبعاد والهوامش والألوان والفلاتر وما إلى ذلك. هذا يجعل من السهل تغيير مظهر الصور من خلال تطبيق فئة واحدة فقط أو إضافة عدة فئات حسب النمط المطلوب.
القدرة على التكيف – يمكن أن يساعد استخدام الفصل في إنشاء تصميم متكيف يسمح لك بتغيير حجم الصورة تلقائيا اعتمادا على حجم شاشة الجهاز الذي تكون صفحة الويب مفتوحة عليه. باستخدام الفصل ، يمكنك تعيين استعلامات الوسائط وتغيير أنماط الصور لدقة الشاشة المختلفة.
دلالات-باستخدام فئة مع أسماء محددة يسمح لك لخلق رمز أكثر وضوحا وأكثر قابلية للفهم من شأنها أن تكون أسهل للقراءة والحفاظ عليها. يمكن أن تعكس أسماء الفئات الغرض من الصورة وأسلوبها ، مما يضمن دلالات أفضل للمستند.
من السهل تغيير النمط – بمساعدة فصل دراسي ، من السهل تغيير نمط جميع الصور على صفحة الويب عن طريق تغيير فئة واحدة فقط ، مما يبسط إلى حد كبير عملية تغيير التصميم أو تحديث الأنماط.
يعد استخدام فئة لصورة في هتمل أداة قوية لإنشاء ترميز ويب مرن ومنظم وتحرير أنماط الصور. يسمح لك بالتحكم بسهولة في مظهر وسلوك الصور ، مما يجعل العمل مع الصور أكثر كفاءة وملاءمة.
مثال على تصميم الصورة باستخدام فئة كس
- في هتمل ، يمكننا تعيين فئة للعناصر لتكون قادرة على نمط لهم باستخدام كس. لنلق نظرة على مثال لتصميم الصورة باستخدام فصل دراسي:
- إنشاء ملف كس وتوصيله إلى صفحة هتمل باستخدام علامة.
- في ملف كس ، قم بإنشاء فئة جديدة باستخدام المحدد.اسم الفصل ، حيث اسم الفصل هو اسم الفصل الذي حددته.
- داخل الفصل ، حدد خصائص النمط للصورة. على سبيل المثال ، يمكنك ضبط العرض والارتفاع ، وتغيير لون الخلفية ، وإضافة إطار أو ظل ، وما إلى ذلك.
في ملف هتمل ، إضافة صورة باستخدام علامة وتعيينها الفئة التي قمت بإنشائها باستخدام سمة الفئة.
| هنا مثال على فئة كس لتصميم الصورة: |
|---|
المغلق .اسم الفصل { العرض: 300 بكسل; الارتفاع: 200 بكسل; لون الخلفية: رمادي فاتح; الحدود: 1 بكسل أسود صلب; مربع الظل: 2 بكسل 2 بكسل 5 بكسل رمادي; |
}
| في ملف هتمل ، أضف الصورة: |
|---|
أتش تي أم أل
نتيجة لذلك ، سيكون لصورتنا أبعاد 300 بكسل في 200 بكسل ، ولون خلفية رمادي فاتح ، وإطار أسود سميك 1 بكسل ، وظل 2 بكسل إلى اليمين و 2 بكسل لأسفل بلون رمادي.
كيفية اختيار اسم الفئة الصحيح للصورة
عند تصميم صفحة ويب ، من المهم اختيار اسم الفئة الصحيح للعناصر ، بما في ذلك الصور. يساعد استخدام أسماء الفئات الصحيحة في جعل الكود أكثر قابلية للفهم والصيانة.
عند اختيار اسم فئة لصورة ، يجب عليك اتباع مبادئ الدلالات والوضوح. يجب أن يعكس اسم الفئة الغرض أو الوظيفة أو مظهر الصورة حتى يتمكن المطورون الآخرون من فهم معناها بسهولة.
على سبيل المثال ، إذا تم عرض شعار الشركة على الصفحة ، فيمكن أن يكون اسم الفئة "شعار" أو "شعار الشركة". إذا كانت الصورة تنتمي إلى فئة أو موضوع معين من الصفحة ، فيمكنك استخدام الأسماء المناسبة ، على سبيل المثال ، "صورة المنتج" أو "صورة الملف الشخصي".
إذا كانت هناك عدة صور على الصفحة تؤدي وظائف متشابهة أو لها نمط مشابه ، فيمكنك استخدام اسم فئة شائع للتجميع. على سبيل المثال ، " معرض الصور "للصور في المعرض أو" الصورة المصغرة " للمعاينات الصغيرة.
يمكن أيضا استكمال اسم الفئة بكلمات وصفية لوصف الصورة بدقة أكبر. على سبيل المثال ، " تقريب "لصورة ذات زوايا مستديرة أو" تعليق " لصورة مع تسمية توضيحية.
بالإضافة إلى ذلك ، عند اختيار اسم فئة ، يجب تجنب استخدام مصطلحات عامة وغامضة مثل" صورة 1 "أو"صورة 2". هذه الأسماء ليست مفيدة ويمكن أن تسبب الارتباك أثناء التطوير اللاحق أو تحرير الكود.
بشكل عام ، يجب أن يكون اسم الفئة الصحيح للصورة محددا ووصفيا ويعكس الغرض منه أو أسلوبه. سيساعد هذا في جعل الكود أكثر تنظيما وفهما لجميع المطورين الذين يعملون معه.
استخدام فئات متعددة لصورة واحدة
لتعيين فئة صورة في هتمل ، يتم استخدام سمة الفئة. ومع ذلك ، هناك حالات عندما يكون من الضروري تطبيق عدة فئات على صورة واحدة. في هتمل ، يمكن القيام بذلك عن طريق سرد أسماء الفئات مفصولة بمسافة في سمة الفئة.
- على سبيل المثال ، لدينا عدة فئات لتصميم الصورة:
- فئة الصورة ، والتي تحتوي على الأنماط الرئيسية للصورة.
- الطبقة الحدود لإضافة الحدود حول الصورة.
فئة الظل لإضافة ظل إلى الصورة.
لتطبيق جميع الفئات الثلاث على صورة واحدة ، حدد أسمائها مفصولة بمسافة في سمة الفئة: |
مثال:
في هذا المثال ، ستحتوي صورتنا على جميع الأنماط من فئات الصورة والحدود والظل.
بهذه الطريقة ، يمكنك بسهولة إضافة الفئات الضرورية إلى الصور لتطبيق أنماط مختلفة.
لماذا استخدام فئات للصور في أتش تي أم أل?
- في هتمل ، يتم استخدام الطبقات لتحديد نمط ووظائف العناصر على صفحة ويب. يمكن أيضا استخدام الفصول لتنظيم المحتوى وتجميعه. في حالة الصور ، يمكن أن يكون استخدام الفئات مفيدا لعدة أسباب.
- التنظيم والتجميع: يتيح لك استخدام الفئات للصور تنظيم الصور وتجميعها حسب الخصائص المتشابهة أو الموضوعات ذات الصلة. على سبيل المثال ، إذا كان هناك العديد من صور الطبيعة على صفحة ويب ، فيمكن دمجها في فئة "الطبيعة". يسهل هذا الترتيب إدارة أنماط ووظائف هذه الصور.
- تطبيق الأنماط: تسمح لك فئات الصور بتعيين الأنماط التي سيتم تطبيقها على جميع العناصر مع هذه الفئة. على سبيل المثال ، يمكنك تعيين أنماط مشتركة لجميع الصور من فئة "الطبيعة" ، مثل الإطارات أو الهوامش أو المرشحات. وبالتالي ، يمكنك تحقيق مظهر موحد لمجموعة من الصور.
إدارة الوظائف: يمكن استخدام فئات الصور لإضافة وإدارة الوظائف باستخدام كس أو جافا سكريبت. على سبيل المثال ، يمكنك تعيين فئة "التكبير / التصغير" للصور بحيث تزداد عند التمرير فوقها. يمكن تنفيذ ذلك باستخدام انتقالات كس والرسوم المتحركة لإنشاء تأثير تفاعلي.
يساعد استخدام فئات للصور في هتمل على إنشاء صفحات ويب أكثر مرونة وتنظيما واستجابة. كما أنه يقلل من كمية التعليمات البرمجية ويجعل من السهل تغيير الأنماط والوظائف لمجموعة من الصور دون لمس كل عنصر على حدة. لذلك ، يعد استخدام الفئات للصور ممارسة جيدة يجب تطبيقها عند تطوير صفحات الويب.
سؤال وجواب
كيف يمكنني تعيين فئة لصورة في أتش تي أم أل?
لتعيين فئة لصورة في هتمل ، يجب عليك استخدام سمة الفئة وتحديد قيمة الفئة المناسبة في علامة إمغ.
ما بناء الجملة يستخدم لتعيين فئة إلى صورة في أتش تي أم أل?
بناء الجملة لتحديد فئة إلى صورة في هتمل هو كما يلي: ، حيث "بلدي فئة" هي قيمة الطبقة.
هل من الممكن تعيين فئات متعددة لصورة واحدة في أتش تي أم أل?
نعم ، يمكنك تعيين فئات متعددة لصورة واحدة في هتمل. للقيام بذلك ، افصل قيم الفصل بمسافة ، على سبيل المثال:.
ما هي السمات الأخرى التي يمكن استخدامها للعمل مع فئات الصور في أتش تي أم أل?
للعمل مع فئات الصور في هتمل ، يمكنك استخدام سمات إضافية ، مثل معرف لتعيين معرف فريد ، ونمط لتطبيق الأنماط مباشرة على عنصر ، والبيانات-* لتخزين بيانات المستخدم ، وغيرها.
هل من الممكن تطبيق أنماط كس إلى فئة صورة في هتمل?