تعلم لغة CSS

لغة CSS

كلمة CSS هي اختصار لجملة Cascading Style Sheet و هي لغة تستخدم في تصميم صفحات الويب فمن خلالها يمكنك تغيير ألوان العناصر، تحديد مواقعها و أحجامها، إضافة مؤثرات لها، جعل صفحات الويب متجاوبة مع مختلف أحجام الشاشات لكي تظهر بشكل ملائم للمستخدم سواء كان يفتح الصفحة بواسطة هاتف، تابلت أو حاسوب، بالإضافة إلى الكثير من الأمور الرائعة التي ستتعلمها خطوة خطوة في هذه الدورة.

بشكل عام، CSS تعتبر لغة تصميم ( Styling Language ) و ليس لغة برمجة ( Programming Language ) فهي تستخدم في تصميم صفحات الويب التي يتم بناؤها بواسطة HTML أو الصفحات التي يتم بناؤها بواسطة XML.

إصدارات لغة CSS

لغة CSS يتم تطويرها باستمرارا بدءاً من ظهورها أول مرة عام 1996 و حتى يومنا هذا. المجموعة المسؤولة عن تطوير هذه اللغة تدعى World Wide Web Consortium و في العادة تختصر بكلمة W3C.

يوجد ثلاث إصدارات رسمية حتى اللحظة من لغة CSS و الفكرة من هذه الإصدارات ليس تغيير طريقة التعامل مع اللغة بل إضافة ميزات جديدة عليها.

الإصدار الأول

الإصدار CSS1 فكرته الأساسية كانت فصل كود التصميم عن كود الصفحة الذي يتم بناؤها بواسطة HTML الأمر الذي يجعلك قادر على استخدام ملف التصميم نفسه المكتوب بلغة CSS في أي صفحة تريد.

الإصدار الثاني

الإصدار CSS2 أضيف فيه خصائص جديدة حيث بات بالإمكان التحكم بأماكن العناصر، تحميل خطوط غير الخطوط الموجودة في جهاز المستخدم، إضافة تأثيرات جديدة على النصوص كالظلال، بالإضافة إلى تحديد كيف ستظهر الصفحة في حال أراد المستخدم طباعتها على ورق.

الإصدار الثالث

الإصدار CSS3 أضيف فيه خصائص تسمى Media Queries و التي من خلالها يمكنك جعل حجم الصفحة متجاوب مع مختلف أحجام الشاشات. أصبح الوصول لعناصر الصفحات أكثر مرونة، التحكم بأمكان العناصر أصبح أكبر، طرق إضافة التلوين أصبحت عديدة حيث أصبح بالإمكان دمج الألوان، أصبح بالإمكان وضع أكثر من صورة كخلفية، أصبح بالإمكان عرض مؤثرات رائعة للعناصر كجعلها تتحرك من مكانها و تدور و تتمدد و تتغير ألوانها إلخ..

أي إصدار يجب أن تتعلم؟

من بعد ما ذكرنا لك قصة الإصدارات، عليك التفكير بأن عليك تعلم لغة CSS فقط و دعك ممن يقول تعلم الإصدار الفلاني فهذا كلام خاطئ لأنك أنت بالأساس حين تكتب كود CSS لا تحدد رقم الإصدار الذي تتعامل معه و غالباً ما ستستخدم خصائص من الإصدار الأول و الإصدار الثاني و الإصدار الثالث مع بعض في أي مشروع تعمل عليه.

فوائد لغة CSS

سنذكر فوائدها تباعاً مع إيضاح معنى كل نقطة.

1- توفير الوقت

يمكنك وضع كود التصميم الخاص بك في ملف CSS و تضمينه نفسه في أي صفحة HTML تريد استخدامه فيها.

2- سرعة التحميل

حين تضع كود التصميم في ملف CSS و تضمّنه في صفحات الموقع فإن المتصفح في العادة يقوم بتحميل هذا الملف مرة واحدة فقط و يخزّن عنده. بعدها إن تم الدخول لأي صفحة مربوطة بهذا الملف فإن المتصفح يستخدم النسخة التي قام بتخزينها سابقاً بدل تحميل الملف في كل مرة.

3- سهولة التعديل

بمجرد التعديل على كود التصميم الموضوع في ملف CSS فإن كل الصفحات المربوطة به سيتم تعديل تصميمها.

4- خصائص متقدمة

بعض الوسوم في لغة HTML تحتوي على خصائص يمكن من خلالها التعديل على تصميمها و لكن هذه الخصائص تعتبر لا شيء مقارنة بالخصائص التي توفرها CSS و التي يمكن تطبيقها على جميع العناصر.

5- بناء صفحات متجاوبة

بواسطة لغة CSS يمكنك جعل تصميم الشاشة متجاوب ( Responsive ) مع مختلف أحجام الشاشات التي يتم من خلالها مشاهدة الصفحات لتظهر بشكل مناسب نسبةً لحجم الصفحة المفتوحة عليها.

6- تخصيص الطباعة على ورق

لغة CSS توفر خصائص سهلة الإستخدام يمكنك من خلالها تحديد الشكل الذي ستظهر فيه الصفحة في حال أراد المستخدم طباعتها على ورقة.

7- معايير الويب العالمية

الأفضل دائماً أن يتم وضع تصميم صفحة الويب التي تبنيها بالأساس بكود HTML في ملف CSS منفصل عن الصفحة ذاتها و من ثم تضمينه فيها فبهذه الطريقة يمكنك استخدام ملف التصميم في جميع صفحات موقعك و التعديل عليها في أي وقت تريده بكل سهولة.

هل أنا جاهز لتعلم لغة CSS؟

قبل البدء بهذه الدورة يجب أن تكون متقن للغة HTML لأن هذه اللغة تستخدم معها بشكل أساسي.
إن لم يسبق لك أن تعلمت لغة HTML فلا تقلق أبداً لأننا أعددنا مرجع شامل لها.

الشكل العام لكود CSS

بدايةً، نحن نضيف كود CSS بهدف تحسين طريقة ظهور الأشياء الموجودة في صفحة الويب و التي تم إضافتها بالأساس بواسطة وسوم HTML. من هذا المنطلق فإنه عند كتابة كود CSS يجب تحديد الوسم المراد التعديل على تصميمه و من ثم تمرير الخصائص و القيم المناسبة له.

الآن إذا كانت الصفحة تحتوي على وسم <h1> يمكنك إضافة خصائص CSS له كالتالي.

h1 {
    color: blue;
    text-align: center;
}

• h1 – هو إسم الوسم الذي سيتم إضافة خصائص CSS له و يسمى Selector.
• color – يسمى Property و هو الخاصية المراد تعديلها للشيء.
• blue – هو قيمة الخاصيّة و يسمى Value.
• color: blue; – الخاصيّة و قيمتها مع بعض يقال لهما Declaration.

يجب وضع فاصلة منقوطة ; بعد كل خاصيّة يتم تعريفها.
آخر خاصيّة يمكنك عدم وضع فاصلة منقوطة لها و لكننا ننصحك بأن تضعها دائماً لأن هذا المتعارف عليه.

أين تكتب كود CSS

يوجد ثلاث أساليب يمكنك إتباعها حتى تضيف كود CSS في صفحات الويب سنذكرها لك تباعاً.

1- أسلوب Inline CSS

أي وسم تضيفه في الصفحة يمكنك إضافة الخاصيّة style له و تمرير كود الـ CSS لها كقيمة بشكل مباشر.

<h1 style="color:blue; text-align:center;">Hello World!</h1>

2- أسلوب Internal CSS

يمكنك إضافة الوسم <style> في أي مكان تريده في الصفحة و بداخله تستطيع إضافة خصائص CSS لأي وسم موجود في الصفحة.

<style>
    h1 {
        color: blue;
        text-align: center;
    } 
</style>
<h1>Hello World!</h1>

3- أسلوب External CSS

يمكنك وضع كود الـCSS بداخل ملف إمتداده .css و من ثم تضمينه في الصفحة من بواسطة الوسم <link> و الذي يجب وضعه في الوسم <head>.

مثال

style.css
h1 {
    color: blue;
    text-align: center;
} 

index.html
<!DOCTYPE html>
<html>
    <head>
        <!-- style.css هنا قمنا بتضمين الملف -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

أفضل طريقة لكتابة كود CSS

بشكل عام، أي موقع تبنيه عليك تخصيص ملف إمتداده .css لتضع فيه كل خصائص CSS التي ستستخدمها في صفحات الموقع و من ثم تضمن هذا الملف بها بواسطة الوسم <link>.

إضافة كود CSS بشكل مباشر لوسوم HTML من خلال الخاصيّة style أمر يمكنك فعله إن كنت بحاجة للتعديل على تصميم وسم محدد استخدمته بشكل خاص في أحد الصفحات.

إضافة كود CSS في الصفحة بواسطة الوسم <style> أمر تحتاجه في بعض الأحيان إن كنت بحاجة لتخصيص طريقة ظهور شيء في الصفحة و تريد إضافة خصائص لا يمكنك إضافتها بواسطة الخاصية style.

مفهوم تحديد العناصر

تحديد العناصر ( Select Elements ) يقصد بها الطرق التي يمكنك من خلالها تحديد الوسوم التي سيتم إضافة خصائص CSS لها.

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

جميع طرق تحديد العناصر التي ستمر معك في هذا الدرس تسمى محدِّدات بسيطة ( Simple Selectors ).

تحديد العنصر من خلال إسمه

في حال أردت إضافة خصائص CSS لكل الوسوم التي تملك إسم معين، أذكر إسم الوسم فقط و عندها سيتم إضافة الخصائص التي وضعتها لجميع الوسوم التي تملك نفس الإسم.

في المثال التالي كل وسم <p> موجود في الصفحة سيتم عرضه بلون أحمر و في الوسط.

p {
    color: red;
    text-align: center;
} 

تحديد العنصر بواسطة الخاصيّة class

جميع وسوم HTML يمكن إضافة الخاصيّة class لها. هذه الخاصيّة ليس لها أي فائدة بالنسبة للغة HTML و لكن بالنسبة للغة CSS فهي مهمة جداً لأنه يمكنك بواسطة الوصول للوسوم من خلال أسماء الكلاسات التي تمررها لها كقيمة.

لتعريف كلاس في CSS ببساطة أكتب نقطة و يليها مباشرةً إسم الكلاس.
بعدها يمكنك تمرير إسم هذا الكلاس لأي وسم موجود في الصفحة من خلال وضع إسمه فقط (بدون النقطة) كقيمة للخاصيّة class.

في المثال التالي تم إضافة الخصائص التي وضعناها في الكلاس center لجميع الوسوم التي تملك نفس إسم الكلاس.
إذاً كل وسم يستخدم class="center" سيتم عرضه بلون أحمر و في الوسط.

.center {
    color: red;
    text-align: center;
} 

قواعد إختيار إسم class

• يفضّل أن تكون جميع أحرفه صغيرة.
• إذا كان إسمه يتألف من أكثر من كلمة يفضّل أن تضع شرطة - بين الكلمات.
• ممنوع أن يبدأ الإسم برقم و لكن لا مانع إن وضعت رقم في وسطه أو في آخره.
• أمثلة لأسماء مقبولة: btn – btn-primary

تحديد العنصر بواسطة الخاصيّة id

جميع وسوم HTML يمكن إضافة الخاصيّة id لها. عند إضافة هذه الخاصيّة في الوسم يجب إعطاءها قيمة موحّدة. أي قيمة لم يتم إعطاءها لأي وسم آخر موجود في الصفحة لأنه لا يجب وجود أكثر من وسم في الصفحة عندهم id بنفس الإسم.

لتعريف id في CSS ببساطة أكتب مربع # و يليه مباشرةً الإسم الذي تريد إعطاؤه له. بعدها يمكنك تمرير إسمه لأي وسم موجود في الصفحة من خلال وضع الإسم فقط (بدون المربع) كقيمة للخاصيّة id.

في المثال التالي تم إضافة الخصائص التي وضعناها في #demo للوسم الذي يملك id قيمته demo و بالتالي سيتم عرضه بلون أزرق و في الوسط.

#demo {
    color: blue;
    text-align: center;
} 

قواعد إختيار إسم id

• يفضّل أن تكون جميع أحرفه صغيرة.
• إذا كان إسمه يتألف من أكثر من كلمة يفضّل أن تكتب أول حرف من كل كلمة بشكل كبير.
• ممنوع أن يبدأ إسمه برقم و لكن لا مانع إن وضعت رقم في وسطه أو في آخره.
• أمثلة لأسماء مقبولة: top_menu – topMenu – menu

تحديد جميع عناصر الصفحة بواسطة *

في CSS يمكنك استخدام رمز النجمة * لتحديد جميع عناصر الصفحة.
إذاً خصائص CSS التي تضيفها في هذا الرمز يتم تطبيقها على جميع الوسوم الموضوعة في الصفحة.

في المثال التالي تم إضافة الخصائص التي وضعناها لكل الوسوم الموجودة في الصفحة.

* {
    color: blue;
    text-align: center;
} 

تحديد العناصر المباشرة بواسطة >

في CSS يمكنك استخدام الرمز > لتحديد العناصر الموضوعة مباشرةً بداخل عنصر محدد.

في المثال التالي سيتم تلوين نص الوسم <p> بالأحمر في حال كان موضوع مباشرةً بداخل الوسم <article>.

article > p {
    color: red;
} 

تجميع الخصائص المشتركة

في CSS يمكنك تحديد أكثر من عنصر في وقت واحد و إعطاؤهم نفس الخصائص.
عند تحديد أكثر من عنصر يجب وضع فاصلة بين كل عنصرين يتم ذكرهما.

في المثال التالي قمنا بتحديد جميع وسوم <span> و <b> الموجودة في الصفحة.

span, b {
    color: red;
} 

تحديد الوسم نفسه أكثر من مرة

في HTML يمكنك تمرير أكثر من كلاس لنفس الوسم و عندها سيتم تنفيذ جميع الخصائص الموجودة في هذه الكلاسات عليه.

في المثال التالي قمنا بإعطاء العنصر إثنين كلاس، الكلاس الأول إسمه red و هو يجعل لون الخط أحمر و الثاني إسمه center و هو يجعل النص الموضوع فيه يظهر في الوسط.

.red {
    color: red;
} 
.center {
    text-algin: center;
} 

تضارب أسماء الخصائص المستخدمة

ترتيب الخصائص في CSS يترتب عليه بشكل تلقائي تحديد أولوية التنفيذ. فإذا قمت بإعطاء خاصيّة للعنصر و من ثم قمت بإعطائه قيمة جديدة لنفس الخاصيّة فإنه سيتم إعطاؤه القيمة الجديدة.

في المثال التالي قمنا بإعطاء العنصر إثنين كلاس، الكلاس الأول إسمه red و هو يجعل لون الخط أحمر و الثاني إسمه blue و هو يجعل لون الخط اللون أزرق.
لاحظ أنه سيتم تلوين الخط بالأزرق لأننا قمنا بتعريف الكلاس blue بعد الكلاس red.

.red {
    color: red;
} 
.blue {
    color: blue;
}

مفهوم التعليقات

التعليق ( Comment ) عبارة عن نص يوضع في الكود كملاحظة تساعدك في الشرح أو لتذكر سبب كتابة الكود في حال أردت مستقبلاً مراجعته و التعديل عليه.

إذاً التعليق لا يظهر في الصفحة أمام المستخدم بل يظهر فقط أمام من يطلع على الكود.

إضافة تعليق في CSS

التعليق في CSS يوضع بداخل /* … */ و يمكنك كتابته على سطر واحد أو على عدة أسطر.

في المثال التالي قمنا بوضع تعليق على كود CSS يـتألف من سطر واحد.

/* أي فقرة موضوعة في الصفحة ستظهر بلون أحمر */
p {
    color: red;
}

في المثال التالي قمنا أيضاً بوضع تعليق على كود CSS يـتألف من سطر واحد.

p {
    color: red; /* هذه الخاصية تجعل لون النص أحمر */
}

في المثال التالي قمنا أيضاً بوضع تعليق على كود CSS يـتألف من عدة أسطر.

/* أي فقرة موضوعة في
الصفحة ستظهر بلون أحمر */
p {
    color: red;
}

• إذا كان كود الـ CSS موضوع في ملف .css فيمكنك كتابة التعليقات فيه في أي مكان تريده.
• إذا كان كود الـ CSS موضوع في صفحة HTML بداخل الوسم <style> فهنا يجب أن تكتب التعليق ضمن هذا الوسم و إلا سيتم عرض التعليق كنص عادي في الصفحة.

الفرق بين تعليقات HTML و تعليقات CSS

بدايةً فكرة التعليقات في كلا اللغتين هي نفسها و في الحالتين التعليقات تظهر أمام من يطلع على كود الصفحة و ليس أمام الشخص العادي.

الإختلاف بينهما هو فقط بالمكان الذي يمكنك فيه استخدام كل نوع.

تعليقات HTML نضعها بداخل الرمز <!– –> في أي مكان في الصفحة و لكن يجب عدم وضعها بداخل الوسم <style> لأن هذا الوسم مخصص لأن نضع فيه كود بلغة CSS و بالتالي فإنك إن وضعت فيه كود بلغة أخرى فإن المتصفح لن يفهم ما هي الأوامر الموضوعة بعده و بالتالي فإن كود التصميم لن يعمل.

في المثال التالي قمنا بوضع تعليق بلغة HTML و تعليق بلغة CSS في ذات الصفحة.

<!-- html هنا يمكنك وضع التعليقات بأسلوب -->
<style>
p {
    color: red; /* css هنا يمكنك وضع التعليقات بأسلوب */
}
</style>

طرق تحديد الألوان

عدد الألوان التي يمكنك اختيارها في عالم الويب هو بالملايين، بالإضافة إلى أنك تستطيع اختيار اللون الأساسي و من بعدها تحدد درجة قوته و شفافيته حتى تختار اللون الذي تريده بالضبط.

أنت لست مضطر أبداً إلى حفظ أسماء الألوان أو درجاتها و هذا أساساً أمر مستحيل، فعلياً عند الحاجة لاختيار أي لون فإنك بالعادة تستخدم أدوات جاهزة تعطيك كود اللون الذي تريده.

فمثلاً يمكنك استخدام أداة الألوان الخاصة بموقع هرمش للحصول على كود الذي تريده بكل سهولة، كل ما عليك فعله النقر على اللون و سيظهر لك الكود الخاص به 

تابعنا للحصول علي المرحلة التالية لتعلم لغة CSS من هنا