فرادرسشیوه سازماندهی CSS – آموزش CSS (بخش سوم)
در بخش‌های قبلی این راهنما به طور اجمالی با زبان CSS آشنا شدیم و اینک ایده‌ای کلی در مورد آن و شیوه استفاده از آن داریم. اینک زمان آن رسیده است که آن را کمی عمیق‌تر بررسی کنیم و با شیوه سازماندهی CSS و ساختار خود زبان بیشتر آشنا شویم. ما در بخش‌های قبلی با اغلب مفاهیمی که در این مقاله قرار است بررسی شوند آشنا شده‌ایم، بنابراین در ادامه هر کجا احساس سردرگمی کردید، می‌توانید به این مقاله بازگردید و مروری دوباره داشته باشید. برای مطالعه بخش قبلی این سری مقالات آموزشی کافی است روی لینک زیر کلیک کنید:
پیش‌نیاز مطالعه این مقاله داشتن سواد عمومی رایانه، نصب برخی نرم‌افزارهای مورد نیاز، دانش مقدماتی از کار با فایل‌ها، آشنایی با مبانی HTML و داشتن ایده‌ای کلی از طرز کار CSS است. هدف از مطالعه این مقاله نیز آشنایی تفصیلی با ساختار نحوی بنیادی CSS است.
اِعمال CSS روی HTML
نخستین مبحثی که در این مقاله بررسی می‌کنیم، سه روش مختلف برای اعمال CSS روی یک سند است.
استایل‌شیت بیرونی
در بخش قبلی (+) دیدیم که چگونه می‌توان یک فایل استایل‌شیت بیرونی را به صفحه لینک کرد. این رایج‌ترین و مفیدترین روش الصاق CSS به یک سند است، چون می‌توانید یک CSS را به چند صفحه لینک کنید و می‌توانید همه آن‌ها را در همان استایل‌شیت منفرد استایل‌بندی کنید. در اغلب موارد، صفحه‌های مختلف یک سایت تا حدود زیادی شبیه هم به نظرمی رسند. از این رو می‌توانید از همان مجموعه قواعد برای ایجاد همان حس و ظاهر استفاده کنید.
منظور از یک استایل‌شیت بیرونی، حالتی است که CSS را در یک فایل مجزا با پسوند css. می‌نویسید و در سند HTML از طریق عنصر <link> به آن لینک می‌دهید:
فایل CSS می‌تواند به صورت زیر باشد:
خصوصیت href عنصر <link> باید به فایلی در filesystem اشاره کند. در مثال فوق فایل CSS در همان پوشه سند HTML قرار دارد، اما می‌توان آن را در جای دیگری نیز قرار داد و به مسیر مناسب آن اشاره کرد. به مثال زیر توجه کنید:
استایل‌شیت درونی
منظور از استایل‌شیت درونی حالتی است که یک فایل بیرونی CSS نداریم، بلکه به جای آن CSS را درون عنصر <style> و درون عنصر <head> در HTML قرار می‌دهیم. بدین ترتیب HTML به صورت زیر در می‌آید:
این حالت در برخی شرایط می‌تواند مفید باشد. برای نمونه در زمان کار با برخی سیستم‌های مدیریت محتوا، نمی‌توان فایل‌های CSS را مستقیماً ویرایش کرد، اما به اندازه استایل‌شیت بیرونی کارایی ندارد. در یک وب‌سایت، CSS باید در همه صفحه‌ها تکرار شود و در این صورت در زمان ایجاد تغییرات باید چندین فایل به‌روزرسانی شوند.
استایل‌های درون‌خطی (Inline)
استایل‌های درون‌خطی اعلان‌های CSS هستند که تنها یک عنصر را متأثر می‌سازند و درون خصوصیت style تعریف می‌شوند:
به جز در موارد ضروری باید از این نوع استایل‌بندی احتراز کرد. نگهداری این نوع کد دشوار است، چون باید موارد یکسانی را در چند جای مختلف سند به‌روزرسانی کنید و با اطلاعات CSS ارائه‌ای در اطلاعات ساختاری HTML نیز تداخل پیدا می‌کند. بدین ترتیب خوانایی و درک کد دشوارتر می‌شود. جدا نگه‌داشتن انواع مختلف کد موجب می‌شود که کار همه کسانی که روی کد کار می‌کنند، آسان‌تر شود.
برخی موارد معدود وجود دارند که استفاده از استایل های درون‌خطی رایج است و شاید حتی این کار بهتر نیز باشد. برای نمونه در صورتی که محیط کاری شما واقعاً با محدودیت‌های شدیدی مواجه است، مثلاً CMS مورد استفاده تنها امکان ویرایش بدنه HTML را می‌دهد می‌توانید از آن‌ها استفاده کنید. همچنین در ایمیل‌های HTML می‌بینیم که استفاده گسترده‌ای از استایل های درون‌خطی می‌شود تا کلاینت‌های ایمیل مختلف بتوانند با ایمیل‌ها سازگار شوند.
کار با CSS در این مقاله
در این مقاله قصد داریم در حجم گسترده‌ای روی کدهای CSS کار کنیم. از این رو پیشنهاد می‌کنیم یک پوشه جدید روی رایانه خود ایجاد کنید و دو فایل زیر را داخل آن پوشه ایجاد کنید.
فایل index.html
فایل styles.css
در ادامه زمانی که لازم می‌شود روی یک کد CSS کار کنید، می‌توانید محتوای <body> را در HTML با کدهای HTML که می‌خواهید استایل‌بندی کنید عوض نمایید و شروع به افزودن CSS درون فایل CSS بکنید.
سلکتورها
بدون بررسی سلکتورها نمی‌توان از CSS صحبت کرد. ما در بخش قبلی این سری مقالات با برخی انواع مختلف سلکتورها آشنا شدیم. سلکتور روش هدف‌گیری موارد مختلف را در سند HTML جهت اعمال استایل‌بندی تعیین می‌کند. اگر استایل‌های مورد نظر اعمال نمی‌شوند، در این صورت احتمالاً سلکتور با آن چه مد نظر بوده است، مطابقت نیافته است.
هر قاعده CSS با یک سلکتور یا لیستی از سلکتورها آغاز می‌شود تا به مرورگر اعلام کند که قاعده CSS را باید روی کدام عنصر یا عناصر اعمال کند. همه موارد مطرح‌شده در مثال زیر نمونه‌هایی از سلکتورهای معتبر یا لیستی از سلکتورها هستند:
تمرین: تلاش کنید برخی قواعد CSS ایجاد کنید که از سلکتورهای فوق استفاده می‌کنند. همچنین مقداری کد HTML بنویسید که از این استایل‌ها روی آن‌ها استفاده کنید.
Specificity
مواردی وجود دارند که دو سلکتور می‌توانند عنصر HTML یکسانی را انتخاب کنند. استایل‌شیت زیر را در نظر بگیرید که یک قاعده با سلکتور p دارد و پاراگراف‌ها را به رنگ آبی درمی‌آورد و همچنین کلاسی وجود دارد که عناصر انتخابی را به رنگ قرمز درمی‌آورد.
فرض کنید که سند HTML ما یک پاراگراف با کلاس .special داشته باشد. در این صورت آیا هر دو قاعده اعمال می‌شوند یا یکی از آن‌ها اعمال می‌شود؟ فکر می‌کنید پاراگراف به چه رنگی درخواهد آمد؟
زبان CSS در مواردی که با تصادم مواجه می‌شویم، برخی قواعد برای کنترل وضعیت دارد که cascade و specificity نام دارند. در قطعه کد زیر دو قاعده برای سلکتور p تعریف شده‌اند، اما پاراگراف در نهایت به رنگ آبی در می‌آید. دلیل این مسئله آن است که اعلان تعیین رنگ آبی در استایل‌شیت بعدتر آماده است و استایل متأخرتر موجب بازنویسی استایل قبلی می‌شود. این همان مفهوم cascade در عمل است.
با این حال در مثال قبلی که سلکتور کلاس و سلکتور عنصر وجود داشتند، سلکتور کلاس غالب می‌شود و پاراگراف را به رنگ قرمز درمی‌آورد، هر چند در استایل‌شیت در موقعیت جلوتری آمده است. یک کلاس دارای «خصوصیت» بیشتری است و از این رو specificity بیشتری نسبت به سلکتور عنصر دارد و بدین ترتیب غالب می‌شود.
تمرین: آزمایش فوق را عملاً اجرا کنید. بدین ترتیب که مقداری کد HTML به سند خود اضافه کنید و سپس دو قاعده p{…} در استایل‌شیت بنویسید. سپس سلکتور p اول را به .special عوض کنید تا شیوه تغییر استایل‌بندی را در عمل مشاهده کنید.
این قاعده specificity و cascade در نگاه نخست ممکن است کمی پیچیده به نظر برسند، اما زمانی که دانش CSS خود را گسترش دادید، درک آن آسان‌تر خواهد بود. در مقالات آتی از این سری راهنمای آموزشی در این مورد بیشتر صحبت خواهیم کرد. در حال حاضر این را به خاطر بسپارید که این دو قاعده وجود دارند و این که برخی اوقات CSS ممکن است مطابق انتظار شما عمل نکند، زیرا چیز دیگری در استایل‌شیت دارای اولویت بالاتری بوده است. شناسایی آن چیز دیگر که روی یک عنصر اعمال شده است، نخستین گام در مرحله رفع اشکال چنین مشکلاتی محسوب می‌شود.
مشخصه‌ها و مقادیر
CSS در سطح پایه‌ای خود شامل دو بلوک سازنده به صورت «مشخصه‌ها» (Properties) و «مقادیر» (Values) است.
- مشخصه‌ها: شناسه‌های قابل خواندن از سوی انسان هستند که نشان می‌دهند کدام قابلیت‌های استایل‌بندی مانند font-size ،width و background-color قابل تغییر هستند.
- مقادیر: هر مشخصه مفروض، دارای یک مقدار است که نشان می‌دهد آن قابلیت استایل‌بندی چگونه باید تغییر یابد، یعنی می‌خواهید فونت به کدام نوع عوض شود، عرض به چه مقدار تغییر یابد یا رنگ پس‌زمینه با کدام رنگ جایگزین شود.
در تصویر زیر یک مشخصه و مقدار منفرد هایلایت شده است. نام مشخصه color و مقدار آن blue است.
یک مشخصه که به همراه مقدار جفت شده باشد، به نام «اعلان CSS» یا CSS declaration شناخته می‌شود. اعلان CSS درون «بلوک‌های اعلان CSS» یا CSS Declaration Blocks قرار می‌گیرد. در تصویر زیر CSS-ی مشاهده می‌کنید که در آن بلوک اعلان هایلایت شده است.
در نهایت بلوک‌های اعلان CSS با سلکتورها جفت می‌شوند تا «مجموعه قواعد CSS» که به CSS Rulesets معروف هستنند را ایجاد کنند. در تصویر زیر دو قاعده می‌بینید که یکی برای سلکتور h1 و دیگری برای سلکتور p است. قاعده برای h1 هایلایت شده است.
تنظیم مشخصه‌ها و مقادیر خاص CSS کارکرد اصلی زبان CSS است. موتور CSS محاسبه می‌کند که کدام اعلان باید روی هر عنصر منفرد یک صفحه اعمال شود تا بتواند آن را به طرز صحیحی طرح‌بندی و استایل‌بندی کند. آن چه که باید به خاطر داشت این است که هم مشخصه و هم مقدار در CSS حساس به حروف کوچک و بزرگ هستند. در هر جفت، مشخصه و مقدار با یک علامت دونقطه (:) از هم جدا می‌شوند.
تمرین: مقادیر مختلف مشخصه‌های زیر را بررسی کنید و قواعد CSS-ی بنویسید که روی عناصر متفاوت HTML اعمال می‌شوند:
- font-size
- width
- background-color
- color
- border
نکته مهم: اگر یک مشخصه نامعلوم باشد یا اگر یک مشخصه مفروض مقدار نامعتبر داشته باشد، اعلان نامعتبر تلقی می‌شود و از سوی موتور CSS مرورگر کاملاً نادیده گرفته خواهد شد.
نکته مهم: در CSS (و دیگر استانداردهای وب) از تلفظ آمریکایی به عنوان استاندارد استفاده شده است تا عدم قطعیت‌های زبانی رخ ندهند. برای نمونه color همواره باید به صورت color و نه به صورت colour نوشته شود.
تابع‌ها
با این که اغلب مقادیر در CSS، کلیدواژه‌ها یا مقادیر نسبتاً ساده‌ای هستند، اما برخی مقادیر نیز وجود دارند که شکل تابع را به خود می‌گیرند. برای نمونه می‌توان به تابع calc() اشاره کرد. این تابع امکان اجرای محاسبات ریاضی ساده درون CSS را می‌دهد. به مثال زیر توجه کنید:
کدهای فوق به صورت زیر رندر می‌شوند:
یک تابع CSS شامل نام تابع و سپس براکت است که درون آن مقادیر مجاز برای آن تابع قرار می‌گیرد. در مورد مثال تابع calc() فوق، ما می‌خواهیم عرض کادر برابر با 90% عرض کادرِ حامل منهای 30 پیکسل باشد. این چیزی نیست که بتوان از قبل آن را محاسبه کرد و مقدار مربوطه را در CSS وارد نمود، چون ما نمی‌دانیم که 90% چه قدر خواهد بود. مثال دیگری از کاربرد مقادیر متغیر در <transform> است که برای مثال با تابع rotate() به کار می‌رود:
خروجی کد فوق به صورت زیر خواهد بود:
تمرین: تلاش کنید مقادیر مختلفی برای مشخصه‌های زیر وارد کنید و قواعد CSS-ی بنویسید که روی عناصر مختلف HTML اعمال می‌شوند:
- transform
- background-image به طور خاص مقادیر گرادیان
- color، به طور خاص مقادیر rgb/rgba/hsl/hsla
قواعد خاص (rules@)
تاکنون با قواعد خاص که به صورت rules@ نوشته می‌شوند، مواجهه‌ای نداشته‌ایم. این‌ها قواعد خاصی هستند که دستورالعمل‌هایی در مورد شیوه رفتار CSS تعیین می‌کنند. برخی قواعد خاص ساده هستند و صرفاً از نام و مقدار قاعده تشکیل یافته‌اند. برای نمونه برای ایمپورت استایل‌شیت‌های اضافی در استایل‌شیت CSS اصلی می‌توان از @import استفاده کرد:
یکی دیگر از قواعد خاص رایج که به طور مکرر با آن مواجه می‌شویم media@ است که امکان استفاده از کوئری‌های مدیا برای اعمال CSS را صرفاً در مواردی که شرط خاصی برقرار می‌شود، فراهم ساخته است. برای نمونه می‌توان CSS را روی برخی رزولوشن‌های خاص صفحه اعمال کرد و یا زمانی که عرض صفحه از مقدار معنی فراتر می‌رود از آن‌ها استفاده کرد.
در CSS زیر، یک استایل‌شیت داریم که یک رنگ پس‌زمینه صورتی برای عنصر <body> تعیین می‌کند، اما در ادامه از media@ برای ایجاد بخشی از استایل استفاده می‌کنیم که در مرورگرهایی با ویوپورت بزرگ‌تر از 30em اعمال می‌شود. اگر مرورگر عریض‌تر از 30em باشد در این صورت رنگ پس‌زمینه آبی خواهد شد.
در طی این سری مقالات با قواعد rules@ به طور مکرر مواجه خواهیم شد. تلاش کنید یک کوئری مدیا به CSS اضافه کنید که استایل ها را بر مبنای عرض ویوپورت تغییر می‌دهد. سپس عرض پنجره مرورگر را تغییر دهید تا نتیجه کار را ببینید.
تندنویسی (Shorthands)
برخی مشخصه‌ها مانند font ،background ،padding ،border و margin به نام مشخصه‌های تندنویسی یا Shorthands نامیده می‌شوند. دلیل این مسئله آن است که این مشخصه‌ها امکان داشتن چندین مقدار مشخصه را در یک خط منفرد فراهم می‌سازند و به این ترتیب موجب صرفه‌جویی در زمان و تمیزتر ماندن کد می‌شوند. به مثال زیر توجه کنید:
کد فوق همه کارهایی که خطوط زیر انجام می‌دهند را در همان یک خط اجرا می‌کند:
همچنین کد تندنویسی زیر:
همان کاری را انجام می‌دهد که خطوط متعدد زیر اجرا می‌کنند:
در این بخش قصد نداریم وارد جزییات این شیوه تندنویسی بشویم. در ادامه بخش‌های این سری مقالات آموزش CSS با مثال‌های متعددی از این تندنویسی‌ها مواجه خواهید شد.
تمرین: تلاش کنید اعلان‌های فوق را در CSS خود وارد کنید و شیوه تأثیر آن بر استایل‌بندی HTML را مورد بررسی قرار دهید. همچنین می‌توانید از مقادیر مختلفی استفاده کنید.
هشدار: با این که تندنویسی‌ها معمولاً موجب فراموش شدن وارد کردن برخی مقادیر می‌شوند، اما هر مقداری که یک مقدار اولیه برای آن تعیین نشده باشد را ریست می‌کنند. بدین ترتیب مطمئن خواهیم بود که یک مجموعه معقولی از مقادیر مورد استفاده قرار گرفته است. اما این وضعیت در صورتی که انتظار داشته باشید تندنویسی تنها مقادیر ارسال شده را تغییر دهد، موجب سردرگمی شما خواهد شد.
کامنت
در CSS نیز همانند HTML توصیه شده است که در کد کامنت‌هایی وارد کنیم تا به درک طرز کار کد پس از مراجعه بعدی در آینده کمک کند. همچنین این کار به افرادی که قرار است در ادامه روی کد کار کنند در درک بهتر آن کمک زیادی می‌کند.
کامنت ها در CSS با */ آغاز و با /* پایان می‌یابند. در بلوک کد زیر از کامنت‌ها برای نشانه‌گذاری آغاز بخش‌های متمایز کد استفاده شده است. این کار به حرکت سریع در کدبیس در زمان‌هایی که بزرگ می‌شود، کمک زیادی می‌کند و می‌توانید به دنبال کامنت‌ها در ادیتور کد بگردید.
کامنت‌ها برای غیر فعال کردن (commenting out) بخش‌های خاصی از کد به مقاصد مختلف مثلاً تست کردن کد نیز مفید هستند. برای نمونه اگر بخواهید بفهمید کدام بخش از کد موجب بروز خطا می‌شود می‌توانید از این روش استفاده کنید. در مثال بعدی برخی قواعد را برای سلکتور special. غیر فعال کرده‌ایم.
تمرین: تلاش کنید کامنت‌هایی به کد CSS خود اضافه کنید تا به استفاده کردن از آن‌ها عادت نمایید.
فضاهای خالی
منظور از فضاهای خالی در کد همان کاراکتر فاصله، tab و اینتر هستند. مرورگر در مورد CSS نیز همانند HTML اغلب فضاهای خالی درون کد را نادیده می‌گیرد و در واقع اغلب این موارد صرفاً برای کمک به خوانایی کد درج می‌شوند.
در مثال اول زیر می‌بینیم که هر اعلان (و آغاز/پایان قاعده) در یک خط مجزا قرار گرفته است. این روش برای نوشتن CSS مناسب است و موجب می‌شود که نگهداری و درک کد آسان‌تر شود:
این کد CSS را می‌توان با حذف اغلب فضاهای خالی بازنویسی کرد و کارکرد آن همانند مثال قبل خواهد بود، اما مطمئناً موافق هستید که خواندن آن تا حدود زیادی دشوارتر می‌شود:
شیوه کدنویسی مورد استفاده، یک انتخاب شخصی است، اما زمانی که شروع به کار تیمی بکنید، متوجه خواهید شد که هر تیمی سبک کدنویسی خاص خود را دارد که باید از آن پیروی کنید. فضاهای خالی مهمی که در CSS باید مواظب آن‌ها باشید، شامل فضاهای خالی بین مشخصه‌ها و مقادیرشان هستند. برای نمونه اعلان‌های زیر در CSS معتبر هستند:
اما اعلان‌های زیر معتبر نیستند:
0auto در CSS به عنوان یک مقدار معتبر برای مشخصه margin شناسایی نمی‌شود، چون 0 و auto دو مقدار متمایز هستند و مرورگر padding- را نیز به عنوان یک مشخصه معتبر نمی‌شناسد. بنابراین همواره باید اطمینان حاصل کنید که مقادیر متمایز دست‌کم با یک کاراکتر فاصله از هم جدا شده‌اند، اما نام‌های مشخصه و مقادیر مشخصه باید به صورت یک رشته پیوسته در کنار هم قرار گیرند.
تمرین: تلاش کنید با فضاهای خالی درون کد CSS کار کنید و ببینید که چه کارهایی باعث از کار افتادن کد می‌شوند.
سخن پایانی
در این مقاله به بررسی برخی از وجوه سازوکار درونی CSS پرداختیم. در بخش بعدی در مورد روش کار HTML و CSS در مرورگر و تبدیل شدن آن‌ها به یک صفحه وب صحبت خواهیم کرد.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش طراحی سایت با HTML و CSS
- مجموعه آموزش‌های برنامهنویسی
- آموزش طراحی وب با CSS
- ۱۰ نمونه کد ساده CSS که می‌توان در ۱۰ دقیقه آموخت
- آموزش CSS Flex — به زبان ساده
==
