حدود تعويم. تعويم ومسح خصائص CSS للعناصر العائمة في تخطيط الكتلة. كيف يعمل فليكس بوكس

كل سمة، باستثناء القيم المنطقية، لها قيمة تمثل أحد الأنواع التالية: كلمة رئيسية، سلسلة، عنوان، رقم، نسبة مئوية، رمز اللغة. هذه ليست جميع الأنواع، ولكنها الأكثر شيوعًا.

الكلمة الرئيسية

تحتوي بعض السمات على قيم محجوزة تسمى "الكلمات الرئيسية". على سبيل المثال، قيمة سمة نوع العنصر يحدد نوع عنصر النموذج. البند أدناه يخلق زر.

تخضع الكلمات الرئيسية للمواصفات، وقائمة قيمها محدودة ولا يمكن تغييرها بشكل تعسفي.

خط

السلسلة عبارة عن نص محاط بعلامات اقتباس مزدوجة أو مفردة.

تحدد علامة الاقتباس بداية السلسلة ونهايتها، لذا لا يمكن إضافة نفس علامات الاقتباس داخل السلسلة. على سبيل المثال، يستخدم السطر التالي مجموعة خاطئة من علامات الاقتباس.

لكتابة سلسلة بشكل صحيح مع علامات الاقتباس الداخلية، هناك عدة خيارات.

1. الهروب من علامة الاقتباس الداخلية مثل هذا - \". في هذه الحالة، لن ينظر إليها المتصفح على أنها علامة اقتباس، ولكنها تعتبر حرفًا.

2. استخدم مزيجًا من علامات الاقتباس المفردة والمزدوجة.

هنا، يتم وضع السلسلة الموجودة في سمة العنوان بين علامات اقتباس مفردة، حتى نتمكن من الكتابة بأمان داخل علامة اقتباس مزدوجة.

كل هذا يعمل بنفس الطريقة بالنسبة لعلامات الاقتباس المفردة.

عنوان

العنوان هو مسار إلى مستند، مثل ملف رسومي. يكون العنوان مطلوبًا في الحالات التي يتم فيها إنشاء رابط إلى موقع أو صفحة ويب أخرى أو تنزيل ملف معين. على سبيل المثال، في العنصر يتم استخدام العنوان كقيمة للسمة src، فهو يحدد المسار إلى ملف الصورة.

التمييز بين العناوين المطلقة والنسبية.

العناوين المطلقة

تعمل هذه العناوين في كل مكان وفي كل مكان، بغض النظر عن اسم الموقع أو صفحة الويب التي يتم فيها تقديم العنوان وتبدأ دائمًا ببروتوكول نقل البيانات. بالنسبة لصفحات الويب، يكون هذا عادةً HTTP (بروتوكول نقل النص التشعبي)، لذا تبدأ العناوين المطلقة بالكلمة الأساسية http://. يوضح المثال 1 رابطًا يستخدم عنوانًا مطلقًا.

مثال 1: استخدام عنوان مطلق في رابط

وصلة

جوجل

بالإضافة إلى بروتوكول HTTP، يوجد أيضًا بروتوكول HTTPS آمن. ليس من الواضح دائمًا البروتوكول المستخدم في الموقع، لذلك يمكن حذفه تمامًا من عنوان الارتباط. وفي هذه الحالة سيتم كتابة العنوان هكذا:

جوجل

تُستخدم العناوين المطلقة بشكل أساسي للإشارة إلى مورد شبكة آخر ونادرًا ما تُستخدم للارتباطات الداخلية.

العناوين النسبية

يتم تحديد العناوين النسبية من جذر الموقع أو المستند الحالي. على سبيل المثال، رمز يعني تنزيل ملف رسومي يسمى pic.png، الموجود في نفس المجلد الذي توجد به صفحة الويب نفسها. دعونا نلقي نظرة على بعض الأمثلة على هذه العناوين.

/
يشير العنوان عادةً إلى ملف Index.html الموجود في جذر الموقع. إذا لم يكن هناك ملف Index.html، فسيعرض المتصفح عادةً قائمة بالملفات الموجودة في هذا الدليل. ليس من الضروري أن يكون اسم الملف Index.html، حيث يتم تغيير هذه المعلمة من خلال إعدادات خادم الويب - وهذا هو اسم البرنامج الذي يحلل الطلبات الواردة من المتصفح ويرسل له المستندات المعروضة للمستخدم.

/صور/pic.png
تشير الشرطة (/) الموجودة أمام العنوان إلى أن العنونة تبدأ من جذر الموقع. يؤدي الرابط إلى ملف pic.png الموجود في مجلد الصور. وهذا بدوره يقع في جذر الموقع.

../help/me.html
النقطتان الموجودتان أمام الاسم تخبران المتصفح بالارتقاء بمستوى واحد في قائمة مجلدات الموقع وهناك "ابحث" في مجلد المساعدة عن ملف يسمى me.html.

دليل/info.html
إذا لم تكن هناك أحرف إضافية قبل اسم المجلد، مثل النقاط أو الشرط، فهذا يعني أن المجلد موجود داخل المجلد الحالي، ويكون ملف info.html موجودًا فيه بالفعل.

تعمل عناوين URL المتعلقة بجذر الموقع مثل /demo/ فقط تحت سيطرة خادم الويب ولا تنطبق على الكمبيوتر المحلي.

روابط

انظر إلى صورتي!

كيفية التقاط نفس الصورة؟

في بعض الأحيان يمكنك العثور على العناوين في النموذج ./file/doc.html. النقطة الموجودة في المقدمة تعني أن العد التنازلي من المجلد الحالي. مثل هذا الإدخال زائد عن الحاجة ويمكن اختصاره إلى file/doc.html.

أعداد

تتكون الأرقام من أرقام من 0 إلى 9؛ بالنسبة للأرقام السالبة، إذا لزم الأمر، يتم وضع علامة الطرح (-45) في المقدمة. يوضح المثال 3 استخدام الأرقام كقيم للسمات.

مثال 3: استخدام الأرقام

أعداد

درجة حرارة الماء

قليل طبيعي حار ماء مغلي

بالإضافة إلى الأعداد الصحيحة، يجوز استخدام الكسور العشرية، في حين يتم فصل الأعداد الصحيحة والكسرية عن بعضها البعض بنقطة - 36.6، كما هو موضح في المثال 4.

مثال 4. الأعداد الكسرية

الإدخال، الحد الأقصى للسمة

اهتمام

يتيح لك تدوين النسبة المئوية الارتباط بحجم العنصر الأصلي وتعيين الحجم النسبي له. لنفترض أن لدينا الكود التالي:

عنصر تقع في الداخل

ولذلك العنصر

سيكون أحد الوالدين ل . والعكس صحيح أيضًا - العنصر هو طفل من

وفقا لذلك، في هذه الحالة، يتم حساب عرض الصورة كنسبة مئوية من الفقرة الأصلية، والتي تشغل بشكل افتراضي كل المساحة الحرة للنافذة في العرض.

يفهم المتصفح أننا نتحدث عن النسب المئوية إذا تمت إضافة الرمز % بعد الرقم، على سبيل المثال: width='40%' .

يوضح المثال 5 رمز صفحة الويب، حيث تتم الإشارة إلى عرض الصورة كنسبة مئوية.

مثال 5. أبعاد الصورة بالنسبة المئوية

صورة

وتظهر نتيجة هذا المثال في الشكل. 1. تم ضبط عرض الصورة على 100%، بحيث تشغل العرض الكامل لنافذة المتصفح. الارتفاع غير محدد ويتم حسابه تلقائيًا بواسطة المتصفح.

أرز. 1. حجم الصورة بالنسبة المئوية

ميزة تدوين النسبة المئوية هي أن حجم الصورة يتغير مع عرض نافذة المتصفح، ولا يبقى ثابتًا. تشمل العيوب تدهور جودة الصورة عندما يتم تمديدها بقوة.

رمز اللغة

نحن نعيش في عصر العولمة، حيث تحتوي مواقع الويب على نصوص بلغات مختلفة. ليعرض محركات البحث، باللغة التي تم كتابة النص بها وضبط الإعدادات الخاصة بك لغات مختلفة(أنواع علامات الاقتباس، على سبيل المثال) ويتم الإشارة إلى لغة النص كرمز. يتم استخدام السمة lang لتعيين اللغة (المثال 6).

مثال 6: استخدام السمة lang

لغة

عبارة باللغة الفرنسية

Je n "ai pas mange depuis six jours

في هذا المثال، تم تعيين الصفحة بأكملها على اللغة الروسية مع تعيين السمة lang على ru . لإظهار أن اللغة تنطبق على الصفحة بأكملها، تتم إضافة سمة إلى العنصر . بالنسبة للنص الفرنسي، تتم إضافة السمة lang ذات القيمة fr إلى العنصر

يمكن العثور على القيم الصالحة للسمة lang في هذه الصفحة.

وصف

يحدد الجانب الذي سيتم محاذاة العنصر إليه، مع التفاف العناصر الأخرى حوله على الجوانب الأخرى. عندما تكون قيمة الخاصية float هي لا شيء، يتم عرض العنصر على الصفحة كالمعتاد، مع السماح بوجود سطر واحد من التفاف النص على نفس سطر العنصر نفسه.

بناء الجملة

تعويم: يسار | حق | لا شيء | يرث

قيم

left يقوم بمحاذاة العنصر إلى اليسار، وتلتف كافة العناصر الأخرى، مثل النص، حوله إلى اليمين. يمين يقوم بمحاذاة العنصر إلى اليمين، وتلتف جميع العناصر الأخرى حوله إلى اليسار. لم يتم تعيين التفاف العنصر. يرث يرث قيمة الوالد.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

يطفو

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem Nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et Accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. استخدام خاصية التعويم

نموذج الكائن

document.getElementById("elementID").style.styleFloat

document.getElementById("elementID").style.cssFloat

المتصفحات

يحتوي Internet Explorer 6 على خطأ يتعلق بمضاعفة قيمة المساحة المتروكة لليسار أو لليمين للعناصر العائمة المتداخلة داخل العناصر الأصلية. تتم مضاعفة المساحة المتروكة بجانب الوالد. عادةً ما يتم حل المشكلة عن طريق إضافة العرض: مضمّن إلى العنصر العائم. يضيف هذا المتصفح أيضًا حشوة بحجم 3 بكسل (ما يسمى "خطأ ثلاثي بكسل") في الاتجاه المحدد بواسطة القيمة العائمة.

لا يدعم Internet Explorer حتى الإصدار 7.0 القيمة الموروثة.

انتهت الملحمة الطويلة لكتابة مقال حول الخاصية "العائمة". على الرغم من أن الأمر استغرق الكثير من الوقت، إلا أنني أعتقد أنني تمكنت من الجمع بأكبر قدر ممكن من الوضوح بين جميع السلوكيات المتنوعة لهذه الخاصية القوية والغريبة إلى حد ما في نظام مشترك واحد.

بالإضافة إلى ذلك، تحتوي هذه المقالة على عدد قياسي من الرسوم التوضيحية بين "الكتاب المدرسي" بأكمله :-)

إن مصير الخاصية "float" في CSS يشبه إلى حد ما مصير علامة "table" في HTML: ولم يكن المقصود منها على الإطلاق أن تكون وسيلة لإنشاء أعمدة وتخطيط العناصر بشكل عام. ومع ذلك، بسبب بعض العيوب في آلية تحديد المواقع، يتم استخدام العوامات على نطاق واسع لهذا الغرض. وحقيقة أنه تم اختراعه لشخص آخر غالبًا ما تتجلى في تأثيرات مختلفة غير واضحة. ومع ذلك، قبل أن أريهم، سأخبرك كيف تطفو يستطيعالتقدم بطلب للحصول على التخطيط.

في البداية - ملاحظة صغيرة حول الشروط. لا يوجد مصطلح معروف لهذه الأداة باللغة الروسية (على الأقل حتى الآن). لذلك، أفضل أن أكتبها في تهجئتها الأصلية - "تعويم". يُقرأ شيئًا مثل "float" (لست بحاجة إلى كسر عظام وجنتيك بنطق "float"). في الوقت نفسه، أطلب منك على الفور أن تسامحني حريات مثل "تعويم" الفرخ "تعويم"، وما إلى ذلك. :-)

مبدأ التشغيل

مثل تحديد المواقع، يتم استخدام التعويم لتحريك الصناديق. ولكن على عكس تحديد الموضع، الذي يمكن أن يحرك المربعات بشكل اعتباطي تقريبًا، كل ما يمكن أن يفعله التعويم هو نقل عنصر إلى أي من جانبي التدفق، يمينًا أو يسارًا.

في الوقت نفسه، يكتسب المربع نفسه والأشخاص الذين يتبعونه في الدفق سلوكًا مثيرًا للاهتمام:

تعويم" يطفو الصندوق أفقيًا ويلتصق بأحد جوانب الصندوق الأصلي.
Float" لم يعد يتم توزيع الصندوق ذو الجوز على كامل عرض صندوق الحاوية الأصل (كما يحدث مع الكتل الموجودة في الدفق). مع عدم الضغط على جانبه الحر على الأصل، تظهر مساحة خالية.
التالية له حاجزيتم سحب الصناديق للأعلى وتأخذ مكانها، كما لو أن الصندوق العائم لم يكن في الدفق.
أحرف صغيرةتبدأ الصناديق الموجودة داخل الكتل التي تحركت للأعلى بالتدفق حول الصندوق العائم من الجانب الحر.

أريد التأكيد مرة أخرى على شيء غير واضح على الفور: يزحف مربع الكتلة نفسه الذي يتبع العوامة تحته ويحتل عرض الدفق بالكامل، لكن النص الموجود داخل هذه الكتلة ينتقل إلى الجانب ويلتف حول يطفو.

علاوة على ذلك، فمن المثير للاهتمام كيف تتصرف الصناديق العائمة التي تسير في اتجاه واحد واحدة تلو الأخرى. في هذه الحالة، سيحاول المربع التالي أن يتناسب مع جانب الصندوق السابق، على جانبه الحر. وفقط إذا لم يكن هناك مساحة كافية له، ثم سيتحرك للأسفل وسيحاول أن يتناسب هناك بالفعل.

هناك جانب تقني صغير آخر، ليس ضروريًا لفهم "الميكانيكا" بأكملها. يمكنك تعويم كل من مربعات الكتل والمربعات المضمنة، وفي الوقت نفسه، تصبح المربعات المضمنة على الفور مربعات كتل تلقائيًا، أي أن كتابة العرض: كتلة؛ لأن التعويم غير ضروري.

من بين ميزتي Float "s الموصوفتين - الضغط على الحافة والالتحام بجانب بعضهما البعض - يتبعهما تطبيقان رئيسيان في التخطيط:

تقسيم الصفحة إلى أعمدة
القوائم الأفقية

مكبرات الصوت

تحدث الأعمدة عندما تكون كتل النص بجوار بعضها البعض ولها نفس الارتفاع.

سأأخذ في الاعتبار جميع تخطيطات الأعمدة في كود HTML البسيط التالي الذي يتكون من كتلتين:

...

يجب أن يقال على الفور أن صنع الأعمدة في حاوية ممتدة العرض أصعب من عرض معين. هناك طريقتان مختلفتان بشكل أساسي، ومناسبتان لحالات مختلفة.

العرض النسبي

إذا كنت تريد أن يتغير عرض الأعمدة بشكل متناسب عندما يتغير عرض الصفحة، فإن الطريقة تكون كما يلي:

#content ( float:right; width:70%; ) #sidebar ( float:left; width:30%; )

أي أن كتلتين عائمتين "تتواجدان جنبًا إلى جنب في اتجاهات مختلفة، ويتم تقسيم عرضهما بالنسبة المئوية المطلوبة. وتسهل هذه الطريقة تبديل الأعمدة - فقط عن طريق تغيير القيم اليمنى واليسرى.

تمتد عمود واحد فقط

إذا كنت بحاجة إلى تغيير عرض العمود الرئيسي فقط، فإن الطريقة السابقة ليست مناسبة. والحقيقة هي أنه في CSS، لسوء الحظ، فمن المستحيل مباشرةلصياغة شيء مثل "كل العرض المتاح مطروحًا منه رقمًا محددًا".

لننتقل الآن إلى إحدى المقالات السابقة حول الكتل الموجودة في التدفق، حيث ذكرت إحدى ميزاتها المفيدة لتناسب عرض المربع الأصلي تلقائيًا. وهذا يعني أنه إذا تم إعطاء كتلة في التدفق الأمامي، على سبيل المثال، هامشًا أيسرًا، فإن عرضها سوف يتقلص وفقًا لذلك. وهذا هو بالضبط السلوك الذي أردنا تحقيقه من أحد الأعمدة.

لذا، للحصول على التأثير الذي نريده، سنعطي الكتلة الرئيسية هامشًا يسارًا بحيث يتقلص إلى اليمين، ويطفو الشريط الجانبي في مكانه:

#الشريط الجانبي ( تعويم: يسار؛ العرض: 200 بكسل؛ ) # محتوى ( هامش اليسار: 200 بكسل؛ )

لكن الطريقة الثانية لها عيب خطير للغاية. لاحظ أنه في HTML الأصلي، يتم وضع كتلة "الشريط الجانبي". قبلحظر "المحتوى" بالمحتوى الرئيسي. لا داعي للاعتقاد بأن ذلك تم عن طريق الصدفة :-). وقد تم ذلك عن قصد، وإلا فلن تنجح هذه الطريقة الثانية التي تحتوي على تراكب عمود أعلى الهامش.

كما كتبت في بداية المقال، فإن العوامات تتحرك فقط إلى الجانب وتفسح المجال للكتل التالية التي تتحرك لأعلى، لذلك، من المهم أن يكون "الشريط الجانبي" موجودًا بالفعل في الأعلى، ومن ثم ستتحرك الكتلة الرئيسية إذا جاء "الشريط الجانبي" بعد الكتلة الرئيسية، فسيظل في الأسفل، ولن يبدو مثل أي أعمدة.

هذا أمر سيء حقًا لأنه يقوض إحدى الأفكار الرئيسية لـ CSS: فصل التصميم عن المحتوى. اتضح أننا أردنا فقط تغيير التصميم، وإذا كانت الكتل موجودة "بشكل غير صحيح"، فسيتعين علينا أيضا الذهاب إلى قوالب HTML. بالإضافة إلى ذلك، من وجهة نظر البنية، قد تكون هناك أسباب وجيهة لترتيب الكتل بطريقة معينة وليس بطريقة أخرى. على سبيل المثال، حتى يتمكن المستخدم من البدء في قراءة النص الرئيسي للصفحة دون انتظار تحميل التنقل.

عرض ثابت

يتم تبسيط الأمور بشكل كبير عندما تتناسب الأعمدة مع حاوية ذات عرض ثابت. في هذه الحالة، من الأفضل استخدام الطريقة الأولى (تعويم" جميع الأعمدة)، ويمكن بالفعل تعيين العرض ليس فقط بالنسبة المئوية، ولكن بأي شيء تريده، حيث يمكن حسابه بالضبط.

ارتفاع مكبر الصوت

مرة أخرى، لم يكن من قبيل الصدفة أنني "قطعت" الجزء السفلي من الكتل في الصور :-). خلاف ذلك، فإنها لن تبدو وكأنها أعمدة على الإطلاق، لأنه، كما ترون، إذا قمت بتطبيق أجزاء CSS التي قدمتها ولون الأعمدة بألوان مختلفة، فسيكون ارتفاعها مختلفا. يعتمد ذلك على مقدار المحتوى الموجود في هذه الكتل.

يمكن التحايل على هذا التأثير القبيح بعدة طرق.

الطريقة الأولى تسمى "الأعمدة الزائفة"، والتي تم نشرها في مجلة الويب الموثوقة A List Apart في سبتمبر 2004 وحظيت بشعبية كبيرة منذ ذلك الحين. أنصح الجميع بقراءة النسخة الأصلية أو الترجمة الروسية. ومع ذلك، إذا لم تكن في مزاج يسمح لك بالنقر اليوم، فإليك ملخصًا موجزًا لجوهره.

بدلاً من تعيين خلفية للأعمدة نفسها، يتم تركها شفافة، ولكن يتم تعيين صورة خلفية لحاويتها بعرض الحاوية بأكملها وتتكرر عموديًا. تم رسم أجزاء من هذه الصورة، الموجودة تحت أعمدة مختلفة ألوان مختلفةوعندما يتم تكراره فإنه يعطي التأثير البصري المطلوب.

إن الشيء الرائع في الأعمدة الزائفة هو أنك لست مضطرًا إلى قصر نفسك على الألوان الصلبة في صورة الخلفية. على سبيل المثال، يمكنك رسم تأثير الظل بين الأعمدة، وتكرار الخطوط الأفقية كخلفية، وزخرفة على طول الحواف.

عيب هذه الطريقة هو أنه نظرًا لأن صورة الخلفية لها حجم واحد فقط، فلا يمكن استخدامها لتمديد الأعمدة بشكل متناسب، نظرًا لأن الصورة لن يتم تمديدها. ولكن بالنسبة للحالة التي يكون فيها أحد الأعمدة ثابتًا في العرض، يمكن تعديل الخلفية (هذه الحالة، بالمناسبة، لا يتم أخذها في الاعتبار في "الأعمدة الزائفة").

الهدف هو وضع صورة الخلفية فقط تحت العمود الذي يُعرف عرضه. سيتم احتلال بقية المساحة بالخلفية لونحاوية وليست صورة

لنأخذ مثالنا ونجعل عرض عمود "الشريط الجانبي" على اليمين 200 بكسل، ونترك "المحتوى" يتمدد. بالنسبة إلى "الشريط الجانبي"، سنقوم بإعداد صورة بأبعاد 200 × 1، على سبيل المثال، لون أزرق متساوي. وتحت "المحتوى" سنأخذ اللون الأصفر.

في الأنماط يبدو مثل هذا:

#الشريط الجانبي ( float:right; width:200px; ) #content ( Margin-right:200px; ) body ( الخلفية:url(bg.png) #FFD تكرار أعلى اليمين-y; )

تحدد القاعدة الوحيدة للحاوية (النص) جميع سلوكيات الخلفية:

تحديد عنوان URL للصورة (bg.png)
لون الخلفية في الأماكن التي لن يكون فيها (#FFD)
موضع الصورة المضغوطة على الحافة اليمنى (أعلى اليمين)
كرر الصورة لأسفل (كرر-ص)

في مثال حقيقيكان لدى CSS أيضًا بعض القواعد الخاصة بلون الحروف والتعامل مع الحدود، والتي أصبحت الآن غير ذات صلة.

هناك طريقة أخرى لموازنة ارتفاع الأعمدةتم وصفها مؤخرًا ومعروفة بالفعل بسبب ملاءمتها.

الفكرة من وراء ذلك هي إخفاء الارتفاعات المتفاوتة للأعمدة من خلال مدها للأسفل بشكل لا يصدق بحيث تكون نهاياتها خارج المحتوى الحقيقي للصفحة. لقد حققوا ذلك عن طريق وضع مسافة بادئة كبيرة جدًا (حشوة) على الأعمدة، والتي تم طلاءها بلون الخلفية. وحتى لا يتحرك باقي المحتوى كثيرًا هناك، يتم تعيين الأعمدة سلبيالحدود (الهامش) من نفس الحجم:

يرجع الرقم الغريب إلى أن هذا هو الحد الأقصى الذي يمكن أن يسمح به متصفح Safari. انها في الواقع ليست غريبة. لأي شخص يتساءل، هذا هو الحد الأقصى لعدد صحيح موقّع عند تمثيله بـ 16 بت.

ونتيجة لذلك، يتم إزاحة كل شيء بعد الأعمدة ويقع مباشرة أسفل محتوى أطولها، ويتم تمديد الأعمدة إلى الأسفل. هناك شيء واحد قبيح - بسبب الأعمدة الطويلة، تصبح الصفحة نفسها طويلة بنفس القدر. لمكافحة ذلك، تحتاج إلى ضبط الخاصية overflow:hidden على الحاوية الخاصة بها، مما يفرض على الحاوية قطعها ببساطة وعدم إظهار ما يتجاوز حدودها.

ومع ذلك، فإن مثالي، الذي أخذته في البداية، به عقبة واحدة. هناك، تقع الأعمدة مباشرة في الجسم. وإذا تم ضبط النص على overflow:hidden، فستقوم المتصفحات بإلغاء تمرير الصفحة بالكامل. حتى لو كان المحتوى الحقيقي فوق النافذة. لذلك، يجب تغليف الأعمدة بعنصر آخر، مثل div . ولكن من أجل العدالة، يجب أن أقول أنه في الممارسة العملية، يتم تغليف الأعمدة بالفعل بشيء ما.

كمين

أين الاستغناء عنها :-). كما لمحت بشكل غير واضح في البداية، نظرًا لعدم اختراع العوامات كوسيلة لإنشاء الأعمدة، فمن المؤكد أن هذا سيخرج بشيء قبيح ويعود ليطارد زيادة في استهلاك الأنالجين (البعض يفضل التيبالجين أو الباراسيتامول) .

و"اخرج" بالمعنى الحقيقي. دعونا ننقل مثالنا "المجرد" إلى مستوى أقرب قليلاً إلى الواقع عن طريق إضافة رأس فوق الأعمدة وبعض الكتل مع النص أدناه.

...

للتبسيط، سوف نختار تصميمًا عموديًا بسيطًا بعرض ثابت. لنجعل الرأس والكتلة السفلية باللون الأزرق بأحرف بيضاء، والمحتوى الرئيسي باللون الأبيض، والعمود الإضافي باللون الأزرق أيضًا، ولكنه أفتح قليلاً. سنقوم بتعيين ألوان الأعمدة باستخدام طريقة "الأعمدة الزائفة".

/* تخطيط العمود */ body ( العرض: 600 بكسل; الهامش: 0 تلقائي; ) #content ( float:left; width:450px; ) #sidebar ( float:right; width:150px; ) /* Colors */ #main ( الخلفية: url(bg.png) تكرار أعلى اليمين-y; ) #header, #footer ( الخلفية:#238; اللون:أبيض; )

لقد حذفت أي مسافات بادئة وخطوط مرة أخرى لسهولة الإدراك. أضف نص اختبار وقم بتشغيل:

حسنًا... حسنًا، يمكن رؤية الأعمدة بشكل عام! لا تتراجع! ومع ذلك، بغض النظر عما قد يقوله المرء، فإن كل شيء لا يبدو كما هو مخطط له، ويمكن للمرء أن يقول حتى أن كل شيء قد تحول إلى نوع من الفوضى من الزهور والحروف.

لفهم سبب حدوث ذلك، علينا أن نتذكر وصف كيفية عمل التعويم. أي أن الكتل التي تتبع العوامات تتوقف عن ملاحظة هذه العوامات ويتم سحبها للأعلى. علاوة على ذلك، فإن الحاوية نفسها، التي توجد فيها العوامات، تتوقف أيضًا عن ملاحظتها، وتسقط الكتل العائمة عبر قاع الحاوية إذا انتهت مبكرًا.

الآن دعونا نلقي نظرة على الكود الخاص بنا. كلا الكتلتين "المحتوى" و"الشريط الجانبي" موجودان داخل الكتلة "الرئيسية". ولا يوجد شيء آخر في "الرئيسية". وبما أنه لا يوجد شيء آخر ليحتويه، فإن ارتفاعه ينهار إلى الصفر! لذلك، لا يمكنك رؤيته أي لون أبيض في خلفية "المحتوى" في الصورة، ولا خلفية "الشريط الجانبي" باللون الأزرق الفاتح، لأنه تم تعيين هذه الألوان كخلفية "رئيسية".

التالي - "التذييل". هو، الذي يطيع نفس القاعدة، لا يرى أيضًا كتل الجوز العائمة ويتم سحبها مباشرة إلى العنوان نفسه (نظرًا لأن "الرئيسي" هو ارتفاع صفر). ولكن يوجد نص في "التذييل". يجب أن يكون هذا النص بالفعل يلتف حول العناصر العائمة: على "المحتوى" الأيمن وعلى "الشريط الجانبي" الأيسر. لا توجد مسافة متبقية بين الأعمدة، لذا يمكن أن يبدأ النص فقط تحت أحد الأعمدة التي تنتهي أولاً. ها هو. لذلك يتم سحب "التذييل" لأعلى أسفل العنوان ويستمر في الانخفاض حتى يختفي النص بالكامل. وكل هذه الخلفية الزرقاء الموجودة أسفل العنوان هي "التذييل" وهي كذلك.

لماذا هذا التعقيد

يجب أن يثير السلوك الموصوف الحيرة. لماذا كان من الضروري التوصل إلى مثل هذه التعقيدات: تقسيم مفهوم الكتلة بحيث تكون الألوان والإطارات في الأعلى، ويكون النص في مكانه؟ لكن بالطبع هذا منطقي. يعد هذا، بالإضافة إلى طي الحدود، محاولة لجعل نموذج مربع CSS يتصرف بشكل طبيعي في ظل ظروف تدفق النص البسيط. شرح كلاسيكي مفصل لهذه الظاهرة قدمه نفس إريك ماير في مقال "يحتوي على العوامات" (باللغة الإنجليزية). سأحاول أن أنقل الجوهر بإيجاز.

تخيل التدفق الطبيعي للفقرات - كتل النص - دون أي تحديد موضع. في إحدى الفقرات، هناك صورة تريد نقلها، على سبيل المثال، إلى اليسار بحيث يتدفق النص حولها. تم تحقيق ذلك سابقًا في HTML باستخدام خاصية align="left"، ولكن بروح نقل التصميم من HTML إلى الأنماط، لهذه الوظيفة، توصلوا للتو إلى الخاصية float. أي أنه بدلاً من محاذاة هذه الصورة، يتم تعيين float:left .

دع الصورة التي تم إزاحتها تشغل ارتفاعًا أكبر من نص الفقرة. إذا قامت بتمديد فقرتها ودفعت بداية الفقرة التالية إلى الأسفل، فسوف تبدو قبيحة بسبب زيادة تباعد الأسطر بين الفقرات المجاورة. ولذلك، فإنه يمر عبر جميع حدود الكتل، مع الاحتفاظ بمسافات بادئة جميلة بينها، ويتدفق النص حوله.

حلول

لذا، فإن سلوك التقصير أمر مفهوم، ولكنه مناسب للنص غير المحدد، وغير مناسب تمامًا للتخطيط. هناك طريقتان للقضاء على كلا مظهري هذه الخاصية: سحب الصناديق التالية لأعلى وإسقاطها عبر قاع الحاوية.

هناك خاصية خاصة للقضاء على سحب الكتلة - واضح. فهو يجعل العنصر يتحرك للأسفل حتى لا يتبقى أي عوامات على جانبه، علاوة على ذلك، يمكنك التحكم من أي جانب يجب ألا تكون هناك عوامات:

واضح: يتأكد اليسار من عدم وجود عوامات على اليسار واضح: يتأكد اليمين من عدم وجود عوامات على اليمين واضح: كلاهما يتأكد من عدم وجود عوامات على كلا الجانبين

وهكذا، إذا قلنا ل"تذييلنا":

#تذييل ( واضح: كلاهما؛ )

بحيث لا توجد أعمدة عائمة على يسارها ويمينها، فإنها ستتحرك للأسفل حيث ينتهي كل منهما.

لكن هذا لا يحل المشكلة الأخرى: أن العوامات تقع خلال "الرئيسي" وتنهار، مما يترك خلفية العمود المخصصة لها غير مرئية.

يمكنك وضع الحاوية بشكل صريح بطريقة ما. بقدر ما أفهم منطق المواصفات، يعتبر سلوك تجاوز الفشل منطقيًا فقط في سلسلة رسائل بسيطة. وفي حالات أخرى، فإنه يعيق الطريق. وهكذا هو كما رأينا. وهذا يعني أنه يكفي تعيين الحاوية، على سبيل المثال، الموضع: مطلق أو تعويم: على اليسار، ولن يسقط أي شيء، ستحتوي الحاوية بالكامل على كل من النص والعوامات. في حالتنا (وفي معظم الحالات، بواسطة الطريقة) هذا الحل مناسب تمامًا.

هناك طريقة أخرى مثيرة للاهتمام تتعلق بالتأثير الجانبي لخاصية الفائض. الغرض منه في حد ذاته هو تحديد كيفية تجاوز الحاوية عندما لا يمكن أن تحتوي على محتوياتها. وله أربعة معاني:

يمر المحتوى المرئي فوق الحافة ويكون مرئيًا عادةً (هذا هو السلوك الافتراضي) يتم قطع المحتوى المخفي خارج الحاوية ولا يكون مرئيًا هناك بأي شكل من الأشكال تلقائيًا إذا تجاوز المحتوى الحاوية، فهو يحتوي على شريط تمرير يسمح لك بالتمرير المحتوى، إذا لم يكن كذلك، فلن يظهر أي تمرير مثل تلقائي، فقط الحاوية تحتوي دائمًا على شريط تمرير، حتى عندما لا يتجاوز المحتوى ذلك

إذن هنا تأثير ثانويهو أنه إذا وضعت أي فائض على الحاوية، باستثناء المرئي المعتاد، فإنه يتمدد فجأة ويشمل العوامات التي تجلس فيه، مما يمنع الانهيار.

أي نوع من الفائض للاستخدام؟ يختفي التمرير على الفور - من الواضح أنه ليست هناك حاجة دائمًا لأشرطة التمرير المعلقة. ما تبقى هو تلقائي ومخفي، والذي يختلف فقط في ما إذا كان شريط التمرير سيظهر عند تجاوز السعة أم لا. لكن ليس لدينا أي فيضان، بل على العكس من ذلك، باستخدام هذه الخاصية أجبرنا الحاوية على التمدد أكثر بحيث تغطي جميع عناصرها. ولذلك، يمكن استخدام أي قيمة.

أحاول بشكل خرافي استخدام مخفي حتى لا تظهر أشرطة التمرير في حالة حدوث تجاوز مفاجئ بسبب بعض الأخطاء.

يحتوي الحل الفائض على عقبة واحدة تتعلق بسلوك Some Browser™. إنه يعمل فقط إذا تم تعيين عرض أو ارتفاع للحاوية بشكل صريح. ولهذا السبب، يكون استخدامها في بعض الأحيان غير مناسب عندما تحتاج إلى أحجام تلقائية بدلاً من الأحجام الصلبة.

لذا، في النهاية، لإصلاح مثالنا بالأعمدة، نحتاج إلى القيام بذلك:

#الرئيسي (العرض:100%؛ الفائض:مخفي؛)

بالمناسبة! إذا لم أستخدم أعمدة زائفة لرسم الخلفية تحت الأعمدة، ولكن طريقة الحشو الطويلة، فسيكون ذلك طالباستخدم الفائض: مخفي لـ "الرئيسي"، والذي يحل أيضًا مشكلة السقوط. ولكن بعد ذلك كيف سأتحدث عن ذلك؟

هذا كل شيء مع مكبرات الصوت... حان الوقت لتسكب لنفسك بعض الشاي اللذيذ (كثير من الناس يفضلون القهوة) وتضيف إليه بعض الكعك اللذيذ، توقف مؤقتًا لتضع كل هذه الفوضى في رأسك. بعد ذلك، نحن في انتظار إضافة صغيرة - حول القائمة.

قائمة طعام

اسمحوا لي أن أذكرك أنه إذا كانت هناك عدة كتل متتالية تطفو في اتجاه واحد، فستحاول كل كتلة تالية التوسع من الجانب الحر للكتلة السابقة، ويستخدم هذا التأثير على نطاق واسع لتحويل قوائم أقسام الموقع إلى قوائم أفقية.

لنأخذ هذه القائمة:

يبدأ
فهرس
سلة
مرجع

لجعلها تبدو وكأنها قائمة، تحتاج إلى تعويم "كل شيء إلى اليسار، وإزالة سمات القائمة منها (المسافات البادئة والرصاصية) وإضافة مسافات بادئة وخلفية وإطار للجمال:

/* التخطيط */ ul, li ( float:left; list-style:none; هامش:0; الحشو:0; ) /* view */ li ( الحشو:2px 10px; الخط: Bold Small Tahoma; الخلفية:#35C ; اللون: أبيض; الحدود: 1 بكسل مصمت; لون الحدود:#46F #238 #238 #46F; ) أ (اللون:أبيض; زخرفة النص:لا شيء;)

لاحظ أنه تم تعيين كافة خصائص التخطيط لكل من عناصر ul وli. ومن الملائم اختصار ذلك إلى قاعدة واحدة، للأسباب التالية:

هناك حاجة إلى float:left لعناصر القائمة بحيث تتوسع أفقيًا، وللقائمة نفسها حتى لا تسقط العناصر من خلالها؛
يعمل الهامش الصفري والحشوة على إزالة الحشو الذي تفعله المتصفحات للقوائم بشكل افتراضي، لكنها تفعل ذلك بشكل مختلف تمامًا، لذلك من الأسهل أن تقول "كل شيء صفر" بدلاً من تذكر ما يجب وضعه بشكل منفصل لكل عنصر.

الأخلاق

تعد آلية التعويم أداة تخطيط أخرى إلى جانب تحديد الموضع المطلق.

إنها تختلف للأفضل، مما يسمح لك بترك العنصر في التدفق، وهو أمر مناسب للغاية لتخطيط العمود.

ومع ذلك، فإن له مساوئ كونه أقل مرونة بسبب حقيقة أنه لا يمكن نقل العناصر بشكل تعسفي، ولأن القدرة على استخدامه قد تعتمد على ترتيب العناصر في ترميز HTML.

هذه المقالة جزء من دورة قيد الكتابة تحت عنوان العمل "الكتاب المدرسي". أوصي بقراءة المقالات الأخرى التي يمكن العثور عليها في فئة "الكتاب المدرسي"، حيث يتم جمعها الآن بترتيب زمني عكسي.

لقد اكتشفنا ذلك بالفعل. اكتشفنا أن لديهم المحتوى. ولكن هذا ليس كل شيء. تحتوي العلامات أيضًا على سمات تعمل على توسيع قدراتها، والسمات بدورها لها قيم. بمساعدتهم، يمكنك تعيين المعلمات للعنصر، وتحديد نمط التصميم. على سبيل المثال، العلامة

قمت بوضع علامة على فقرة. ولكن كيف يمكنك جعلها محاذاة إلى اليمين؟ للقيام بذلك، تحتاج إلى سمة معينة بقيمة مناسبة. كما أن بعض العلامات لا تحتوي على زوج، فيمكن استخدام بعض السمات بدون قيم.

كيفية كتابة الصفات؟

السمات هي كلمات محجوزة (مثل العلامات، فقط بدون أقواس زاوية)، ولكن يمكن أن تكون قيمها مختلفة. تمامًا مثل العلامات، يتم تشجيع السمات القيمة على الكتابة بأحرف صغيرة، على الرغم من أن المتصفحات عمومًا لا تهتم - إنها مجرد قاعدة عامة. اخلاق حسنه: باللغة الروسية، لا يُسمح أيضًا بالكتابة باستخدام مفتاح CAPS LOCK. لماذا HTML أسوأ؟

تتم كتابة القيم ذات السمات بالتنسيق التالي:

السمة = "القيمة" لانج = "ar"

يجب دائمًا كتابة السمات داخل العلامة الافتتاحية، بعد الكلمة المحجوزة.

فقرة

عادة، هناك سمات متعددة متاحة لعلامة واحدة. لا يهم في أي ترتيب تم إدراجها.

الصفات العامة

تحتوي كل علامة HTML على مجموعة من السمات الخاصة بها. قد تكون بعض السمات متاحة على علامات متعددة، بينما قد يعمل البعض الآخر على علامة واحدة فقط. هناك أيضًا مجموعة من السمات العامة (العالمية) التي يمكن استخدامها مع أي علامة. دعونا نلقي نظرة سريعة على سمات هذه الفئة.

مفتاح الوصوليسمح لك بتعيين اختصار لوحة المفاتيح للوصول إلى كائن صفحة معين. على سبيل المثال، يمكنك إجراء ذلك باستخدام اختصار لوحة المفاتيح البديل+1قام المستخدم بالنقر على رابط محدد. وبالتالي تطوير نظام الملاحة بلوحة المفاتيح.

يمكن أن تكون قيمة السمة أرقامًا من 0 إلى 9 أو أحرف الأبجدية اللاتينية:

سيتم فتح الرابط بالضغط على اختصار لوحة المفاتيح بواحد

فصليسمح لك بربط علامة بتصميم CSS محدد مسبقًا. يتيح لك استخدام السمة تقليل التعليمات البرمجية بشكل كبير، لأنه بدلا من تكرار إدخال نفس كتلة CSS، يمكنك ببساطة إدخال اسم الفئة المقابلة لها.
باستخدام com.contenteditableيمكنك السماح للمستخدم بتحرير أي عنصر في صفحة HTML: حذف النص وإدراجه وتغييره. نفس السمة تجعل من الممكن التعديل والتعطيل. هناك قيمتان فقط: حقيقي- السماح بالتعديل خطأ شنيع- يحظر.
مع السمة قائمة السياقيمكنك منح أي عنصر من عناصر المستند عناصر قائمة سياق فريدة من اختيارك. يتم إنشاء القائمة نفسها في العلامة ، ويتم إعطاء سمة قائمة السياق معرفها.
ديريحدد اتجاه النص: من اليسار إلى اليمين (لتر)أو من اليمين إلى اليسار (رتل).
قابلة للسحبيسمح لك بحظر (خطأ شنيع)أو السماح (حقيقي)يمكن للمستخدم سحب عنصر الصفحة الذي يتمتع بهذه السمة.
منطقة الإسقاطيخبر المتصفح بما يجب فعله بالعنصر المسحوب: Copy(value ينسخ)، يتحرك ( يتحرك) أو أنشئ رابطًا إليه (وصلة).
مختفي- سمة تسمح لك بإخفاء محتوى العنصر بحيث لا يتم عرضه في المتصفح. إذا تم تعيين السمة على خطأ، فسيتم عرض الكائن، صحيح - مخفي.
بطاقة تعريفيضبط معرف العنصر - وهو نوع الاسم المطلوب لإجراء تغيير بسيط في نمط الكائن، وكذلك حتى تتمكن البرامج النصية من الوصول إليه. ستكون قيمة السمة هي اسمها. يجب أن يبدأ بحرف لاتيني، ويمكن أن يحتوي على أرقام وحروف من نفس الأبجدية اللاتينية (الكبيرة والصغيرة)، وكذلك الواصلات (-) ويؤكد (_) . لا يمكن أن تحتوي الحروف الروسية.
لغةيساعد المتصفح على فهم اللغة التي تمت كتابة المحتوى بها وتصميمه وفقًا لذلك (على سبيل المثال، يمكن استخدام علامات الاقتباس المختلفة في اللغات). القيم هي رموز اللغة (الروسية - أون، إنجليزي - أونوما إلى ذلك وهلم جرا.).
التدقيق الإملائييشمل (حقيقي)أو تعطيل (خطأ شنيع)التدقيق الإملائي. من المفيد بشكل خاص استخدام السمة في علامات حقول النموذج حيث سيقوم المستخدم بإدخال النص.
أسلوبيسمح لك بضبط مظهر العنصر باستخدام كود CSS.
tabindexيجعل من الممكن تحديد عدد المرات التي سيضطر فيها المستخدم إلى الضغط على مفتاح Tab حتى يتم التركيز على الكائن الذي يحمل هذه السمة. يحدد عدد النقرات قيمة السمة - وهو عدد صحيح موجب.
عنوان- تلميح أداة سيظهر إذا قمت بتحريك الماوس فوق العنصر وتركه بلا حراك لفترة من الوقت. ستكون السلسلة الموجودة في القيمة هي التلميح.

يترجميسمح (نعم)أو يحرم (لا)ترجمة محتوى العلامة.
محاذاةيضبط محاذاة العنصر. على سبيل المثال، يمكن استخدامه لمحاذاة النص إلى اليسار (value غادر)، على الجانب الأيمن ( يمين)تمركزت (مركز)أو حسب العرض (يبرر). للصور (العلامة ) متاح أيضًا للمحاذاة مع الجزء العلوي من العنصر الأطول في الصف ( قمة)، على طول الحد السفلي (قاع)، والقيمة الوسطى تجعل السطر الأوسط من الصورة يتطابق مع الخط الأساسي للخط.

ومن الجدير أن نأخذ في الاعتبار أن استخدام السمة محاذاةغير مستحسن، ومحاذاة النص أفضل مع CSS.

مثال على استخدام السمات

على سبيل المثال، فكر في سطر من تعليمات HTML البرمجية:

يمكن تحرير هذا النص

يقوم السطر بأكمله بإنشاء فقرة نصية يمكن للمستخدم تحريرها في المتصفح.

دعونا نحلل كل عنصر من عناصر السلسلة.

- العلامة الافتتاحية للحاوية التي تخزن الفقرة.

- علامة الإغلاق.

بين الشخصيات > و < النص الموجود يمكن تحرير هذا النص. وهذا نقش خارج العلامات (بينهما)، مما يعني أنه سيكون مرئيًا للمستخدم الذي فتح الصفحة. يعامله المتصفح كنص عادي يجب عرضه على الشاشة.

com.contenteditable=”حقيقي" - هذه هي السمة وقيمتها. تذكر كيف في المدرسة: x=3. وكذلك هنا: com.contenteditable=”حقيقي". يصف com.contenteditableيحدد ما إذا كان المستخدم سيتمكن من تحرير محتوى العنصر أو القيمة حقيقي، مكتوبة بين علامتي تنصيص مفصولتين بعلامة يساوي، ويسمح التحرير بما يلي:

السمة = "القيمة" contenteditable = "صحيح"

معلومات مختصرة

الرموز

	وصف	مثال
<тип>	يحدد نوع القيمة.	<размер>
أ & ب	يجب أن يتم إخراج القيم بالترتيب المحدد.	<размер> && <цвет>
أ \| ب	يشير إلى أنه يجب اختيار واحدة فقط من القيم المقترحة (A أو B).	عادي \| قبعات صغيرة
أ \|\| ب	يمكن استخدام كل قيمة بمفردها أو بالاشتراك مع قيم أخرى بأي ترتيب.	العرض \|\| عدد
	قيم المجموعات	[ اقتصاص \|\| يعبر]
*	كرر صفر مرات أو أكثر.	[,<время>]*
+	كرر مرة واحدة أو أكثر.	<число>+
?	النوع أو الكلمة أو المجموعة المحددة اختيارية.	أقحم؟
(أ، ب)	كرر على الأقل A، ولكن ليس أكثر من B مرات.	<радиус>{1,4}
#	كرر مرة واحدة أو أكثر مفصولة بفواصل.	<время>#

قيم

رمل

لم يكن ويني ذا بوه ينفر دائمًا من تناول القليل من المرطبات، خاصة في الساعة الحادية عشرة صباحًا، لأنه في ذلك الوقت كان الإفطار قد انتهى منذ فترة طويلة، ولم يكن العشاء يفكر حتى في البدء. وبالطبع، كان سعيدًا للغاية عندما رأى الأرنب يأخذ أكوابًا وأطباقًا.

صورة (تعويم: لا شيء؛)

مثال

يطفو

إن السلوكية، مهما بدت متناقضة، تنير الحافز المتسامي، على سبيل المثال، استخدم ريتشارد باندلر التغيير في الطرائق الفرعية لبناء حالات فعالة.

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. استخدام خاصية التعويم

نموذج الكائن

شيء.style.cssFloat

ملحوظة

تخصيص

تمر كل مواصفات بعدة مراحل من الموافقة.

التوصية (التوصية) - تمت الموافقة على المواصفات من قبل W3C ويوصى بها كمعيار.
توصية المرشح ( توصية ممكنة) - المجموعة المسؤولة عن المعيار مقتنعة بأنه يحقق أهدافه، ولكن دعم مجتمع التطوير مطلوب لتنفيذ المعيار.
التوصية المقترحة ( التوصية المقترحة) - في هذه المرحلة، يتم تقديم الوثيقة إلى المجلس الاستشاري W3C للموافقة النهائية.
مسودة العمل - مسودة أكثر نضجًا بعد المناقشة والتعديلات لمراجعة المجتمع.
مسودة المحرر ( مسودة تحريرية) عبارة عن نسخة مسودة للمعيار بعد إجراء التغييرات بواسطة محرري المشروع.
مسودة ( مسودة المواصفات) هي النسخة المسودة الأولى للمعيار.