شیوه نامگذاری کلاس ها (Class)، در چارچوب W3.CSS

عملکرد اصلی چارچوب W3.CSS ، بر اساس نام کلاس ها (Class) می باشد ( کلید شماره 533 ). یعنی ما برای عنصرهای مختلف از صفحه، نام کلاس هایی (Class) را اضافه می کنیم و بنابراین ویژگی هایی که توسط چارچوب W3.CSS برای آن کلاس ها (Class) تعیین شده است، به عنصرهای مورد نظر اعمال خواهد شد.

نامگذاری کلاس ها (Class) در چارچوب W3.CSS به گونه ای است که ما آنها را به راحتی تشخیص می دهیم و بنابراین اگر قبلا خودمان کلاس هایی (Class) را برای عناصر صفحات وب سایت تعیین کرده باشیم، نام آنها با کلاس های (Class) مربوط به چارچوب W3.CSS اشتباه گرفته نمی شود.

چارچوب W3.CSS ، در ابتدای نام تمامی کلاس ها (Class)، عبارت w3 را ذکر می کند. به عنوان مثال، نام چند کلاس (Class) از چارچوب W3.CSS را در زیر ذکر می کنیم :

اگر خود فایل w3.css را با یک نرم افزار ویرایشگر متن باز کنید، مشاهده خواهید کرد که از چه نام هایی برای نامگذاری کلاس ها (Class) استفاده کرده است (البته فقط برای نگاه سریع و دیدن اینکه چگونه ویژگی هایی برای کلاس ها (Class) تعیین شده است و ما در کلیدهای آموزشی آینده، کلاس های (Class) مورد نیاز و ویژگی های آنها را شرح خواهیم داد و شما مجبور نیستید که به سراغ فایل w3.css بروید، مگر برای کنجکاوی بیشتر و خواندن کدهای آن) :

بنابراین همان طور که در کلیدهای آموزشی قبلی مثال زدیم، به عنوان یک مثال، برای اینکه رنگ پس زمینه یک عنصر div از صفحه را به رنگ سبز تغییر بدهیم (و متن آن نیز با رنگ سفید نوشته شود)، باید کلاس w3-green را برای آن عنصر div اضافه کنیم :

عبارت زیر، تگ div مورد نظر را در کلاس w3-green قرار می دهد :

اکنون برای درک بهتر اینکه چه اتفاقی می افتد، در فایل w3.css ، عبارت w3-green را جستجو می کنیم تا کدهای مربوط به آن را بیابیم :

بنابراین برای کلاس w3-green ، با کدهای زیر (کدهای CSS) در فایل w3.css ، ویژگی هایی در نظر گرفته شده که باعث می شود رنگ پس زمینه عنصرهایی که در کلاس w3-green قرار گرفته اند، به رنگ سبز تغییر کند و همچنین متن آنها نیز با رنگ سفید نوشته شود :

البته در کد بالا، ویژگی ها برای هنگام بردن موس (hover) بر روی عناصر موجود در کلاس w3-hover-green نیز ذکر شده است (عبارت w3-hover-green:hover یعنی وقتی ویژگی ها به عناصر موجود در کلاس w3-hover-green اعمال شوند که موس بر روی آنها قرار گرفته، نه در حالت عادی آن عناصر - البته فعلا با این نکته کاری نداریم و فقط چون در کد بالا ذکر شده بود، بیان شد تا آن را درک کنید).

در کل، نام هایی که چارچوب W3.CSS برای کلاس ها (Class) تعیین کرده است، به گونه ای هستند که هم سریعا متوجه می شوید که به چارچوب W3.CSS تعلق دارند (با دیدن عبارت w3 در ابتدای آنها) و هم اینکه با خواندن نام آنها، معمولا به سادگی می توانید کاربرد آنها را متوجه شوید.

اکنون که با کاربرد کلاس ها (Class) در چارچوب W3.CSS آشنا شده اید، می توانیم در کلیدهای آموزشی بعدی، کلاس های (Class) مختلف را معرفی کرده و بگوییم که چه کاربردی دارند.