دقة CSS

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

توجيه النص

من خلال ضبطتوجيه النص، لتوجيهالكتلةالنص داخل العنصر.

h1 {
　　　　text-align: center;
}
p {
　　　　text-align: left;
}

يرجى الرجوع إلىCSS Textدليل، للحصول على معلومات إضافية حول تنسيق النص.

استخدام خاصية margin لتوجيه الوسط

الكتلةتوجيه مركز العنصر هو واحد من أكثر معاني خاصية margin في CSS. على سبيل المثال، يمكن تحديد توجيه الـ <div> لتكون في الوسط الأفقي عن طريق ضبط الهوامش اليسرى واليمنى على auto.

div {
　　　　width: 50%;
　　　　margin: 0 auto;
}

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

استخدام خاصية position لتوجيه العناصر

CSS positionاستخدام properties مثل left، مع top، و bottom يمكن تحديد التوجيه العنصرية للعناصر بناءً على نافذة المستند أو الإبقاء على الأب

.up {
　　　　position: absolute;
　　　　top: 0;
}
.down {
　　　　position: absolute;
　　　　bottom: 0;
}

للحصول على معلومات إضافية حول تثبيت العناصر، يرجى الرجوع إلىتثبيت CSSدليل.

استخدام خاصية float للتحديد من اليسار أو اليمين

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

لذا، إذا تحرك العنصر إلى اليسار، فإن المحتوى سيجري العبور إلى اليمين. عكس ذلك، إذا تحرك العنصر إلى اليمين، فإن المحتوى سيجري العبور إلى اليسار.

div {
　　　　width: 200px;
　　　　float:  اليسار;
}

تنظيف الفواصل

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

ستشاهد

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

تصحيح انحناء الوالد

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

الحل 1: تحريك القالب

أبسط طريقة لحل هذه المشكلة هي تحريك الوالد الذي يحتوي على الت浮动.

.container  {
　　　　float:  اليسار;
　　　　background:  #f2f2f2;
}

الحل 2: استخدام Div فارغ

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

.clearfix  {
　　　　clear:  كلاهما;
}
/*  شفرة نصية html  */

يمكنك أيضًا تنفيذ هذا عبر العلامات، ولكن لا يُنصح باستخدام هذا الأسلوب لأنه سيضيف رمزًا غير语义 إلى التسمية.

الحل 3: استخدام رمز المضلل :after

الـ :after الرمز المضللمع الاتحادالمحتوىقد تم استخدام الممتلكات بشكل واسع لتشكيل مشاكل تحديد الفواصل.

.clearfix:after  {
　　　　content:  ".";
　　　　display:  مربع;
　　　　height:  0;
　　　　clear:  كلاهما;
　　　　visibility:  غير مرئي;
}

النوع .clearfix ينطبق على أي قالب يحتوي على أبناء مطفون.