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