معرفی سینتکس CSS

سینتکس CSS یا CSS syntax

در این مقاله به مفاهیم سینتکس CSS پرداخته می شود و سینتکس CSS با جزئیات بیشتری بررسی می شود، همچنین خواص یا صفت ها (properties) و مقادیر آن ها (values) در سینتکس CSS و نقش آن ها در تشکیل اعلان ها یا declarations، شرح داده می شود و این که چگونه چندین declaration، بلاک های declaration را می سازند و در نهایت، بلاک های declaration به همراه انتخاب گر ها، دستور های کامل CSS را تشکیل می دهند. در پایان، مقاله را با نگاهی به دیگر ویژگی های سینتکس CSS مانند نظرات یا کامنت ها (comments) و فضای خالی یا فضای سفید (whitespace) به پایان می بریم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

پیش نیازهای یادگیری سینتکس CSS: سواد پایه کامپیوتر، نرم افزار اساسی نصب شده، دانش پایه در کار با فایل ها، مبانی HTML و ایده چگونگی کارکرد CSS.

هدف: یادگیری ساختارهای بنیادی سینتکس CSS با جزئیات.

نکته: CSS یک زبان اعلانی یا declarative است که سبب می شود سینتکس CSS ساده و به راحتی قابل درک باشد. علاوه بر این، سیستم سینتکس CSS یک سیستم بازیابی خطای عالی دارد؛ وجود این سیستم سبب می شود که یک اشتباه، همه برنامه را تحت تاثیر قرار ندهد. به عنوان مثال، سیستم بازیابی خطا باعث می شود declaration ها یا اعلان هایی که درک نمی شوند یا اشکال دارند، کاملا نادیده گرفته شوند. جنبه منفی سیستم این است که سخت تر می توان پی برد که خطاها از چه ناشی می شوند. اگر به خواندن این مقاله ادامه دهید، همه چیز در نهایت روشن خواهند شد.

واژگان مرتبط با مبحث سینتکس CSS

سینتکس CSS در سطح بیسیک، شامل دو بلوک ساختاری است:

صفت ها یا Properties در سینتکس CSS: شناسه های قابل خواندن برای انسان هستند که تعیین می کنند چه ویژگی هایی از استایل (مانند فونت، ضخامت، رنگ پس زمینه) را می خواهید تغییر دهید.

مقدار ها در سینتکس CSS: به هر خصوصیت مشخص، یک مقدار، داده می شود، که نشان می دهد چگونه می خواهید این ویژگی های استایل را تغییر دهید (به عنوان مثال شما می خواهید فونت، ضخامت یا رنگ پس زمینه را بر اساس یک مقدار مشخص، تغییر دهید.)

در سینتکس CSS، هر صفتی که با یک مقدار همراه می شود، یک اعلان CSS یا declaration نامیده می شود. اعلان های CSS درون بلوک های اعلان CSS قرار می گیرند؛ و در نهایت، بلوک های اعلان CSS با سلکتور ها زوج می شوند تا مجموعه دستور هایCSS  را تشکیل دهند.

پیش از این که وارد تئوری و توضیح نوشتاری سینتکس CSS شویم، بیایید به یک مثال نگاهی بیاندازیم.

و فایل CSS:

نتیجه ترکیب این دو به صورت زیر است:

بیایید به سینتکس CSS با جزئیات بیشتری نگاه کنیم.

اعلان CSS یا CSS declaration در سینتکس CSS

تنظیم صفت های CSS بر اساس مقادیر خاص، عملکرد اصلی زبان CSS است. موتور CSS محاسبه می کند که کدام اعلان ها روی کدام عنصر از یک صفحه اعمال می شود تا آن را به طور مناسب تغییر داده و اصطلاحا آن را استایل کند. همواره به یاد داشته باشید که در سینتکس CSS هر دوی صفت ها و مقادیر، حساس به حروف بزرگ و کوچک هستند؛ هر زوج صفات و مقادیر با یک “دو نقطه” یا کولون (:) از هم جدا می شوند.

بیش از ۳۰۰ صفت مختلف و به اندازه تقریبا نامحدود، مقادیر مختلف در سینتکس CSS وجود دارد. البته همه زوج های صفات و مقادیر مجاز نیستند هر صفتی دارای لیست خاصی از مقادیر معتبر و تعریف شده است.

مهم: اگر یک صفت در سینتکس CSS ناشناخته باشد یا اگر مقدار داده شده به صفت معتبر نباشد، اعلان نا معتبر است و توسط موتور CSS مرورگر، نادیده گرفته می شود.

مهم: در سینتکس CSS (و دیگر استانداردهای وب)، املای US به عنوان استاندارد مورد استفاده قرار گرفته است، تا از شک و تردید و موارد نا معلوم جلوگیری شود. به عنوان مثال، رنگ همیشه باید با املای color نوشته شود و با املای colour کار نخواهد کرد.

یادگیری فعال: شناسایی اعلان ها

در مثال بالا، پنج اعلان CSS جداگانه وجود دارد. آیا شما می توانید اعلان نا معتبر یا اشتباه را شناسایی کرده و بگویید چرا نا معتبر است؟

سینتکس CSS و بلاک های اعلان CSS یا CSS declaration blocks

اعلان های سینتکس CSS در بلوک ها دسته بندی می شوند، و هر مجموعه ای از اعلان ها درون یک آکولاد باز ({) و یک آکولاد بسته (}) قرار می گیرند.

هر اعلانی که در داخل یک بلوک اعلان قرار دارد باید توسط نقطه ویرگول (؛) یا semi-colon جدا شود، در غیر این صورت کد کار نخواهد کرد (یا حداقل نتایج غیر منتظره ای به دست خواهد آمد). بعد از آخرین اعلان در بلوک، به نقطه ویرگول نیازی نیست، هرچند که اغلب به عنوان یک استایل خوب در سینتکس CSS در نظر گرفته می شود، زیرا باعث می شود هنگام گسترش بلوک و افزودن یک یا چند اعلان دیگر، نوشتن نقطه ویرگول فراموش نشود.

توجه: بلوک ها گاهی اوقات می توانند تودرتو شوند در چنین مواردی همانند برچسب های عناصر HTML تو در تو، بایستی به طور منطقی از آکولاد های باز و بسته استفاده کرد. شایع ترین مثالی که در سینتکس CSS با آن رو به رو خواهید شد: @-rules یا دستور های @ هستند، که بلوک هایی هستند که با شناسه @ شروع می شوند. مانند @media، @font-face، و غیره.

توجه: بلوک اعلان ممکن است خالی باشد – این حالت کاملا معتبر است.

یادگیری فعال: شناسایی بلوک های اعلان

در مثال فوق، آیا شما قادر به شناسایی سه بلوک اعلان CSS جداگانه هستید؟

انتخاب گر های CSS و دستور های انتخاب گر ها در سینتکس CSS

نزدیک بود که یک قسمت مهم از پازل سینتکس CSS را از دست بدهیم؛ باید بخشی از بحث را به این موضوع اختصاص دهیم که چگونه برای بلوک تعیین کنیم که اعلان باید به چه عناصری اعمال شود. این کار با پیشوند گذاری برای هر بلوکِ اعلان، با استفاده از یک انتخابگر انجام می شود؛ در حقیقت یک الگو با برخی از عناصر در صفحه مطابقت دارد و اعلان های مربوطه، فقط به آن عناصر اعمال می شوند. انتخابگر به همراه بلوکِ اعلان، یک مجموعه دستور یا ruleset نامیده می شود، البته معمولا همان دستور یا rule نیز نامیده می شود.

انتخابگر ها می توانند بسیار پیچیده باشند؛ شما می توانید عناصر چندگانه را با استفاده از چند انتخابگر جدا شده توسط کاما (تعدادی کاما) و انتخابگرها که زنجیروار به هم وصل شده اند بسازید، مثلا اگر بخواهیم هر عنصر با کلاس “blah” را انتخاب کنیم فقط اگر آن را در داخل یک عنصر <article> قرار داده باشیم، و تنها در حالی که توسط اشاره گر ماوس انتخاب شود. نگران نباشید؛ همانطور که در CSS به مرور تجربه کسب می کنید، همه چیز واضح تر می شود، و در بخش سلکتور ها جزئیات بیشتری در اختیار شما قرار می گیرد.

یک عنصر می تواند با چندین انتخابگر مطابقت داشته باشد، بنابراین چندین دستور ممکن است یک مقدار تعیین شده را چند بار تنظیم کند. CSS مشخص می کند که کدام یک نسبت به دیگری اولویت داشته باشد و باید اعمال شود: این حالت، الگوریتم cascade یا آبشار، cascade algorith، نامیده می شود.

مهم: اگر یک انتخاب گر بیسک و منفرد در یک زنجیره یا گروه، نامعتبر باشد، (مانند استفاده از یک شبه عنصر یا شبه کلاس ناشناخته)، به استثنای انتخاب گر نامعتبر که نادیده گرفته می شود، گروه سلکتور ها هنوز معتبر است.

یادگیری فعال: شناسایی گروه انتخاب گر ها

در مثال، دستور هایی را که به دو نوع مختلف از عنصر ها اعمال می شوند، شناسایی کنید.

سینتکس CSS – عبارت های CSS یا CSS statements

دستور هایCSS ، بلوک های ساختاری اصلی یک صفحه ی استایل هستند، و در حقیقت شایع ترین بلوک که در CSS مشاهده خواهید کرد. اما انواع دیگری از بلوک ها نیز وجود دارند که شما گاهی اوقات می بینید؛ دستور های CSS یک نوع به اصطلاح CSS statements هستند. انواع دیگر عبارتند از:

At-rules: در CSS برای انتقال فراداده، اطلاعات شرطی یا سایر اطلاعات توصیفی استفاده می شود. این دستور ها با یک علامت (@) شروع می شوند، به دنبال آن یک شناسه برای بیان نوع دستور آن، و سپس یکی از انواع بلوک سینتکس، و در آخر، با نقطه ویرگول (؛) پایان می یابد. هر نوع At-rule که توسط شناسه تعریف شده است، سینتکس داخلی و معنای خود را دارد. مثال هایی از At-rule ها عبارتند از:

• • @charset و @import (metadataمتا دیتا )
  • @media یا @document (اطلاعات شرطی، همچنین عبارتهای تو در تو)
  • @font-face (descriptive informationاطلاعات توصیفی )

مثالی از یک سینتکس CSS خاص:

این at-rule یک فایل CSS دیگر را وارد CSS کنونی می کند.

Nested statements یا عبارت های تو در تو، یک زیر مجموعه خاص از at-rule ها هستند که سینتکس CSS آن، یک بلوک تو در تو از دستور های CSS است که تنها در صورتی به سند اعمال می شود که با یک شرط خاص مطابقت داشته باشد.

محتوای @media at-rule فقط در صورتی اعمال می شود که دستگاهی که مرورگر را اجرا می کند با شرایط بیان شده مطابقت داشته باشد.

محتوای @supports at-rule فقط در صورتی اعمال می شود که مرورگر از ویژگی تست پشتیبانی کند.

محتوای @document at-rule فقط در صورتی اعمال می شود که صفحه فعلی با برخی شرایط مطابقت داشته باشد.

مثال سینتکس CSS خاص:

عبارت تو در توی بالا فقط وقتی که عرض صفحه بیش از ۸۰۰ پیکسل باشد، دستور تو در تو را اعمال می کند.

مهم: هر عبارتی که یک مجموعه دستور، یک دستور @ یا یک عبارت تو در تو نباشد، نامعتبر است و بنابراین نادیده گرفته می شود.

فراتر از سینتکس CSS: ایجاد قابلیت خواندن برای CSS  در سینتکس CSS

تا اینجا احتمالا متوجه شده اید که نوشتن سینتکس CSS چندان سخت نیست: شما برخی از دستور ها را می نویسید و اگر آنها را اشتباه بنویسید، فقط نادیده گرفته می شوند. با این حال، حتی اگر در این شرایط، کد ها کار کنند، برخی از شیوه هایی عالی وجود دارند که کد CSS را برای استفاده و نگهداری آسان تر می کنند. این شیوه ها بی شک ارزش دانستن دارند.

فضای سفید یا فضای خای Whitespace

فضای سفید به معنای فضاهای واقعی، زبانه ها و خطوط جدید است. شما می توانید فضای سفید را اضافه کنید تا استایل های خود را بیشتر قابل خواندن کنید.

به همان شیوه HTML، مرورگر تمایل زیادی به نادیده گرفتن فضای سفید درون CSS دارد؛ بسیاری از فضاهای سفید فقط برای کمک به خوانایی است. در اولین مثال زیر، هر اعلان (و شروع / پایان دستور) در خط خود قرار گرفته است؛ این روش احتمالا یک راه خوب برای نوشتن CSS است، زیرا برای نگهداری و درک کد آسان است:

می توانید دقیقا مشابه همان CSS را بنویسید، با این تفاوت که اکثر فضای سفید حذف شده باشند؛ کد زیر، همان عملکردی است که در مثال اول وجود دارد، اما حتما موافقید که خواندنش کمی سخت تر است:

code layout، یا طرح کدی که انتخاب می کنید معمولا یک ترجیح شخصی است، هرچند زمانی که شما شروع به کار در یک تیم می کنید، احتمالا متوجه می شوید که تیم، یک راهنمایی استایل مخصوص به خود دارد که یک توافقنامه مورد قبول را مشخص می کند تا همه اعضای تیم از آن پیروی کنند.

در مورد فضای خالی، یک جایی در CSS باید مراقب باشید، و آن فضای خالی اطراف صفت ها و مقدار های آن ها است. به عنوان مثال، CSS زیر معتبر است:

اما CSS زیر نامعتبر است:

از آنجا که ۰auto به عنوان یک مقدار معتبر برای خاصیت یا صفت حاشیه (margin) قابل تشخیص نیست (۰ و auto دو مقدار جداگانه هستند) و دیگر این که مرورگر، padding- را به عنوان یک صفت معتبر نمی شناسد. بنابراین همیشه باید با حداقل یک فضا یا اصطلاحا اسپیس، space، یک مقدار را از دیگری جدا کنید، اما نام ها و مقدار های صفت را با هم به عنوان یک رشته متصل به هم نگه دارید.

سینتکس CSS – نظرات یا کامنت ها Comments

همانند HTML، بهتر است که کامنت خود را در CSS داشته باشید تا به شما در درک کد، پس از چند ماه که به آن رجوع می کنید، و همچنین به دیگران که کد شما را می خوانند کمک کند. کامنت هایی که به صورت موقت و برای اهداف تست و مثلا برای مشخص کردن بخش های خاصی از کد، ایجاد شده اند نیز مفید هستند، مثلا اگر شما بخواهید بخشی از کد را که منجر به ایجاد خطا شده است، پیدا کنید.

کامنت ها در CSS با */ شروع شده و با /* پایان می یابند.

Shorthand در سینتکس CSS

برخی صفت ها مانند فونت، پس زمینه، حاشیه padding، حاشیه border، حاشیه margin، صفت shorthand نامیده می شوند؛ به این دلیل که به شما اجازه می دهد مقدار چندین صفت را در یک خط تنظیم کنید، تا در فرآیند ایجاد کد، در زمان صرفه جویی کنید.

به عنوان مثال:

این کد یک خطی، همان کار کد چهار خطی زیر را می کند:

و این کد:

تمام موارد زیر را اجرا می کند:

در این مقاله سعی نشده است تا مفاهیم سینتکس CSS به طور جامع آموزش داده شوند، اما برای شروع، راهنمای خوبی خواهد بود. حتما در آینده و در بسیاری از نمونه ها بیشتر درباره سینتکس CSS خواهید آموخت.