تشريح قواعد اللغة

إذا، في الفصل السابق، إستخدمنا "مرحبا للعالم!" المعتادة على سبيل المثال للحصول على لمحة عن مدى سهولة تصميم عنصر HTML مع CSS. لكن لماذا يبدو الأمر كما كان؟ في هذا الفصل، سنركز على التشريح وصياغة الCSS، للحصول على فهم أعمق لكيفية عمله. دعونا نلقي نظرة على المثال السابق من جديد، حيث كان لدينا قاعدة CSS التي استهدفت عناصر h1:

h1 {
	color: DeepSkyBlue;
}

ما لدينا هنا هو محدد (Selector) ذو خاصية واحدة (Property) و قيمة (Value) واحدة - هذه هي المفاهيم الأساسية لـ CSS و يجب عليك أن تحاول تذكر أسمائهم أثناء إجتيازك هذا البرنامج التعليمي. في هذا المثال، h1 هو اسم محدد و اللون هو الخاصية و DeepSkyBlue هي القيمة.

بين هذه المفاهيم الثلاثة، يمكن أن ترى أنواع متعددة من السمات الخاصة: هنالك الأقواس المموجة curly braces حول الخواص وقيمها، هنالك النقطتين فوق بعض colon تفصل بين الخاصيه وقيمتها، وهنالك الفاصلة المنقوطةsemicolon بعد كل قيمة. كل منهم يسهل للمتصفح ترجمة وفهم ما كتب بالCSS: الأقواس المموجة تسمح لك بجمع عدة خواص لنفس المحدد (selector)، النقطتين فوق بعضهم تخبر المترجم أين ينتهي اسم الخاصية وأين تبدأ القيمة، والفاصلة المنقوطة تخبر المترجم أين القيمة تنتهي.

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

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

الآن في هذا المثال لدينا عدة محددات، مع الأول والذي يستهدف عدة عناصر، إضافة إلى عدة خواص وعدة قيم - الآن أنت على الأرجح يمكنك أن ترى لماذا نحن بحاجة إلى قواعد لصيغ الCSS للسماح بالتعديل المناسب لأوامرك (لتصميماتك).

التنسيق والمسافات (Whitespace) في الCSS:

ربما تتسائل لماذا أنا أنسق المحدد بالطريقة التي فعلتها: يكون القوس المموج الأول على نفس خط اسم المحدد، ولكن الأخير يكون على خط خاص به، تم وضع مسافة قبل الخصائص وهناك مسافة بعد النقطتين فوق بعض (colon) التي تفصل الخاصية والقيمة ولكن ليس قبله. لماذا؟ لأن ذلك ما أعجبني أنا، ولكن في الحقيقة مترجم ال CSS لا يهتم بالمسافات.

بعض الأشخاص يفضلوا أن يضعوا (القوس المموج الأول) في سطر لوحده و أن يضعوا مسافة قبل النقطتين فوق بعضهم كما يأتي:

h1
{
	color : DeepSkyBlue;
}

وذلك يعمل كذلك. في الواقع تمت كتابة الكثير من البرامج لضغط / تصغير CSS لإحتلال أقل مساحة ممكنة، مثل:

h1{color : DeepSkyBlue;}

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

الخلاصة

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

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