زبان CSS مخفف Cascading Style Sheets است. این یک زبان برنامهنویسی است که برای طراحی ظاهر و استایل وبسایتها به کار میرود.
CSS، یک زبان برنامهنویسی است که برای تعریف ظاهر و سبک بصری صفحات وب استفاده میشود. ساختار CSS شامل چندین بخش است که هر کدام وظایف مختلفی را بر عهده دارند.
یکی از اصلیترین بخشهای ساختار CSS، Selector است. Selector به عنوان مشخصکننده اصلی برای انتخاب المانهای HTML برای تعیین سبک و ظاهر آنها استفاده میشود. به طور معمول، Selector با نام کلاس، آیدی، نام المان یا ترکیبی از آنها تعریف میشود.
بخش بعدی از ساختار CSS، Declaration است. این بخش شامل یک یا چند Property و Value است. Property، خصوصیتی است که مشخص میکند که سبک و ظاهر المان HTML چگونه تنظیم شود. مثلاً، ارتفاع، عرض، رنگ و غیره. Value، مقداری است که Property به آن تنظیم میشود.
Declaration Block شامل Property و Value است. این بخش درون {} قرار میگیرد و تمام تعریفهای یک Selector را شامل میشود. به عبارت دیگر، Declaration Block شامل تمام سبکهای CSS است که به یک المان HTML تعلق دارد.
شامل Selector و Declaration Block است. درون {}، تمام Declaration هایی که برای المان HTML مشخص شدهاند، قرار میگیرند. هر Rule Set شامل Selector و Declaration Block متعلق به یک المان HTML است.
حالا برای قرار دادن CSS در سند HTML، میتوانید از چندین روش استفاده کنید. یکی از روشهای معمول برای قرار دادن CSS در سند HTML، استفاده از تگ `<style>` است. در این روش، کد CSS درون تگ `<style>` قرار میگیرد. این تگ معمولاً در بخش `<head>` از سند HTML قرار میگیرد.
روش دیگری برای قرار دادن سی اس اس در سند HTML، استفاده از فایل CSS جداگانه است. در این روش،کد CSS در یک فایل با پسوند .css ذخیره میشود و با استفاده از تگ `<link>` در بخش `<head>` از سند HTML، به سند مرجع داده میشود. این روش برای پروژههای بزرگ و نیاز به تعداد زیادی صفحه وب مناسب است.
در سی اس اس ، انتخابگرها (Selectors) برای انتخاب و سبک دهی به المانهای HTML استفاده میشوند. با استفاده از انتخابگرها، میتوانیم عناصر مشخصی را از بین صدها المان موجود در صفحه وب انتخاب کنیم و به آنها قوانین سبکدهی اعمال کنیم.
موقعیتبندی (Positioning) در سی اس اس به معنای تعیین موقعیت یک المان HTML در صفحه وب است. با استفاده از ویژگیهای position، top، bottom، left و right، میتوانیم موقعیت جدیدی برای یک المان HTML تعیین کرده و آن را در محل دلخواهی در صفحه وب قرار دهیم.
ویژگی position مشخص میکند که یک المان HTML به صورت نسبی یا مطلق قرار گیرد. ویژگی position چهار مقدار ممکن دارد:
این مقدار به طور پیشفرض برای تمام المانهای HTML تعیین شده است و به معنای این است که المان با توجه به ترتیب ظاهری در صفحه قرار میگیرد و هیچ تأثیری بر روی موقعیت المان ندارد.
در این حالت، موقعیت المان نسبت به موقعیت اولیه آن تعیین میشود. با استفاده از ویژگیهای top، bottom، left و right، میتوانیم فاصله المان را از موقعیت اولیه آن تعیین کنیم.
در این حالت، موقعیت المان نسبت به المان والد (Parent Element) تعیین میشود. اگر المان والد دارای ویژگی position نسبتی یا مطلق باشد، موقعیت المان متناسب با آن تعیین میشود. با استفاده از ویژگیهای top، bottom، left و right، میتوانیم فاصله المان را از المان والد تعیین کنیم.
در این حالت، موقعیت المان نسبت به موقعیت صفحه نمایش تعیین میشود. این المان همیشه در همان موقعیت باقی میماند، حتی در صورت اسکرول کردن صفحه.
علاوه بر ویژگی position، ویژگیهای top، bottom، left و right نیز به ما امکان میدهند تا موقعیت دقیق المان را در صفحه تعیین کنیم. با استفاده از این ویژگیها، میتوانیم فاصله المان از بالا، پایین، چپ و راست را تعیین کرده و المان را در مکان دلخواهی در صفحه نمایش قرار دهیم.