نصائح حول css

ماهي CSS ؟
CSS هي اختصار لـ Cascading Style Sheet و هي ما تعرف بالعربية بصفحات الأنماط الانسيابيه .. وهي المسؤله عن التحكم في كيفية ظهور و عرض عناصر صفحات الويب حيث يمكننا من خلالها التحكم في الخلفيات و الوان الخطوط وتحديد نوع الخط المستخدم وحجمه وتنسيقه و المسافة بين السطور و عرض و ارتفاع العناصر ….. و الكثير من الخصائص التي سنتناولها في دروس لاحقه باذن الله .

ما هي مميزات CSS ؟

فصل المحتوى عن التصميم .
توفير الكثير من الوقت عند تصميم و تعديل الصفحات .
اتاحة الكثير من الخواص التي يمكن استخدامها في تنسيق العناصر.
تقليل حجم الصفحات .
التقليل من الوقت اللازم لظهور الصفحات .

ماذا احتاج لكتابة CSS ؟

اولا : ستحتاج محرر نصوص لكتابة أكوادك … هناك الكثير من البرامج التي يمكنك استخدامها مثل NotePad++ , topstyle , coda وغيرها من البرامج .
هذه الروابط قد تفيدك في اختيار المحرر الذي يناسبك :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
ثانيا ستحتاج مستعرض ويب لمعاينة ما ستقوم بكتابته . الخيارات متعددة ولكن أنصحك باستخدام فايرفوكس حيث ان دعمه لمعايير CSS كبير كما ان هناك عدد من الاضافات التي يمكن تركيبها عليه ستفيدك اثناء معاينة الصفحات كاضافة FireBug
انصحك ايضا بعدم استخدام IE في بداية تعلمك ل CSS حيث انه فقير بعض الشئ في التعامل مع بعض خصائص css ويتعامل مع البعض الاخر بطريقة مختلفة عن بقية المتصفحات .
كيف أطبق CSS على الصفحات ؟
هناك ثلاث طرق لتطبيق خواص CSS على الصفحات ..
External Stylesheet :
وهي افضل طريقة لتطبيق سمات CSS على أكثر من صفحة ، حيث يتم كتابة اكواد CSS في ملف خارجي يحمل الامتداد css و يتم تضمينه في الملف عن طريق كتابه هذا السطر في الترويسه Head للصفحة المراد تضمين الملف فيها .
مثال :
<link rel="stylesheet" type="text/css" href="css/style.css" />

او
<style type="text/css">@import url("css/style.css");</style>

حيث css/style.css هو مسار ملف CSS المراد تضمينه في الصفحة .
Internal Stylesheet
وتستخدم هذه الطريقة عند الرغبة في تطبيق مجموعه من السمات على صفحة واحده فقط و يتم ذلك عن طريق تضمين خواص CSS في الترويسه كالتالي :
<head>
<style type="text/css">
الأنماط المراد تطبيقها على الصفحة
</style>
</head>

Inline Styles
و تستخدم هذه الطريقة عند الرغبة في تطبيق خواص CSS على عنصر ما و تستخدم هذه الطريقة كالتالي :
محتوى العنصر

أولوية تطبيق خواص CSS ?
اذا تعددت نفس الخواص المطبقة على عنصر ما .. فأولوية استخدام الخواص من قبل المستعرض ستكون بالشكل التالي ..

Inline Styles ( خواص css للعنصر )
Internal Stylesheet (خواص css الداخلية للملف )
External Stylesheet ملف css الخارجي
القيمة الافتراضية للخواص في المستعرض .

هيكلية كتابة أكواد CSS
selector { property: value }

selector : يمكنني تعريفه بانه مؤشر او دليل للعنصر الذي اريد ان اطبق عليه خواص CSS هذا المؤشر قد يشير صراحة للعنصر عن طريق كتابه اسمه مثال :
p{
font-family:Tahoma;
padding: 8px ;
text-align:center;
}

بالطريقة السابقة سيتم تطبيق خواص css الى كافه الفقرات ولكن ماذا اذا اردت ان أخصص فقرة معينه بخواص خاصه بها ..حسنا هنا سنلجأ لاستخدام class او id وهنا سيشير selector الى اسم class او id للعنصر لمزيد من التوضيح لنأخذ هذه الامثله .
مثال لاستخدام class :
.paragraph1{
padding: 10px ;
color:#FF0000;
}

لنأتي الان لتعريف الفقرة التي نريد ان نطبق هذه الخواص عليها بالشكل التالي :

محتوى العنصر

مثال على استخدام id :
#paragraph2{
padding: 15px ;
color:#ccc;
}

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

هل لا حظت الفرق في طريقة تعريف class و id في css ؟ … نعم يسبق اسم id رمز (#) اما class فيسبقها نقطه ( . ) … سنعرف الفرق بين class و id و متى نستخدم اي منهما في درس قادم ان شاء الله .
property : وهي اسم الخاصية التي نريد تطبيقها على العنصر .
value : وهي القيمة التي يتم اسنادها الى الخاصية property .
ملاحظات :

تكتب الخواص بين اقواس معقوفة }{
يتم الفصل بين property و value بواسطة نقطين ( : )
عند الرغبة في وضع أكثر من property للعنصر يجب ان يتم الفصل بينهم عن طريق وضع فاصلة منقوطة ([ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] بعد القيمة
عند استخدام قيمة مكونة من اكثر من شطر يجب ان توضع بين علامتي تنصيص كالتالي : p {
font-family: "Times New Roman"
}
عند استخدام اكثر من قيمة لخاصية واحدة يجب ان نفصل بين كل منهم بفاصله (,) كالتالي : p {
font-family:Arial, Helvetica, sans-serif
}
عند استخدام احدى الخواص و التي تاخذ قيمة عددية يجب الا تترك مسافة بين العدد و الوحدة المستخدمة (px , pt ,% ….) مثال . p {
margin-right: 5px; /* صياغه صحيحه */
margin-top: 10 px; /* صياغه خاطئة */
}

منح اكثر من عنصر نفس الخواص ( Grouping ) :
عند الرغبة في منح أكثر من عنصر نفس الخواص يتم الفصل بينهم بفاصله ( , ) مثال :
h1 , h2 , #name1 , .name2 {
color:#FF0000;
}

النعليقات في CSS :
تستخدم التعليقات لشرح اكوادك او لتذكيرك بشئ ما عند العودة للتعديل عليها .. التعليقات سيتم تجاهلها من قبل المستعرض .. تبدأ التعليقات في css بـ ” /* ” و تنتهي بـ ” */ ”
مثال :
/* هذا تعليق */
p {
color:#FF0000; /* اللون المستخدم للنصوص هو الاحمر */
}
/* هذا
تعليق
اخر
*/