أساسيات لغة CSS
أهلاً بكم في أول درس عن لغة CSS، وهي لغة سهلة وبسيطة تستخدم إلى جانب لغة الـ HTML، لتنسيق صفحات الإنترنت، لذا أتوقع أنك قرأت الدروس السابقة التي كتبتها عن لغة الـ HTML، فإنك بدونها لن تستطيع فهم هذه اللغة لأنها تعتمد على سابقتها، لذا لا بد من دراسة الـ HTML قبل الشروع بدراسة هذه اللغة. لغة CSS اختصار من Cascading Style Sheet وتعني بالعربية (صفحة الأنماط الإنسيابية). __________ الدرس الأول: أولى الخطوات افتح محرر النصوص (Notepad) من Start ثم Programs ثم Accessories ثم برنامج Notepad. اكتب الكود التالي:/* File Name: My First Website */
ثم من لائحة File اختر الأمر Save As ثم اختر مكان التخزين، وليكن على سبيل المثال My Document، وخزن المستند بإسم Website.css (لا تنسى وضع النقطة بين إسم المستند وكلمة CSS لتعريف الكمبيوتر بأن هذا المستند من نوع CSS)لكن ماذا تعني العبارة التي كتبناها؟ (/* File Name: My First Website */)، إنها مجرد ملاحظة لا تظهر على صفحة الويب، لتعريف أي مبرمج بإسم المستند الذي كتبته بلغة CSS، وتستطيع وضع الملاحظة التي تريدها بين العلامتين (/* و */). __________ الدرس الثاني: تلوين أشرطة التمرير اكتب الكود التالي في محرر النصوص: Body
{
Scrollbar-base-color:#00ffff;
Scrollbar-arrow-color:#ffff00;
Scrollbar-track-color:#00ffff;
Scrollbar-face-color:#0000ff;
}
ماذا فعلنا؟ هذا الكود خاص بأشرطة التمرير ويقوم بتلوينها، لرؤية مثال عملي على ذلك، زر موقعنا الإلكتروني على شبكة الإنترنت http://ammanstudents.piczo.com، ستلاحظ أن أشرطة التمرير في هذه الصفحة ملونة باللون الأخضر الفاتح، لقد قام فريق Amman Students بتلوينها باستخدام هذه اللغة، بالنسبة للكود (Scrollbar-base-color:#00ffff;) فإنه يقوم بتلوين قاعدة أشرطة التمرير باللون الأزرق الفاتح، نستطيع أن نسميه (دهان الأساس)، أما الكود (Scrollbar-arrow-color:#ffff00;) فيقوم بتلوين السهم في شريط التمرير باللون الأصفر، أما الكود (Scrollbar-track-color:#00ffff;) فيقوم بتلوين خلفية شريط التمرير باللون الأزرق الفاتح، أما الكود (Scrollbar-face-color:#0000ff;) فيقوم بتلوين واجهة شريط التمرير باللون الأزرق الغامق. · ملاحظات هامة:1- يجب كتابة الكود كما هو أعلاه.2- وضعنا الكود body لأننا نريد تطبيق هذا الكود في الجزء body من لغة Html (راجع دروس الـ HTML لمزيد من التفاصيل).3- نضع القوسين } و { لحصر الكود المراد استخدامه، وهي تشبه وظيفة < و < في لغة HTML.4- نستخدم الرمز ; بعد كل أمر، لإعلام المحرر بنهاية هذا الأمر.5- نستخدم النظام العشري لوضع الألوان (راجع دروس الـ HTML) ** رموز الألوان الأساسية:- اللون الأبيض #ffffff- اللون الأسود #000000- اللون الأزرق #0000ff- اللون الأحمر #ff0000- اللون الأخضر #00ff00 _________ الدرس الثالث: تنسيق النصوص · الكود Family اكتب الكود التالي: Body
{
Font-family:Arial
Font-size:10pt;
Font-weight:bold;
Font-color:#ff0000;
}
الكود (Font-family:Arial) لتحديد نوع الخط، أما الكود (Font-size:10pt;) لتحديد حجم الخط بالنقاط وهو في هذا المثال 10 نقاط، أما الكود (Font-weight:bold;) لتحديد عرض الخط، وهو هنا عريض، أما الكود (Font-color:#ff0000;) لتحديد لون الخط، وهو هنا أحمر. · الكود Text اكتب الكود التالي: Body
{
Text-align:center;
}
يستعمل هذا الكود لتحديد اتجاه الكتابة وهو هنا في منتصف الصفحة. __________ الدرس الرابع: الخلفيات اكتب الكود التالي: Body
{
Background-color:#00ff00;
}
هذا الكود يقوم بتلوين الخلفية باللون الأخضر الفاتح. الآن، اكتب الكود التالي: Body
{
Background-image:(url:"http://ammanstudents.malware-site.www/logo.jpg");
}
هذا الكود يقوم بوضع الصورة Logo.jpg خلفية للصفحة. __________ الدرس الخامس والأخير: ربط المستند CSS بصفحة انترنت من المؤكد أنك لاحظت أننا طوال الدروس السابقة تعلمنا كيف نكتب بعض أكواد CSS لكننا لم نرى تطبيق عملي لما كتبناه، الآن افتح محرر النصوص وإكتب الكود التالي: <html>
<head>
<title> Amman Students </title>
</head>
<body>
<link></body>
</html>
الكود باللون الأحمر هو الكود الخاص بربط صفحة CSS مع صفحة HTML، حيث نعرف المحرر أننا نستخدم الأنماط الإنسيابية وهي من نوع (نص مكتوب بلغة CSS)، ثم نضع المصدر، وهو اسم المستند الذي كتبناه في الدرس الأول (Website.css)، طبعا لا تنسى وضع جميع العمل الذي قمنا به داخل مجلد Folder، بقيت الخطوة الأخيرة، وهي من لائحة File نحفظ هذا المستند باسم (Website.html)، ستجد أنك إذا كتبت أي نص أو أضفت أي صورة لصفحتك بإنها بالتأكيد ستخضع للتنسيق الذي وضعته بلغة الـ CSS. لكن لا بد من ايضاح نقطتين قبل النهاية، الأولى: هي أننا وضعنا أساسيات لغة CSS وليس كل شيء عنها، فهي لغة واسعة، ثانيا: قد تتساءل لماذا نستخدم لغة معظم أكوادها موجودة في الـ HTML؟ والجواب هو لنفترض أنك تريد تصميم 50 صفحة انترنت بنفس لون الخلفية وألوان الخطوط ... الخ، فانه من الأسهل أن تستخدم مستند CSS تربطه مع كل الصفحات بدلا من نسخ أكواد كل صفحة ولصقها في الصفحة التي تليها. شكراً لكم ... رئيس فريق Amman Students: محمود عبد الناصر التكريتي
موضوع: أساسيات لغة الـ CSS 
الأربعاء سبتمبر 05, 2007 7:32 pm
