أجلت طرح هذه الدروس مراراً وتكراراً، إلى أن اضطررت اليوم لطرحها وبشكل سريع ومكثف، لأنني بعد أيام لن أتواصل معكم لأشهر عدة، ولا يزال لدي الكثير لأقدمه، ولا أريد أن أرحل دون أن أوصل الخير للغير، وهذه دروس حول تقنية CSS سأحاول أن أجعلها كثيفة وبسيطة وقصيرة في نفس الوقت، CSS هي تقنية تتهتم بتحديد شكل وتصميم المواقع، وشخصياً أرى أن أفضل ما تعلمته في مجال إنشاء المواقع بعد الأساسيات هو تعلم هذه التقنية، فهي مرنة وسهلة وقوية، وسنرى الآن كيف تساعدك هذه التقنية على تبسيط عملية إنشاء وإدارة المواقع.
كما أسلفت هذه التقنية تهتم بتحديد شكل وتصميم الموقع، وهذا ينطبق على الألوان والخطوط الصور الخلفية (التي تستخدم في التصميم)، ربما سيقول البعض بأن لغة HTML تفعل ذلك، وهذا صحيح، لكن هناك مشكلة تسببها لغة HTML، وهي أن شكل الموقع لا ينفصل عن محتوياته، فإذا أردت أن تقوم بتعديل أي جزء من التصميم في موقعك فستقوم بتعديل كافة ملفات HTML، وهذه عملية متعبة للمواقع الكبيرة، وهناك مشاكل أخرى، وCSS تقدم الحل لها، دعونا ننظر إلى هذا المثال:
هذه الصفحة تحتوي على ثلاث فقرات تحتوي ثلاث عناوين، حددنا لكل عنوان خط Tahoma بمقياس 2 وحددنا له لوناً، الآن ستدخل CSS لتغير بعض الأمور، لا تقلق، سنقوم بشرح أوامر CSS بالتفصيل في دروس قادمة:كود:<html> <head> <title>عنوان</title> </head> <body> <p><font face="Tahoma" color="#677393" size="2">عنوان أول</font></p> <p><font face="Tahoma" color="#677393" size="2">عنوان ثاني</font></p> <p><font face="Tahoma" color="#677393" size="2">عنوان ثالث</font></p> </body> </html>
حسناً، أول ملاحظة قد تلاحظها أن الصفحة أصبحت أكثر بساطة وتستطيع قراءتها بسهولة، الملاحظة الثانية هي أننا أضفنا أوامر CSS بين وسمي <style> في رأس الصفحة <head>، وتم تطبيق الأوامر على جميع فقرات الصفحة، هذا هو ما تفعله CSS، أن تحدد شكل الصفحة وتصميمها لمرة واحدة، ثم تطبق ذلك على جميع صفحات الموقع، الآن وقد عرفت ماذا تفعل CSS، لنتعرف على أساليب إضافتها في صفحات HTML، الطريقة الأولى وهي التي استخدمناها في المقال، وهي أن نضع الأوامر في رأس الصفحة:كود:<html> <head> <title>عنوان</title> <style> p { font: 13px Tahoma; color: #677393; } </style> </head> <body> <p>عنوان أول</p> <p>عنوان ثاني</p> <p>عنوان ثالث</p> </body> </html>
الطريقة الثانية وهي أن تطبق CSS مباشرة في HTML وهذه الطريقة تسمى inline، وهذا مثال لها:كود:<style type=”text/css”> CSS styles here </style>أما الطريقة الثالثة فهي أن تنشأ ملفاً نصياً وتسمه بأي اسم المهم أن يكون الامتداد css (مثال: mystyle.css) وتضع فيه أوامر CSS، ثم ومن خلال صفحة HTML تقوم بربط الصفحة بهذا الملف هكذا:كود:<p style="font: 13px Tahoma; color: #677393;">عنوان أول</p>
ما هي فائدة CSS؟كود:<html> <head> <title>عنوان</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p>عنوان أول</p> <p>عنوان ثاني</p> <p>عنوان ثالث</p> </body> </html>
1) تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة (bandwidth) التي يحتاجها الموقع ستقل.
2) تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
3) فصل المحتويات تماماً عن التصميم، والتحكم بالتصميم من خلال ملف واحد فقط.
4) فصل المحتويات عن التصميم يؤدي إلى أن يكون الموقع متوافقاً مع أجهزة أخرى كالحواسيب الكفية.
أذكر في النهاية أن تعلم CSS يعني أنك ستصمم المواقع بأسلوب مختلف تماماً عما تعلمته سابقاً، فأنت لن تستخدم الجداول أبداً في تصميم الموقع، فالجداول تستخدم فقط للبيانات التي تحتاج أن تكون في جداول، كأسماء الطلبة في مدرسة مثلاً، أما التصميم سيكون باستخدام css بالكامل، وقد يكون هذا في البداية صعباً، لكنك ستتعود عليه وتتعلمه بسهولة، وهذه هي المعايير التي وضعتها منظمة W3C لكي يكون الموقع قابلاً للاستخدام من قبل شريحة واسعة من المتصفحين كذوي الاحتياجات الخاصة، وإليك قائمة بمواقع تم تصميمها بلغة CSS ودون الاستعانة بأية جداول للتصميم (إذا كانت هناك أية جداول فهي فقط للبيانات ولا علاقة لها بالتصميم):
- http://espn.go.com/main.html
- http://www.cingular.com
- http://www.mbusa.com
- http://www.wired.com
- http://www.fastcompany.com/homepage/index.html
- http://www.iht.com/frontpage.html
- http://www.clagnut.com/
- www.sitepoint.com
ملاحظة 1 : أنا غير مسؤول عن محتويات المواقع أعلاه، هي فقط أمثلة أضعها.
ملاحظة 2: هذه الدروس أخذت من مصادر عديدة وكذلك كتبتها من خبراتي الشخصية.
<----- اندمج مع نفسه