لا يخلو أي موقع منها , وظيفتها الأساسية هي تنسيق صفحات الويب من خلال المظهر العام للموقع ، حيث يتم التخصيص والتعديل على أجزائه كاملََا مثل الخلفية والألوان والروابط ولون النص وشكله وحجمه , وكذلك الأبعاد الطول والعرض والحدود وهي تعنى بالتصميم الظاهري , وهي مكملة وصديقة لأكواد HTML.
هنا سنتطرق بشيء من التفصيل الغير معقد يتناول شرح أهم الوظائف والعناصر الأساسية التي تحتاج فهمها للتعامل مع لغة CSS , الأساس واحد سواء تعلمتها في منصة بلوجر أو ووردبريس أو أي مصدر كان تستطيع التعامل مع هذه اللغة في جميع المنصات إذا تعلمتها وأتقنتها لمرة واحدة فقط , وإذا كنت متمكنََا من اللغة الإنجليزية تكون قد وفرت نصف الوقت والجهد.
مهم قبل البدأ:
لا تتعجل الفهم في البداية , فقط واصل القراءة بتمعن , فعند وصولك لنهاية الموضوع ستتمكن من ربط المعلومات ببعضها وستتضح لك الصورة بشكل كامل.
لنبدأ:
الشرح هنا على مدونات منصة بلوجر ,, حيث أن معظم القوالب تبدأ بالوسم body:
} body
background:#
;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
text-align: center;
}
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
text-align: center;
}
هذا الجزء يضم الأكواد أو الأوسمة التي ستحدد لنا شكل الـ body بالتحديد ,
الأوسمة التي ستحدد لنا كل هذا كما ترى محصورة بين العلامتين { و } وهذا النظام هو المتبع والذى ستلاحظه في بقية الأكواد.
لكن ما هو الـ body الذى سنحدد شكله ؟
أجزاء المدونة عبارة عن:
1- رأس head
2- جزء رئيسي main
3- إطار جانبي , واحد أو أكثر sidebar
4- ذيل footer
هذه الأربعة أجزاء موجوده داخل ما يسمى بالـ container , والـ conatainer موجود بدوره داخل الـ body .
نأتي لكل كود وقيمته على حده:
margin:0px 0px 0px 0px;
لاحظ الاتى :
1 - الصندوق الخاص بمنطقة الـ body ككل بدايته علامة } ونهايته علامة {
2 - يتبع كل كود مثل كلمة margin علامة نقطتان : ويتبع قيمة الوسم علامة ; لاحظ الفرق في الشكل .
3 - هذا النظام هو المتبع والذى ستلاحظه فى بقية الصناديق الأخرى الموجودة بمنطقة الرأس head .
ما معنى margin ؟
معناها " حد " من جميع الجهات الأربعة , تصور مثلا صورة داخل برواز , البرواز سمكه 3 سنتيمتر , البرواز هو حد الصورة من جميع الجهات , إذن حد الصورة هو 3 سنتي من اعلى و 3 سنتي من أسفل ومن اليمين ومن اليسار.
ما هي قيمة هذا الكود ؟
القيمة المكتوبة هنا هي " صفر " في الأربع اتجاهات , هذا يعنى انه لن يوجد حد لـ body من اي جهة , وهذه القيمة قابلة للتغيير.
ملاحظة هامة جدا:
أول صفر يمثل الجهة العليا
ثاني صفر يمثل الجهة اليمنى
ثالث صفر يمثل الجهة السفلى
رابع صفر يمثل الجهة اليسرى
لاحظ الدوران مع عقارب الساعه
ملاحظة اخرى:
قد تجد القيمة مكتوبه بهذا الشكل
margin: 0;
إذا لم تحدد قيمة أي جهة تحسب صفر إفتراضيا.
او من الممكن ان تجدها مكتوبه بهذا الشكل
margin:0 0 0 0;
او هذا الشكل
margin:0 5 0 3;
هنا ستجد حدا قدره 0 بالأعلى و 5 بكسل باليمين و 0 بالأسفل و 3 بكسل باليسار , الترتيب مثل دوران عقارب الساعة.
وقد تجده بهذا الشكل:
margin-left: 5px;
margin-right: 5px;
margin-up: 10px;
margin-bottom: 20px;
margin-right: 5px;
margin-up: 10px;
margin-bottom: 20px;
هنا تم تحديد مقدار الحد لكل جهة فى سطر منفصل.
الوسم التالي: اللون
color:#000;
هذا الكود لتحديد لون النص الموجود في منطقة الـ body والقيمة هي 000#. , وهو كود اللون الأسود , وهكذا نتعامل لإضافة الألوان بالكود الخاص لكل لون. إذا أردنا اللون الحمر نضع 7c0707# واللون الأزرق نضع 0c0aa8# ، وتستطيع معرفة كود الألوان بتثبيت هذه الإضافة colorzilla في متصفحك أو عن طريق برنامج الفوتوشوب.
الوسم التالي : نوع الخط
font:x-small Georgia Serif;
font-size:x-small;
الكود الخاص بحجم الخط وقيمته small يمكن تغييرها الى 17px
او يمكن تغييرها بقيمة محدده مثلا , وهذا افضل
font-size: 1.5em;
لاحظ التعامل مع حجم الخط بوحده em بخلاف الـ px التي هي اختصار لكلمة بكسل ويتم التعامل بها في الصور والحدود وخلافه من الأشياء التي سنتعرف عليها لاحقا.
الوسم التالي
text-align: center;
كود يحدد جهة محاذاة النص في منطقة الـ body وقيمته center وطبعا يمكن تغييرها الى اليسار left او اليمين right حسب المراد .
إنتهت الأكواد التى تتعلق بمنطقة الـ body , ولتتذكر دائما ان تلك المنطقة هي أرضية أجزاء المدونة كلها , أي أنه ربما لن تظهر لك أي تغييرات ملحوظة لأنها كما قلنا خلفية لأجزاء أخرى للمدونة.
تبقى لنا العناوين و " الأوسمة " التى توجد بمنطقة الرأس head سأذكرها تباعا مع مراعاة عدم التكرار:
| a:link { | a حرف يعبر عن الروابط , لذلك هذا العنوان هو بداية أكواد تحديد لون الروابط , اللينكات بغض النظر عن المنطقة المحددة |
| text-decoration:none; | وسم تحديد شكل اللينكات none القيمة أي لن تجد خطوط تحت اللينكات لو تريد خط غير القيمة الى underline |
| a:visited { | بداية أكواد تحديد لون اللينكات المزارة |
| a:hover { | بداية أكواد تحديد شكل ولون اللينك عند وقوف المؤشر عليه |
#header-wrapper { | غلاف منطقة الرأس بداية الأكواد الخاصة بمنطقة رأس المدونة |
| width:660px; | هذا الوسم يحدد العرض , القيمة بالبكسل |
| border:1px solid $bordercolor; | وسم وظيفته عمل بوردر , او برواز , القيمة هنا 1 بالبيكسل $bordercolor واللون نظام تحديد الجهات هو نفسه النظام المتبع اللى شرحناه فى margin الوسم راجع الشرح بالأعلى |
| background-position: center; | وسم وظيفته تحديد جهة المحاذاه للخلفية بمنطقة الرأس |
| #header h1 { | بداية الأكواد الخاصة بتحديد لون وشكل عنوان المدونة h1 |
| padding:15px 20px .25em; | هذا الوسم مهم جدااااااا : الترجمة الحرفية له (بطانة) نسميه نحن وسم الإزاحة للداخل. لكى تفهمه تخيل ان لديك برواز 30 فى 30 , وعندك صورة 20 فى20 داخل البرواز . ستجد للصورة إزاحة من كل الجهات لكي تضبط وضعها داخل البرواز ,هل تريدها فى المنتصف بالضبط ؟ أو فى الزاوية اليمنى ؟ وهكذا هي الإزاحه " أو التبطين " ستجد الصورة داخل البرواز من جميع الجهات فى المثال الموجود ستجد الآتي : إزاحة للداخل = "تبطين" 15 بيكسل من الجهة العليا وازاحة للداخل من الجهة اليمنى 20 بيكسل ومن الجهة السفلى إزاحة قدرها 0.25em ومن الجهة اليسرى صفر إزاحة إفتراضيا بغض النظر عن ماهو الشئ المزاح او المبطن اتمنى ان تفهموا جيدا هذا الوسم المهم جدااااااا |
| line-height:1.2em; | وسم وظيفته تحديد ارتفاع السطر , بالنسبة لعنوان المدونة او أي شئ اخر قد يقابلك |
| letter-spacing:.2em; | وسم لتحديد المسافة بين الحروف |
| #header .description { | بداية الأكواد التي تحدد لون وشكل نص وصف المدونة |
| max-width:700px; | الحد الأقصى للعرض المتاح لوصف المدونة , ممكن تحدد الطول أيضََا لو أردت height تغير الكلمة إلى width بدلا من |
#outer-wrapper { width: 660px; | هذه بداية الأكواد التي تحدد شكل برواز المدونة بمعنى : أن عرض المدونة هذه ( main + sidebar ) يساوى 660 بيكسل إذا أردت المدونة بعرض أكبر تغير فى القيمة هذه |
| #main-wrapper {width: 410px; | بداية الأكواد الخاصة بمنطقة الـ main وهذه المنطقة تظهرفيها التدوينات يوجد فيه فرق بين wrapper اللي معناها الحرفى: الغلاف main وبين اللي معناها " الجسم " اللى هو المحتوى الفعلي main لكن هذه ليست لـ sidebar إنما لـ إذا أردتها أعرض تغير القيمة المكتوبة لكن يجب تزيد قيمة الـ أيضََا outer-wrapper |
| float: right; | وسم يحدد مكان التواجد لمنطقة التدوينات |
| #sidebar-wrapper { | بداية الأكواد التى ستحدد شكل غلاف الإطارالجانبي , لاحظ ان هذا الغلاف وليس الإطار الجانبي الذى سيأتي لاحقا |
h2 { line-height: 1.4em; text-transform:uppercase; | بداية الأكواد التى ستحدد شكل العناوين الفرعية يوجد وسمين الاول يحدد ارتفاع السطر الثانى يحدد حالة الحرف كابتال أم سمول لو تريد سمول تكون القيمة lowercase |
| .sidebar { | بداية الأكواد التي ستحدد شكل المحتوى الفعلي للإطارالجانبي |
| .sidebar ul { | بداية الأكواد التي ستحدد شكل لينكات القائمة الغير مرتبة بمنطقة الاطار اختصار لكلمة unorderd list بمعنى القائمة الغير مرتبة وهذه في حال إضافة أو ماشابه link list |
| list-style:none; | وسم يحدد ستايل القائمة none وقيمته توجد قيم أخرى متاحه لكن للأسف ما تقدر تستعملها لأنها تحتاج متصفحات خاصة مثل النتسكيب |
| .sidebar li { | إختصار لـ list links أي اللينكات الموجود بأي قائمة |
| .sidebar .widget, .main .widget { | تحديد شكل القطع الموجودة فى منطقة الأطر والمنطقة الرئيسية أيضََا القطعة اسمها widget |
| .main .Blog { | المكان التي تظهر فيها التدوينات |
| .profile-img { | صورة البروفايل |
| .profile-data { | نص البروفايل |
| .profile-link { | لينك البروفايل |
| #footer { | منطقة ذيل المدونة |
| /** Page structure tweaks for layout editor wireframe */ | تركيب وبناء الصفحة layout او صفحة المخطوطات بمعنى ادق |
| /* Posts | الأكواد القادمة - التي تلي هذا العنوان - تخص منطقة التدوينات أي المنطقة التى تعرض فيها البوستات , بدءََا من عنوانها بالأعلى وحتى التعليقات بالأسفل |
| .post { | منطقة التدوين نفسها |
| .post h3 { | الأكواد الخاصة بعنوان التدوينة |
| .post-footer { | النص الموجود بنهاية كل تدوينة مثل: |
| .comment-link { | اللينك الخاص بالتعليقات |
| .post img { | الأكواد الخاصة بالصورالموجودة - ان وجدت - داخل التدوينات , كيف سيكون شكلها ؟ |
| /* Comments | الأكواد القادمة - التي تلي هذا العنوان - تتعلق بمنطقة التعليقات نفسها |
| #comments h4 { | عنوان كل تعليق على حده |
| .deleted-comment { | الأكواد الخاصة بالتعليق المحذوف بواسطة صاحب المدونة |
| #comments-block .comment-body { | جسم التعليقات الجزء الذي تظهر فيه التعليقات |
| #comments-block .comment-footer { | ذيل جزء التعليقات |
| #comments-block .comment-body p { | حرف p يعنى الخط الموجود فى المنطقة المذكورة قبله وهنا المنطقة هى منطقة جسم جزء التعليقات |
هذه أهم الأكواد الموجودة في أي قالب , حوالي 80% منها , لا أريد التفصيل أكثر حتى لا يبدوا الأمر أكثر تعقيدََا , هناك أكواد تغاضيت عن ذكر وظيفتها ربما لأنها ليست ذو وظيفة مهمة تذكر , أكتب في خانة التعليقات إستفسارك عن أي " كود او وسم " خاص تود أن تعرف وظيفته.
الفائدة المرجوة من هذا الشرح:
ليست التعديل على القيم أو حتى تغييرها فقط , بل خلق أوسمة جديده فى المكان الذى تريد.
مثلََا: تريد عمل خلفيه للإطار الجانبى ؟
إنسخ الوسم الخاص بالخلفية من أي مكان فى القالب وضعه في منطقة الاطار الجانبى , وحدد قيمته بنفسك , هذا طبعا ان لم يكن الوسم موجودا بالفعل , للتوضيح فقط.
إنسخ الوسم الخاص بالخلفية من أي مكان فى القالب وضعه في منطقة الاطار الجانبى , وحدد قيمته بنفسك , هذا طبعا ان لم يكن الوسم موجودا بالفعل , للتوضيح فقط.
أو تريد تكبير خط النص فى الاطار الجانبى ؟
إنسخ وسم تحديد حجم الخط من أي مكان فى القالب وضعه فى المكان المناسب.
وهكذا , أمثلة كثيرة لا يسعنى حصرها , فقط أحببت أن أنوهك بأنك قادرعلى إضافة أوسمة جديدة ومن ثم تعديلها في أي جزء من القالب.
إنسخ وسم تحديد حجم الخط من أي مكان فى القالب وضعه فى المكان المناسب.
وهكذا , أمثلة كثيرة لا يسعنى حصرها , فقط أحببت أن أنوهك بأنك قادرعلى إضافة أوسمة جديدة ومن ثم تعديلها في أي جزء من القالب.
وصلنا لنهاية الموضوع , أرجو أنك قد إستفدت.
وصل اللهم على نبينا محمد وآله وصحبه ..
ليست هناك تعليقات:
إرسال تعليق