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

به طور کلی یک صفحه وب شامل اجزای زیر است:

  • Content (محتوا)         : این بخش وب بوسیله کدهای html ایجاد می‌شود.
  • Presentation (نمایش) : این بخش وب بوسیله کدهای css ایجاد می‌شود.
  • Behavior (رفتار)          : این بخش وب بوسیله  JavaScript ایجاد می‌شود.

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

ساختار کدهای css

Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم. سلکتور می تواند نام تگ، آیدی و یا کلاس باشد.

Declaration : بخشی که در میان علامت { } نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را وارد کنید.

در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار ۱۲ پیکسل است.

برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید.

شاید از این مقاله خوشتون بیاد:  چه مواردی باید در تست سایت طراحی شده بررسی شود؟ (بخش دوم)

آموزش ساختار کدهای css

id و Class در CSS

همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می‌خواهیم استایل روی آن اعمال شود را ذکر می‌کنیم.
مثلا در دستور بالا که عنصر مورد نظر تیتر۱ است بنابراین استایل های نوشته شده در براکت ها، بر روی همه تیترهای ۱ موجود در صفحه وب اعمال می شود. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.

اعمال دستورات فقط بر روی یک عنصر واحد توسط id

برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه کنید.

مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهایHTML تعریف میکنیم:

<p id=”p1″>this is a paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#p1 {
text-align:center;
color:red;
}

بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال م یشوند که دارای id برابر با p1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.

نکته: هرگز صفت id را با عدد شروع نکنید چرا که در مرورگر فایرفاکس کار نخواهد کرد.

اعمال دستورات بر روی یک گروه از عناصر توسط Class

برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که قصد دارید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه کنید

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه پنجم: استایل css منوی کشویی

مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :

<p class=”name”>this is a paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.”  یا همان نقطه می‌نویسیم:

.name {
text-align:center;
color:red;
}

بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.

نکته: هرگز صفت Class را با عدد شروع نکنید چرا که فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.

امیدوارم از آموزش css و html لذت ببرید و به ساخت صفحات وب اقدام کنید.

دسته‌ها: دنیای وب

غلامرضا بهشتیان

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

دیدگاهتان را بنویسید

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