يعد التباعد بين الصور أحد التفاصيل المهمة التي تساعد على إنشاء مظهر متناغم وجذاب لصفحة الويب. باستخدام أوراق الأنماط المتتالية (كس) ، يمكنك تحقيق التأثير المطلوب والحصول على تصميم مثير للاهتمام.ولكن كيفية تعيين الفواصل الزمنية بين الصور بشكل صحيح باستخدام كس?
أو. بعد إنشاء الحاوية ، يمكننا ضبط الهوامش بين الصور.
الهامش: 10 بكسل;
}
- في هذه الحالة ، تقوم خاصية الهامش بتعيين الهوامش على جميع جوانب الصورة إلى 10 بكسل.
- ومع ذلك ، تجدر الإشارة إلى أنه في هذه الحالة سيتم تطبيق الهوامش على جميع الصور على الصفحة. إذا احتجنا إلى تعيين هوامش بين صور معينة فقط ، فيمكننا استخدام فئة أو معرف. بهذه الطريقة سنكون قادرين على إنشاء أنماط فريدة لكل صورة.
- كيفية تعيين التباعد للصور باستخدام كس
- طرق تحديد الفاصل الزمني
- تطبيق الهامش والحشو
- استخدام فليكسبوكس لترتيب الصور
- سؤال وجواب
- كيف يمكنني تعيين التباعد بين الصور في المغلق?
- ما هي وحدة القياس التي يمكن استخدامها لتعيين التباعد بين الصور في المغلق?
- هل من الممكن تعيين التباعد بين الصور على جانب واحد فقط?
كيف يمكنني تعيين فاصل زمني مختلف بين الصور على أجهزة مختلفة?
هل من الممكن تعيين التباعد بين الصور باستخدام تخطيط الشبكة في المغلق?
كيفية تعيين التباعد للصور باستخدام كس
- غالبا ما يواجه مطورو الويب الحاجة إلى ضبط المسافة أو التباعد بين الصور على مواقع الويب الخاصة بهم. يوفر كس (أوراق الأنماط المتتالية) عدة طرق للتحكم في التباعد للصور باستخدام الخصائص والقيم.
- هناك عدة طرق لتعيين التباعد للصور باستخدام كس:
- استخدام الهوامش
- استخدام الحدود
- باستخدام الحشو
باستخدام فليكس بوكس
تسمح لك الهوامش بتعيين التباعد حول الصورة. يمكنك استخدام العقار
الهامش
لتحديد الهوامش. على سبيل المثال ، سيقوم رمز كس التالي بتعيين هوامش متساوية حول الصورة:
آي إم جي {
الهامش: 10 بكسل;
يمكن أيضا استخدام الحدود لتعيين التباعد حول الصور. الممتلكات
الحدود
يسمح لك بتعيين عرض ونمط ولون الحدود. على سبيل المثال ، سيقوم رمز كس التالي بتعيين حد 1 بكسل حول الصورة:
آي إم جي {
الحدود: 1 بكسل أسود صلب;
يسمح لك الحشو بتعيين الفاصل الزمني داخل الصورة.
خاصية الحشو
يحدد المساحة حول محتوى العنصر. على سبيل المثال ، سيقوم رمز كس التالي بتعيين قيم حشو متساوية للصورة:
آي إم جي {
الحشو: 10 بكسل;
و
تبرير-المحتوى: المسافة-بين;
لتعيين فاصل زمني متساو بين الصور. على سبيل المثال ، سيقوم رمز كس التالي بإنشاء فترات متساوية بين الصور:
.حاوية {
عرض: فليكس;
تبرير-المحتوى: المسافة-بين;
}
آي إم جي {
الهامش: 0 5 بكسل;
}
طرق تحديد الفاصل الزمني
هناك عدة طرق لتعيين التباعد بين الصور باستخدام كس. دعونا ننظر إلى كل واحد منهم: خاصية الهامش هي الطريقة الأبسط والأكثر شيوعا لتعيين الفاصل الزمني بين الصور. للقيام بذلك ، تحتاج إلى تعيين المسافة البادئة باستخدام الخاصية الهامشالنتيجة
ف إمغ { الهامش-اليمين: 10 بكسل؛} خاصية الحشو هي طريقة أخرى لتعيين التباعد بين الصور. للقيام بذلك ، تحتاج إلى تعيين المسافة البادئة الداخلية باستخدام الخاصية الحشو
. الفرق من الطريقة السابقة هو أنه عند تعيين المسافة البادئة باستخدام الخاصية
الحشو
لن تمتد الصورة إلى ما وراء حدودها. على سبيل المثال ، إذا أردنا تعيين فاصل زمني 10 بكسل بين الصور ، فيمكننا استخدام رمز كس التالي:
كود
النتيجة
ف إمغ { الحشو-اليمين: 10 بكسل؛}
- خاصية الحدود هي الطريقة الثالثة لتعيين الفاصل الزمني بين الصور. للقيام بذلك ، تحتاج إلى تعيين عرض الإطار باستخدام الخاصية
- الحدود
- . على سبيل المثال ، إذا أردنا تعيين فاصل زمني 10 بكسل بين الصور ، فيمكننا استخدام رمز كس التالي:
- كود
- النتيجة
ف إمغ { الحدود اليمين: 10 بكسل الصلبة شفافة؛}
| كل طريقة من الطرق المقترحة لها خصائصها الخاصة ويمكن استخدامها اعتمادا على النتيجة المرجوة والظروف المحددة. | تطبيق الهامش والحشو |
|---|---|
| الهامش والحشو هما خاصيتان أساسيتان كس تسمح لك بتعيين المسافة بين العناصر على صفحة الويب. | تحدد خاصية الهامش الهامش الخارجي للعنصر. يتحكم في المسافة بين العنصر والعناصر المجاورة له. |
| تحدد خاصية الحشو المسافة البادئة الداخلية للعنصر. يتحكم في المسافة بين محتوى العنصر وحدوده. | عند استخدام خصائص الهامش والحشو ، يمكنك استخدام وحدات القياس التالية: |
بكسل (بكسل) هي وحدة القياس الأكثر شيوعا;
٪ (النسبة المئوية) هي وحدة قياس نسبية ، اعتمادا على حجم العنصر الأصلي;
م هي وحدة قياس نسبية ، اعتمادا على حجم خط العنصر الأصل;
حركة العين السريعة هي وحدة قياس نسبية اعتمادا على حجم خط عنصر الجذر (عادة ما يكون العنصر أو );
فولكس فاجن و ف هي وحدات القياس النسبية على أساس العرض والارتفاع من نافذة المتصفح ، على التوالي.
لتطبيق الهامش والحشو على العناصر ، يمكنك استخدام بناء الجملة التالي:
الممتلكات
قيمة الهامش
على سبيل المثال ، لتعيين الهوامش من جميع جوانب عنصر ما ، يمكنك استخدام التعليمات البرمجية التالية:
سيقوم هذا الرمز بتعيين الهوامش الخارجية والداخلية ، أي ما يعادل 10 بكسل لجميع جوانب العنصر.
مع النمط
عرض: فليكس;
.
بعد ذلك ، يجب وضع كل صورة في عنصر منفصل. عادة ما يتم استخدام علامة ديف لهذا
أو
الشكل
. سيمثل كل عنصر صورة واحدة في المجموعة.
. على سبيل المثال:
الفجوة: 20 بكسل ؛ / * تباعد الصور */
}
.صورة حاوية إمغ {
أقصى عرض: 100%;
}
في المثال المعطى ، الفصل
صورة حاوية
بل هو حاوية للصور ، والممتلكات
جاب
يحدد الفاصل الزمني بينهما.
أيضا ، فليكس بوكس يسمح لك بسهولة تغيير ترتيب الصور باستخدام الخاصية
النظام
. على سبيل المثال:
.صورة حاوية ديف: الطفل الأول {
النظام: 2 ؛ / * تغيير ترتيب الصورة الأولى */
}
في هذا المثال ، سيتم عرض الصورة الأولى في المرتبة الثانية بالترتيب.