الجملة على اليمين

الجملة باستخدام النهاية

ج فيه تعنل

لإنشاء خط أحمر، ما عليك سوى معرفة معلمة واحدة.

هذه هي خاصية المسافة البادئة للنص البسيطة.

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

#التفاف (العرض: الجدول؛) #الخلية (العرض: خلية الجدول؛ المحاذاة العمودية: الوسط؛)

الايجابيات

• يمكن للمحتوى تغيير الارتفاع ديناميكيًا (الارتفاع غير محدد في CSS).
• لا يتم قطع المحتوى إذا لم تكن هناك مساحة كافية له.

سلبيات

• لا يعمل في IE 7 أو أقل
• الكثير من العلامات المتداخلة

الطريقة الثانية

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

بما أن الارتفاع ثابت، يمكنك ضبط overflow:auto; بالنسبة لقسم يحتوي على محتوى، وبالتالي، إذا لم يكن المحتوى مناسبًا، فستظهر أشرطة التمرير.

#content ( الموضع: مطلق؛ الأعلى: 50%؛ الارتفاع: 240 بكسل؛ الهامش العلوي: -120 بكسل؛ /* ناقص نصف الارتفاع */ )

الايجابيات

• يعمل في جميع المتصفحات.
• لا يوجد تداخل غير ضروري.

سلبيات

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

الطريقة الثالثة

في هذه الطريقة، سنقوم بتغليف محتوى div بـ div آخر. فلنضبط ارتفاعه على 50% (الارتفاع: 50%؛)، والهامش السفلي على نصف الارتفاع (margin-bottom:-contentheight;). سيتم مسح المحتوى العائم ويتم توسيطه.

#floater( تعويم: يسار؛ الارتفاع: 50%؛ الهامش السفلي: -120 بكسل؛ ) #content( واضح: كلاهما؛ الارتفاع: 240 بكسل؛ الموضع: نسبي؛ )

الايجابيات

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

سلبيات

• لا أستطيع إلا أن أفكر في شيء واحد: أنه يتم استخدام عنصر فارغ إضافي.

الطريقة الرابعة.

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

#content( الموضع: مطلق؛ أعلى: 0؛ أسفل: 0؛ يسار: 0؛ يمين: 0؛ الهامش: تلقائي؛ الارتفاع: 240 بكسل؛ العرض: 70%؛ )

الايجابيات

• بسيط جدا.

سلبيات

• لا يعمل في إنترنت إكسبلورر
• سيتم قطع المحتوى بدون أشرطة التمرير إذا لم تكن هناك مساحة كافية في الحاوية.

الطريقة الخامسة

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

#content (الارتفاع: 100 بكسل؛ ارتفاع الخط: 100 بكسل؛)

الايجابيات

• يعمل في جميع المتصفحات.
• لا يقطع النص إذا لم يكن مناسبًا.

سلبيات

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

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

الآن بعد أن عرفت كيفية تحقيق المحاذاة العمودية للوسط، فلنقم بإنشاء موقع ويب بسيط سيبدو في النهاية على النحو التالي:

الخطوة 1

من الجيد دائمًا أن تبدأ بالترميز الدلالي. سيتم تنظيم صفحتنا على النحو التالي:

• #floater (لتوسيط المحتوى)
• #center (العنصر المركزي)
  • #جانب
    • #شعار
    • # التنقل (قائمة
    • #محتوى
  • #bottom (لحقوق النشر وكل ذلك)

  لنكتب علامة html التالية:

  شركة

  • بيت
  • منتجات
  • مدونة
  • اتصال
  • عن

  عنوان الصفحة

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

  تبسيط الأسواق المتخصصة المؤثرة بقوة من خلال الضرورات الممكنة. تهيمن الابتكارات المتميزة بشكل كلي بعد سيناريوهات مقنعة. يمكنك استعادة المعايير العالية في رأس المال البشري بسلاسة من خلال المنتجات المصنعة الرائدة. قم بتجميع المخططات المتوافقة مع المعايير بشكل مميز قبل الدوامات القوية. يمكنك إعادة الاستفادة بشكل فريد من جاهزية الويب المعززة مقابل المعلومات الجاهزة.

  العنوان 2

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

  
  
  

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

  إشعار حقوق النشر يذهب هنا

  Html، النص (الهامش: 0؛ الحشو: 0؛ الارتفاع: 100%؛) النص (الخلفية: url("page_bg.jpg") 50% 50% بدون تكرار #FC3؛ عائلة الخط: Georgia، Times، serifs؛ ) #floater ( الموضع: نسبي؛ تعويم: يسار؛ الارتفاع: 50%؛ الهامش السفلي: -200 بكسل؛ العرض: 1 بكسل؛ ) #centered ( الموضع: نسبي؛ واضح: يسار؛ الارتفاع: 400 بكسل؛ العرض: 80%؛ الحد الأقصى - العرض: 800 بكسل؛ الحد الأدنى للعرض: 400 بكسل؛ الهامش: 0 تلقائي؛ الحد: 4 بكسل صلب #666) #bottom (الموضع: مطلق؛ الأسفل: 0؛ اليمين: 0؛) #nav (الموضع: مطلق؛ اليسار: 0) ؛ أسفل: 0؛ الحشو: 20 بكسل؛

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

  الهامش السفلي للعنصر "العائم" يساوي ناقص نصف ارتفاع المحتوى (400 بكسل)، أي -200 بكسل؛

  يجب أن تبدو صفحتك الآن كما يلي:

  

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

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

  الخطوة 3

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

  #nav ul (نمط القائمة: لا شيء؛ الحشو: 0؛ الهامش: 20px 0 0 0؛ المسافة البادئة للنص: 0؛) #nav li (الحشو: 0؛ الهامش: 3px؛) #nav li a (العرض: كتلة؛ لون الخلفية: #e8e8e8؛ الهامش: 0؛ الحد السفلي: 1 بكسل صلب: يمين؛ المحتوى: ""؛ وزن الخط: عريض؛ تعويم: يمين؛ الهامش: 0 2 بكسل 0 5 بكسل؛ f8f8f8؛ لون الحد السفلي : #777; ) #nav li a:hover::after ( الهامش: 0 0 0 7px; اللون: #f93; ) #nav li a:active ( الحشو: 8px 7px 7px; )

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

  لاحظ أننا حددنا بعد ذلك أنه يجب تقديم الروابط كعناصر كتلة. الآن، عند عرضها، يتم تمديدها عبر العرض الكامل للعنصر الذي توجد فيه.

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

  

  الخطوة 4

  وأخيرًا وليس آخرًا، سنضيف بعض البراغي إلى تصميمنا لمزيد من الجمال.

  #centered (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 ( عائلة الخط: Helvetica, Arial, sans- serif; الحشو العلوي: 0؛ ) #الجزء السفلي (الحشو: 10 بكسل؛ حجم الخط: 0.7em؛ اللون: #f03؛) #logo (حجم الخط: 2em؛ محاذاة النص: المركز؛ اللون: #999؛) #logo قوي ( وزن الخط: عادي؛ ) # امتداد الشعار ( العرض: كتلة؛ حجم الخط: 4em؛ ارتفاع الخط: 0.7em؛ اللون: #666؛ ) p، h2، h3 ( ارتفاع الخط: 1.6em؛ ) أ (اللون: #f03;)

  في هذه الأنماط قمنا بتعيين زوايا مستديرة للعنصر #centered. في CSS3، سيتم ذلك عن طريق خاصية border-radius. لم يتم تنفيذ ذلك بعد في بعض المتصفحات، بخلاف استخدام البادئات -moz و -webkit لموزيلا فايرفوكس وSafari/Webkit.

  

  التوافق

  كما خمنت على الأرجح، المصدر الرئيسي لمشاكل التوافق هو Internet Explorer:

  • يجب أن يكون لعنصر #floater مجموعة عرض
  • يحتوي IE 6 على حشوة إضافية حول القوائم

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

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

  الطريقة الأولى - العمل المباشر مع HTML

  انها في الواقع بسيطة جدا. انظر المثال أدناه.

  محاذاة الفقرة إلى المركز.

  إذا كنت بحاجة إلى نقل أجزاء النص بطريقة مختلفة، فبدلاً من المعلمة "المركز"، أدخل القيم التالية:

  • ضبط - محاذاة النص لعرض الصفحة؛
  • الحق - على الحافة اليمنى.
  • اليسار - إلى اليسار.

  بالقياس، يمكنك نقل المحتوى الموجود في الرؤوس (h1، h2) والحاوية (div).

  الطريقة 2 و 3 - استخدام الأنماط

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

  كتلة النص.

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

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

  الخطوة 1. اكتب في الكود الرئيسي

  مادة نصية.

  الخطوة 2. في ملف CSS المضمن، أدخل الكود التالي:

  روفنو (محاذاة النص:المركز؛)

  ألاحظ أن كلمة "rovno" هي مجرد اسم فئة يمكن تسميتها بشكل مختلف. ويترك هذا لتقدير المبرمج.

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

  فقط بعض الأسئلة:

  • هل تقوم بمشروع معلوماتي غير ربحي؟
  • هل تريد أن يحتل موقعك الإلكتروني مرتبة جيدة في محركات البحث؟
  • هل تريد كسب الدخل عبر الإنترنت؟

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

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

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

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

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

  محاذاة النص إلى المركز

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

  • محاذاة النص:مركز؛

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

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

  محاذاة كتلة إلى المركز

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

  • الهامش:0 تلقائي؛

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

  

  محاذاة كتلة إلى اليسار أو اليمين

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

  • .يسار (تعويم: يسار؛)
  • .يمين(تعويم:يمين)

  إذا كان هناك أيضًا كتلة ثالثة يجب وضعها أسفل الكتلتين الأوليين (على سبيل المثال، تذييل الصفحة)، فيجب إعطاؤها الخاصية الواضحة:

  • .يسار (تعويم: يسار؛)
  • .يمين(تعويم:يمين)
  • تذييل (واضح:كلاهما)

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

  المحاذاة العمودية

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

  • المحاذاة العلوية - .child(vertical-align:top);
  • محاذاة المركز - .child(vertical-align:middle);
  • المحاذاة السفلية - .child(vertical-align:bottom);

  لا تؤثر محاذاة النص أو المحاذاة العمودية على عناصر الكتلة.

  

  المشاكل المحتملة مع الكتل المحاذاة

  في بعض الأحيان قد يؤدي توسيط div باستخدام CSS إلى حدوث مشكلة صغيرة. على سبيل المثال، عند استخدام التعويم: لنفترض أن هناك ثلاث كتل: .first و.sec و.third. الكتلتان الثانية والثالثة تقع في الأولى. تتم محاذاة العنصر ذو الفئة الثانية إلى اليسار، وتكون الكتلة الأخيرة محاذاة إلى اليمين. بعد التسوية، سقط كلاهما من التدفق. إذا لم يكن للعنصر الأصلي ارتفاع محدد (على سبيل المثال، 30em)، فلن يمتد بعد ذلك إلى ارتفاع الكتل الفرعية الخاصة به. لتجنب هذا الخطأ، استخدم "فاصل" - كتلة خاصة ترى .الثانية و.الثالثة. كود CSS:

  • .الثانية (تعويم: يسار)
  • .الثالث (تعويم: يمين)
  • .clearfix(height:0; واضح: كلاهما;)

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

  • .يسار (تعويم: يسار)
  • .يمين(تعويم:يمين)
  • .container:after(content:""; العرض:table; واضح:كلاهما;)

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

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

  

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