تفاوت بین Class و ID در طراحی وب با HTML و CSS

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

برای این آموزش هم فایل ویدئویی ضبط شده و هم متن آن در زیر قابل دریافت است. اگر میتوانید فیلم آموزشی را دانلود و مشاهد کنید و اگر امکان این کار را ندارید از آموزش متنی لذت ببرید.

ID ها و Class ها مانند قلاب عمل میکنند

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

برای مثال فرض کنید شما در صفحه‌ی وب خودتان چندین div دارید که یکی برای بخش محتوای اصلی، یکی برای منوی کناری، یکی برای منوی بالایی و دیگری برای قسمت پایینی سایت (Footer) است. حالا اگر شما بخواهید هر کدام از این قسمت‌ها را بصورت خاص و جداگانه با css استایل دهی کنید چاره‌ی کار دقیقا همین است که با id ها و class ها اینکار را انجام دهید.

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

ساخت فروشگاه اینترنتی با php

 ID ها منحصر به فرد هستند

  • هر المان فقط میتواند یک id داشته باشد.
  • هر صفحه‌ی وب فقط میتواند یک المان با آن ایدی داشته باشد.

برای مثال اگر برای منوی کناری خودتان از کد <“div id=”sidebar>  استفاده کنید دیگر نمتوانید در جایی دیگر این id را به کار بگیرید و اینجا تنها جایی است که شما باید از “id=”sidebar استفاده کنید.

CLass ها منحصر به فرد نیستند

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

زمانی که میخواهید یک استایل خاص را روی چندین المان تکرار کنید باید از class ها استفاده کنید. برای مثال شما در کدتان چندین جا مجبور میشوید یک استایل خاص را به یک تکه از متن بدهید.برای مثال در جایی میخواهید آن متن را به این شکل کلفت و Bold کنید  و جاهایی هم میخواهید علاوه بر Bold بودن رنگ آن آبی هم باشد. در کد زیر در خط اول میخواهیم یک متن ساده داشته باشیم، پس هیچ class خاصی به آن اختصاص نمیدهیم. در خط دوم فقط میخواهیم یک متن کلفت داشته باشیم، به همین دلیل class آنرا برابر bold و در خط سوم چون میخواهیم متن‌مان هم کلفت و هم آبی باشد مقدار class آن را برابر دو مقدار bold و blue-text قرار میدهیم و این دو را با یک فاصله (space) از هم جدا میکنیم.

<div>این یک متن عادی است</div>
<div class="bold">این یک متن کلفت است</div>
<div class="bold blue-text">این یک متن کلفت و آبی رنگ است</div>

و حالا میرویم و در css این کدها را برای یک متن کلفت و یک متن آبی رنگ مینویسیم :

.bold {
    font-weight: bold;
}

.blue-text {
    color: blue;
}

از این به بعد در هرجای کدمان بخواهیم یک متن کلفت داشته باشیم به یک المان class=bold و هر جا بخواهیم یک متن آبی رنگ داشته باشیم به یک المان class=blue-text و هرجا که هردوی این‌ها را باهم بخواهیم به آن المان هر دوی این class ها را با یک فاصله میدهیم. حاصل کد بالا این شد:

class-id-1

 

ساخت فروشگاه اینترنتی با php

معرفی سایت‌های رایگان دانلود آیکون

سلام به همه‌ی کاربران عزیز زنبیل. قطعا واسه شما هم پیش اومده که در حال طراحی یک اپلیکیشن یا یک وب‌سایت بودید و به آیکون‌هایی برای قسمت منو یا… نیاز پیدا کردید. افراد مختلف با توجه به علافه‌ی خودشون روش‌های مختلفی رو استفاده میکنند تا به آیکون مد نظرشون دست پیدا کنند. توی این ویدئوی آموزشی به شما 4 سایت فوق‌العاده رو معرفی میکنم که با کمک آن‌ها می‌تونید به دنیایی از ایکون‌های رایگان در انواع فرمت‌ها دسترسی پیدا کنید :

dl-btnدانلود این آموزش با کیفیت بالا و کاملا واضح (با حجم 18 مگ)dl-btn

آموزش متنی

برای دانلود آیکون‌هایی با هر موضوعی که مد نظرتان هست کافی‌ست به یکی از 4 سایت زیر مراجعه کنید و در قسمت جستجوی هر سایت نام موضوعی که در آن حیطه به دنبال ایکون می‌گردید را وارد کنید و سپس از لیستی که برای شما نمایش داده می‌شود ایکون مد نظرتان را انتخاب و دانلود کنید :

www.flaticon.com
www.iconfinder.com
www.iconmonstr.com
www.mricons.com

نکته :‌ ممکن است در برخی مواقع، برخی از این 4 سایت با IP ایران مشکل داشته باشند و باز نشوند.به هر حال سایت اول (www.flaticon.com) در اکثر مواقع قابل دسترسی است و می‌تواند پاسخگویی بسیاری از نیازهای شما باشد.

برای درک بهتر آموزش و یادگیری جزئیات بیشتر پیشنهاد میکنم فیلم آموزشی را مشاهده کنید.

خمیده کردن گوشه‌ی المان‌ها با CSS

خمیده کردن گوشه‌ی المان‌ها با CSS

شاید گاهی برای شما هم پیش آمده باشد که المانی در صفحه‌ی وب داشته باشید و بخواهید گوشه‌های آن‌را گرد کنید و به آن ظاهر چشم نوازتری ببخشید. برای اینکار باید از CSS استفاده کنید. آموزش ویدئویی زیر روش اینکار را به شما توضیح داده است :

dl-btnدانلود ویدئوی آموزشی با کیفیت بالا و کاملا واضح (با حجم ۱2 مگ)dl-btn

border radius چیست؟

حتما دیده‌اید که بعضی المان‌ها در سایت‌ها مانند تصاویر، جعبه‌ها و… دارای گوشه‌هایی گرد و خمیده‌ میباشد.

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

border radius در css

برای گرد کردن گوشه‌ی المان ها با استفاده از CSS فقط کافی است که در استایل دهی CSS مربوط به آن المان از دستور border-redius به این شکل استفاده کنیم :

.element{
     border-radius:5px;
}

مقداری که روبروی border-radius وارد می‌شود میتواند به هر واحدی باشد ولی در دنیای وب واحد پیکسل (px) رایج است و هرچه مقدار این عدد بیشتر باشد گوشه‌های المان ما بیشتر خمیده خواهد شد.