آموزش    CSS  – درس اول – مرور کلی CSS

با سلام

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

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

CSS چیست؟

قبل از به وجود آمدن CSS، به منظور اعمال استایل ها روی یک فایل HTML باید از تگ ها و Attribute های مخصوص در HTML استفاده می شد. بنابراین یک صفحه وب علاوه بر اینکه شامل محتوا بود، اجزایی که برای اعمال استایل هایی نظیر رنگ و فونت و اندازه متن و … بود را نیز شامل می شد که این موضوع باعث شلوغی بیش از حد فایل ها می شد. اما CSS این مشکل را حل کرد. به کمک CSS این امکان به وجود آمد که دستوراتی که برای اعمال استایل ها به کار می رود را مجزا کرد و در بخشی جداگانه از فایل و یا در فایلی جداگانه قرار داد.

CSS مخفف Cascading Style Sheets است. منظور از Cascading این است که استایل ها بر روی یکدیگر اعمال می شوند. به زبان ساده CSS برای کنترل ظاهر و نمای سایت شما مورد استفاده قرار می گیرد. CSS یک تکنولوژی است که استایل های مورد نظر شما را روی المنت ها و اجزای تشکیل دهنده وب سایت شما اعمال می کند. شاید یکی از مهمترین ویژگی های CSS این باشد که شما می توانید گروهی از استایل ها را روی تعداد زیادی المنت و حتی تعدا زیادی از فایل های تشکیل دهنده وب سایتتان اعمال کنید.

چرا از CSS استفاده کنیم؟

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

برای یادگیری CSS به چه چیزهایی نیاز دارید؟

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

2.     دومین چیزی که برای یادگیری CSS نیاز دارید یک ویرایشگر متن است. مسلما در دسترس ترین ویراستار متن برای کاربران ویندوز Notepad است. اما گزینه های بسیار بهتری نیز وجود دارد. دقت کنید که ما به Text Editor نیاز داریم و نه Word Processor به طور مثال اگر شما دستورات CSS را در یک فایل Microsoft Word ذخیره کنید، این دستورات عمل نخواهند کرد زیرا Word تغییراتی در فورمت متن شما ایجاد می کند و به قول معروف آن را از حالت Plain Text خارج می کند. بنابراین به دنبال یک Text editor باشید. پیشنهاد من به شما Komodo Editاست. این ویراستار متن رایگان است و قابلیت های زیادی به شما می دهد به طور مثال با توجه به زبان برنامه نویسی شما دستورات و کلمات کلیدی را به صورت رنگی نمایش می دهد و همچنین هنگام نوشتن دستورات کلمات را به صورت هوشمند کامل می کند. نسخه پولی این نرم افزار Komodo IDEاست که امکانات بسیار کاملتری دارد اما نسخه رایگان هم برای منظور ما کافی است.

3.     در نهایت شما نیاز به دانش پایه ای از X/HTML دارید. چون هدف ما در این دوره آموزشی یادگیری CSS است فرض را بر این می گذاریم که شما با X/HTML آشنا هستید و توضیحی در مورد آن نمی دهیم.