آموزش CSS – تاریخچه سی اس اس (CSS) و آشنایی با ساختار کدهای سی اس اس (CSS) (جلسه ۲)

css-style

تاریخچه سی اس اس (CSS)

زمانیکه زبان سی اس اس (CSS) بوجود نیامده بود، هر مرورگری دارای قواعد مختص به خود برای نمایش تگ های اچ تی ام ال (HTML) بود. بنابراین می توانستیم این انتظار را داشته باشیم که یک وب سایت در مرورگر الف با ظاهر به مراتب متفاوت تری نسب به مرورگر ب به نمایش در آید.
بالاخره به خاطر وجود این ناهماهنگی ها در سال ۱۹۹۶ نسخه اول زبان سی اس اس (CSS) تحت عنوان CSS 1.0 ایجاد شد و در سال ۱۹۹۸ هم نسخه CSS 2.0 به بازار عرضه شد. سپس در سال ۲۰۰۴ با اعمال برخی بازنگری ها در کدهای سی اس اس، نسخه CSS 2.1 شکل گرفت و در نهایت در سال ۲۰۱۱ با رفع برخی مشکلات این نسخه، مجدد تحت همین عنوان به دنیا عرضه شد و این نسخه از سی اس اس (CSS) همان نسخه ای است که طراحان وب با آن سر و کار دارند.
با توجه به سرعت گسترش وب و همچنین ایجاد وب اپلیکیشن ها و دستگاه های موبایل نیاز به نسخه جدیدی از سی اس اس بود که می بایست رویکردی کاملاً متفاوت را اتخاذ می کرد. از این رو نسخه CSS 3 ایجاد شد که هنوز هم در حال توسعه و تکمیل است.

آشنایی با ساختار کدهای سی اس اس (CSS)

کدهای سی اس اس (CSS) از دو بخش کلی تشکیل شده اند که عبارتند از Selector و Declaration. برای روشن شدن این دو اصطلاح تصویر زیر را مد نظر قرار خواهیم داد:

xcss_syntax.jpg.pagespeed.ic.gdU_a12BnC

حرف p که با یک بیضی قرمز رنگ مشخص شده است اصطلاحاً Selector نامیده می شود. در واقع این Selector کلیه تگ های <p> را در سند اچ تی ام ال (HTML) تحت تاثیر قرار می دهد. بخشی از کد که با یک مستطیل سبز رنگ مشخص شده است اصطلاحاً Declaration نامیده می شود که خود حاوی عناصر مختلفی است (لازم به ذکر است که هر Declaration با علامت { آغاز شده و با علامت } پایان می یابد).
داخل Declaration دو کلمه color و font-size با مستطیل های آبی رنگ مشخص شده اند که اصطلاحاً Property نامیده می شوند. کاری که Property ها انجام می دهند این است که ویژگی های مختلفی همچون رنگ، نوع، اندازه و … را به یک Selector اختصاص می دهند. پس از هر Property یک علامت : قرار گرفته سپس مقداری در نظر گرفته می شود که اصطلاحاً Value نامیده می شود. بعد از قرار گرفتن Value هم می بایست حتماً یک علامت ; قرار داد تا کد تکمیل شود. به خاطر داشته باشیم که در هر Declaration به هر تعداد که بخواهیم می توانیم Property و Value مرتبط با Selector بنویسیم.
به خاطر داشته باشیم که Space یا “فضای خالی” در کدهای سی اس اس (CSS) در برخی جاها تاثیر داشته و در برخی جاها هم بدون تاثیر است. به عبارت دیگر می توان کدهای سی اس اس (CSS) فوق را به صورت زیر هم نوشت چرا که در مورد کد فوق حذف فضاهای سفید از کد هیچ گونه تاثیری در روند اجرای کدهای سی اس اس (CSS) ندارد (در ادامه آموزش ها، جاهایی که قرار دادن Space مشکل ایجاد می کند را بیشتر توضیح خواهیم داد):

2016-05-29_01-24-15

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان