جلسه پنجم : ساختار اصلی فایل های CSS و توضیحات مربوط به آن

جلسه پنجم : ساختار اصلی فایل های CSS و توضیحات مربوط به آن

درود بر شما دوستان عزیز و همراهای همیشگی میهن آکادمی ، امیدواریم که حال دلتان خوب باشد و با انرژی به سمت ادامه آموزش طراحی سایت با کد نویسی بروید و اینجاست که می خواهیم شروع کنیم و دوباره به شما ساختار کامل و نحوه استفاده از css و html را در سایت خود با هم یادگرفته ایم و یادتان می باشد که سه روش وجود داشت و این سه روش : روش اول اکسترنال ، روش دوم مستقیم ، روش سوم درون خطی می گفتیم

در این جلسه می خواهید با یک دیگر ساختار کلی فایل css را به هم دیگر بررسی کنیم و به شکلی الفبای کد نویسی css را با یک دیگر یاد میگیریم ، پس بریم تو دلش …

ساختار اصلی فایل های CSS

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

پس اول از همه نام سلکتور مورد نظر خودمان را می نویسیم و سپس آکولاد را باز کرده و می بندیم و در آخر در بین این آکولاد ها دستورات و یا استایلی که می خواهید در قسمت مورد نظر خود نمایش دهید را می نویسیم و حواستان باشید در پایان هر استایل و دستور خود هم از سیمیکالن استفاده می کنیم مانند قسمت کد نویسی شده زیر

selector {
background : blue;
color : #fff;
}

انواع سلکتور ها در کد نویسی CSS

همانطور که می دانید ما در کد نویسی css سه نوع سلکتور بیشتر نداریم و این سه نوع را به شما آلان کامل توضیح می دهیم

• نام تگ
• کلاس
• آیدی

نام تگ :

با استفاده از نام تگ شما می توانید به راحتی انتخاب کنیم که چه استایلی های برای آن ها اعمال بشود به عنوان مثال تگ های مانند : img ، Body ، h1 تا h6 و P و هزاران نوع تگ های دیگر که در کد نویسی های HTML به کار رفته می شود

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

p {
 font-size= 23px;
}

در یک خط کد بالا شما می توانید با استفاده از آن اندازه فونت مطلب خود را بر روی 23 پیکسل قرار دهید و با تغییر 23 می توانید اندازه فونت سایز خود را نیز به همان مقداری که می خواهید مشخص کنید

کلاس :

حالا به فرض مثال شما می توانید برای هر تگی که در سایت خود استفاده می کنید یک کلاس در نظر بگیرید و به بیان بهتر تگتان را اختصاصی کنید و نام مخصوصی به آن بدهید و مثلآ اگر که 10 خط پاراگراف دارید می توانید اسم پاراگراف اول را bia قرار دهید و اسم پاراگراف دوم را نیز Too قرار دهید و تنها نکته ای که شما باید دقت کنید این است ، که هر کلاس با نقطه (.) شروع می شود

.p {
    background-color: green;
}

در خط کد بالا شما می توانید به کلاس p یک پشت زمینه رنگ سبز دهید

آیدی :

آیدی ها کمی اختصاصی هستد و بیشتر برای مواردی در سایت استفاده می شوند که به عنوان آدرس یکتا می باشد و مثلا ما یک بخش به نام خدمات داریم و یک منو هم در هدر سایت که می خواهیم در هدر سایت زمانی که بر روی خدمات کلیک شد به آخر صفحه مشخص شده انتقال داده شود و بیشتر این موضوع برای سایت های تک صفحه ای استفاده می شود ، صد البته که آیدی ها برای کد نویسی به JavaScript هم گاهی وقت ها نیاز دارد ، صد البته راستی که آیدی ها با # (هشتگ) شروع می شود مانند کد زیر :

#bia {
    background-color: green;
}

خب به همین راحتی و آسانی شما می توانید با سلکتور ها کار کنید و این هم از سلکتور ها که تمام شد و صد البته یادم نرفته این هم به شما آموزش دهم نحوه کامنت گذاری در کد نویسی CSS

کامنت گذاری کردن کد ها با CSS :

کامنت‌نویسی در CSS یک روش ضروری برای سازماندهی، توضیح و نگهداری کدها است. کامنت‌ها به توسعه‌دهندگان کمک می‌کنند تا ساختار استایل‌ها را بهتر درک کنند، به‌ویژه در پروژه‌های بزرگ یا تیمی. در CSS، کامنت‌ها با /* شروع و با */ پایان می‌یابند و هر محتوایی بین این علامت‌ها توسط مرورگر نادیده گرفته می‌شود مانند کد زیر :

/*
 * نوار کناری (سایدبار)
 * عرض: 250px
 * پس‌زمینه: خاکستری روشن
 */

به همین راحتی با استفاده از روش بالا شما می توانید در سایت خود کامنت گذاری کنید و در ضمن به خاطر داشته باشید که شما می توانید با مشخص کردن footer یا header در سایت خود و علامت گذاری کردن آن در سایت خود کامنت گذاری کنید.

موفق و پیروز باشید ❤