الإطارات الموضوعة حول الصور أو النص تزين الموقع وتضفي تنوعًا على تصميمه. إذا كنت تستخدم الجداول لإنشاء حدود ، فسيشغل رمز كل حد مساحة كبيرة. أيضًا ، في هذه الحالة ، سيتعين عليك إعادة كتابة كود HTML لكل إطار. باستخدام CSS ، يمكنك بسهولة إنشاء حد بأي سمك ولون تريده عن طريق كتابة رمز بسيط مرة واحدة لجميع العناصر التي ستحيط بهذه الحدود. ستسمح هذه التقنية ، إذا لزم الأمر ، بتغيير نوع الإطارات على الموقع في غضون دقيقتين.
انه ضروري
- - لديك موقع الويب الخاص بك ؛
- - تعرف على CSS وأين تتم كتابة هذه الأنماط على الموقع.
تعليمات
الخطوة 1
لإنشاء حد ، اكتب أولاً الكود التالي في CSS:
رامكا {}
الخطوة 2
لجعل الحد بالحجم الذي تريده ، استخدم معلمة عرض الحدود ، التي تعين عرض الخط بالبكسل. على سبيل المثال ، إذا كان يجب أن يكون عرض خط الإطار 3 بكسل ، فسيبدو الإدخال كما يلي:
رامكا {border-width: 3px؛}
الخطوه 3
حدد الآن نمط الحدود باستخدام معلمة نمط الحدود. إذا كنت ترغب في إنشاء حد تكون جوانبه عبارة عن خطوط صلبة منتظمة ، فضع الإدخال التالي في الكود بين الأقواس المتعرجة - نمط الحدود: صلب.
الخطوة 4
يمكن الحصول على حد منقط بكتابته على النحو التالي: نمط الحدود: منقط. التحقق من نمط الحدود: سيعطيك المتقطع حدًا متقطعًا.
الخطوة الخامسة
يمكنك جعل الحد خطًا متصلًا مزدوجًا مثل هذا: نمط الحدود: مزدوج. استخدم نمط الحدود: groove أو border-style: ridge لتأطير النص أو الصور في إطارات ذات تأثيرات جانبية ثلاثية الأبعاد. الفرق بين هذين الخيارين هو أنه في الحالة الأولى ، يتكون الإطار من خطوط بمسافة بادئة ، وفي الحالة الثانية ، يتكون الإطار من خطوط محدبة.
الخطوة 6
استخدم هذا الرمز: border-style: inset لإنشاء تأثير داخلي بحدود عنصر الموقع. لجعل محتوى الحد ، جنبًا إلى جنب مع الحد ، على العكس من ذلك ، محدبًا ، اكتب border-style: outset.
الخطوة 7
يمكنك إضافة اللون المطلوب إلى الإطار باستخدام معلمة لون الحدود ، والتي يتم وضعها أيضًا بين الأقواس المتعرجة. إذا كنت تريد جعل الحدود حمراء ، فاكتب لون الحدود: أحمر ، أزرق - لون الحدود: أزرق ، برتقالي - لون الحدود: برتقالي.
الخطوة 8
يبدو رمز حدود CSS ، بما في ذلك جميع الخيارات ، كما يلي:
ramka {عرض الحدود: 3 بكسل ؛ نمط الحدود: صلب ؛ لون الحدود: أزرق ؛}
الخطوة 9
الآن ، في HTML ، اكتب هذا:
محتوى الإطار بدلاً من عبارة "محتوى الإطار" ، أدخل النص أو رمز الصورة المطلوبة.
الخطوة 10
وبالتالي ، يمكنك تصميم عدد غير محدود من العناصر على الموقع. لتغيير مظهر الإطار ، ما عليك سوى تغيير كود CSS.
