الدليل السريع إلى لغة التنسيق CSS

تعتمد صفحات الويب على HTML التي تُحدد محتوى الصفحة.تعدّ CSS لغة منفصلة عن HTML ودورها هو تحديد الشكل والمظهر الخاص بصفحة الويب. الشفرة الخاصّة بـ CSS عبارة عن قواعد ساكنة. كل قاعدة تأخذ مُحدِدًا Selector أو أكثر، وتُرجع قيم لمجموعة من الخصائص الشكلية. تُطبَّق هذه الخصائص بعد ذلك على عناصر صفحة الويب المشار إليها بواسطة المحددات.
ملاحظة: لتعلم CSS بطريقة صحيحة، ولأن مخرجات هذه اللغة عبارة عن نتائج مرئية، يجب عليك ممارسة كل ما تتعلمه وننصحك بتطبيقه على موقع dabblet. الهدف الرئيسي من هذا المقال التركيز على كيفية الكتابة الصحيحة مع بعض النصائح.
سنتناول في هذا المقال العناوين التالية:

1. التعليقات.
2. المحددات.
3. الخصائص.
4. طريقة استخدام CSS في الصفحة.
5. الأولوية أم التتالي.
6. استعلامات الميديا.
7. التوافقية.

التعليقات

توجد طريقة واحدة لكتابة التعليقات في ملف CSS وهي كتابة التعليقات بين الرمزين /* */.

/* التعليقات تُتكتب هنا
ولا يوجد نمط لكتابة التعليق في سطر واحد سوى هذه الطريقة */

المحددات

يُستخدم المحدد في استهداف عنصر في صفحة، ويُكتَب بالطريقة التالية:

selector { property: value; 
/*  خصائص أخرى*/ }

لنفترض وجود العنصر التالي من نوع div في صحة ويب:

<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />

تستطيع تطبيق قاعدة CSS على هذا العنصر باستخدام أحد أسماء الأصناف Classes التي ينتمي إليها في الصفحة:

.class1 { }

أو باستخدام جميع أسماء الأصناف المطبَّقة عليه:

.class1.class2 { }

أو باستخدام نوع العنصر:

div { }

أو باستخدام الرقم الخاص بالعنصر:

#anID { }

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

[attr] { font-size:smaller; }

أو في حالة وجود صفة بقيمة معينة:

[attr='value'] { font-size:smaller; }

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

[attr^='val'] { font-size:smaller; }

أما إن كان الشرط يتعلّق بقيمة معينة تنتهي بها الصفة:

[attr$='ue'] { font-size:smaller; }

نستطيع تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها بمسافة فارغة (يوافق الشرط أدناه العناصر التي لديها صفة otherAttr تساوي “foo” أو “foo bar” أو “foo bar far” …إلخ):

[otherAttr~='foo'] { }

أو تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها برمز – كما في المثال التالي:

[otherAttr|='en'] { font-size:smaller; }

نستطيع جمع أكثر من مُحدد ببعضها للحصول على مُحدد مُركز كما في المثال التالي:

div.some-class[attr$='ue'] { }

من الممكن أيضا أن تقوم بتحديد عنصر يكون تابعا (ابن) لعنصر آخر:

div.some-parent > .class-name { }

في المثال السابق، يكون العنصر الابن على مستوى واحد أسفل من العنصر الأب. تستطيع أن تُحدد عنصر من سلالة عنصرآأخر (الأب)، وهذا يعني من أي مستوى أسفل من مستوى العنصر الأب (ليس شرطا أن يكون مستوى واحد أقل):

div.some-parent .class-name { }

يختلف المُحدد التالي عن المُحدد السابق لوجود مسافة فاصلة بين الأسماء:

div.some-parent.class-name { }

نستطيع تحديد العنصر بناءً على عنصر آخر مجاور له باستخدام الطريقة التالية:

.i-am-just-before + .this-element { }

أو بناءً على أي عنصر يسبق العنصر الذي نريده:

.i-am-any-element-before ~ .this-element { }

توجد بعض المُحددات تسمى الأصناف الزائفة pseudo classes تطبَّق على العنصر عندما يكون بحالة محددة، فمثلا، نستطيع تحديد عنصر عندما يمر عليه المؤشر:

selector:hover { }

أو رابط تمت زيارته:

selector:visited { }

أو لم تتم زيارته:

selected:link { }

أو عنصر في حالة التركيز:

selected:focus { }

لتحديد أول عنصر تابع لعنصر:

selector:first-child {}

لتحديد آخر عنصر تابع لعنصر:

selector:last-child {}

نستطيع تنسيق أجزاء محددة من العنصر باستخدام العناصر الزائدة Pseudo elements، فمثلا، نستخدم before لإضافة محتوى قبل محتوى عنصر معين:

selector::before {}

وafter لإضافة محتوى بعد محتوى عنصر معين:

selector::after {}

في أماكن معينة، يُستخدم رمز * كحرف “بدل” لاختيار كافة العناصر.

* { } /* كل العناصر */
.parent * { } /* كل التابعين */
.parent > * { } /* كل الأبناء */

الخصائص

selector {

وحدات الطول إما مطلقة أو نسبية.
الوحدات النسبية:

    width: 50%;     /* نسبة من عرض العنصر الأب */
    font-size: 2em;   /* مضاعفة حجم الخط الخاص بالعنصر نفسه*/
    font-size: 2rem;  /* مضاعفة حجم الخط حسب حجم الخط الخاص بالعنصر الأب */
    font-size: 2vw;       /* مضاعفة حجم الخط بالنسبة ل 1% من عرض المساحة المرئية للمستخدم*/
    font-size: 2vh;   /* من الارتفاع*/
    font-size: 2vmin; /* مضاعفة حجم الخط لأصغر قيمة من الارتفاع أو العرض*/
    font-size: 2vmax; /* لاكبر قيمة */

القيم المطلقة:

    width: 200px;     /* بكسل */
    font-size: 20pt;  /* نقطة */
    width: 5cm;       /* سنتميتر */
    min-width: 50mm;  /* مليميتر */
    max-width: 5in;   /* إنش */

الألوان:

    color: #F6E;      /* صيغة سداسية قصيرة */
    color: #FF66EE;   /* صيغة سداسية طويلة */
    color: tomato;    /* حسب الاسم */
    color: rgb(255, 255, 255);   /* كقيم  rgb */
    color: rgb(10%, 20%, 50%);   /* كنسبة  rgb */
    color: rgba(255, 0, 0, 0.3); /*  كقيم rgba */
    color: transparent;          /* الشفافية صفر*/
    color: hsl(0, 100%, 50%);    /* كنسب  hsl */
    color: hsla(0, 100%, 50%, 0.3); /* كنسب  hsla */

الحدود:

    border-width:5px;
    border-style:solid;
    border-color:red;     
    border: 5px solid red; /* اختصار القواعد السابقة في قاعدة واحدة  */
    border-radius:20px;    /* خاصية ابتداء من css3 */    

الصور:

    background-image: url(/img-path/img.jpg); 

الخطوط:

    font-family: Arial;

إذا كان اسم الخط به مسافات فيجب وضع الاسم بين علامتي تنصيص:

    font-family: "Courier New";

في نسرُد لائحة من الخطوط وإن لم يجد المتصفح الخط، يستخدم نوع الخط التالي:

    font-family: "Courier New", Trebuchet, Arial, sans-serif;
}

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

طريقة استخدام CSS في الصفحة

توجد ثلاث طرق لإجراء عملية تنسيق صفحة الويب وهي كالتالي:
1- تضمين اسم الملف بالامتداد .css داخل العنصر head في بداية صفحة html كالتالي (وهي الطريقة المُوصى بها):

<link rel='stylesheet' type='text/css' href='path/to/style.css'>

2- كتابة قواعد css مباشرة في ملف الصفحة:

    <style>
        a { color: purple; }
    </style>

3- تنسيق العنصر بطريقة مباشرة:

<div style="border: 1px solid red;">
</div>      

الأولوية أم التتالي

العنصر الواحد في صفحة الويب قد يكون مُستهدفا (محددا) من قبل مجموعة متعددة من المحددات، وقد يكون هناك تعديل أو تحديد لقيمة خاصية تابعة لهذا العنصر من قبل أكثر من مُحدد. في مثل هذه الحالات، فإن قاعدة واحدة سيكون لها الأولوية في التطبيق على هذا العنصر.
القواعد التي تمتلك محددات مُفصلة لها أولوية على المحددات ذات التفاصيل الأقل، والقواعد التي تأتي في النهاية تقوم بالتعديل على القواعد التي قبلها (وهذا يعني أنه في حالة تضمين ملفي css وكلاهما يقومان بتحديد عنصر والتعديل على خصائصه، فإن ترتيب ربط الملفات يحكم تنسيق العنصر حسب قاعدة الترتيب المذكورة والتي تُسمى التتالي أو التتابع).

استعلامات الوسائط Media queris

استعلامات الوسائط هي خاصية بدأت من CSS 3 وتسمح لك بتحديد متى تُطبَّق قواعد CSS، مثلا عند الطباعة، أو عند كثافة وأبعاد شاشة معينين.
أمثلة:
هذه قاعدة CSS تُطبَّق على كل الأجهزة.

h1 {
  font-size: 2em;
  color: white;
  background-color: black;
}

يعدّل استعلام الوسيط التالي القاعدة السابقة عند الطباعة:

@media print {
  h1 {
    color: black;
    background-color: white;
  }
}

يجعل استعلام الوسيط التالي حجم الخط أكبر في شاشة بعرض 480 بكسل على الأقل:

@media screen and (min-width: 480px) {
  h1 {
    font-size: 3em;
    font-weight: normal;
  }
}

تحتوي استعلامات الوسائط على الخصائص التالية:

width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color,color-index, monochrome, resolution, scan, grid.
من الممكن أن يسبق أغلب الخصائص السابقة خاصيتي min- و max-.
خاصية الدقة Resolution غير مدعومة على الأجهزة القديمة، وبدلا من ذلك استخدم خاصية device-pixel-ratio.
تحاول كثير من أجهزة الجوال والأجهزة اللوحية عرض الصفحة كما لو كانت على سطح المكتب العادي إلا إذا قمت بإضافة الصفة viewport بالشكل التالي:

<head>
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
</head>

التوافقية

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

ترجمة – بتصرّف – للمقال Learn X in Y minutes Where X=CSS.