CSS چیست و در طراحی سایت چه نقشی دارد ؟
برای طراحی سایت از زبان‌های نشانه گذاری و زبان‌های برنامه نویسی مختلفی در سمت سرور و در سمت مشتری استفاده می‌شود. یکی از مهم‌ترین زبان‌های نشانه‌گذاری که وظیفه‌ی شکل‌دهی و زیباسازی ظاهر گرافیکی سایت را بر عهده دارد، شیوه‌نامه یا Stylesheet یا CSS نام دارد.
CSS دقیقا چه کاری انجام می‌دهد ؟
برای اینکه بهتر با مفهوم و عملکرد CSS آشنا شوید، از یک مثال استفاده می‌کنیم.
در صنعت خودروسازی، برای تولید خودروها پلتفرم‌هایی وجود دارند که شامل قطعات اصلی موتوری و عملکردهای اصلی خودرو است. روی این پلتفرم‌ها، بدنه‌های مختلف و امکانات داخلی متفاوتی نصب می‌شود. به عبارت دیگر ممکن است ۵ خودرو از هسته‌ی اصلی مشترکی استفاده کنند ولی در ظاهر با یکدیگر متفاوت باشند.
به عنوان مثالی دیگر، انسان‌ها همگی دارای اندام‌های داخلی مشابه شامل استخوان‌بندی، سیستم گوارش، سیستم تنفس و ... هستند ولی از نظر ظاهری با یکدیگر فرق می‌کنند. هر یک رنگ پوست متفاوت و چهره متفاوتی دارند.
CSS در طراحی سایت مانند مثال‌های بالا نقش تغییر ظاهر را دارد.
با استفاده از CSS چه تغییراتی در سایت قابل انجام است ؟
با استفاده از CSS می‌توان اندازه فونت‌های سایت، رنگ آن‌ها، رنگ پس زمینه، شکل دکمه‌ها، نمایش یا عدم نمایش عناصر، حرکت‌های انیمیشن عناصر و بسیاری عملکردهای ظاهری دیگر را تغییر داد.
در نگارش‌های جدید CSS شامل CSS 3 و CSS 4 قابلیت‌های پیشرفته‌تر مثل انیمیشن‌ها، تغییر اندازه‌های سه بعدی، مدیریت قوی فونت‌ها، مدیریت قوی‌تر روی تصاویر پس‌زمینه و بسیاری ویژگی‌های قدرتمند دیگر اضافه شده است.
آیا تمامی ویژگی‌های CSS در مرورگرها قابل استفاده است ؟
تعریف قوانین CSS معادل پشتیبانی آن‌ها در مرورگرهای مختلف نیست و ممکن است برخی مرورگرها دیرتر یا زودتر این استانداردها را پیاده‌سازی نمایند.
به ویژه در مرورگرهای موبایل که با منابع ضعیف‌تری به فعالیت می‌پردازند، ممکن است برخی ویژگی‌های موجود در CSS به طور کامل یا با با عملکرد مورد انتظار قابل استفاده نباشند. جهت بررسی سازگاری مرورگرها با قوانین CSS می‌توان از سایت Can I Use استفاده نمود.
کدهای CSS چگونه نوشته می‌شوند ؟
دستورات CSS به طور کلی شامل دو بخش Selector یا انتخاب‌گرها و Ruleها یا قوانین می‌شوند. هر Selector یک یا گروهی از عناصر HTML را هدف‌گیری می‌کند و هر Rule یک ویژگی ظاهری عنصر را تغییر می‌دهد.
برای مثال قطعه کد زیر عناصر پاراگراف را انتخاب می‌کند و رنگ پس زمینه‌ی آن‌ها را به قرمز تغییر می‌دهد:
|
1 2 3 |
p { background-color: red; } |
انتخاب‌گرها می‌توانند نام عنصرها مثل p را شامل شوند، می‌توانند با استفاده از class عنصرها را هدف‌گیری کنند و همچنین با استفاده از id و سایر صفت‌ها( Attributeها ) می‌توان عنصرهای مورد نظر را انتخاب نمود.
در استانداردهای جدید CSS انتخاب‌گرها نیز پیشرفت‌های قابل توجهی داشته‌اند. مثلا می‌توان پاراگراف‌هایی که پس از یک checkbox تیک خورده قرار دارند را هدف قرار داد.
چگونه می‌توانم کدنویسی CSS را یاد بگیرم ؟
دستورات CSS در مقایسه با سایر زبان‌های نشانه‌گذاری و برنامه‌نویسی زیاد نیستند و یادگیری آن‌ها به زمان زیادی نیاز ندارد. ولی یادگیری CSS به دلیل اثرات جانبی که دستورات روی یکدیگر دارند و ناهماهنگی‌هایی که در مرورگرهای مختلف ایجاد می‌شوند، به تمرین زیادی نیاز دارد.
بنابراین تمرین، نقشی بسیار مهم در یادگیری CSS دارد. برای شروع یادگیری CSS می‌توانید از آموزش‌های آنلاین، فیلم‌های آموزشی، کتاب‌ها یا کلاس‌های مربوطه استفاده کنید.
ابزارهای Developer Tools در مرورگرهای مدرن فایرفاکس و گوگل کروم، یادگیری CSS را نسبت به گذشته بسیار آسان‌تر کرده‌اند. با کمک این ابزارها می‌توانید به صورت زنده، کدهای CSS را ویرایش کنید و اثر آن‌ها را مشاهده نمایید. همچنین خطایابی و رفع تداخل دستورات CSS با کمک Developer Tools مرورگرها بسیار آسان شده است.
مقادیر پیش‌فرض قوانین CSS
مرورگرها به صورت پیش‌فرض روی عناصر HTML شما قوانین CSS خاصی را اعمال می‌کنند. برای مثال تگ‌های h1 تا h6 دارای اندازه‌های فونت مختلفی هستند یا عنصرهای p قبل و بعد خود دارای فضایی خالی هستند. برخی از کدنویسان CSS با استفاده از قوانین CSS Reset این قوانین را به طور کامل حذف می‌کنند و برای هر عنصر مطابق سلیقه خود قوانین جدید تعریف می‌کنند.
مفاهیم بنیادین CSS
پیش از آنکه بخواهید آموزش قوانین CSS را آغاز کنید، لازم است تا برخی مفاهیم بنیادین این زبان آشنا شوید. این قوانین اثراتی روی کدهای نوشته شده شما بر جای می‌گذارند ولی این اثرات ممکن است همیشه به سادگی قابل تشخیص نباشد.
برای مثال اگر فونت body را تغییر دهید، اغلب عناصر زیرمجموعه از این تغییر پیروی می‌کنند ولی بعضی از عناصر از فونت پیش‌فرض خودشان استفاده می‌کنند.
مثال دیگر اینکه اگر از قوانین transform روی برخی عناصر استفاده کنید، عملکرد برخی دستورات دیگر روی این عناصر متفاوت خواهد شد.
برخی مفاهیم بنیادین CSS:
- واحدهای اندازه‌گیری
- مدل جعبه( Box Model )
- ارث‌بری
- اولویت‌ها
- عناصر و کلاس‌های شبه( Pseudo )
- مدل جدول‌ها
- مدل شناورها( Float )
- مدل Flex
- مدل Grid
ارتباط HTML و CSS و جاوااسکریپت
عناصر HTML به صورت مستقیم با CSS در ارتباط هستند و بدون CSS شکلی ناخوشایند و نازیبا خواهند داشت. با کمک جاوااسکریپت همان طور که می‌توان عناصر HTML را کاهش یا افزایش داد و هرگونه تغییرات دلخواه را بر روی آن‌ها اعمال نمود، امکان انجام تغییرات دلخواه روی ویژگی‌های CSS نیز وجود دارد.
برخی از دستورات CSS که با زمان و انیمیشن در ارتباط هستند نیز ارتباط نزدیک‌تری با جاوااسکریپت دارند و با کمک جاوااسکریپت می‌توان رویدادهای زمانی و عملکردی این گروه از قوانین CSS را مدیریت نمود. برای مثال هنگامی که یک انیمیشن CSS به پایان برسد، با استفاده از جاوااسکریپت می‌توان شروع یک انیمیشن دیگر CSS را نیز کنترل کرد.