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

 نوشته شده توسط مهدی باقری در بخش طراحی وب در تاریخ ۲۶ بهمن ۱۳۸۸ | ۱ نظر

با سلام

تصمیم گرفتیم طی یک مجموعه آموزش ۱۰ قسمته، به آموزش مقدماتی و در عین حال جامع 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 آشنا هستید و توضیحی در مورد آن نمی دهیم.

چگونگی اعمال استایل ها در CSS :

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

روش اول : استفاده از استایل های درونی (Internal Stylesheet) :

در این روش هیچ فایل جداگانه ای برای دستورات CSS ایجاد نمی شود بلکه دستورات CSS درون یک تگ <style> و در درون تگ <head> فایل HTML قرار داده می شوند. به طور مثال کد زیر را که بخشی از کد HTML است را زیر را در نظر بگیرید :

<head>
    <title>
        A Simple Document with CSS
    </title>
    <style>
        body {
            background-color: white;
            margin: 5px;
            font-family: helvetica, arial, sans-serif;
        }
 
        div#content {
            width: 75%;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

همانطور که گفته شد استایل ها درون فایل HTML و در تگ head قرار گرفته اند. حالا این بخش از کد را در نظر بگیرید :

body {
            background-color: white;
            margin: 5px;
            font-family: helvetica, arial, sans-serif;
     }

کلمه body به مرورگر می گوید که کلیه دستوراتی که مابین {} می آید را بر روی تمام بخش های تگ body اعمال کند. هر خط که با ; خاتمه می یابد کک قانون یا دستور CSS است که خود از یک ویژگی و  یک مقدار تشکیل شده است که با : از هم جدا شده اند. اگر متوجه این دستورات نمی شوید نگران نباشید چون بعدا به طور مفصل آنها را توضیح خواهم داد.

روش دوم : استایل های درون خطی  (inline stylesheets):

در این روش استایل های مد نظر، درون تگ بازکننده المنت مورد نظر نوشته می شوند. به مثال زیر توجه کنید :

<p style="color: red;"> This is a Sample Paragraph </p>

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

روش سوم : استایل های خارجی (external stylesheets) :

در این روش کلیه دستورات CSS درون یک فایل جداگانه با پسوند css ذخیره می شوند سپس برای اعمال این دستورات روی یک فایل HTML در تگ head آن فایل به فایل css اشاره می شود. نحوه اشاره به صورت زیر است :

<link rel="stylesheet" type="text/css" href="main.css" />

قسمتی از کد که درون href=”" قرار می گیرد اشاره به محل قرار گیری فایل CSS دارد. مزیت اصلی استفاده از فایل استایل خارجی این است که برای تغییر در یک جزء خاص در کل یک وب سایت می توان فقط در فایل CSS آن تغییر را ایجاد کرد و تغییرات روی همه سایت اعمال می شود.

توصیه برای چگونگی اعمال استایل ها :

همیشه استایل های عمومی تر را در بالای فایل css خود قرار دهید  و سپس قسمت های دیگر را به ترتیب اهمیت اضافه کنید. مانند مثال زیر :

body {
    background-color: white;
    margin: 5px;
    font-family: helvetica, arial, sans-serif;
}
 
div#content {
    width: 75%;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #ccc;
}

همانطور که مشخص است ابتدا یک سری استایل عمومی در بالای فایل css و برای body در نظر گرفته شده است و سپس یک سری استایل روی یک div که id آن content است اعمال شده است. در مورد div و id بعدا توضیح خواهم داد.

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



یک نظر در مورد “آموزش CSS در ۱۰ روز – درس اول – مرور کلی CSS”

  1. معصومه می‌گه:
    شهریور ۴, ۱۳۸۹ در t ۱۱:۲۶ ق.ظ

    با سلام ببخشید من یه سوال کوچیک داشتم ممنون میشم جواب بدبد . من از استایل a:link و a:hover و a:visite برای لینکها استفاده میکنم . ولی مثلا اگر در صفحه ۳ تا لینک داشته باشم و روی یکی از آنها کلیک کنم کدهایی که در a:visite نوشته ام برای هر سه آنها اعمال میشود و اگر در برنامه لینکهای جدید دیگری نیز اضافه کنم در مورد انها نیز اعمال می شود با اینکه هیچگاه روی انها کلیک نکرده ام . ممنون میشم اگر لطف کنید جواب بدید . . مرسی

نظر بدهید

کد امنیتی :