Cascading Style Sheets

CSS هي اختصار Cascading Style Sheets، وترجمتها صفحة الأنماط المتعاقبة، وظيفة هذه التقنية هي التحكم بكيفية عرض أوامر html، بمعنى أنها تتحكم الأشكال والألوان والخطوط وكل شيء له علاقة بالمظهر، لكنها لا تتحكم بالمحتويات، وهذا يعني أن المحتويات تصبح منفصلة تماماً عن الشكل الذي يجب أن تظهر عليه، وهذا يسهل من عملية إدارة المواقع، فتعديل ملف CSS واحد سيؤثر على تصميم كافة صفحات الموقع.
CSS تلغي الحاجة إلى استخدام الكثير من أوامر HTML، كأمر font الذي يحدد حجم ونوع ولون الخطوط، كذلك الأمر table الذي يستخدم لإنشاء الجداول، بمعنى آخر يستطيع أي مصمم باستخدام CSS أن يصمم موقعه بالكامل دون استخدام الجداول كما هو متبع في طرق التصميم التقليدية، ولا يعني هذا أن الجداول لن تستخدم أبداً مع CSS، فالجداول لها وظيفة مهمة وهي عرض وتنسيق البيانات التي تحتاج إلى أن تكون ضمن جدول.
CSS تبسط تصميم المواقع وإدارتها، وتحل الكثير من المشاكل التي قد يواجهها أي مطور للمواقع، فمثلاً لو تم تصميم موقع ما باستخدام HTML فقط، ولنقل أن هذا الموقع يحوي 50 صفحة من البيانات، وبعد مدة أراد مطور الموقع أن يغير من تصميم الموقع قليلاً، عليه في هذه الحالة أن يحرر 50 صفحة ويقوم بتعديلها، بينما لو تم تصميم الموقع باستخدام CSS فإنه سيحتاج فقط إلى أن يعدل ملفاً واحداً فقط.
منظمة W3C ابتكرت هذه التقنية وجعلتها كمعيار قياسي لتصميم المواقع، وقد بدأت الكثير من المواقع في الانتقال من الأسلوب التقليدي للتصميم باستخدام الجداول إلى الأسلوب الجديد باستخدام تقنية CSS.
لماذا يجب أن تستخدم CSS؟
لأنها معيار قياسي متفق عليه، والمعايير القياسية تسهل كثيراً من أمور حياتنا، وفي المستقبل القريب ستصبح CSS مدعومة بشكل كامل من كافة الشركات التقنية، وهذا يعني مصنعي الأجهزة المختلفة ومنتجي البرامج، وبالتالي لا بد من كل مطور للمواقع أن يتعلمها منذ الآن حتى يلحق بركب التقنية.
السبب الثاني والأهم هو التوافق مع المستقبل، أي أن الموقع المصمم الآن بتنقية CSS سيكون متوافقاً مع الأجهزة والبرامج المستقبلية، فلا يحتاج عندها مطور الموقع أن يقوم بعمل تغيير ليواكب التقنيات الحديثة، وعندما أذكر الأجهزة فلا أعني هنا الحواسيب الشخصية فقط، بل كل جهاز يرتبط بالشبكة العالمية، مثل الأجهزة الكفية PDA أو الهواتف النقالة، وكذلك الأجهزة المخصصة لذوي الاحتياجات الخاصة وأصحاب الإعاقات البصرية، وربما أجهزة أخرى لا نعرفها اليوم.
فصل المحتويات عن التصميم، وهذا يبسط من عملية إدارة الموقع، لأن التصميم يمكن التحكم به من ملف واحد، فيمكن إضافة وتعديل بعض العناصر في تصميم الموقع دون الحاجة إلى تعديل كل ملفات الموقع.
السبب الرابع هو تصغير حجم الموقع، وهذا يقدم فائدة للموقع ذاته ولزواره، فالموقع سيستهلك سعة موجة (bandwdith) أقل، مما يعني تكاليف تشغيل الموقع ستقل أيضاً، أما من ناحية الزوار فإنهم سيجدون صفحات الموقع تظهر لديهم بشكل أسرع.
كيف تعمل CSS؟
إذا أردت أن تستخدام تقنية CSS في موقعك، فعليك أولاً كتابة أوامر css ثم ربط ملفات html بهذه الأوامر، وهكذا يتم تطبيق css، الأمر سهل وبالطبع يحتاج إلى المزيد من الشرح، لنتعرف أولاً على أوامر css:


selector {property: value;}


تتكون أوامر css من جزئين، selector وترجمتها المنتقي، الجزء الثاني وهو ما يقع بين القوسين، ويحوي property وترجمتها الصفة، ولكل صفة هناك value أي قيمة، أعيد شرح ذلك بأسلوب آخر، أوامر css تتكون من منتقي، ولكل منتقي هناك صفة وقيمة، ويمكن أن يحوي المنتقي الواحد على أكثر من صفة:


selector {
property: value;
property: value;
property: value;
}

 

ربط CSS بأوامر html
تستطيع تطبيق تقنية CSS في ملفات html بثلاثة طرق.
الطريقة الأولى وهي وتسمى inline، هذه الطريقة تطبق مباشرة على أوامر html، فيمكنك مثلاً أن تختار فقرة ما في صفحة html، لتكون بلون معين مختلف عن باقي فقرات الصفحة.


<p style="color: blue;">text here</p>


في المثال السابق قمت بإنشاء فقرة عن طريق الأمر p في html، وضمن الأمر p وضعت خاصية style، والتي تتحكم في شكل الفقرة عن طريق أوامر css، سنشرح أوامر css في دروس لاحقة، وإن كان من السهل فهمها، ففي المثال اخترت الأمر color والذي يحدد لون الخط للفقرة، ثم اخترت القيمة blue له وتعني الأزرق! أي أن لون الخط المستخدم في الفقرة سيكون أزرقاً! أليست css سهلة؟
يمكنك تضمين أوامر CSS في رأس صفحة html، باستخدام الأمر style في html والذي يجب أن يستخدم ضمن رأس الصفحة "head".


<html><head><title>embedded style sheet</title>
<style type="text/css">
p {color: blue;}
</style>
</head>

<body>
<p>text here</p>
</body>
</html>


لاحظ كيف أن أوامر css تم تضمينها في رأس الصفحة "head"، وتحديداً في الأمر "style"، وفي هذه الطريقة هناك اختلاف بسيط عن طريقة inline السابقة، وهي إضافة الأقواس { }.
الطريقة السابقة تسمى embedded style sheets، أما الطريق الثالثة فهي باستخدام ملف css، هذه الطريقة نجمع كل أوامر css في ملف نصي يتم استدعاءه من خلال ملف html عن طريق الأمر link ومرة أخرى يجب أن يتم ذلك في رأس الصفحة "head".


<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>


ماذا سيحدث لو تم تطبيق الطرق الثلاث جميعها في صفحة واحدة؟ الذي سيحدث أن المتصفح سيطبق أولاً أوامر css التي هي ضمن html أو ما سميناه inline، ثم سيطبق embedded style sheet أي أوامر css ضمن رأس الصفحة، ثم سيطبق أوامر css في الملف الخارجي، هذه هي أولوية التنفيذ، يجب أن تتذكرها دائماً.
أنواع المنتقي
المنتقي (selector) له عدة أنواع، ولن أتطرق إلى جميع هذه الأنواع فهي كثيرة، إنما سأذكر الأساسية منها، النوع الأول هي أوامر HTML، فمثلاً لو أردت أن يكون لون خلفية الصفحات أسوداً فإن عليك أن تطبق ذلك على الأمر body:


body {background-color: black;}


ويمكن وضع أي أمر آخر من أوامر html في المنتقي، مثل p للفقرات، و a للروابط، و table للجداول وغيرها كثير.
النوع الثاني من أنواع المنتقي هو الفئات "Class"، لو أردت أن تطبق منتقي ما على مجموعة من أوامر html فعليك أن تجعله فئة تستطيع تطبيقها على أكثر من أمر واحد، لنأخذ مثالاً، تصور أنك تريد جعل نص العناوين باللون الأزرق وكذلك نص الفقرات، كل ما عليك القيام به أن تقوم بإنشاء الفئة أولاً وتضع لها الصفة والقيمة:
.bluetext {color: blue;}
تستطيع أن تختار أي اسم تشاء للفئات، وهنا اخترت أن أسمي الفئة bluetext، واخترت الصفة color والتي تتحكم بلون النص ووضعت لها القيمة blue أي الأزرق، حسناً كيف يتم تطبيق الفئة في أوامر html؟ هكذا:


<h1 class="bluetext">العنوان هنا</h1>
<p class="bluetext">محتويات الفقرة هنا</p>


النوع الثالث من المنتقي هو ID وهو مشابه للمنتقي class في كل شيء إلا أمرين، الأول أنك تضع علامة # قبل اسم المنتقي أما class فتضع نقطة . قبل الاسم، الاختلاف الثاني أن ID يجب ألا تطبق إلى على أمر واحد فقط من أوامر html، فمثلاً لو أردت أن تكون هناك فقرة واحدة يكون لون خلفيتها رمادي، فعليك أن تكتب المنتقي بهذه الطريقة:


#grayp {background-color: gray;}


والتطبيق في html يكون بهذا الأسلوب:


<p id="grayp">محتويات الفقرة هنا</p>


القيم في CSS
هناك العديد من أنواع القيم في css، وكل صفة تقبل نوعاً معيناً من القيم، بالطبع هذا يحتاج إلى تدريب حتى تتعرف على كل صفة وما تقبله من قيم، ولكن سأسرد هنا أنواع القيم لكي تأخذ فكرة عامة عنها.
الكلمات المفتاحية، وهي قيم تكتب على شكل كلمات واضحة ومفهومة المعنى، فمثلاً إذا أردت تحديد لون معين لأي نص في الموقع فعليك أن تستخدم صفة color وهذه الصفة تقبل كلمات مفتاحية، كأن تضع القيمة blue أو gray أو أي قيمة أخرى يقبلها المتصفح، وهناك كلمات مفتاحية أخرى كثيرة، مثل solid والتي تستخدم للصفة border وهناك auto للصفة margin، علماً بأن هذه الصفات تقبل أيضاً قيماً رقمية سنناقشها في ما بعد.
مقاييس الطول، وهي تحدد حجم عناصر التصميم في الموقع والمسافات الفاصلة بينها والمسافات الفاصلة بين العنصر ومحتوياته، ومنها مقياس px ومقياس pt، وهناك أيضاً المقياس المئوي وتستخدم مثلاً لتحدد عرض جدول ما، مثال: 100% تعني أن الجدول سيأخذ كامل العرض الذي توفره الشاشة، ويستخدم أيضاً المقايس المئوي في تحديد أحجام الخطوط، وفهم هذه المقاييس لا يتم إلا بالتجربة العملية، لذلك لا بد أن تجرب وتفهم بنفسك.
الألوان، يتم تحديد القيمة للون العنصر بثلاثة طرق، إحدها #RRGGBB وهذه تعني تحديد قيمة اللون بستة أرقام، ويمكن تحديد قيمة اللون بثلاثة أرقام أيضاً #RGB ويمكن تحديد اللون أيضاً بكلمات مفتاحية كما أسلفنا.
أخيراً هناك بعض الصفات تحتاج إلى عناوين فمثلاً لو أردت أن تضع صورة ما كخلفية للصفحة فيجب أن تضع عنوان هذه الصورة لتحدد مكانها فيتعرف عليها المتصفح ويظهر الصورة بالشكل الصحيح، وحتى تقوم بذلك يجب أن تستخدم صفة background-image أما القيمة فتتخذ هذا الشكل url(url) فتضع بين القوسين موقع الصورة المراد وضعها كخلفية للصفحة.