فهرس دورة 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 }
الاشتراك في:
الرسائل (Atom)