آموزش کامل css

تاریخ : 2020-09-05 بازدید : 149 دسته بندی : مقالات
آموزش کامل css

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

کاربرد css

css برای استایل دهی عناصر html در صفحات وب استفاده می شود . اگر با html کار کرده باشید حتما هنگام ایجاد یک لینک ،‌ خط زیر آن برایتان ناخوشایند بوده و دوست داشته اید که آن را حذف کنید و یا رنگ آبی آن را به رنگی دیگر تغییر دهید. تمام این کار ها یعنی تغییر ظاهر عناصر به لطف css امکان پذیر است. در این مقاله قدم به قدم استایل دهی را به شما آموزش می دهیم. پس با ما همراه باشید.

کامنت ها در css

همان طور که در مقاله های قبلی اشاره کردیم، کامنت کدی است که اجرا نمی شود. کامنت ها را برای توضیحات بیشتر یا غیر فعال کردن یک کد استفاده می کنیم. در css کامنت در بین  /* */  قرار می گیرند.

ساختار css

قبل از اینکه با ساختار و نحوه ی استایل دهی در css آشنا شوید لازم است تا با سلکتور ها آشنا شوید .
سلکتور (selector) :  در واقع همان عنصر انتخابی ماست. به کمک سلکتور عنصر مورد نظر را انتخاب می کنیم و استایلی که می خواهیم را به آن اعمال می کنیم.

انواع سلکتور ها یا گزینشگر ها :

Id : انتخاب یک عنصر به کمک id آن عنصر . برای مثال :‌ mytag#
Class : انتخاب یک عنصر با کمک ویژگی class آن عنصر. برای مثال : mytag.
Tag: انتخاب عنصر با کمک نام آن عنصر . برای مثال :‌ p
با کمک آی دی ، کلاس و نام عنصر می توانیم عناصر یا عنصر مورد نظر خودمان را انتخاب کرده و استایل دلخواه را بر آن اعمال کنیم.
نکته : اگر از id استفاده کنیم استایلی که اعمال کردیم تنها بر یک عنصر اعمال می شود زیرا آی دی ، یکتاست و نمی توان برای چند عنصر آن را به کار برد. اما در مورد ویژگی class اینطور نیست . زیرا می توان آن را برای چند عنصر به کار برد.
نکته :‌ با انتخاب نام عنصر مثلا a یا p آن استایل برای تمام تگ های a یا p اعمال می شود.

ساختار کلی استایل دهی یا syntax در css :

 

آموزش کامل css

 

 

Property : خاصیت یا استایل مورد نظر مثل : رنگ ، فونت و..
Value : مقدار property

به چند مثال زیر دقت کنید :

آموزش کامل css

در کد بالا منظور ما این است که عنصری که کلاس header دارد را انتخاب کن و ویژگی فونت آن را برابر ۲۵ پیکسل قرار بده .

آموزش کامل css

در مثال بالا گفته ایم که تمام عناصر a را انتخاب کن و ویژگی text decoration آن ها را برابر none قرار بده.

 

آموزش کامل css

در مثال بالا گفته ایم که عنصری با آی دی wrapper را انتخاب کن و رنگ آن را برابر با قرمز قرار بده.

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

نحوه ی اضافه کردن استایل ها

برای اینکه استایل های شما اعمال شود شما سه روش را می توانید استفاده کنید.

روش اول : به صورت inline
در این روش در خود عنصر html ویژگی style را تعریف می کنید و استایل را اعمال می کنید . مثال :

<p style=” color : red; ”>this is a test.</p>

روش دوم :‌ تگ style
در این روش باید استایل های خود را در تگ style بنویسید. تگ style در درون تگ header قرار می گیرد.
روش سوم : فایلی با پسوند .css ایجاد کنید و با کمک تگ link در header آن را اضافه کنید.

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

اگر می خواهید استاندارد کار کنید بهتر است از روش سوم استفاده کنید. یعنی استایل های خود را در یک فایل جداگانه از نوع css تعریف کنید و سپس آن را در فایل html خود با تگ مناسب فراخوانی کنید.

استایل ها چگونه اعمال می شوند ؟‌

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

تمرین 
حال زمان تمرین بیشتر رسیده ! باید با تمام ویژگی های مهم و پر کاربرد در صفحات وب آشنا شوید . هر یک از ویژگی هایی که تعریف می کنید یک کار خاص را انجام می دهد . یکی یک عکس پس زمینه انتخاب می کند دیگری رنگ متن را تغییر می دهد . یک ويژگی مکان یک عنصر را تغییر می دهد و ….
برای اینکه تمرین بیشتری داشته باشید و با ویژگی های css به خوبی آشنا شوید یک سایت منبع را به شما معرفی می کنیم . در این سایت می توانید تمرین های مختلفی از تمام ویژگی های css را پیدا کنید . در ادیتور آنلاینی که در این سایت قرار دارد می توانید کد دلخواه تان را نیز بنویسید و نتیجه را ببینید .
سایت w3school یک سایت بسیار خوب برای تمرین css است . در این سایت تمام ويژگی های css گفته شده است. برای همه ی ویژگی ها مثال هایی نیز قرار داده شده؛ برای دیدن مثال ها و تمرین آن ها یک ادیتور آنلاین نیز در سایت قرار دارد.
اگر دوست ندارید که آنلاین کدنویسی کنید می توانید یک بار کد ها را در یک فایل کپی کرده و خودتان امتحان کنید. برای کد نویسی همیشه به ابزار های زیر نیاز خواهید داشت .

  • ادیتور که محلی است برای کد نویسی
  • مرورگر برای دیدن نتیجه ی کدها
  • فایل های مورد نظر (. html و .css)

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

 

برچسب ها : ,