فهرس دورة css
نتمنى لكم التوفيق وارجو ان يكون الشرح مبسط وسلس ...
نهتم بالتصميم بشكل عام والويب بشكل خاص وننشر كل ما يخص التصميم من ادوات
دورة لغة سي اس اس css كاملة ومقسمة لسبع اجزاء .
نتمنى لكم التوفيق وارجو ان يكون الشرح مبسط وسلس ...
دورة css --الدرس السابع والاخير--
دورة css كاملة للمبتدئين
الدرس السابع
سوف نلقي الضوء الآن على ما يرى الناس أنه أعظم شيء في صفحات الأنماط المتعاقبة : التحديد و الطبقات . و إليك الخصائص التي ستساعدنا في ذلك :
1- position
2- left
3- top
4- width
5- height
6- overflow
7- visibility
8- clip
9- z-index
ملحوظة : مواصفات خصائص التحديد تم تطويرها بعد معظم خصائص صفحات الأنماط الأخرى ، و لذلك فالمتصفح IE 3 لا يدعم أي منها ، و بالتالي فأنت ليس لديك بالنسبة لخصائص التحديد و الطبقات سوى المتصفحان IE 4 و IE 5 .
الخاصية position :
H4 { position: absolute; left: 100px; top: 43px }
إذا كنت تتساءل الآن عن الأشياء التي تستطيع تحديد مكانها كما فعلنا بالفقرة في مثالنا السابق ، فإن الجواب سيكون : أي شيء ، فقرات ، كلمات محددة ، صور GIF أو JPG ، أفلام الكويك تايم .. إلخ . يمكنك تحديد موضع أي شيء في أي مكان .
تكلمنا حتى الآن عن التحديد المطلق absolute ، عندما تحدد مكان عنصر ما بصفة مطلقة absolute فهو يتحدد مكانه بصفة مستقلة عن أي كائن آخر في الصفحة ، و العنصر محدد المكان يرث الخصائص الأخرى أيضاً كنوع الخط و حجمه .. إلخ .
هل هناك أي بديل عن التحديد المطلق ؟ بالتأكيد ، هناك التحديد النسبي relative . التحديد النسبي يعني أن الموضع الذي تحدده لعنصر ما يكون بالنسبة إلى موضعه الطبيعي في مجرى الصفحة ، و إليك مثال على هذا :
I { position: relative; left: 40px; top: 10px }بالإضافة إلى القيم absolute و relative تستطيع أيضاً أن تستخدم القيمة static ، و هي تعني أن العنصر سوف يوضع في مكانه الطبيعي في الصفحة كما اعتدنا عليه بدون تحديد مكان خاص له .
التحكم في العناصر المحددة الأماكن :
بالإضافة إلى تحكمك في تحديد مكان الركن العلوي الأيسر للعنصر ، يمكنك أيضاً أن تتحكم في عرض و ارتفاع العنصر و ماذا سيحدث للمحتويات التي سوف تفيض عن حدوده :
الخاصية width :
هل تذكر كيف كان النص في الفقرة التي حددنا مكانها في الأمثلة السابقة يسير بشكل طبيعي إلى اليمين ، بهذه الخاصية تستطيع التحكم في حجم المسافة التي يمكن أن يسير فيها النص ، أي أنك تحدد عرض الصندوق الذي يحتوي على العنصر ، و بذلك لا يستطيع النص أن يخرج عن العرض المحدد للصندوق :
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
الخاصية width تعمل فقط مع العنصر المحدد مكانه بطريقة مطلقة absolute . و تستطيع استخدام أي من وحدات القياس التي تكلمنا عنها سابقاً أو يمكنك استخدام النسب المئوية التي تشير إلى عرض العنصر الأب . في المتصفحان IE 4 و IE 5 هذه الخاصية تعمل أيضاً مع الصور ، حيث يمكنك أن تمدد أو تضغط صورة ما بأن تحدد عرضها بالخاصية width .
الخاصية height :
السمة height تعمل مثل width تماماً بخلاف أنها تعمل على الاتجاه العمودي :
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
للأسف ، فإن المتصفح كوميونيكيتور لا يدعم هذه الخاصية ، و أحيانا سوف تجد بعض الإزعاج مع المتصفحان إنترنت إكسبلورر 4 و إنترنت إكسبلورر 5 أيضاً .
الخاصية overflow :
الخاصية overflow :
ماذا سيحدث إذا كان محتوى صندوق ما أكبر من العرض width و / أو الارتفاع height الذي حددته له ؟ يمكنك أن تقرر ماذا سيحدث له باستخدام الخاصية overflow التي تحدد ماذا سيحدث للنص الذي يفيض عن الحجم المحدد :
DIV { width: 150px; height: 150px; overflow: scroll }
هذه الخاصية تعمل مع الواصفات التي تنشيء فقرة جديدة بنفسها سواء كانت محددة المكان أو لا . الآن يوجد أمامك الاختيارات التالية لتختار من بينها القيمة التي ستستخدمها مع هذه الخاصية :
1- القيمة visible تجعل كل المحتويات يتم عرضها حتى لو تخطت الحجم المحدد للصندوق .
2- القيمة hidden تجعل المتصفح يقص أي شيء يخرج عن الخط المحدد للحجم ، و هذا يعني أنه من المحتمل ألا يعرض جزء من المحتوى المطلوب .
3- القيمة auto تجعل المتصفح يقص المحتوى الزائد و لكنه سوف يضيف قضيب انزلاق إذا كان هناك محتوى زائد لم يتم عرضه لتستطيع الوصول إليه إذا أردت .
4- القيمة scroll تجعل المتصفح يقص المحتوى الزائد لكنه دائماً سوف يضيف قضيب انزلاق حتى لو لم يكن مطلوباً .
هذه الخاصية مدعومة من المتصفحان IE 4 و IE 5 للويندوز فقط .
الخاصية visibility :
مع هذه الخاصية تستطيع أن تجعل العناصر خفية في صفحة الويب ، سواء كانت محددة المكان أو لا :
الاختيارات التي أمامك هي :
1- visible تجعل العنصر مرئي .
2- hidden تجعل العنصر خفي .
3- inherit يعنى أن العنصر سوف يرث إذا كان مرئي أو خفي من عنصره الأب .
عندما يكون عنصر ما خفي فهو لا يزال يأخذ نفس الحجم في نافذة المتصفح كما لو كان مرئي ، لكنك لا تراه ، هذا كل ما في الأمر . لذا إذا كنت تحيط صورة أخفيتها بنص ما ، فسوف يظهر أن النص يحيط بمساحة خالية . المتصفج كوميونيكيتور لا يدعم هذه الخاصية أما IE 4 و IE 5 فيدعمانها .
الخاصية clip :
2- القيمة hidden تجعل المتصفح يقص أي شيء يخرج عن الخط المحدد للحجم ، و هذا يعني أنه من المحتمل ألا يعرض جزء من المحتوى المطلوب .
3- القيمة auto تجعل المتصفح يقص المحتوى الزائد و لكنه سوف يضيف قضيب انزلاق إذا كان هناك محتوى زائد لم يتم عرضه لتستطيع الوصول إليه إذا أردت .
4- القيمة scroll تجعل المتصفح يقص المحتوى الزائد لكنه دائماً سوف يضيف قضيب انزلاق حتى لو لم يكن مطلوباً .
هذه الخاصية مدعومة من المتصفحان IE 4 و IE 5 للويندوز فقط .
الخاصية visibility :
مع هذه الخاصية تستطيع أن تجعل العناصر خفية في صفحة الويب ، سواء كانت محددة المكان أو لا :
DIV { visibility: hidden }
1- visible تجعل العنصر مرئي .
2- hidden تجعل العنصر خفي .
3- inherit يعنى أن العنصر سوف يرث إذا كان مرئي أو خفي من عنصره الأب .
عندما يكون عنصر ما خفي فهو لا يزال يأخذ نفس الحجم في نافذة المتصفح كما لو كان مرئي ، لكنك لا تراه ، هذا كل ما في الأمر . لذا إذا كنت تحيط صورة أخفيتها بنص ما ، فسوف يظهر أن النص يحيط بمساحة خالية . المتصفج كوميونيكيتور لا يدعم هذه الخاصية أما IE 4 و IE 5 فيدعمانها .
الخاصية clip :
بهذه الخاصية تستطيع التحكم في أي أجزاء العنصر ستظهر و أيها ستختفي :
هذه الخاصية تعمل فقط مع العناصر المحددة أماكنها بصفة مطلقة ، أي العناصر التي تم تطبيق الخاصية position عليها بالقيمة absolute . و هي تعمل مع المتصفحان IE 4 و IE 5 بالإضافة إلى كوميونيكيتور . القص الذي تقوم به هذه الخاصية يؤثر فقط على عرض العنصر المقصوص و ليس على هيكل الصفحة ، و بالتالي فإن أي قص تقوم به لن يؤثر على المساحة التي يأخذها العنصر أي أنها ستظل كما هي .
القاعدة السابقة تقص منطقة مستطيلة rect اختصار rectangle (و هو الشكل الوحيد المدعوم حتى الآن) ، كل ما هو داخل المنطقة المقصوصة سوف يظهر . الجانب العلوي من المنطقة المقصوصة في مثالنا يبعد 10 بكسل عن قمة الصندوق الذي يحتوي على العنصر ، أما الجانب الأيمن للمنطقة المقصوصة فيبعد 200 بكسل عن الجانب الأيسر للصندوق ، و الجانب السفلي يبعد 100 بكسل عن الجانب العلوي من الصندوق ، و الجانب الأيسر يبعد 40 بكسل عن الجانب الأيسر للصندوق .
H2 { clip: rect(10px 200px 100px 40px) }
هذه الخاصية تعمل فقط مع العناصر المحددة أماكنها بصفة مطلقة ، أي العناصر التي تم تطبيق الخاصية position عليها بالقيمة absolute . و هي تعمل مع المتصفحان IE 4 و IE 5 بالإضافة إلى كوميونيكيتور . القص الذي تقوم به هذه الخاصية يؤثر فقط على عرض العنصر المقصوص و ليس على هيكل الصفحة ، و بالتالي فإن أي قص تقوم به لن يؤثر على المساحة التي يأخذها العنصر أي أنها ستظل كما هي .
القاعدة السابقة تقص منطقة مستطيلة rect اختصار rectangle (و هو الشكل الوحيد المدعوم حتى الآن) ، كل ما هو داخل المنطقة المقصوصة سوف يظهر . الجانب العلوي من المنطقة المقصوصة في مثالنا يبعد 10 بكسل عن قمة الصندوق الذي يحتوي على العنصر ، أما الجانب الأيمن للمنطقة المقصوصة فيبعد 200 بكسل عن الجانب الأيسر للصندوق ، و الجانب السفلي يبعد 100 بكسل عن الجانب العلوي من الصندوق ، و الجانب الأيسر يبعد 40 بكسل عن الجانب الأيسر للصندوق .
هذا يعني أنه إذا كان الصندوق الرمادي بالأسفل فقرة ، أو صورة ، فإن المنطقة المقصوصة ستكون هي الخط الأصفر ، و لذلك فإن المنطقة الوحيدة التي ستظهر من المربع كله هي المنطقة السوداء التي يحوطها الخط الأصفر .
يمكنك أيضاً أن تستخدم أي وحدة من وحدات القياس الأخرى إذا أردت . و إذا استخدمت القيمة auto فسوف يعني هذا أنه لن يحدث أي قص . تستطيع كذلك أن تستخدم القيم السالبة لهذه الخاصية .
ترتيب طبقات النص و الصور :
يمكنك أيضاً أن تستخدم أي وحدة من وحدات القياس الأخرى إذا أردت . و إذا استخدمت القيمة auto فسوف يعني هذا أنه لن يحدث أي قص . تستطيع كذلك أن تستخدم القيم السالبة لهذه الخاصية .
ترتيب طبقات النص و الصور :
الخاصية z-index :
عندما تحدد مكان عدد من العناصر ، و تجد أنهم تداخلوا فوق بعض ، استخدم هذه الخاصية لتحدد أيهم سوف تظهر فوق الأخرى :
بما أن الواصفة H2 أخذت القيمة الأعلى للخاصية z-index فهي التي ظهرت فوق الواصفة H1 . (المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . (مع المتصفح كوميونيكيتور من الأفضل أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق الخاصية على إحداهما بدلاً من الواصفة <IMG>) .
التحليل و التوافق :
سنلقي الآن الضوء على بعض الحيل التي تجعل صفحاتك المدعمة بصفحات الأنماط المتعاقبة سهلة التحليل و العرض في المتصفحات المختلفة التي تستعرضها :
1- استخدم الأنماط مع واصفات هتمل مماثلة :
إذا كنت تريد التحكم في درجة سماكة الخط عن طريق الخاصية font-weight ، فلماذا لا تستخدم الواصفة <B> لتطبيق النمط عليها . و بهذه الطريقة فإن النص سيبدو سميكاً في المتصفحات القديمة أيضاً . حاول أن تجد واصفات الهتمل الملائمة للنمط الذي تطبقه حتى يصبح عندك على الأقل بعض من التأثير الذي أردته على المتصفحات التي لا تدعم CSS .
2- امزج الأنماط مع واصفات الهتمل :
إذا كنت تريد أن تتيقن من أن فقرة ما سوف تكون باللون الأزرق ، فاستخدم قاعدة صفحات الأنماط و واصفة الهتمل لتتأكد من ذلك ، أي أنك سوف تستخدم الخاصية color: blue بالإضافة إلى الواصفة <"FONT COLOR="blue> ، و هكذا في كل شيء ، هل فهمت الفكرة ؟
جعل صفحاتك متوافقة مع المتصفحات المختلفة ليس شيئاً سهلاً تقضي فيه خمس دقائق في النهاية ، بل هو شيء تبقيه في عقلك أثناء عملية التصميم كلها حيث تنشيء قواعدك و تحدد أهدافك . و كالعادة فإن أهم ثلاث كلمات هي : اختبر ، اختبر ، اختبر .
مصادر صفحات الأنماط المتعاقبة على الإنترنت :
1- الموقع الرسمي لصفحات الأنماط المتعاقبة .
2- دليل صفحات الأنماط - خرائط بيانات تخبرك بدقة عن الذي يعمل على كل متصفح .
3- مراجعة صفحات الأنماط - تتأكد من صحة تركيب القواعد في شفرة صفحات الأنماط الخاصة بك .
4- مؤشرات صفحات الأنماط - أفضل مصدر للوصلات عن صفحات الأنماط .
عندما تحدد مكان عدد من العناصر ، و تجد أنهم تداخلوا فوق بعض ، استخدم هذه الخاصية لتحدد أيهم سوف تظهر فوق الأخرى :
و الآن لنر نتيجة هاتان القاعدتان ( لقد جعلت لون نص الواصفة H2 بالأحمر حتى ترى الفرق) :H2 { position: relative; left: 10px; top: 0px; z-index: 10 }H1 { position: relative; left: 33px; top: -45px; z-index: 1 }
بما أن الواصفة H2 أخذت القيمة الأعلى للخاصية z-index فهي التي ظهرت فوق الواصفة H1 . (المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . (مع المتصفح كوميونيكيتور من الأفضل أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق الخاصية على إحداهما بدلاً من الواصفة <IMG>) .
التحليل و التوافق :
سنلقي الآن الضوء على بعض الحيل التي تجعل صفحاتك المدعمة بصفحات الأنماط المتعاقبة سهلة التحليل و العرض في المتصفحات المختلفة التي تستعرضها :
1- استخدم الأنماط مع واصفات هتمل مماثلة :
إذا كنت تريد التحكم في درجة سماكة الخط عن طريق الخاصية font-weight ، فلماذا لا تستخدم الواصفة <B> لتطبيق النمط عليها . و بهذه الطريقة فإن النص سيبدو سميكاً في المتصفحات القديمة أيضاً . حاول أن تجد واصفات الهتمل الملائمة للنمط الذي تطبقه حتى يصبح عندك على الأقل بعض من التأثير الذي أردته على المتصفحات التي لا تدعم CSS .
2- امزج الأنماط مع واصفات الهتمل :
إذا كنت تريد أن تتيقن من أن فقرة ما سوف تكون باللون الأزرق ، فاستخدم قاعدة صفحات الأنماط و واصفة الهتمل لتتأكد من ذلك ، أي أنك سوف تستخدم الخاصية color: blue بالإضافة إلى الواصفة <"FONT COLOR="blue> ، و هكذا في كل شيء ، هل فهمت الفكرة ؟
جعل صفحاتك متوافقة مع المتصفحات المختلفة ليس شيئاً سهلاً تقضي فيه خمس دقائق في النهاية ، بل هو شيء تبقيه في عقلك أثناء عملية التصميم كلها حيث تنشيء قواعدك و تحدد أهدافك . و كالعادة فإن أهم ثلاث كلمات هي : اختبر ، اختبر ، اختبر .
مصادر صفحات الأنماط المتعاقبة على الإنترنت :
1- الموقع الرسمي لصفحات الأنماط المتعاقبة .
2- دليل صفحات الأنماط - خرائط بيانات تخبرك بدقة عن الذي يعمل على كل متصفح .
3- مراجعة صفحات الأنماط - تتأكد من صحة تركيب القواعد في شفرة صفحات الأنماط الخاصة بك .
4- مؤشرات صفحات الأنماط - أفضل مصدر للوصلات عن صفحات الأنماط .
دورة css --الدرس السادس--
دورة css كاملة للمبتدئين
الدرس السادس
الخاصية color :
هذه الخاصية تماثل في عملها اسمها تماماً ، فهي تحدد لون عنصر ما ، و تأخذ نفس قيم اللون في هتمل :
B { color: #CCFFFF }
هناك ثلاث طرق لتحديد اللون الذي تريد استخدامه مع هذه الخاصية :
أسماء الألوان : و هي أسماء الألوان التي تعودنا عليها ، الألوان ال16
الأساسية هي : aqua سماوي , black أسود , blue أزرق , fochsia قرمزي , gray رمادي , green أخضر , lime أخضر فسفوري , maroon أحمر داكن , navy أزرق داكن , olive زيتوني , purple أرجواني , red أحمر , silver فضي , teal أخضر داكن , white أبيض , yellow أصفر . و لكن المتصفحان كوميونيكيتور و إنترنت إكسبلورر يستطيعان التعرف على المئات من أسماء الألوان الأخرى . و تستطيع أن ترى أسماء هذه الألوان .
رقام الست عشرية : لتستطيع التحكم بدرجة أكبر في الألوان استخدم قيمها الست عشرية التي يمكنك أن تراها في صيغة#336699 على سبيل المثال . صفحات الأنماط المتعاقبة أيضاً تدعم الاختصارات الخاصة ببعض القيم الست عشرية ، مثلاً إذا كانت القيمة #336699 فإنها يمكن إعلانها هكذا #369 .
قيم RGB : و أخيراً .. فإن هناك طريقة جديد لتحديد اللون لهؤلاء المعتادين على رموز RGB و التي تستخدم عادة في برامج الرسوميات مثل فوتوشوب ، و سوف تبدو الخاصية color المحددة بقيم RGB هكذا :
B { color: rgb(52,204,0) }
إذا لم تكن تألف قيم RGB فإن مداها يتراوح بين 0 و 255 في قيمة كل لون من الألوان الثلاثة الأساسية الأحمر و الأخضر و الأزرق . المتصفح IE 3 لا يدعم استخدام قيم RGB ، و لكن المتصفحان IE 4 و IE 5 يدعمانها .
حتى الآن كنا نتكلم عن تحديد لون أمامي foreground للنص و لكن يمكننا أيضاً أن نحدد لون خلفي للنص كذلك .
الخاصية background-color :
في الهتمل عندما كنت تريد أن تضع لون خلفي وراء عنصر ما كنت تضعه في جدول و تجعل لون خلفية الجدول باللون الذي تريده . الآن أصبح هذا الأمر من أسهل ما يمكن عمله مع الخاصية background-color التي يمكنك بواسطتها أن تحدد لون خلفية لأي عنصر في الصفحة بما في ذلك الصور .
القاعدة السابقة تم تطبيقها على هذه الفقرة . يمكنك تحديد اللون بواسطة أي من الطرق التي ذكرناها في الخاصية السابقة : أسماء الألوان أو القيم الست عشرية أو قيم RGB .
لا يلزمك أن تحدد لون لخلفية الفقرة كلها ، بل يمكنك أن تضع اللون في خلفية كلمة واحدة فقط إذا أردت .
في المتصفحان IE 3 و نتسكيب كوميونيكيتور لون الخلفية في الفقرة الأولى لا يمتد لنفس المسافة في كل سطر ، و لكنه في المقابل يظهر فقط خلف الكلمات نفسها . أما في المتصفحان IE 4 و IE 5 فإن اللون يمتد لمسافة أكبر قليلاً مكوناً مستطيل كبير حول الفقرة بكاملها (تماماً كما رأينا مع الإطارات) .
ملحوظة هامة : المتصفح IE 3 لا يدعم الخاصية background-color على الإطلاق ، و لكنه في المقابل يدعم الخاصية background و هي خاصية مختصرة تحقق نفس التأثير (سنتكلم عنها لاحقاً) .
تستطيع أن تعطي الخاصية background-color القيمة transparent أي "شفاف" و هذا يعني أن الخلفية التي ستراها هي نفس لون الخلفية في الصفحة - أي أن كل القيم الموروثة من واصفات أخرى سيتم تجاهلها .
الخاصية background-image :
تستطيع بواسطة هذه الخاصية أن تضع صورة GIF أو JPG في خلفية اي عنصر :
هذه الفقرة تم تطبيق القاعدة السابقة عليها . و كما ترى فإن الصورة تكرر نفسها في باقي مساحة الفقرة لأنها صورة صغيرة ، تماماً كما تفعل أي صورة خلفية تحترم نفسها ، مع اختلاف واحد فقط هو أن الصورة تظهر في خلفية هذه الفقرة فقط و ليس باقي الصفحة أيضاً .
يمكنك أيضاً أن تطبق هذه الخاصية على كلمتين فقط إذا أردت . و إذا كنت تريد أن تملأ نافذة المتصفح بالكامل بصورة خلفية تستطيع أن تطبق هذه الخاصية على الواصفة <BODY> .
يمكنك أن تحدد عنوان الصورة Image URL بشكل تقريبي Relative أو كامل Full URL .
إذا استخدمت القيمة none مع هذه الخاصية فسوف تجعل المتصفح يتخطى أي قيمة موروثة من عنصر آخر و تجعل خلفية النص هي نفس خلفية الصفحة .
عندما تستخدم الخاصية background-image ، قد يكون من الجيد أيضاً أن تستخدم معها الخاصية background-color ، هذا اللون الذي ستحدده بهذه الخاصية سوف يظهر في أثناء تحميل الصورة ، بالإضافة إلى أنه سوف يظهر من خلال أي منطقة شفافة في الصورة :
الصورة التي استخدمتها كخلفية للعبارة السابقة هي
و هي شكل مربع شفاف بداخله دائرة ملونة بتدرج ، و جعلت لون الخلفية في قاعدة صفحة الأنماط التي استخدمتها أحمر . و هكذا ظهرت الصورة و ظهر لون الخلفية الأحمر من خلال المناطق الشفافة فيها .
سلبيات :
بالنسبة لكل الخصائص المتعلقة بالخلفية فإن المتصفح IE 3 لا يدعم سوى الخاصية المختصرة background . و عندما تستخدم صفحات أنماط موصولة فإن IE 3 لا يظهر صور الخلفية على الإطلاق .
المتصفح كوميونيكيتور (لكل من ويندوز و ماكنتوش) و IE 4 (للماكنتوش) في بعض الأحيان لا تتجاوب بطريقة جيدة عندما تحدد صورة خلفية لجزء من فقرة ما ، قد لا يعرضها على الإطلاق ، أو ربما يضيف فواصل سطور حول النص الذي يحوي الصورة كخلفية له .
إذا حددت صورة خلفية و لون للخلفية فإن المتصفح كوميونيكيتور في بعض الأحيان يعامل اللون على أنه أكثر أهمية و يعرضه فوق الصورة و ليس تحتها .
الخاصية background-repeat :
هذه الخاصية تمكنك من التحكم في تكرار صورة الخلفية أو عدم تكرارها :
B { background-repeat: no-repeat; background-image: url(images/background.gif) }
القاعدة السابقة تم تطبيقها على هذه الفقرة بالكامل ، و استخدمنا نفس الصورة التي استخدمناها من قبل و لكنها هذه المرة لم تكرر نفسها لأننا استخدمنا القيمة no-repeat مع الخاصية background-repeat و لهذا فقد ظهرت مرة واحدة فقط .
إذا كنت تريد أن تكرر الصورة الخلفية نفسها عمودياً فقط أو أفقياً فقط ، فيمكنك استخدام القيمة repeat-x لتجعل الصورة تكرر نفسها أفقياً فقط (كما ترى في خلفية هذه الفقرة) ، أو استخدام القيمة repeat-y لجعل الصورة تكرر نفسها عمودياً فقط ، أما إذا استخدمت القيمة repeat فسوف تكرر نفسها في كلا الاتجاهين .
الخاصية background-attachment :
قد تكون اعتدت على الصور الخلفية التي تنزلق مع الصفحة صعوداً أو هبوطاً ، لكن مع صفحات الأنماط يمكنك أن تجعل الصورة ثابتة لا تصعد أو تنزل مهما زلقت الصفحة صعوداً أو هبوطاً باستخدام الخاصية background-attachment :
P.yellow { background-color: #FFFF66 }
القاعدة السابقة تم تطبيقها على هذه الفقرة . يمكنك تحديد اللون بواسطة أي من الطرق التي ذكرناها في الخاصية السابقة : أسماء الألوان أو القيم الست عشرية أو قيم RGB .
لا يلزمك أن تحدد لون لخلفية الفقرة كلها ، بل يمكنك أن تضع اللون في خلفية كلمة واحدة فقط إذا أردت .
في المتصفحان IE 3 و نتسكيب كوميونيكيتور لون الخلفية في الفقرة الأولى لا يمتد لنفس المسافة في كل سطر ، و لكنه في المقابل يظهر فقط خلف الكلمات نفسها . أما في المتصفحان IE 4 و IE 5 فإن اللون يمتد لمسافة أكبر قليلاً مكوناً مستطيل كبير حول الفقرة بكاملها (تماماً كما رأينا مع الإطارات) .
ملحوظة هامة : المتصفح IE 3 لا يدعم الخاصية background-color على الإطلاق ، و لكنه في المقابل يدعم الخاصية background و هي خاصية مختصرة تحقق نفس التأثير (سنتكلم عنها لاحقاً) .
تستطيع أن تعطي الخاصية background-color القيمة transparent أي "شفاف" و هذا يعني أن الخلفية التي ستراها هي نفس لون الخلفية في الصفحة - أي أن كل القيم الموروثة من واصفات أخرى سيتم تجاهلها .
الخاصية background-image :
تستطيع بواسطة هذه الخاصية أن تضع صورة GIF أو JPG في خلفية اي عنصر :
هذه الفقرة تم تطبيق القاعدة السابقة عليها . و كما ترى فإن الصورة تكرر نفسها في باقي مساحة الفقرة لأنها صورة صغيرة ، تماماً كما تفعل أي صورة خلفية تحترم نفسها ، مع اختلاف واحد فقط هو أن الصورة تظهر في خلفية هذه الفقرة فقط و ليس باقي الصفحة أيضاً .
يمكنك أيضاً أن تطبق هذه الخاصية على كلمتين فقط إذا أردت . و إذا كنت تريد أن تملأ نافذة المتصفح بالكامل بصورة خلفية تستطيع أن تطبق هذه الخاصية على الواصفة <BODY> .
يمكنك أن تحدد عنوان الصورة Image URL بشكل تقريبي Relative أو كامل Full URL .
إذا استخدمت القيمة none مع هذه الخاصية فسوف تجعل المتصفح يتخطى أي قيمة موروثة من عنصر آخر و تجعل خلفية النص هي نفس خلفية الصفحة .
عندما تستخدم الخاصية background-image ، قد يكون من الجيد أيضاً أن تستخدم معها الخاصية background-color ، هذا اللون الذي ستحدده بهذه الخاصية سوف يظهر في أثناء تحميل الصورة ، بالإضافة إلى أنه سوف يظهر من خلال أي منطقة شفافة في الصورة :
الصورة التي استخدمتها كخلفية للعبارة السابقة هي
و هي شكل مربع شفاف بداخله دائرة ملونة بتدرج ، و جعلت لون الخلفية في قاعدة صفحة الأنماط التي استخدمتها أحمر . و هكذا ظهرت الصورة و ظهر لون الخلفية الأحمر من خلال المناطق الشفافة فيها .سلبيات :
بالنسبة لكل الخصائص المتعلقة بالخلفية فإن المتصفح IE 3 لا يدعم سوى الخاصية المختصرة background . و عندما تستخدم صفحات أنماط موصولة فإن IE 3 لا يظهر صور الخلفية على الإطلاق .
المتصفح كوميونيكيتور (لكل من ويندوز و ماكنتوش) و IE 4 (للماكنتوش) في بعض الأحيان لا تتجاوب بطريقة جيدة عندما تحدد صورة خلفية لجزء من فقرة ما ، قد لا يعرضها على الإطلاق ، أو ربما يضيف فواصل سطور حول النص الذي يحوي الصورة كخلفية له .
إذا حددت صورة خلفية و لون للخلفية فإن المتصفح كوميونيكيتور في بعض الأحيان يعامل اللون على أنه أكثر أهمية و يعرضه فوق الصورة و ليس تحتها .
الخاصية background-repeat :
هذه الخاصية تمكنك من التحكم في تكرار صورة الخلفية أو عدم تكرارها :
B { background-repeat: no-repeat; background-image: url(images/background.gif) }
القاعدة السابقة تم تطبيقها على هذه الفقرة بالكامل ، و استخدمنا نفس الصورة التي استخدمناها من قبل و لكنها هذه المرة لم تكرر نفسها لأننا استخدمنا القيمة no-repeat مع الخاصية background-repeat و لهذا فقد ظهرت مرة واحدة فقط .
إذا كنت تريد أن تكرر الصورة الخلفية نفسها عمودياً فقط أو أفقياً فقط ، فيمكنك استخدام القيمة repeat-x لتجعل الصورة تكرر نفسها أفقياً فقط (كما ترى في خلفية هذه الفقرة) ، أو استخدام القيمة repeat-y لجعل الصورة تكرر نفسها عمودياً فقط ، أما إذا استخدمت القيمة repeat فسوف تكرر نفسها في كلا الاتجاهين .
الخاصية background-attachment :
قد تكون اعتدت على الصور الخلفية التي تنزلق مع الصفحة صعوداً أو هبوطاً ، لكن مع صفحات الأنماط يمكنك أن تجعل الصورة ثابتة لا تصعد أو تنزل مهما زلقت الصفحة صعوداً أو هبوطاً باستخدام الخاصية background-attachment :
BODY { Background-attachment: fixed; background-image: url(images/background.jpg) }
هذه الخاصية لا تعمل إلا مع الواصفة <body> فقط . و بالنسبة لقيمها فلديك اختياران :
1-قيمة scroll ، و معها سوف تنزلق الصورة مع الصفحة صعوداً و هبوطاً .
2-قيمة fixed ، و معها لن تنزلق الصورة مع الصفحة على الإطلاق
الخاصية background-position :
تستطيع من خلال هذه الخاصية أن تتحكم في المكان الذي سوف يبدأ منه عرض الصورة في خلفية العنصر الذي تريده .
عندما نطبق القاعدة السابقة على فقرة مثل هذه الفقرة ، فإن صورة الخلفية تأخذ موضعها في منتصف و أسفل الصندوق الذي يحدد هذه الفقرة ، (الكلمة الأولى center تشير إلى الموضع الأفقي ، و الكلمة الثانية bottom تشير إلى الموضع العمودي) . ثم تكرر الصورة نفسها إلى اليمين و إلى الأسفل بشكل طبيعي .
يمكنك تحديد مكان بدء الصورة بإعطاء القيم للخاصية background-position بثلاث طرق :
الكلمات المفتاحية :
1-قيمة top تجعل الصورة تحاذي أعلى العنصر الأمامي (الصندوق) .
2-قيمة bottom تجعل الصورة تحاذي أسفل (الصندوق) .
3-قيمة left تجعل الصورة تحاذي يسار الصندوق .
4-قيمة right تجعل الصورة تحاذي يمين الصندوق .
5-قيمة center تجعل الصورة في الوسط أفقياً إذا استُخدِمَت قبل الكلمة المفتاحية الأخرى ، أو عمودياً إذا استخدمت بعدها .
وحدات القياس :
وحدات القياس تعطيك تحكم أكبر في مكان بدء صورة الخلفية ، حيث يمكنك تحديد النقطة الأفقية و العمودية التي تبدأ من عندها الصورة بكل دقة :
يمكنك استخدام أي وحدة من وحدات القياس التي تكلمنا عنها من قبل مثل البكسل و النقطة و البوصة .. إلخ .
النسبة المئوية :
كذلك تستطيع أن تستخدم النسبة المئوية في تحديد مكان بدء صورة الخلفية .
الخاصية المختصرة background :
هذه الخاصية هي التي يجب أن تستعملها مع المتصفح IE 3 لأنها هي الوحيدة من بين خصائص الخلفيات التي تعمل معه بالإضافة إلى عملها مع المتصفحات الأخرى أيضاً .
بهذه الخاصية تستطيع أن تحدد لون للخلفية ، صورة للخلفية ، طريقة تكرار الصورة ، تجعل صورة الخلفية ثابتة أو منزلقة مع الصفحة ، تحديد مكان بدء الصورة :
هذه الفقرة تم تطبيق القاعدة السابقة عليها ، كما ترى فإن لون الخلفية هو أخضر فاتح ، و الصورة في الخلفية متكررة عمودياً فقط ، و تبدأ من الركن العلوي الأيمن للصندوق الذي يحيط بهذه الفقرة (تذكر أن المتصفح كوميونيكيتور لا يدعم خاصية تحديد مكان بدء صورة الخلفية) .
1-قيمة scroll ، و معها سوف تنزلق الصورة مع الصفحة صعوداً و هبوطاً .
2-قيمة fixed ، و معها لن تنزلق الصورة مع الصفحة على الإطلاق
الخاصية background-position :
تستطيع من خلال هذه الخاصية أن تتحكم في المكان الذي سوف يبدأ منه عرض الصورة في خلفية العنصر الذي تريده .
P { background-position: center bottom; background-image: url(images/background.gif) }
عندما نطبق القاعدة السابقة على فقرة مثل هذه الفقرة ، فإن صورة الخلفية تأخذ موضعها في منتصف و أسفل الصندوق الذي يحدد هذه الفقرة ، (الكلمة الأولى center تشير إلى الموضع الأفقي ، و الكلمة الثانية bottom تشير إلى الموضع العمودي) . ثم تكرر الصورة نفسها إلى اليمين و إلى الأسفل بشكل طبيعي .
يمكنك تحديد مكان بدء الصورة بإعطاء القيم للخاصية background-position بثلاث طرق :
الكلمات المفتاحية :
1-قيمة top تجعل الصورة تحاذي أعلى العنصر الأمامي (الصندوق) .
2-قيمة bottom تجعل الصورة تحاذي أسفل (الصندوق) .
3-قيمة left تجعل الصورة تحاذي يسار الصندوق .
4-قيمة right تجعل الصورة تحاذي يمين الصندوق .
5-قيمة center تجعل الصورة في الوسط أفقياً إذا استُخدِمَت قبل الكلمة المفتاحية الأخرى ، أو عمودياً إذا استخدمت بعدها .
وحدات القياس :
وحدات القياس تعطيك تحكم أكبر في مكان بدء صورة الخلفية ، حيث يمكنك تحديد النقطة الأفقية و العمودية التي تبدأ من عندها الصورة بكل دقة :
P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(images/background.gif) }
النسبة المئوية :
كذلك تستطيع أن تستخدم النسبة المئوية في تحديد مكان بدء صورة الخلفية .
P { background-position: 75% 50%; background-image: url(background.gif) }
هذه الخاصية هي التي يجب أن تستعملها مع المتصفح IE 3 لأنها هي الوحيدة من بين خصائص الخلفيات التي تعمل معه بالإضافة إلى عملها مع المتصفحات الأخرى أيضاً .
بهذه الخاصية تستطيع أن تحدد لون للخلفية ، صورة للخلفية ، طريقة تكرار الصورة ، تجعل صورة الخلفية ثابتة أو منزلقة مع الصفحة ، تحديد مكان بدء الصورة :
P { background: url(images/background.gif) #CCFFCC repeat-y top right }
دورة css --الدرس الخامس
دورة css كاملة للمبتدئين
الدرس الخامس
كما نعرف جميعاً ، إننا عندما نريد أن نصنع هامش باستخدام الهتمل يجب أن نستخدم الجداول ، أليس كذلك ؟ ليس بعد اكتشاف صفحات الأنماط المتعاقبة ...
بعض التعريفات السريعة :
أولاً ، يجب علينا أن نفهم اصطلاحات لغة صفحات الأنماط . أي عنصر ينشيء كتلة جديدة أو أي عنصر مستبدل موجود في ما يطلق عليه صناع صفحات الأنماط صندوق BOX . هذا الصندوق يحتوي على :
1- العنصر نفسه .
2- الحشو حول العنصر .
3- الإطار حول الحشو .
4- الهامش حول الإطار .
و إليك الرسم التوضيحي :
يمكنك التحكم في الإطار أو الهامش أو الحشو بطريقة منفصلة . كما سترى :
الخواص margin-top, margin-bottom, margin-left, margin-right :
هذه الخواص الأربع تمكنك من التحكم بالهامش حول كل جانب من جوانب العنصر كالتالي :
1- الخاصية margin-top تحدد حجم الهامش العلوي .
2- الخاصية margin-bottom تحدد حجم الهامش السفلي .
3- الخاصية margin-left تحدد حجم الهامش الأيسر .
4- الخاصية margin-right تحدد حجم الهامش الأيمن .
كما ترى فإن كل جانب من الهامش يمكن جعله مختلفاً عن الآخرين . أو يمكنك أن تحدد حجم جانب واحد من الهامش و تترك المتصفح يجعل باقي الجوانب بالحجم الافتراضي لها . كذلك يمكنك أن تطبق الهوامش على العناصر المستبدلة (مثل الصور) بنفس الطريقة التي تطبقها بها على النصوص .
أسهل طريقة لتحديد قيمة حجم الهامش هي باستخدام وحدات القياس التي وضحناها سابقاً ، و لكن إذا لم ترد ذلك يمكنك استخدام النسبة المئوية أيضاً .
عندما يلتقي هامشان فإن المتصفح يضيفهما إلى بعض ، و لذلك إذا كانت فقرة ما هامشها السفلي 10 بكسل و إذا كان هناك فقرة تحتها لها هامش علوي بقيمة 30 بكسل فإن حجم الفاصل بين الفقرتان سيكون 40 بكسل .
أيضاً يمكنك أن تحدد قيمة الهامش لهذه الخواص بالسالب ، كالمثال التالي :
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
1- الخاصية margin-top تحدد حجم الهامش العلوي .
2- الخاصية margin-bottom تحدد حجم الهامش السفلي .
3- الخاصية margin-left تحدد حجم الهامش الأيسر .
4- الخاصية margin-right تحدد حجم الهامش الأيمن .
كما ترى فإن كل جانب من الهامش يمكن جعله مختلفاً عن الآخرين . أو يمكنك أن تحدد حجم جانب واحد من الهامش و تترك المتصفح يجعل باقي الجوانب بالحجم الافتراضي لها . كذلك يمكنك أن تطبق الهوامش على العناصر المستبدلة (مثل الصور) بنفس الطريقة التي تطبقها بها على النصوص .
أسهل طريقة لتحديد قيمة حجم الهامش هي باستخدام وحدات القياس التي وضحناها سابقاً ، و لكن إذا لم ترد ذلك يمكنك استخدام النسبة المئوية أيضاً .
عندما يلتقي هامشان فإن المتصفح يضيفهما إلى بعض ، و لذلك إذا كانت فقرة ما هامشها السفلي 10 بكسل و إذا كان هناك فقرة تحتها لها هامش علوي بقيمة 30 بكسل فإن حجم الفاصل بين الفقرتان سيكون 40 بكسل .
أيضاً يمكنك أن تحدد قيمة الهامش لهذه الخواص بالسالب ، كالمثال التالي :
Books
are mind food
تتعامل المتصفحات مع أحجام الهوامش بطرق مختلفة . على سبيل المثال فإن كل من المتصفحات الأربعة الكبار (NC للويندوز و NC للماكنتوش و IE للويندوز و IE للماكنتوش) تجعل النص متداخل بحجم مختلف عن الآخرين ، (و NC للويندوز لا يجعل النص متداخل على الإطلاق) .
المتصفح IE 3 يظهر مسافات إضافية عند استخدام وحدات القياس في تحديد الهوامش مع الواصفة margin-bottom . كذلك فإن هذه الخاصية تعمل مع بعض واصفات الهتمل و لكنها لا تعمل مع الكثير من الواصفات أيضاً .
المتصفح IE 4 يعاني من بعض المشكلات في تحديد الهامش الأيسر للعناصر المستبدلة مثل الصور . و للتغلب على هذا جرب أن تحيط واصفة الصورة بالواصفة <DIV> و إضفاء النمط على هذه الواصفة . بدلاً من واصفة الصورة .
الخصائصpadding-top, padding-bottom, padding-left, padding-right:
التحكم في الحشو (هو المسافة بين العنصر و إطاره) مثل التحكم في الهوامش . حيث يمكنك تحديد حجم الحشو لأي من الجوانب الأربعة للعنصر .
1- الخاصية padding-top لتحديد حجم الحشو العلوي .
2- الخاصية padding-bottom لتحديد حجم الحشو السفلي .
3- الخاصية padding-left لتحديد حجم الحشو الأيسر .
4- الخاصية padding-right لتحديد حجم الحشو الأيمن .
كما في تحديد الهوامش تماماً ، يمكنك استخدام وحدات القياس أو النسبة المئوية . لن أزعجك بالدخول في التفاصيل لهذه الخصائص حيث أنها تماثل تحديد الهوامش تماماً ، و لكن يجب أن تعلم أنه لا يمكنك استخدام القيم السلبية مع هذه الخصائص مثلما فعلت في تحديد الهوامش ، كما أن المتصفح IE 3 لا يدعم هذه الخصائص على الإطلاق .
الخصائص border-top-width, border-bottom-width, border-left-width, border-right-width :
هذه الخصائص تستخدم لتحديد سمك الإطار في كل جانب من جوانب العنصر :
المتصفح IE 4 يعاني من بعض المشكلات في تحديد الهامش الأيسر للعناصر المستبدلة مثل الصور . و للتغلب على هذا جرب أن تحيط واصفة الصورة بالواصفة <DIV> و إضفاء النمط على هذه الواصفة . بدلاً من واصفة الصورة .
الخصائصpadding-top, padding-bottom, padding-left, padding-right:
التحكم في الحشو (هو المسافة بين العنصر و إطاره) مثل التحكم في الهوامش . حيث يمكنك تحديد حجم الحشو لأي من الجوانب الأربعة للعنصر .
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }
2- الخاصية padding-bottom لتحديد حجم الحشو السفلي .
3- الخاصية padding-left لتحديد حجم الحشو الأيسر .
4- الخاصية padding-right لتحديد حجم الحشو الأيمن .
كما في تحديد الهوامش تماماً ، يمكنك استخدام وحدات القياس أو النسبة المئوية . لن أزعجك بالدخول في التفاصيل لهذه الخصائص حيث أنها تماثل تحديد الهوامش تماماً ، و لكن يجب أن تعلم أنه لا يمكنك استخدام القيم السلبية مع هذه الخصائص مثلما فعلت في تحديد الهوامش ، كما أن المتصفح IE 3 لا يدعم هذه الخصائص على الإطلاق .
الخصائص border-top-width, border-bottom-width, border-left-width, border-right-width :
هذه الخصائص تستخدم لتحديد سمك الإطار في كل جانب من جوانب العنصر :
H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }
2- الخاصية border-bottom-width تحدد سمك الإطار السفلي .
3- الخاصية border-left-width تحدد سمك الإطار الأيسر .
4- الخاصية border-right-width تحدد سمك الإطار الأيمن .
و هذه هي النتيجة للمثال السابق :
You can apply borders to replaced elements as well as to text elements. Isn't it fun?
لا يلزمك بالضرورة تحديد إطار لكل جانب من جوانب العنصر ، إذا أردت يمكنك أن تضع إطار لجانب واحد فقط من العنصر ، كما يمكنك أن ترى على الجانب الأيمن لهذه الفقرة (يجب عليك بالنسبة للمتصفحان IE 4 و IE 5 أن تحدد حجم الإطار على الجوانب الأخرى التي لا تريدها إلى القيمة صفر ، و إلا فإن المتصفح سيعطيها الحجم الذي يريده ) .
يمكنك تحديد سمك الإطار باستخدام وحدات القياس ، أو يمكنك استخدام كلمات مفتاحية :
الإطار فوق هذا السطر يستخدم القيمة thin .
الإطار فوق هذا السطر يستخدم القيمة medium .
الإطار فوق هذا السطر يستخدم القيمة thick .
هل تريد أن تجعل كل جوانب الإطار بنفس السمك ؟ استعمل الاختصار border-width . القاعدة التالية تضع إطاراً سمكه 1 بوصة حول الصور :
IMG { border-width: 1in }
هذه الخاصية تجعلك تتحكم في لون الإطار كما تريد :
P { border-color: green; border-width: 3px }
هذه الفقرة تظهر نتيجة المثال السابق
يمكنك استخدام أسماء الألوان لتحديد لون الإطار ، أو حتى استخدام القيم الست عشرية كالمثال التالي :
P { border-color: green; border-width: 3px }
هذه الفقرة تظهر نتيجة المثال السابق
يمكنك استخدام أسماء الألوان لتحديد لون الإطار ، أو حتى استخدام القيم الست عشرية كالمثال التالي :
H4 { border-color: #FF0033; border-width: thick }
P { border-color: #99FFFF #FF0033 #FFFFFF #FFFF99; border-width: 3px }
هذه الفقرة تظهر نتيجة المثال السابق
ملحوظة : فالمتصفح كوميونيكيتور لا يتعرف على تحديد لون مختلف لكل جانب من جوانب الإطار و بالتالي فعليك الالتزام بلون واحد فقط ، لأنك لو استخدمت ألوان متعددة فسوف يظهر الإطار كله باللون الأزرق و لا نعرف لماذا !
و بالمناسبة ، إذا لم تستخدم الخاصية border-color فإن الإطار يأخذ نفس اللون الذي يأخذه العنصر .
الخاصية border-style :
و أخيراً ، يمكنك تحديد نمط الإطار :
P { border-style: double; border-width: 3px }
solid
double
dotted
dashed
groove
ridge
inset
outset
لاحظ أنك يجب أن تستخدم الخاصية border-style مع المتصفحان IE 4 و IE 5 و إلا فإنهما لن يظهرا الإطار على الإطلاق . المتصفح IE 4.x للماكنتوش هو المتصفح الوحيد الذي يدعم القيمتين dotted و dashed .
تستطيع أن تلاحظ أن المتصفح IE يعطي الإطار لعرض المنطقة الكامل ، بينما المتصفح navigator يعطي الإطار فقط للكلمة نفسها .
الخاصية float :
هذه الخاصية تمكنك من جعل عنصر ما يطفو كالصور مثلاً بالإضافة إلى الواصفات التي تنشيء فقرة جديدة بنفسها أيضاً :
double
dotted
dashed
groove
ridge
inset
outset
لاحظ أنك يجب أن تستخدم الخاصية border-style مع المتصفحان IE 4 و IE 5 و إلا فإنهما لن يظهرا الإطار على الإطلاق . المتصفح IE 4.x للماكنتوش هو المتصفح الوحيد الذي يدعم القيمتين dotted و dashed .
تستطيع أن تلاحظ أن المتصفح IE يعطي الإطار لعرض المنطقة الكامل ، بينما المتصفح navigator يعطي الإطار فقط للكلمة نفسها .
الخاصية float :
هذه الخاصية تمكنك من جعل عنصر ما يطفو كالصور مثلاً بالإضافة إلى الواصفات التي تنشيء فقرة جديدة بنفسها أيضاً :
H4 { float: left }
This text is floating left
إذا كان العنصر الطافي ذو مساحة قليلة حوله ، يمكنك إضافة حشو حوله باستخدام احدى خواص padding التي تكلمنا عنها سابقاً (لسبب ما يؤدي استخدام الهوامش إلى مشاكل) . المتصفح IE 3 لا يدعم استخدام هذه الخاصية .
الخاصية clear :
إذا كنت تريد أن تجعل فقرة ما تلتف حول عنصر طافي في نفس الوقت الذي تريد فيه أن تجعل الفقرة التي تليها تظهر بشكل عادي و لا تلتف حول العنصر ، استخدم الخاصية clear :
P { clear: left }دعنا نلقي نظرة على مثال سريع :
هذه الفقرة تلتف حول صورة طافية إلى اليسار .هذه فقرة أخرى بدون بدون استخدام الخاصية clear معها و لكنها أيضاً تلتف حول الصورة .
و هنا ما سيحدث عند استخدام الخاصية clear :
هذه الفقرة تلتف حول صورة طافية إلى اليسار .هذه فقرة أخرى حددت قيمة clear فيها بالقيمة left ، و لهذا فإن المتصفح يتأكد من خلو الجانب الأيسر لها من أي عنصر طافي قبل أن يعرضها .
يمكنك أن تستخدم القيم left لليسار أو right لليمين أو both لكلا الجانبين .
المتصفح IE 3 لا يدعم هذه الخاصية .
دورة css --الدرس الرابع--
دورة css كاملة للمبتدئين
الدرس الرابع
الخاصية font-style :
هذه الخاصية وظيفتها أن تجعل النص مائل :
H3 { font-style: italic }
الخاصية font-weight :
مع صفحات الأنماط المتعاقبة يمكنك ليس فقط جعل النص سميك أو عادي ، بل أيضاً يمكنك التحكم في درجات السماكة المختلفة :
P { font-weight: bold }
كذلك يمكنك تحديد القيمة باستخدام قيم رقمية من 100 حتى 900 . الخط العادي غير السميك قيمته 400 ، و أقصى قيمة للسمك هي 900 . و بالطبع هذا يعتمد على نوع الخط المستخدم ، حيث أن الخطوط التي ليس بها غير وجهين فقط (عادي و سميك) سوف تظهر القيم من 100 إلى 600 فيها كخط عادي غير سميك ، و القيم من 700 إلى 900 ستظهر كخط سميك . أما الخطوط التي بها تسعة أوجه مبنية داخلها فسوف تظهر كل قيمة بحجمها الأصلي
و لكن احذر فالمتصفحات لا تدعم هذه الخاصية بثبات (و المتصفح IE 3 لا يدعمها على الإطلاق) . و أخيراً .. يمكنك استخدام قيم lighter و bolder ، و هذه القيم سوف تعمل فقط إذا استخدمتهم على عنصر تم تحديد عدة طبقات من السماكة له بالفعل . على سبيل المثال إذا استخدمت القيمة bolder مع عنصر ورث السماكة من عنصر أب ، في هذه الحالة فإن المتصفح سوف يجعل هذا العنصر أكثر سماكة من أبيه ، و إذا لم يكن هناك نسخة أكثر سمكاً من الخط المستخدم فإن المتصفح لن يفعل شيئاً و سيعرض النص بنفس سمك الأب . (المتصفحان IE 3 و نتسكيب كوميونيكتور لا يدعمان هاتان القيمتان) .
الخاصية text-transform :
هذه الخاصية تستخدم للتحكم في حالة الحروف و جعلها كبيرة Uppercase أو صغيرة Lowercase :
B { text-transform: uppercase }
1- uppercase : تجعل كل الحروف بحالة كبيرة . THIS SENTENCE SERVES AS AN EXAMPLE
2- lowercase : تجعل كل الحروف بحالة صغيرة . this sentence serves as an example
3- capitalize : تجعل أول حرف من كل كلمة بحالة كبيرة . This Sentence Serves As An Example
4- none : تعني أن أي قيمة للخاصية text-transform قد ورثها النص المقصود من عنصر أب سيتم تجاهلها و سيعرض النص بشكل عادي . This sentence serves as an example
و لكن المتصفح IE 3 لا يدعم هذه الخاصية .
الخاصية text-decoration :
كنا و لفترة طويلة للغاية لا نملك أي تصرف بشأن حقيقة أن الوصلات التشعبية النصية تظهر بخط سفلي تحتها في المتصفحات المختلفة ، أنا لا أعرف شعورك حيال هذا و لكني أعتقد أنها قبيحة الشكل و مزعجة . و الحل الذي أقدمه لكم الآن هو هذه الخاصية :
و إليك القيم الخاصة بها :
underline : تجعل الكلمات تحتها خط .
Underline words
overline : تجعل الكلمات فوقها خط .
B { text-decoration: underline }
underline : تجعل الكلمات تحتها خط .
Underline words
overline : تجعل الكلمات فوقها خط .
Overline words
line-through : تجعل الكلمات في وسطها خط .
line-through : تجعل الكلمات في وسطها خط .
Linethrough words
blink : تجعل الكلمات تومض .
Blink words
none : تتأكد من عدم حدوث أي من القيم السابقة .
None words
(المتصفح نتسكيب كوميونيكتور لا يدعم القيمة overline ، و المتصفحان IE 4 و IE 5 لا يدعمان القيمة blink ، أما المتصفح IE 3 فلا يدعم أي من هذه القيم .)
القيمة none هي قيمة سحرية تستطيع بواسطتها أن تزيل الخط تحت الوصلات التشعبية النصية كالتالي :
إذا كنت لا تعرف فإن A:link هي التي تحدد شكل الوصلة النصية العادية التي لم يتم النقر عليها ، أما A:active فهي التي تحدد شكل الوصلة أثناء النقر عليها ، و A:visited هي التي تحدد شكل الوصلة التي تم النقر عليها بالفعل من قبل . و القواعد السابقة يمكن أن توضع في صفحات الأنماط المطمورة أو الموصول إليها أو المستوردة ، و لن تتغير شفرة الوصلة التشعبية في الهتمل على الإطلاق :
This text is a link, but it's not underlined
انتظر .. مازال هناك المزيد ، يمكنك أيضاً استخدام أي من خصائص صفحات الأنماط المتعاقبة الأخرى مع A:link و A:visited و A:active ، فيمكنك مثلاً جعل الوصلة التي لم يتم النقر عليها بحجم 12 نقطة بخط Arial سميك ، و جعل الوصلة التي تم النقر عليها بحجم عشر نقاط بخط Times New Roman مائل .
لكن ليس كل المتصفحات تدعم هذه الخاصية الرائعة بشكل كامل ، فالمتصفح نتسكيب كوميونيكيتور يدعم القيم الأساسية لهذه الخاصية و لا يدعم أي خصائص أو قيم إضافية ، و المتصفح IE 3 لا يدعم A:active ، أما المتصفحان IE 4 و IE 5 فهما الأفضل في دعم هذه الخاصية بشكل كامل .
الخاصية font :
none : تتأكد من عدم حدوث أي من القيم السابقة .
None words
(المتصفح نتسكيب كوميونيكتور لا يدعم القيمة overline ، و المتصفحان IE 4 و IE 5 لا يدعمان القيمة blink ، أما المتصفح IE 3 فلا يدعم أي من هذه القيم .)
القيمة none هي قيمة سحرية تستطيع بواسطتها أن تزيل الخط تحت الوصلات التشعبية النصية كالتالي :
A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }
إذا كنت لا تعرف فإن A:link هي التي تحدد شكل الوصلة النصية العادية التي لم يتم النقر عليها ، أما A:active فهي التي تحدد شكل الوصلة أثناء النقر عليها ، و A:visited هي التي تحدد شكل الوصلة التي تم النقر عليها بالفعل من قبل . و القواعد السابقة يمكن أن توضع في صفحات الأنماط المطمورة أو الموصول إليها أو المستوردة ، و لن تتغير شفرة الوصلة التشعبية في الهتمل على الإطلاق :
<A HREF="http://arab-team.com">Link</A>و النتيجة :
This text is a link, but it's not underlined
انتظر .. مازال هناك المزيد ، يمكنك أيضاً استخدام أي من خصائص صفحات الأنماط المتعاقبة الأخرى مع A:link و A:visited و A:active ، فيمكنك مثلاً جعل الوصلة التي لم يتم النقر عليها بحجم 12 نقطة بخط Arial سميك ، و جعل الوصلة التي تم النقر عليها بحجم عشر نقاط بخط Times New Roman مائل .
لكن ليس كل المتصفحات تدعم هذه الخاصية الرائعة بشكل كامل ، فالمتصفح نتسكيب كوميونيكيتور يدعم القيم الأساسية لهذه الخاصية و لا يدعم أي خصائص أو قيم إضافية ، و المتصفح IE 3 لا يدعم A:active ، أما المتصفحان IE 4 و IE 5 فهما الأفضل في دعم هذه الخاصية بشكل كامل .
الخاصية font :
هذه الخاصية هي اختصار لعدد من الخواص مجتمعة ، فهي وسيلة لتحديد حجم الخط font-size ، ارتفاع السطر line-height (سنتكلم عن هذه الخاصية لاحقاً) ، و نوع الخط المستخدم font-family ، كل هذا في خاصية واحدة :
هذه القاعدة تجعل نص الواصفة <LI> بحجم 12 نقطة و بارتفاع سطر 16 نقطة و بخط courier . إذا استعملت هذه الخاصية فيجب عليك أن تحدد حجم الخط و نوعه ، أما بالنسبة لارتفاع السطر فهو اختياري ، و تأكد من أن يكونوا بالترتيب الموضح بالأعلى في المثال .
LI { font: 12pt/16pt courier }
دورة css --الدرس الثالث--
دورة css كاملة للمبتدئين
الدرس الثالث
كيف تخبر المتصفح بالخط الذي تريد عرضه ؟ أنت فقط تكتب اسم الخط بعد font-family أليس كذلك ؟
لسوء الحظ ، المسألة أكثر تعقيداً من هذا . فالخطوط لا تدعى دائماً بنفس الاسم عبر المنصات المختلفة . على سبيل المثال الخط Courier في ماكنتوش يدعى في ويندوز Courier New . و إذا كانت منصة ما تطلق على الخط المائل Italic فإن هناك منصة أخرى تطلق عليه Oblique . و كلما بحثت أكثر ستجد تضارب أكثر .
أكثر من ذلك ، فإن الاسم الذي نطلقه على الخط ، قد يكون مختلف عن الاسم الذي يطلقه الحاسب عليه ، مثلاً الخط Brush Script يطلق عليه الحاسب اسم Brush Script MT و يجب أن تتأكد عندما تستدعي خطاً ما أن يكون بنفس الاسم الذي يعرفه به الحاسب و ليس بالاسم الذي تطلقه عليه .
السؤال الآن : كيف تعرف الاسم الذي يطلقه الحاسب على خط ما ؟ الجواب يختلف حسب المنصة التي تعمل عليها :
السؤال الآن : كيف تعرف الاسم الذي يطلقه الحاسب على خط ما ؟ الجواب يختلف حسب المنصة التي تعمل عليها :
1- مستخدمي ويندوز : استخدموا أسماء الخطوط تماماً كما تظهر في قائمة الخطوط لتطبيق ما ، (مثل مايكروسوفت وورد) .
2- مستخدمي ماكنتوش : لا تثقوا في الأسماء التي تخبركم بها قوائم الخطوط في التطبيقات ، بدلاً من ذلك افتحوا مجلد الخطوط Fonts الموجود داخل مجلد النظام System و اكتبوا الأسماء في شفرة صفحات الأنماط كما تجدونها في مجلد الخطوط تماماً .
الخاصية font-family :
font-family هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي :
إليك الطريقة التي يفسر بها المتصفح هذه القاعدة : انظر إلى أول خط في القائمة (helvetica) ، إذا كان هناك خط بنفس الاسم على هذا الحاسب استخدمه ، إذا لم يكن هناك خط بنفس الاسم على الحاسب انتقل إلى الخط الثاني في القائمة (impact) فإذا لم يكن موجوداً أيضاً انتقل إلى الخط الثالث (sans-serif) و إذا لم يكن موجوداً أيضاً ارجع إلى القيمة الافتراضية لعنوان من المستوى الثاني (عادة تكون Arial) . و هذه هي النتيجة التي سوف يخرج بها المتصفح من القاعدة السابقة :
يمكنك وضع أسماء خطوط في القائمة كما تريد ، و هذه الميزة مفيدة في حالة إذا كنت غير متأكد من اسم خط ما على منصة أخرى ، فيمكنك في هذه الحالة وضع جميع الأسماء التي تشك في أنها صحيحة و إذا صادف المتصفح أحدها سيعرض به النص المطلوب . و لكن يجب أن تأخذ في الاعتبار أن المتصفحات تحب أن تكون أسماء الخطوط بالحروف الصغيرة small .
من الجيد أن تستخدم أسماء خطوط عامة كإسم أخير في قائمتك ، و هذه الأسماء هي :
1- serif : و هو نوع الخط الذي به ذنابة أو شرطة صغيرة في أعلاه أو أسفله (مثل Times New Roman) .
2- sans-serif : و هو الخط الذي ليس به ذنابة (مثل Arial أو Helvetica) .
3- cursive : و هو الخط المشبك الذي يشبه الكتابة اليدوية (مثل Comic Sans) .
2- مستخدمي ماكنتوش : لا تثقوا في الأسماء التي تخبركم بها قوائم الخطوط في التطبيقات ، بدلاً من ذلك افتحوا مجلد الخطوط Fonts الموجود داخل مجلد النظام System و اكتبوا الأسماء في شفرة صفحات الأنماط كما تجدونها في مجلد الخطوط تماماً .
الخاصية font-family :
font-family هي خاصية من خواص صفحات الأنماط تستخدم لاستدعاء الخطوط بالاسم ، تركيبها الأساسي كالتالي :
H2 { font-family: helvetica, impact, sans-serif }
CSS font control is peachy.
يمكنك وضع أسماء خطوط في القائمة كما تريد ، و هذه الميزة مفيدة في حالة إذا كنت غير متأكد من اسم خط ما على منصة أخرى ، فيمكنك في هذه الحالة وضع جميع الأسماء التي تشك في أنها صحيحة و إذا صادف المتصفح أحدها سيعرض به النص المطلوب . و لكن يجب أن تأخذ في الاعتبار أن المتصفحات تحب أن تكون أسماء الخطوط بالحروف الصغيرة small .
من الجيد أن تستخدم أسماء خطوط عامة كإسم أخير في قائمتك ، و هذه الأسماء هي :
1- serif : و هو نوع الخط الذي به ذنابة أو شرطة صغيرة في أعلاه أو أسفله (مثل Times New Roman) .
2- sans-serif : و هو الخط الذي ليس به ذنابة (مثل Arial أو Helvetica) .
3- cursive : و هو الخط المشبك الذي يشبه الكتابة اليدوية (مثل Comic Sans) .
4- fantasy : خط خيالي (مثل Ransom أو Tahoma) .
monospace5- : و هو خط أحادي المسافة أي أن كل حرف فيه له نفس حجم الحروف الأخرى و تكون المسافة بين الحروف و بعضها واحدة لا تتغير (مثل Courier) .
لكن المتصفح نتكسيب كوميونيكيتور لا يدعم أنواع الخطوط Cursive و Fantasy .
و إليك المزيد من النصائح حول أسماء الخطوط :
1- إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Gill Sans ، ضع حوله علامتي اقتباس في شفرتك :
2- بالنسبة للأنماط المضافة في السطر Inline استخدم علامات اقتباس مفردة :
<P STYLE="font-family: 'gill sans', 'lucida sans', serif">Text goes here.</P>
3- إذا كنت تضع عدد من الإعلانات Declarations سوياً في قاعدة صفحة أنماط و كانت font-family بينهم ، اجعلها آخر واحدة فيهم ، فالمتصفح إنترنت إكسبلورر 3 قد يتجاهل قاعدة صفحة الأنماط متعددة الإعلانات بكاملها إذا لم تكن font-family هي الأخيرة في القاعدة :
H2 { color: red; margin: 10px; font-family: times, serif }
الخاصية font-size :
باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء .
هناك ثلاث طرق أساسية لتحديد حجم نص ما :
1- بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى .
2- بالكلمات المفتاحية .
3- بقيم النسبة المئوية .
لكن المتصفح نتكسيب كوميونيكيتور لا يدعم أنواع الخطوط Cursive و Fantasy .
و إليك المزيد من النصائح حول أسماء الخطوط :
1- إذا كان اسم الخط يتكون من أكثر من كلمة واحدة مثل Gill Sans ، ضع حوله علامتي اقتباس في شفرتك :
BODY { font-family: "gill sans", "lucida sans", serif }
<P STYLE="font-family: 'gill sans', 'lucida sans', serif">Text goes here.</P>
3- إذا كنت تضع عدد من الإعلانات Declarations سوياً في قاعدة صفحة أنماط و كانت font-family بينهم ، اجعلها آخر واحدة فيهم ، فالمتصفح إنترنت إكسبلورر 3 قد يتجاهل قاعدة صفحة الأنماط متعددة الإعلانات بكاملها إذا لم تكن font-family هي الأخيرة في القاعدة :
H2 { color: red; margin: 10px; font-family: times, serif }
الخاصية font-size :
باستخدامك للخاصية font-size يصبح لديك تحكم لا يضاهى في حجم النص ، حيث يصبح تحت يديك عدد غير محدود من أحجام الخطوط لتستعملها في تحجيم نصك كما تشاء .
هناك ثلاث طرق أساسية لتحديد حجم نص ما :
1- بالنقاط Points ، أو البكسل Pixels أو وحدات قياس أخرى .
2- بالكلمات المفتاحية .
3- بقيم النسبة المئوية .
- النقاط points أو البكسل pixels أو وحدات القياس الأخرى ..
صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما :
النقاط :
هذه القاعدة تخبر المتصفح أن يظهر نص الواصفة <P> بحجم 16 نقطة . و يعتبر حجم النقطة مألوف لمصممي الطباعة ، و هي تشير إلى صندوق خيالي يمتد من آخر الجزء السفلي من الحرف الذي ينزل عن السطر مثل P إلى أول الجزء العلوي من الحرف الذي يصعد أعلى من السطر مثل d .
النقاط هي وسيلة ممتازة لتحديد حجم النص ، و ذلك لأنها تعمل جيداً عبر المتصفحات و المنصات . الشيء الوحيد الذي يجب أن تحترز له هو أن الخطوط تظهر بشكل افتراضي على شاشات الحاسبات الشخصية Pcs أكبر منها على شاشات حاسبات الماكنتوش . و إن كانت هذه المشكلة تمثل عقبة كبيرة لك ، يمكنك استخدام لغة JavaScript لتحديد المنصة التي يعمل عليها الزائر و الوصل إلى ملف صفحة أنماط مختلف تبعاً لنوع المنصة التي يأتي منها الزائر .
النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أوكبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة "صغير" و 80 نقطة لكلمة "كبير") .
البكسل :
صفحات الأنماط تتعرف على العديد من وحدات القياس التي يمكنك استخدامها في تحديد حجم عنصر ما :
النقاط :
P { font-size: 16pt }
النقاط هي وسيلة ممتازة لتحديد حجم النص ، و ذلك لأنها تعمل جيداً عبر المتصفحات و المنصات . الشيء الوحيد الذي يجب أن تحترز له هو أن الخطوط تظهر بشكل افتراضي على شاشات الحاسبات الشخصية Pcs أكبر منها على شاشات حاسبات الماكنتوش . و إن كانت هذه المشكلة تمثل عقبة كبيرة لك ، يمكنك استخدام لغة JavaScript لتحديد المنصة التي يعمل عليها الزائر و الوصل إلى ملف صفحة أنماط مختلف تبعاً لنوع المنصة التي يأتي منها الزائر .
النقاط مثل كل وحدات القياس الأخرى تستطيع بها جعل النص صغير أوكبير كما تريد . (هذا المثال كان باستخدام 8 نقاط لكلمة "صغير" و 80 نقطة لكلمة "كبير") .
البكسل :
P { font-size: 20px }
من وجهة نظر تصميم الويب ، البكسل هي وحدة قياس مألوفة و يمكن التنبأ بها نسبياً . و في الواقع فإن أفضل شيء في استخدام وحدة البكسل في تحديد حجم النص هو أن حجم النص سيكون متماثل على المنصات المختلفة ، بينما في وحدات القياس الأخرى فإن النص سيظهر على شاشات الحاسبات الشخصية أكبر مما سيكون عليه على شاشات الماكنتوش . و لكن في المقابل فإن النص المحدد الحجم بالبكسل لن يتم طباعته مطابقاً لما تراه ، و في بعض الأحيان لن يتم طباعته على الإطلاق ، و في أحيان أخرى سيتم طباعته بحروف فائقة الصغر . كذلك في بعض إصدارات المتصفحات لن يكون المستخدمين قادرين على تعديل حجم الخط باستخدام إعدادات المتصفح .
و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية :
1- in اختصار inch أي بوصة .
2- cm اختصار centimeter أي سنتيمترات .
و إذا كانت الوحدتين السابقتين لم يعطياك ما ترغب ، استخدم إحدى الوحدات التالية :
1- in اختصار inch أي بوصة .
2- cm اختصار centimeter أي سنتيمترات .
mm3- اختصار millimeter أو ملليمترات .
4- pc اختصار pica أو بيكا .
4- pc اختصار pica أو بيكا .
- الكلمات المفتاحية Keywords :
إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي :
إذا لم ترغب في استخدام وحدات القياس يمكنك أن تعلن حجم النص باستخدام الكلمات المفتاحية كالتالي :
P { font-size: large }هناك سبعة كلمات مفتاحية ، و هي مماثلة للقيم العددية التي اعتدنا على رؤيتها مع الواصفة <FONT SIZE> :
1- xx-small
2- x-small
3- small
2- x-small
3- small
4- medium
5- large
5- large
6- x-large
7- xx-large
بهذه القيم فإن المتصفح حر في اختيار حجم الخط المناسب لكل كلمة مفتاحية . على سبيل المثال x-large تظهر بحجم 28 نقطة في المتصفح نتسكيب كومينيكيتور (ويندوز و ماك) ، بينما سيظهر في المتصفح إنترنت إكسبلورر 4 بحجم 24 نقطة (ويندوز و ماك) ، أما في المتصفح إنترنت إكسبلورر 3 فستظهر بحجم 18 (ويندوز 95) .
يمكنك أيضاً أن تستخدم كلمات مفتاحية نسبية مثل :
1- smaller
2- larger
القيمة smaller تخبر المتصفح أن يعدل حجم النص الحالي و ينزل به درجة في سلم الكلمات المفتاحية . على سبيل المثال إذا كان هناك نص كبير large تم تطبيق السمة smaller عليه فسوف يكون بحجم medium . و بالمثل تكون
السمة larger . و لكن احذر فالمتصفح IE 3 لا يدعم هاتين السمتين .
- قيم النسبة المئوية ..
الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل :
7- xx-large
بهذه القيم فإن المتصفح حر في اختيار حجم الخط المناسب لكل كلمة مفتاحية . على سبيل المثال x-large تظهر بحجم 28 نقطة في المتصفح نتسكيب كومينيكيتور (ويندوز و ماك) ، بينما سيظهر في المتصفح إنترنت إكسبلورر 4 بحجم 24 نقطة (ويندوز و ماك) ، أما في المتصفح إنترنت إكسبلورر 3 فستظهر بحجم 18 (ويندوز 95) .
يمكنك أيضاً أن تستخدم كلمات مفتاحية نسبية مثل :
1- smaller
2- larger
القيمة smaller تخبر المتصفح أن يعدل حجم النص الحالي و ينزل به درجة في سلم الكلمات المفتاحية . على سبيل المثال إذا كان هناك نص كبير large تم تطبيق السمة smaller عليه فسوف يكون بحجم medium . و بالمثل تكون
السمة larger . و لكن احذر فالمتصفح IE 3 لا يدعم هاتين السمتين .
- قيم النسبة المئوية ..
الطريقة الثالثة لتحديد حجم النص هي بتحديد قيمة مئوية للنص مثل :
P { font-size: 15pt }
B { font-size: 300% }
أليس الاختيار ممتع .. فأخيراً أصبح لدينا حرية التحكم كما نريد في حجم النص ، و ذلك بفضل الخاصية font-size التي تعطينا مدى تحكم غير محدود . كما ترى في هذا المثال كل حرف أ في هذا المثال أكبر بـ 5 نقاط من الحرف الذي قبله ، بدءاً من حجم 5 نقاط إلى حجم 100 نقطة . حاول أن تفعل ذلك بالهتمل إذا استطعت .
دورة css --الدرس الثاني--
دورة css كاملة للمبتدئين
لقد قلنا من قبل أن أي واصفة هتمل يمكن أن تعمل كمختار Selector و يرتبط بها إعلانDeclaration لصفحة أنماط ، و لكن ماذا إذا أردت شيئاً أكثر تعقيداً من هذا . على سبيل المثال ، ماذا إذا أردت أن يكون نص جسم الوثيقة أخضر في الفقرة الأولى و أرجواني في الفقرة الثانية و رمادي في الفقرة الثالثة .
هنا يظهر مفهوم الفئات classes ، يمكنك إنشاء ثلاث فئات مختلفة من الواصفة P ، كل واحدة منهم ذات إعلان لصفحة أنماط مختلفة . و سوف تبدو القواعد (سواء كانت مطمورة في وثيقة الهتمل أو في ملف صفحة أنماط خارجي) مثل هذه :
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
<P CLASS="first">The first paragraph, with a class name of "first."</P>
<P CLASS="second">The second paragraph, with a class name of "second."</P>
<P CLASS="third">The third paragraph, with a class name of "third."</P>
.first { color: green }
الآن دعنا نفترض أنك تريد أن تكون كل النصوص السميكة bold باللون الأحمر و لكن فقط في حالة وقوع هذه النصوص السميكة بين واصفة <p> عادية . هذا ممكن عن طريق المختارات السياقيةContextual Selectors و هي مختارات تتطلب أن تصبح حالة ما صحيحة ليتم تنفيذ إعلاناتها :
P B { color: red }
<H1><B>Emma Thompson</B>, Actress</H1>
<P>Dramatic actor, inspired writer, down-to-earth comedienne. Is there <B>nothing</B> she can't do?</P>
التعليقات ..
حتى مع الشفرة الواضحة و البسيطة التي صنعتها في صفحات أنماطك ، فإن التعليق على عملك هو فكرة جيدة ، و لحسن الحظ فإن التعليق ممكن في صفحات الأنماط ، و يمكن أن يستخدم مع أي وصلة كالتالي
P.first { color: green } /* green for the first paragraph of every page */
H1 { text-indent: 10px; font-family: verdana }
IMG { margin-top: 100px } /* give all images a top margin */
ترتيب تنفيذ شفرة صفحات الأنماط ..
المتصفحات التي تدعم صفحات الأنماط لها ترتيب داخلي لتعاقب قواعد صفحات الأنماط تتبعه في حالة كان هناك تضارب في القرارات عند استخدام أكثر من طريقة لإضافة الأنماط إلى الصفحة . مثلاً إذا كان لديك ثلاث قواعد أنماط كلهم يستخدمون الواصفة <P> كمختار : نمط مستورد يخبر المتصفح أن يعرض P بالأحمر ، و آخر مطمور يخبره أن يعرضها بالأزرق ، و آخر في السطر inline يخبره بعرضها بالأصفر . في هذه الحالة فإن المتصفح يلجأ لترتيب التعاقب المبني داخله لحسم الخلاف و هذا الترتيب هو كالتالي :
1- الأنماط التي في السطر inline .
2- الأنماط المطمورة .
3- الأنماط الموصولة .
4- الأنماط المستوردة .
5- أنماط المتصفح الافتراضية .
هذا سريع و أنيق .. أليس كذلك . ليس بهذه السرعة ، لسوء الحظ فإن مايكروسوفت و نتسكيب كانا أقل كمالاً في تنفيذ هذا الترتيب في متصفحاهما . فإذا أضفت الأنماط إلى نفس المختار باستخدام كل هذه الطرق ، فإن المتصفح يعاملها بالطريقة الصحيحة و يعتبر أن الأنماط في السطر أكثر أهمية ثم تأتي بعدها الأنماط المطمورة و هكذا ..
و لكن إذا كانت الأنماط مضافة إلى مختارات مختلفة و تدخَّل التوارث في الأمر فإن الأمر يفقد توازنه ، على سبيل المثال فإن كلا المتصفحين يعطي الأهمية الأكبر للأنماط الموصولة عن الأنماط المطمورة . بالنسبة لك فإن أفضل وسيلة هي أن تلتزم بوسيلة واحدة فقط في إضافة الأنماط إلى صفحتك خاصة عندما تكون متأكداً من أن القواعد سوف تتعارض .
لكن حتى لو عمل ترتيب التعاقب في المتصفح بطريقة صحيحة ، فنحن مازلنا نواجه مشكلة أيضاً ، ماذا يحدث لو كان هناك قواعد متعددة أضيفت بنفس الطريقة و في نفس الوقت تعارض بعضها البعض ؟ مثلاً إذا كان هناك قاعدة مطمورة تعلن أن نص الواصفة <P> سيكون أخضر و في نفس الوقت هناك قاعدة مطمورة أخرى تجعله أحمر .
بفضل الحكماء الذين كتبوا مواصفات صفحات الأنماط ، فإنه يوجد ترتيب أيضاً لحل مثل هذا التعارض . هذا الترتيب معقد قليلاً و لكن إليك هذا الدليل المبسط لما سوف يفحصه المتصفح :
1- استخدم قاعدة صفحة الأنماط المعلنة بتحديد .
مثال
BODY { color: green }
P { color: red }
2-استخدم قاعدة صفحة الأنماط الموروثة .
إذا كانت الخطوة رقم واحد لم ينتج عنها قاعدة فائزة يتم تنفيذها (مثلاً إذا لم يكن هناك قاعدة محددة معلنة ، أو إذا كان هناك العديد من القواعد المحددة معلنة) فإن المتصفح ينتقل إلى هذه الخطوة و يبحث عن قاعدة موروثة و يستخدمها إذا وجدها . إذا لم يجد واحدة أو كان هناك العديد من القواعد الموروثة ، فإن المتصفح ينتقل إلى الخطوة الثالثة .
3- استخدم قواعد الأنماط بنفس الترتيب الذي تظهر به في الشفرة .
مثال :
P { color: green }
P { color: red }
ملحوظة :
مواصفات صفحات الأنماط المتعاقبة الرسمية تدخل في تفاصيل أكثر بكثير عن ترتيب التعاقب هذا متضمنة مفاهيم أخرى للأهمية و التحديد ، و لكن بما أنهم ليسوا مدعومين بشكل جيد من قبل المتصفحات الرئيسية فأنا لن أزعجكم بالكلام عنها في هذه الدروس ، على الأقل حتى تحصل على الدعم الجيد .
سؤال أخير : ماذا سيحدث عند اجتماع قواعد صفحات الأنماط مع الهتمل ؟ إليك هذا المثال :
I { font-family: impact }
<P>I think <I><FONT FACE="Times">East of Eden</FONT></I> is Steinbeck's best novel.</P>
طبقاً لمواصفات صفحات الأنماط الرسمية فإن قاعدة صفحة الأنماط من المفترض أن يتم تنفيذها ، و فقط في حال عدم وجود قاعدة صفحة أنماط قابلة للتطبيق يمكن للمتصفح أن يستخدم واصفات هتمل بدلاً منها .
لكن لسوء الحظ فإن المتصفحات الرئيسية ليست مبنية بهذه الطريقة . المتصفحان Internet Explorer و Netscape communicator يعاملان واصفات الهتمل على أنها أكثر أهمية من قواعد صفحات الأنماط إذا كانت واصفات الهتمل أقرب إلى النص المقصود .
كما ترى فإنه هناك كل أنواع المشاكل بخصوص دعم المتصفحات لصفحات الأنماط المتعاقبة . و إذا أردت أن ألخصها لك في جملة واحدة فهي : "صفحات الأنماط المتعاقبة رائعة و عظيمة ، و لكن المتصفحات ليست بهذه الروعة ."
كان أول متصفح يحاول دعم صفحات الأنماط هو Internet Explorer 3.0 ، و قد كانت محاولته شجاعة ، خاصة في ذلك الوقت حيث كانت المواصفات الرسمية لصفحات الأنماط المتعاقبة غير راسخة بالمرة . و كنتيجة لهذا فإن مايكروسوفت إنترنت إكسبلورر يدعم معظم خصائص صفحات الأنماط المتعاقبة و لو مع بعض الثغرات .
قد تفكر الآن أنه بحلول الوقت الذي خرج فيه المتصفحان إنترنت إكسبلورر 4 و نتسكيب كوميونيكيتور 4 ، كان دعم صفحات الأنماط المتعاقبة فيهما راسخاً رسوخ الصخر . حسناً .. هذا ليس صحيحاً . يبدو أن فرق التطوير في مايكروسوفت و نتسكيب كان لكل منهما تفسيره الخاص لبعض خصائص صفحات الأنماط المتعاقبة ، و بعض الخصائص لم تكن مدعومة على الإطلاق .
لحسن الحظ فإن أكثر من 75 % من مستخدمي الويب يبحرون في الويب باستخدام المتصفح إنترنت إكسبلورر 5 ، و هو ألطف قليلاً مع صفحات الأنماط المتعاقبة - و لكن النسبة لم تصل بعد لـ100 % . الإصدارات التجريبية Beta من IE 6 و Netscape 6 هي إصدارات واعدة للغاية و لكن عدد قليل نسبياً يستعملها .
الطريقة الوحيدة لتفادي المفاجئات غير السارة لزوار موقعك إذا كنت تستخدم شفرة صفحات الأنماط المتعاقبة ، هي أن تختبر شفرتك على متصفحات مختلفة و منصات مختلفة للتأكد من أنها تعمل بشكل سليم على كل المتصفحات و المنصات ، و قد تضطر إلى إنشاء نسخة أخرى (أليفة) من موقعك لتخدم هؤلاء المستخدمين من المدرسة القديمة المصممين على استعمال متصفحات عششت عليها العناكب
دورة css --الدرس الاول--
دورة css كاملة للمبتدئين
الدرس الاول
الفصل بين الشكل و البنية ..
لم تعنى هتمل أبداً بالتحكم في الشكل أو مظهر صفحة الويب ، انها لغة تحدد بنية و وظيفة العناصر في الصفحة ، و تترك المتصفح يقرر كيف ستظهر هذه العناصر بالفعل . و لكن مطوري الويب الساعين نحو الكمال أرادوا المزيد ، و ابتهجوا عندما اخترعت نتسكيب واصفات هتمل جديدة جعلتهم يبدءون في التحكم في المظهر . لجعل النص في جسم الوثيقة body يظهر بالطريقة التي يريدونها كانوا يحيطون الواصفة <p> بالواصفة <font face> ، و <i> ... الخ . بعد ذلك كانوا يضعون كل شيء في صفحات متداخلة و يستخدمون فواصل GIF الخفية لدفعها 20 بكسللتكوين هامش . يا لها من فوضى ، الشفرة ازدادت تعقيداً و ازدادت الصعوبة في إنشاء أو نقل المحتوى إلى الويب بسرعة . صفحات الأنماط تمكننا من التحكم بشكل أكبر بطريقة صحيحة عن طريق فصل الجزء الذي يحدد البنية عن الجزء الذي يحدد الشكل . و بهذا تظل شفرة الهتمل نظيفة و بسيطة كما هو مقرر لها ، و شفرة صفحات الأنماط تتحكم في المظهر من بعيد .
التحكم بالتخطيط أكثر من ذي قبل ..
بالطبع <font size> مكنتنا من تحديد حجم النص ، و واصفات الجدول ساعدتنا على إنشاء هوامش . لكن بالرغم من كل شيء فإن ما يمكننا فعله بالهتمل كان محدوداً للغاية ، فليس في إمكاننا عمل نص بطول 80 بكسل ، ليس في إمكاننا تحديد الهوامش بسهولة ، ليس في إمكاننا التحكم في المسافات بين السطور أو الكلمات ، ليس في إمكاننا تحديد مكان الصور بدقة على الشاشة . و حتى الآن فإن صفحات الأنماط جعلت كل هذا ممكناً و أكثر ، و وعدتنا بأن المستقبل سيكون أكثر إثارة .
عمل صفحات أصغر و أسرع ..
إليك المزيد من الأخبار الجيدة : صفحات الأنماط هي نص بسيط ، مثل هتمل ، لا رسوميات ، لا برامج تنفيذية ، لا إضافات ، لا تدفقات ، لا تأخير . انها بنفس سرعة شفرة الهتمل المباشرة . و مع صفحات الأنماط يمكنك فعل أشياء كنت تلجأ إلى صور GIF لعملها . و كما ذكرنا مسبقاً فإن صفحات الأنماط تعني واصفات جدول أقل بالإضافة إلى تقليل الواصفات الأخرى التي تجعل شفرتك فوضى غير منظمة ، و هكذا فإن شفرة أقل و رسوميات أقل تعني أحجام ملفات أقل .
صيانة أو تحديث العديد من الصفحات بسهولة و سرعة ..
بدون صفحات الأنماط إذا أردت أن أغير الخط المستخدم في نصوص الجسم في جميع صفحات موقعي ، فسيكون على أن أحرر كل صفحة على حدة يدوياً . و لكن مع صفحات الأنماط يمكنني أن أجعل كل صفحات موقعي تشير إلى وثيقة CSS واحدة ، و إذا أردت أن أغير نص الجسم فكل ما علي فعله هو تغيير سطر واحد من هذه الوثيقة ، و الموقع بكامله يتم تحديثه في الحال .
بعكس تقنيات أخرى للويب فإن صفحات الأنماط تتحلل بسهولة ، و هذا يعني أن المستخدمين لن يحصلوا على أيقونة مكسورة ساطعة إذا كانوا لم يركبوا إضافة plug-in ما ، أو شفرة بلا معنى إذا كانوا يستخدمون متصفح قديم نسبياً . المتصفحات التي تدعم صفحات الأنماط تستخدمها ، و المتصفحات التي لا تدعمها تتجاهلها .
هل اقتنعت الآن بأن صفحات الأنماط هي فكرة جيدة ؟ حسناً .. دعنا نصنع واحدة .
شغل محرر الهتمل المفضل لديك و اصنع صفحة ويب أساسية :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
<STYLE TYPE="text/css">
<!--
H1 { color: green; font-size: 37px; font-family: impact }
P { text-indent: 1cm; background: yellow; font-family: courier }
-->
</STYLE>
افتح الصفحة في متصفحك ، و سوف ترى هذا :
تهانينا .. لقد أنشأت أول صفحة ويب مدعمة بصفحات الأنماط .
لنلق نظرة الآن على الشفرة الجديدة التي نراها لأول مرة . إن قلب صفحات الأنماط هو القواعد ، و أبسط هذه القواعد تبدو مثل هذا :
H1 { color: green }
كل قاعدة تتكون من مختار Selector و إعلان Declaration . في المثال أعلاه تعتبر H1 هي المختار ، و هي واصفة هتمل التي يرتبط بها النمط . أما الإعلان فهو يحدد ماذا يكون النمط ، و هو يتكون أيضاً من جزءين : الخاصية Property و هو في هذه الحالة color ، و القيمة Value و هي هنا green .
أي واصفة هتمل يمكن أن تستخدم كمختار ، و هكذا يمكنك ربط معلومات صفحات الأنماط بأي عنصر بدءاً من نص <p> العادي إلى محتويات <table> و <code> ، يمكنك حتى استخدام بعض خصائص صفحات الأنماط المتعاقبة على الرسوميات و ذلك بتطبيقهم على الواصفة <img> .
و كما ترى من مثالنا الأول ، يمكنك أن تجمع القواعد سوياً ، فنحن قد أعددنا ثلاثة إعلانات في وقت واحد للواصفة <p> . و بشكل مماثل يمكنك أيضاً جمع المختارات مثل :
H1, P, BLOCKQUOTE { font-family: arial }
قواعد صفحات الأنماط تورث من الأب إلى الابن ، و إليك هذا المثال :
B { color: blue }
<B>All my web pages will use Cascading Stylesheets within <I>four</I> weeks.</B>
All my web pages will use Cascading Stylesheets within four weeks.
1- طمر صفحة الأنماط داخل صفحة الهتمل .
2- الربط إلى صفحة أنماط خارجية من صفحة هتمل .
3- استيراد صفحة أنماط خارجية إلى صفحة الهتمل .
4- إضافة الأنماط سطر بسطر inline في صفحة الهتمل .
طمر صفحة الأنماط .. Embedding Stylesheets
و هذه هي الوسيلة التي استعملناها في المثال السابق ، كل معلومات صفحة الأنماط توجد في أعلى صفحة الهتمل منفصلة عن شفرة جسم الوثيقة . عندما تطمر قواعد صفحة أنماط فإن المتصفحات تحترمها حتى نهاية الوثيقة ، و هذه هي الطريقة المثالية لتعديل صفحة واحدة فقط إذا ما احتجت لهذا .
قد تكون لاحظت شيئان غريبان في قواعد صفحة الأنماط في المثال الأول ، و هي الصفة :
و واصفات التعليق في هتمل --!> و <-- . أولاً الصفة Type تحدد نوع MIME حتى تستطيع المتصفحات التي لا تدعم صفحات الأنماط أن تتجاهلها . أما واصفات التعليق في هتمل فهي أكثر أهمية ، فبعض المتصفحات الأقدم (مثل المتصفح IE 2.0 لأجهزة الماكنتوش) لن تتعرف على صفحات الأنماط برغم وجود الصفة TYPE ، و سوف تظهر شفرة صفحات الأنماط نفسها . هذا ليس شيئاً جيداً ، و يمكنك التخلص منه باستعمال الصفة TYPE و واصفات التعليق دائماً .
الربط إلى صفحة أنماط خارجية .. Linking to external Stylesheets
هنا تبدأ القوة الكامنة في صفحات الأنماط في الظهور ، فبدلاً من طمر شفرة صفحات الأنماط في كل صفحة على حدة يمكنك توجيه عدة صفحات هتمل إلى وثيقة صفحة أنماط مركزية . هذا الملف الخارجي سوف يعد القواعد لكل صفحاتك . إذا غيرت شيء ما مثل حجم الخط في ملف صفحة الأنماط فإن كل صفحاتك ستعكس هذا التغيير على الفور . و إذا كنت تقوم بصيانة موقع كبير فهذه الميزة هي الجنة بالنسبة لك . و إليك طريقة استخدامها : أنشيء صفحة الويب كالمعتاد و لكن بدلاً من استخدام الواصفة <STYLE> استخدم الواصفة <LINK> بين واصفات الرأس <HEAD> ، مثل :
و مع صفحة الأنماط الموصولة أنت لا تحتاج إلى استعمال واصفات التعليق . الآن أنشيء ملف نصي منفصل اسمه mystyles.css أو أي شيء تريده (و لكن راعي تغيير الوصلة في الشفرة) و يحتوي على هذا :
طمر صفحة الأنماط .. Embedding Stylesheets
و هذه هي الوسيلة التي استعملناها في المثال السابق ، كل معلومات صفحة الأنماط توجد في أعلى صفحة الهتمل منفصلة عن شفرة جسم الوثيقة . عندما تطمر قواعد صفحة أنماط فإن المتصفحات تحترمها حتى نهاية الوثيقة ، و هذه هي الطريقة المثالية لتعديل صفحة واحدة فقط إذا ما احتجت لهذا .
قد تكون لاحظت شيئان غريبان في قواعد صفحة الأنماط في المثال الأول ، و هي الصفة :
TYPE="text/css"
الربط إلى صفحة أنماط خارجية .. Linking to external Stylesheets
هنا تبدأ القوة الكامنة في صفحات الأنماط في الظهور ، فبدلاً من طمر شفرة صفحات الأنماط في كل صفحة على حدة يمكنك توجيه عدة صفحات هتمل إلى وثيقة صفحة أنماط مركزية . هذا الملف الخارجي سوف يعد القواعد لكل صفحاتك . إذا غيرت شيء ما مثل حجم الخط في ملف صفحة الأنماط فإن كل صفحاتك ستعكس هذا التغيير على الفور . و إذا كنت تقوم بصيانة موقع كبير فهذه الميزة هي الجنة بالنسبة لك . و إليك طريقة استخدامها : أنشيء صفحة الويب كالمعتاد و لكن بدلاً من استخدام الواصفة <STYLE> استخدم الواصفة <LINK> بين واصفات الرأس <HEAD> ، مثل :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
و مع صفحة الأنماط الموصولة أنت لا تحتاج إلى استعمال واصفات التعليق . الآن أنشيء ملف نصي منفصل اسمه mystyles.css أو أي شيء تريده (و لكن راعي تغيير الوصلة في الشفرة) و يحتوي على هذا :
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
استيراد صفحة أنماط خارجية .. Importing an external Stylesheet
استيراد صفحة أنماط خارجية تعمل بشكل مشابه للوصل إلى صفحة أنماط خارجية ، و لكن الفرق يكمن في أنك لا يمكن أن تجمع بين طريقة الوصل و الطرق الأخرى في حين أنه يمكن الجمع بين الاستيراد و الطرق الأخرى . إليك هذا المثال :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<STYLE TYPE="text/css">
<!--
@import url (company.css) ;
H1 { color: orange; font-family: impact }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Stylesheets : the Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
و لنقل أن الملف company.css يبدو مثل هذا :
H1 { color: green; font-family: times }
P { background: yellow; font-family: courier}
المرونة في استيراد صفحات الأنماط مدهشة حقاً . يمكنك استيراد ما تشاء من صفحات الأنماط و تتخطاهم بنمط مطمور في الصفحة كما تريد . لسوء الحظ فإن المتصفحات قد تباطأت في دعم هذه الطريقة لإضافة صفحات الأنماط إلى صفحات الويب ، و قد دعمها فقط متصفح IE 4 و IE 5 و لذلك فأنا لا أنصح باستعمالها في الوقت الحالي .
إضافة الأنماط في السطر inline ..
و أخيراً .. يمكنك إضافة الأنماط سطر بسطر inline و هذا يعني إضافة قواعد صفحة الأنماط في منتصف شفرة الهتمل ، و يمكن أن تبدو مثل هذا :
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
<P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
تذكر أنك يمكن أن تستخدم أكثر من طريقة من هذه الطرق في نفس الوقت ، و الواقع فإن قوة صفحات الأنماط تكمن في الجمع بين الطرق التي تضيف الأنماط إلى صفحات الويب .
تابع باقي الدورة في الدرس الثاني ..
الدروس كاملة يمكن ان تجدها في الرابط التالي ..
طريقة ترقيم صفحات المشاركات في مدونة بلوجر
ترقيم صفحات المشاركات في مدونة بلوجر !!
الان نقدم لكم افضل طريقة لترقيم الصفحات في مدونتك بلوجر وباشكال احترافية تجعل من المدونة لوحة فنية رائعة ...
صورة لمعاينة الاضافة
طريقة تفعيل الاضافة ...
1. اولا نقوم بفتح اعدادات القالب ثم تحرير كود html كما بالصورة التالية ...
2. نقوم بالبحث عن الكود التالي (البجث يتم باستخدام المفاتيح ctrl+f)
نبحث عن الكود التالي ..
]]></b:skin>
3. قم باضافة الكود التالي فوقها مباشرة ..
.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}
4. نقوم بالبحث عن الكود التالي ...
</body>
ثم نقوم باضافة الكود التالي فوقها مباشرة ...
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
ثم نقوم بحفظ القالب ومعاينة الاضافة ...
** عند وجود اي مشاكل يمكنك ادراج رد وسيتم حل المشكلة بالكامل
اضافة اخر المشاركات في بلوجر
اضافة اخر المشاركات بشكل جذاب
الاضافة الاهم في منصات بلوجر وهي اخر المواضيع وهي شبيهة باضافة المشاركات الشائعة ولحكنها تعتمد على المواضيع التتي تمت اضافتها حديثاً وهذا ما يميزها عن المشاركات الشائعة ...
صورة لمعاينة الاضافة
** طريقة اضافة اخر المشاركات في مدونة بلوجر ..
1. قم بفتح اعدادات التخطيط واختر اضافة اداة html/java ثم ضع بها احد الاكواد التالية ..
الكود الاول : لعرض اخر المشاركات بدون صورة من المشاركة ..
<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
<script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="http://wwwkmxe.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
الكود الثاني : لعرض اخر المشاركات مع صورة خاصة بالمشاركة ..
<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
<script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="http://http://wwwkmxe.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
الكود الثالث : لعر اخر المشاركات على شكل قائمة مثل الارشيف ...
<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
<script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script type="text/javascript" src="http://http://wwwkmxe.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
واخيراً قم بتغيير عنوان المدونة باللون الاحمر الى رابط مدونتك وثم بحفظ الاضافة ..
عند وجود اي مشاكل في الاضافة يمكن اضافة رد وسيتم حلها ..
الاشتراك في:
الرسائل (Atom)