آموزش Css قسمت اول - مفاهیم ابتدایی و طرز اجرا

در این مطلب قرار است به شما چگونگی نوشتن کد های css آموزش داده شود. این در اصل یک دوره ی تازه از آموزشات سایت toolsTheme می باشد. امیدوارم از این آموزشات استفاده ی کافی را ببرید.

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

همانند html ، برای نوشتن کد های سی اس اس هم به چیز زیادی نیاز نیست. تنها یک ویرایشگر متن ساده ( مثل notepad ) و یک مروگر ( من از فایرفاکس استفاده می کنم ).

همچنین می توانید برای اجرا و امتحان کد های وب از ابزار نمایش آنلاین کد های صفحات وب استفاده کنید.

همان طور که گفته شد css به تگ های html حالت های تازه و اختصاصی ای می دهد که ما دوست داریم. از سی اس اس به سه شکل می توان در صفحات وب استفاده کرد:

1. در فایلی جدا با پسوند CSS اتصال آن به صفحه با تگ link.

2. در خود فایل html و در تگ style.

3. در موجودیت style هر تگی که می خواهید به آن حالت بدهید.

در ادامه برای هر یک از این حالت ها مثال هایی خواهم زد:

برای حالت اول:

برای کار به این حالت شما باید notepad یا ... را بازی کنید و کد های خود را درون آن بنویسید و با پسوند css در جایی ذخیره کنید. پس از آن در صفحه ی html خود در تگ لینک به شکل زیر ، فایل css را به صفحه متصل کنید. (نکته: این تگ در هر کجا می تواند استفاده شود اما بهتر است بین تگ head در بالای کد ها باشد)

<link rel="stylesheet" href="آدرس فایل" type="text/css" media="screen" />

برای حالت دوم:

در این حالت شما در خود فایل html که دارید ، از تگ style استفاده می کنید و کد Css مورد نظر را وارد آن تگ می کنید. مثلا در مثال زیر من با استفاده از تگ style کدی از css را برای تغییر رنگ پس زمینه ی صفحه نوشته ام. (نکته: این تگ در هر کجای صفحه می تواند باشد)

<<<code>>>

<style>

body{

background: red;

}

</style>

<<</code>>>

برای حالت سوم:

استفاده از این روش ، از دو روش قبلی آسان تر است. اما استفاده ی نادرست و بیش از اندازه از این روش می تواند باعث افزایش حجم صفحه شود. پس بهتر است از این روش به صورت محدود استفاده شود. (نکته: به هر تگی از html می تواند موجودیت style را نسبت داد.)

<<<code>>>

<a href="http://www.toolstheme.ir/" style="color: green;">tools theme</a>

<<</code>>>

خوب حالا که طرز اجرای کد های سی اس اس رو متوجه شدید ، میریم سراغ مفاهیم اولیه:

css مخفف cascading style sheet است. طرز استفاده از کد های css مانند آدرس دادن در یک شهر شلوغ می ماند که شما باید نام خیابان ها ، کوچه ها و ... هر منطقه را دقیق وارد کنید تا به نقطه ی مورد نظر خود برسید. در کد ها ، شهر همان صفحه ی html است که پر است از انواع تگ ها. نام کوچه ها و خیابان ها هم همان id ها و class هایی هستند که به تگ ها نسبت داده می شود. همان طور که در آدرس دادن باید به ترتیب از کلی ترین بخش به جزئی ترین بخش رسید (مثلا: شهر کاشان ، خیابان امیرکبیر ، کوچه ی نرگس ، پلاک 20) در css هم باید از بخش های کلی تر به بخش های جزئی تر مسیر را معلوم کرد (مثلا: .table td). در توضیحات پایین بیشتر منظرو من را متوجه خواهید شد.

خب! ما می خواهیم اولین کد css را بنویسیم و توضیح بدهیم:

<<<code>>>

<style>

a{ /* شروع استایل نویسی */

color: #333; /* تغییر رنگ متن */

background: #fff; /* تغییر رنگ پس زمینه */

font-family: arial; /* خانواده ی فونت */

font-size: 20px; /* اندازه ی نوشته */

} /* پایان استایل نویسی */

</style>

<a href="#">toolsTheme.ir - 1 </a>

<a href="#">toolsTheme.ir - 2 </a>

<a href="#">toolsTheme.ir - 3 </a>

<<</code>>>

در کد بالا ما بدون توجه به آدرس های جزئی ، به طور کل گفته ایم که: تمام تگ های a (لینک ها) به رنگ #333 در بیایند ؛ پس زمینه ی آن ها #fff شود و فونتشان arial و اندازه ی آن ها به 20px تغییر کند. (#333 یک کد رنگ است. برای متوجه شدن این که این کد ها چه رنگ هایی را نشان می دهند در اینترنت جستجوی بکنید.) در نتیجه کد سی اس اس بالا بر روی سه لینکی که نوشته شده است اثر خواهد گذاشت.

علامت  /* در Css مخصوص قرار دادن توضیحات است و هر چیزی بعد از آن تا */ قرار گیرد به عنوان توضیح است و هیچ تاثیری در نتیجه ندارد. در کل /* و */ برای درج توضیحات چند خطی و تک خطی است.

برای این که ما بخواهیم تنها روی یکی از لینک ها یا تعداد مشخصی از آن ها تغییر ایجاد کنیم باید از id یا class استفاده کنیم. این دو موجودیت قابل نسبت دادن به همه ی تگ های اچ تی ام ال هستند.

به کد های زیر دقت کنید:

 <<<code>>>

<style>

a{

color: #333; // تغییر رنگ متن

background: #fff; // تغییر رنگ پس زمینه

font-family: arial; // خانواده ی فونت

font-size: 20px; // اندازه ی نوشته

}

.link{ // کلس های link

font-weight: bold; // متن درشت bold

}

#link{

display: none; // پنهان می شود

}

</style>

<a href="#" class="link">toolsTheme.ir - 1 </a>

<a href="#" id="link">toolsTheme.ir - 2 </a>

<a href="#" class="link">toolsTheme.ir - 3 </a>

<<</code>>>

مقدار class و id یک مقدار دلخواه است و می تواند شامل همه ی حروف انگلیسی و اعداد و علامت - و _ باشد. (نکته: نام کلس و آی دی باید با حرف انگلیسی شروع شود)

در کد های بالا همانند قبل با استفاده از css یک سری حالت ها را به همه ی لینک ها نسبت داده ام. اما برای آن هایی که کلسشان link است حالتی جدا معین کرده ام. (علامت "." به معنی کلس است) (علامت "#" به معنی آی دی است) (نکته: کلس و آی دی از هم مجزا هستند و اگر از اسم های برابر برای هر دوی آن ها استفاده شود مشکلی پیش نخواهد آمد. اما در بین کلس ها ، یک نام یک بار می تواند استفاده شود و آی دی نیز در بین آی دی ها منحصر به فرد است.)

نکته: من در بالا ، برای انتخاب آی دی و کلس مرود نظر تنها نام آن ها را نوشته ام و مشخص نکرده ام که برای کدام تگ ها باید استفاده شود. از این رو این ویژگی ها برای تمام تگ هایی که آی دی یا کلس مشابه داشته باشند اعمال خواهد شد. اما اگر بخواهیم یک آی دی برای تگ های a یک عمکرد را داشته باشد و برای تگ های div کار دیگری را انجام دهد باید چه کنیم؟ به کد های زیر توجه کنید:

<<<code>>>

<style>

a{

color: #333; // تغییر رنگ متن

background: #fff; // تغییر رنگ پس زمینه

font-family: arial; // خانواده ی فونت

font-size: 20px; // اندازه ی نوشته

}

a.link{ // کلس های link

font-weight: bold; // متن درشت bold

}

div.link{

display: none; // پنهان می شود

}

</style>

<a href="#" class="link">toolsTheme.ir - 1 </a>

<div class="link">این یک تگ دیو است با کلس مشابه</div>

<a href="#" class="link">toolsTheme.ir - 3 </a>

<<</code>>>

در کد های بالا اگر دقت کنید قبل از معلوم کردن اسم کلس مورد نظر ، نام تگ مربوط آمده است. این حالت ، شیوه نامه ی ما را جزئی تر می کند و دامنه ی تاثیرات را کوچک تر می کند.

قسمت آبی و قرمز با این که کلس های برابری دارند اما رنگ قرمز تنها بر تگ های a که کلس آن ها link است اثر می کند و رنگ آبی بر تگ های div که کلسشان link است.

این مورد برای آی دی صدق نمی کند. زیرا آی دی منحصر به یک شیء است و نمی تواند برای چند تگ استفاده شود. البته اگر استفاده شود مشکلی در اجرای کد های css به وجود نمی آید اما اگر بخواهید از دستورات javascript استفاده کنید دچار مشکل خواهید شد.

منتظر آموزشات جدیدتر باشید.