تصميم قالب مدونة بلوجر ( الدرس الخامس )

خصائص الصناديق container في قالب بلوجر

في هذا الدرس سنتعرف على الأكواد التي تتحكم في خصائص الأقسام أو الصناديق containers، وسنقتصر على صندوقين على سبيل المثال لا الحصر وهما:
الصندوق الرئيسي أو الجزء الرئيسي :Main .
وصندوق المواضيع Post .
ومعلوم أن الصندوق الأخير يقع داخل الصندوق الأول.
بمجرد التعرف على الأكواد التي تتحكم في خصائص هذين الصندوقين، سيسهل عليك حتما فهم أكواد باقي الصناديق لأن هذه الأكواد تتكرر في كل صندوق تقريبا:
وهذه أكودا الصندوقين :

#main {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

min-width: 400px;

max-width: 400px;

background: $mainbgColor;

color: #111111;

font: $textFont;

}

.post {

margin: 0px 20px 10px 0px;

padding: 10px 20px 10px 2px;

line-height: 1.5em;

text-align: left;

background: $postbgColor;

}

ومن خلال الأكواد أعلاه سنتعرف في هذا الدرس على ما يلي :
*الهوامش الخارجية أو الحاشية : Margin.
*الهوامش الداخلية أو الحشو : Padding.
*العرض الأدنى : Min-width.
*العرض الأقصى: Max-width.
*الخلفية : background.
*اللون : Color.
*محاذاة النص : Text-align.
*المسافة بين السطور: Line-heihgt.
فكلمة #main هي العنوان الذي تندرج تحته كل الأكواد التي يتكون منها الصندوق الرئيسي Main وهذه الأكواد يجب أن تكون محصورة بين لامتين { } ، وفيما يلي شرح لمدلولات الأكواد أعلاه وسنبدأ باكواد Main .

الهوامش الخارجية أو الحاشية : Margin:

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

margin: 0px 0px 0px 0px;

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

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

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

الهوامش الداخلية أو الحشو :padding :
وهو يحدد المسافة في الصندوق بين محتوياته من العناصر وبين الإطار، فهو يحدد موضع العنصر داخل الصندوق الذي يوجد فيه .
العرض الأدنى : Min-width، والعرض الأقصى : Max-width: ومعنى width هو العرض، وهو يحدد عرض العنصر وتوجد أمامه قيمته بالبيكسل.
الخلفية Background: وتحدد خلفية العنصر، وقد تكون عبارة عن لون يحدد بواسطة الرمز الدال عليه، أو يكون عبارة عن صورة صغيرة تتكرر حتى تغطي كامل الخلفية . وسنشرح كيفية ذلك في الدروس التطبيقية التي سنختم بهذه السلسة إن شاء الله.
اللون : Color:
ويحدد لون العنصر، تحدد الألوان بواسطة اكواد، إذ لكل لون كوده الخاص به بحسب نظام الألوان المستعمل .
الخط : font:
ويحدد نوع الخط الذي تريد أن تظهر به نصوص المدونة .
محاذاة النص : Text-align:
ويضبط محاذاة النص فبالنسبة للغة العربية يجب أن تكون قيمته right : ولهذه الخاصية دور كبير في تعريب قوالب بلوجر، وسنشرح ذلك لاحقا .
Line-height:
ويحدد المسافة بين سطرين .
ويجب أن تعلم أننا اقتصرنا على قسمين أو صندوقين في هذه الحلقة وهما Main و post، على سبيل المثال لا الحصر لأن هذه الأكواد تتكرر تقريبا قي باقي الأقسام والصناديق كلها .
وإلى حد الآن ما زلنا في الأساسيات ، وأهم ما تعلمناه في هذا الدرس هو خاصيتي Margin و padding.