CSS چیست؟
CSS تعیین می کند هر کدام از عناصر HTML چگونه نمایش داده شوند. در واقع به کمک آن می توان برای هر عنصر از صفحه، سبک نمایشی خاصی ایجاد کرد. با این ابزار به اجزای صفحه ی وب، رنگ و لعاب می دهیم تا صفحات زیباتری داشته باشیم!
CSS یکی از پرکاربردترین زبان ها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته می شود.
در فرانت اند فقط با عناصر بصری سایت کار می کنیم و هر تغییری که ایجاد می کنیم در چهره سایت مشخص می شود.
برای درک بهتر css پیشنهاد میکنم به مقاله "HTML چیست" در صفحه من مراجعه کنید تا مبحث css را به خوبی یاد بگیرید.
تعریف CSS با تصویر!
با یادگیری HTML اسکلت سایت خود را میسازید ( مانند المان ها و تصاویر و متن و لینک ها ) و سپس به انها رنگ و لعاب میدهید. عناصری که به کمک HTML در صفحه ی وب سایت قرار می گیرند هیچ ظاهر جذاب و مناسبی ندارند. CSS ابزار مناسبی است تا یک لباس زیبا بر تن عناصر HTML بپوشاند و صفحه را به زیبایی بی آراید.
آیا متوجه شدید اگر CSS وجود نداشت دنیای وب چه چهره زشت و ناخوشایندی به خود می گرفت؟ در گذشته برای ساخت صفحات وب سایت همه چیز در کدهای HTML خلاصه می شد. طراحان سایت برای ساخت یک صفحه وب و اعمال ویژگی های ظاهری مختلف مانند تغییر رنگ، اندازه و… عناصر صفحه، کافی بود با خاصیت های داخلی HTML دست و پنجه نرم کنند.
ساختار css:
همانطور که در تصویر زیر می بینید، ساختار یک خط از کد CSS شامل یک انتخاب گر (selector) است که به یک یا چند تگ از html اشاره می کند. در مقابل انتخاب گر یک بلاک قرار می گیرد که سبک خاصی را به عنصر انتخاب شده اعمال می کند.
بخش قبل از علامت : property نامیده می شود که نشان دهنده خاصیتی است که قصد دارید به آن مقداری اختصاص دهید. بخش بعد از علامت : که value نامیده می شود نشان دهنده مقدار آن خاصیت است. هر خط declaration با یک علامت سمی کالم (;) به پایان می رسد.
همانطور که می دانید در HTML یک بخش به نام head قرار دارد که می توانید در آن یک تگ <style> قرار داده و شروع به نوشتن css کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style>
h1 { :color: red :margin-right: 30px } </style> </head> |
با CSS چه کاری می توانید انجام دهید؟
- به راحتی می توانید قوانین سبک دهی مشابه را بر روی چندین عنصر اعمال کنید.
- می توانید نمایش چندین صفحه از یک وب سایت را با یک شیوه نامه کنترل کنید.
- می توانید یک صفحه را در دستگاه های مختلف به شیوه های متفاوت نمایش دهید.
- می توانید حالت های پویای عناصر مانند شناور بودن، تمرکز و … را سبک دهی کنید که با روش های دیگر امکان پذیر نیست.
- می توانید موقعیت یک عنصر را در صفحه وب تغییر دهید، بدون اینکه نشانه گذاری را تغییر دهید.
- می توانید نمایش عناصر HTML موجود را تغییر دهید.
- می توانید عناصر را در فضای ۲بعدی یا ۳بعدی تغییر شکل دهید؛ مانند تغییر اندازه، چرخش، کج کردن و ….
- می توانید انیمیشن و جلوه های حرکتی را بدون استفاده از جاوا اسکریپت ایجاد کنید.
- می توانید نسخه مناسب چاپ از صفحات وب خود بسازید.
مزایای استفاده از CSS:
- CSS زمان زیادی را صرفه جویی می کند
- نگهداری اسان
- سازگاری با دستگاه های مختلف
- بارگزاری سریع تر
خواص CSS به ترتیب و از بالا به پایین مورد بررسی و پردازش قرار می گیرند. این به این معنا است که انتخاب خواص نهایی به صورت اولویت دار اتفاق می افتد. اولویت انتخاب خواص نهایی به صورت زیر می باشد:
- استایل های inline
- فایل ها و تگ های CSS
- پیشفرض مرورگرها
و در نهایت اگر همه استایل ها دارای اولویت یکسان باشند، خواصی انتخاب میشوند که آخر از همه نوشته شده باشند.
ریسپانسیو کردن با css:
همانطور که می دانید در زمان های گذشته بیشتر افراد از طریق سیستم های کامپیوتری به وب گردی و مشاهده صفحات وب می پرداختند. اما امروزه با پیشرفت تکنولوژی، دسترسی به اینترنت با دستگاه هایی مثل گوشی ، تبلت، ساعت های هوشمند و … افزایش پیدا کرده است. این امر سبب شد که توسعه دهندگان به فکر سازگار کردن صفحات وبسایت ها با دستگاه های هوشمند بیفتند.
سازگار کردن صفحات وب سایت ها همان Responsive یا واکنشگرا کردن است. به عبارت دیگر یعنی بتوانید صفحات وب سایت را در رزولوشن های مختلفی مشاهده کنید، بدون اینکه صفحه مورد نظر با اختلالی رو به رو شود. پیاده سازی این قابلیت با فریم ورک هایی که برای css نوشته شده است، بسیار ساده و سریع شده است.
