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

مثال 2: عرض الطبقة

ونتيجة لهذا المثال، سوف نحصل على طبقة بعرض 342 بكسل. في التين. يوضح الشكل 1 ما يتكون منه عرض الطبقة.

الشكل 1. عرض عنصر الكتلة

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

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

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

مثال 3. عرض الطبقة بالنسبة المئوية

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

أرز. 2. عرض عرض الطبقة في المتصفح

تم ضبط عرض الطبقة الأولى في هذا المثال (layer1) على 100%، مما يؤدي إلى عرض شريط تمرير أفقي. بالنسبة للطبقة الثانية (layer2)، يتم تعيين العرض أيضًا على 100%، ولكن يتم تحديد الهوامش للفقرة الداخلية (العلامة

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

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

ارتفاع

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

لنفترض أنه تم تعيين طبقة على ارتفاع البكسل، ومن الواضح أن محتويات الطبقة أكبر من الارتفاع المحدد (المثال 4).

المثال 4: ارتفاع الطبقة

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

أرز. 3. حظر الارتفاع في المتصفحات المختلفة

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

لون الخلفية

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

أرز. 4. مساحة الطبقة المملوءة بلون الخلفية

وبالتالي، لا يشارك الهامش في تكوين المنطقة الملونة.

الحدود

نظرًا للاختلاف في أساليب المتصفح عند تكوين عناصر الكتلة، هناك أيضًا اختلاف في عرض الحدود. يقوم متصفح Internet Explorer 7 برسم الإطار داخل الكتلة، ويقوم Firefox برسم الإطار خارجها. ولكن إذا استخدمنا تعبئة الخلفية، فسنرى صورة معاكسة تمامًا (الشكل 5). وكل ذلك لأن Firefox (Opera) يقوم بتعيين لون الخلفية على طول الحافة الخارجية للحدود، ويقوم Internet Explorer بتعيينه على طول الحافة الداخلية. بدءًا من الإصدار 8.0، قام Internet Explorer بتغيير أسلوب عرض الإطار؛ حيث تم رسمه داخل كتلة، تمامًا كما هو الحال في Firefox.

أ. إنترنت إكسبلورر 7

ب. فايرفوكس، إنترنت إكسبلورر 8+

أرز. 5. عرض الإطار في المتصفحات

يوضح المثال 5 كيفية إنشاء التعليمات البرمجية للحصول على مثل هذا الحد.

مثال 5: إطار منقط

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

ملخص

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

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

في المقالة الأولى حول HTML، قدمت قائمة بالعلامات التي، في رأيي، يحتاج مصمم التخطيط إلى معرفتها. العلامات المتبقية، في الواقع، زائدة عن الحاجة أو حتى زائدة عن الحاجة، في رأيي. أود في هذه المقالة أن أتحدث عن أساسيات html وhtml، والرأس، والعنوان، وعلامات النص، بالإضافة إلى div وspan. هذه العلامات، في رأيي، هي أساس جيد لبدء تعلم HTML.

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

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

كالعادة في مثل هذه الحالات، نقوم أولاً بتوضيح خطة الدرس:

1. قواعد عامة
2. هيكل الوثيقة

قواعد عامة

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

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

الآن عن العلامات. يمكن إقران العلامات أو مفردة. يتم أيضًا تقسيم العلامات المقترنة إلى علامات كتلة وعلامات مضمّنة. يُطلق على زوج من العلامات أحيانًا اسم الحاوية.

كما يمكنك تخمين، العلامات المقترنة لها زوج، والعلامات الفردية قائمة بذاتها. يتكون زوج العلامات من علامة الفتح والإغلاق. العلامات الفردية هي علامات فتح وإغلاق.

مثال على الحاوية (العلامات المقترنة):

مثال على علامة واحدة

نص سطر واحد
هذا النص موجود بالفعل على سطر آخر

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

حظر والعلامات المضمنة

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

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

خطأ:

هناك شيء آخر أريد أن أذكره: يمكن أن تحتوي العلامات على سمات. تحدد السمة سلوكًا معينًا أو تكمل العلامة بطريقة ما. تتم كتابة السمة مباشرة في العلامة، مفصولة بمسافة عن اسمها، بالتنسيق: ATTRIBUTE_NAME="VALUE[measure]". ATTRIBUT_NAME وVALUE، أعتقد أنهما واضحان. المقياس هو تسمية لوحدات القياس. إذا لم تكن هناك وحدة قياس، فلا داعي لاختراع واحدة.

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

أعتقد أن هذا كل ما أردت قوله بشكل أساسي. بحيث يتيح الحصول عليه!

هيكل الوثيقة

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

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

يجب تضمين جميع محتويات المستند الأخرى في حاوية html. الوثيقة مقسمة إلى قسمين. واحد يحمل وظيفة التحكم ومعلومات إضافية للمتصفح. والآخر هو معلومات للمستخدم. يسمى جزء التحكم ، والمحتوى -

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

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

وبالتالي، فإن أبسط مستند HTML يبدو كالتالي:

وهنا نص الوثيقة

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

دعنا ننتهي من النظر إلى علامات المستند الرئيسية وننتقل إلى علامات عرض المحتوى.

علامات للفصل المنطقي للمحتوى

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

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

لا تخف من سمة النمط غير المألوفة والكلمات غير المفهومة الموجودة فيها (هل هي حقًا غير مفهومة إلى هذا الحد؟). كان من الأفضل إظهار حاوية div مع هذه السمة. في أغلب الأحيان، في التخطيط الصحيح، يتم استخدام سمات المعرف والفئة للحاويات، والتي تعمل على ربط العلامة بـ CSS أو تعريفها لـ JavaScript. لكن هذا يتقدم على أنفسنا ;)

حاوية div هي عنصر كتلة. لكن هذا السلوك سهل التغيير.

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

الحد الأدنى

في هذه المقالة، تعرفنا على القواعد العامة لـ html، وتعلمنا عن الحد الأدنى من بنية مستند html، وعن العلامات المقترنة وغير المقترنة، وعن الحاويات المجمعة والمضمنة. لقد رأينا الفرق بين أنواع الحاويات المختلفة، وتعرفنا أيضًا على الحاويات المنطقية div وspan.

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

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