مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)

CSS اختصاری برای عبارت «استایل‌شیت‌های آبشاری» (Cascading Style Sheets) است و امکان ایجاد صفحه‌های وب با ظاهر مناسب را به ما می‌دهد. در این مقاله به عنوان اولین مطلب از سری مقالات آموزش CSS قصد داریم به بیان مفاهیم مقدماتی CSS با یک مثال ساده بپردازیم و همچنین برخی از اصطلاحات مهم این حوزه را مورد بررسی قرار دهیم.

پیش‌نیاز مطالعه این مقاله داشتن سواد عمومی رایانه، داشتن نرم‌افزارهای پایه روی سیستم، دانش مقدماتی از طرز کار با فایل‌ها و همچنین آشنایی ابتدایی با HTML است.

ما پیش از این در یک سری مقالات دیگر در مجله فرادرس به بررسی زبان HTML پرداختیم که توصیه می‌کنیم این مقالات را نیز مطالعه کنید؛ مقالات یاد شده از طریق این مطلب آموزش HTML — مجموعه مقالات مجله فرادرس در دسترس هستند.

سندهای HTML روی مرورگرهای وب قابل مطالعه هستند. عناوین بزرگ‌تر از متن معمولی ظاهر می‌شوند. ابتدای پاراگراف‌ها از خط جدید آغاز می‌شود و بین پاراگراف‌ها فاصله وجود دارد. لینک‌ها رنگی هستند و زیرخط دارند تا از بقیه متن متمایز باشند. این آن چیزی است که در استایل‌های پیش‌فرض مرورگر می‌بینید و در واقع استایل‌های بسیار مقدماتی است که روی HTML اعمال می‌شود تا مطمئن شویم که متن حتی در صورت عدم وجود هرگونه استایل‌بندی از سوی صاحب صفحه وب، کاملاً خوانا خواهد بود.

با این حال وب در صورتی که وب‌سایت‌ها این گونه بودند جای بسیار خسته‌کننده‌ای محسوب می‌شد. با استفاده از CSS می‌توان کنترل کرد که همه عناصر HTML دقیقاً چگونه در مرورگر ظاهر می‌شوند. همچنین می‌توان هر نوع طراحی مورد نظر را روی markup اعمال کرد.

هدف از CSS چیست؟

همان طور که پیش‌تر اشاره کردیم، CSS زبانی برای تعیین شیوه عرضه اسناد به کاربران است و روش استایل‌بندی، طرح‌بندی و موارد دیگر را تعیین می‌کند.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

منظور از «سند» (document) یک فایل متنی است که با استفاده از زبان نشانه‌گذاری، ساختاربندی یافته است. HTML رایج‌ترین زبان نشانه‌گذاری است اما زبان‌های دیگری مانند SVG یا XML نیز وجود دارند.

منظور از عرضه یک سند به کاربر، تبدیل کردن آن به شکلی است که مخاطب بتواند از آن استفاده کند. مرورگرها از قبیل فایرفاکس، کروم یا اج طوری طراحی شده‌اند که اسناد را به صورت بصری، برای نمونه روی صفحه رایانه، پروژکتور یا پرینتر عرضه کنند.

نکته: مرورگر که گاهی اوقات «عامل کاربر» (user agent) نیز نامیده می‌شود، اساساً یک برنامه رایانه‌ای است که نماینده فردی در یک سیستم رایانه‌ای است. مرورگرها نوع اصلی «عامل کاربر» هستند که در زمان صحبت از CSS به ذهن می‌رسند، اما تنها نوع آن نیستند. انواع دیگری از این عوامل نیز مانند آن‌هایی که HTML و CSS را به اسناد PDF تبدیل می‌کنند تا پرینت شوند وجود دارند.

CSS می‌تواند برای استایل‌بندی کاملاً ابتدایی متن اسناد مورد استفاده قرار گیرد. برای نمونه می‌توان از آن برای تغییر دادن رنگ و اندازه عناوین و لینک‌ها استفاده کرد. از آن می‌توان برای ایجاد طرح‌بندی برای نمونه تبدیل یک ستون منفرد متنی به یک لی‌آوت با ناحیه محتوای اصلی و یک سایدبار برای اطلاعات مرتبط استفاده کرد. حتی می‌توان از آن برای جلوه‌هایی مانند انیمیشن نیز استفاده کرد.

ساختار CSS

CSS یک زبان مبتنی بر قاعده است. به این ترتیب قاعده‌ای برای تعیین گروه‌های استایل‌هایی که باید روی عناصر خاص یا گروهی از عناصر روی صفحه وب اعمال شوند، تعریف می‌شود. برای نمونه فرض کنید می‌خواهیم عنوان اصلی صفحه به رنگ قرمز بزرگی به نظر برسد.

کد زیر یک قاعده CSS کاملاً ساده را نمایش می‌دهد که استایل بندی مطرح شده فوق ر اجرا می‌کند:

1h1 {
2    color: red;
3    font-size: 5em;
4}

این قاعده یک سلکتور باز می‌کند. این سلکتور عنصر HTML را که قرار است استایل‌بندی شوند انتخاب می‌نماید. در این مورد ما می‌خواهیم عناوین سطح یک یعنی <h1> را استایل‌بندی کنیم.

سپس یک جفت آکولاد داریم. درون این آکولادها یک یا چند اعلان داریم که به شکل جفت‌های مشخصه و مقدار هستند. هر جفت یک مشخصه از عنصر (ها) را که انتخاب می‌کنیم نشان می‌دهد و سپس مقداری که دوست داریم به آن مشخصه بدهیم ذکر می‌شود.

پیش از دونقطه نام مشخصه و پس از آن، مقدار مشخصه می‌آید. مشخصه‌های CSS مقادیر متفاوتی می‌گیرند که بستگی به نوع مشخصه مورد استفاده دارد. در این مثال، مشخصه color را داریم که می‌تواند مقادیر رنگی مختلفی بگیرد. همچنین مشخصه font-size را داریم که می‌تواند واحدهای اندازه مختلفی را به عنوان مقدار بگیرد.

یک استایل‌شیت CSS شامل قواعد زیادی از این دست است که یکی پس از دیگری نوشته می‌شوند:

1h1 {
2    color: red;
3    font-size: 5em;
4}
5
6p {
7    color: black;
8}

برخی از آن‌ها در یک نگاه قابل تشخیص هستند، اما برخی دیگر نیازمند بررسی بیشتری هستند. در مورد انواعی که نیازمند بررسی بیشتر هستند با مراجعه به منابع مختلف اینترنتی می‌توانید اطلاعات خوبی در موردشان کسب کنید. برای نمونه مرجع CSS در وب‌سایت MDN (+) منبع خوبی برای این موضوع محسوب می‌شود.

ماژول‌های CSS

از آنجا که چیزهای زیادی وجود دارند که می‌توانید با استفاده از CSS استایل‌بندی کنید، این زبان به ماژول‌هایی تقسیم‌بندی شده است. با مراجعه به وب‌سایت MDN می‌بینید که صفحه‌های مستندات زیادی در مورد هر ماژول وجود دارند. برای نمونه می‌توانید به ماژول Backgrounds and Borders (+) وب‌سایت MDN سر بزنید تا با هدف این ماژول و مشخصه‌ها و قابلیت‌های مختلف آن آشنا شوید. همچنین لینک‌هایی به مشخصه‌های CSS که این فناوری را تعریف می‌کنند خواهید دید.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

در این مرحله، لازم نیست در مورد شیوه سازماندهی CSS نگرانی زیادی داشته باشید، اما در صورتی که در مورد آن اطلاعاتی داشته باشید کارتان راحت‌تر می‌شود. برای نمونه اگر بدانید که یک مشخصه خاص می‌تواند در میان موارد مشابه در فلان ماژول پیدا شود و از این رو مشخصات مشابهی دارد هنگام کار با قواعد مختلف کارتان آسان‌تر خواهد بود.

برای بررسی یک مثال خاص به ماژول Backgrounds and Borders بازمی‌گردیم. ممکن است فکر کنید که معقول است مشخصه‌های background-color و border-color در این ماژول باشند و البته حق با شما است.

مشخصه‌های CSS

همه فناوری‌های استاندارد وب (HTML، CSS، جاوا اسکریپت و غیره) در اسناد بزرگی که specification یا به اختصار specs نامیده می‌شوند تعریف شده‌اند و از سوی سازمان‌های مسئول آن استاندارد مانند W3C ،WHATWG ،ECMA یا Khronos انتشار یافته‌اند. بدین ترتیب شیوه رفتار این فناوری‌ها به دقت تعریف شده‌اند.

CSS نیز تفاوتی با موارد فوق ندارد. این فناوری از سوی گروهی درون W3C به نام «گروه کاری سی‌اس‌اس» (CSS Working Group) توسعه یافته است. این گروه متشکل از نمایندگانی از ارائه‌دهندگان مرورگرها و دیگر شرکت‌هایی است که به CSS علاقه‌مند هستند. افراد دیگری نیز در این گره عضو هستند که به نام «کارشناسان مدعو» (invited experts) نامیده می‌شوند و شامل دیدگاه‌های مستقلی هستند که به هیچ سازمان و نهادی وابسته نیستند.

قابلیت‌های جدید CSS از سوی گروه کاری CSS توسعه یافته و توصیف می‌شوند. برخی اوقات از آنجا که یک مرورگر خاص می‌خواهد برخی ظرفیت‌های خاص داشته باشد و برخی موارد دیگر چون طراحان وب و توسعه‌دهندگان وجود یک قابلیت را درخواست کرده‌اند و برخی اوقات نیز چون خود گروه کاری یک نیازمندی را تشخیص داده است. با این حال نکته کلیدی در مورد CSS این است که همه تلاش افراد این است که تغییرات CSS به گونه‌ای باشد که موجب بروز مشکل در وب‌سایت‌های قدیمی نشود. وب‌سایتی که در سال 2000 ساخته شده و از CSS محدود آن زمان استفاده کرده است همچنان باید امروز در یک مرورگر قابل استفاده باشد.

شما به عنوان یک فرد مبتدی در زمینه CSS ممکن است متوجه شوید که مستندات CSS پیچیده هستند. دلیل این مسئله آن است که این مستندات برای مهندسان نوشته شده‌اند تا پشتیبانی از قابلیت‌ها را در عامل‌های کاربری خود پیاده‌سازی کنند و هدف از نوشتن آن‌ها این نبوده است که توسعه‌دهندگان بخوانند و CSS را بفهمند. بسیاری از توسعه‌دهندگان باتجربه ترجیح می‌دهند که مستندات MDN یا دیگر راهنماها را بخوانند. با این حال این مستندات رسمی نیز حائز اهمیت هستند و به درک رابطه بین CSS که استفاده می‌کنید، پشتیبانی مرورگر و دیگر استانداردها کمک می‌کند.

پشتیبانی مرورگر

هنگامی که CSS استانداردی را مطرح می‌کند، تنها زمانی برای ما در فرایند توسعه صفحه‌های وب مفید خواهد بود که یک یا چند مرورگر آن را پیاده‌سازی کرده باشند. این بدان معنی است که کد نوشته شده باید دستورالعمل ما در فایل CSS را به چیزی که روی صفحه نمایش پیدا می‌کند تبدیل نماید.

در بخش‌های بعدی این سری مقالات این موضوع را بیشتر مورد بررسی قرار می‌دهیم. به طور معمول همه مرورگرها یک قابلیت را به طور همزمان پیاده‌سازی نمی‌کنند و از این رو یک شکاف بین این که چه زمانی می‌توانید یک قابلیت CSS را در برخی مرورگرها اجرا کنید و در برخی دیگر نمی‌توانید وجود دارد. به همین جهت بهتر است همواره امکان پیاده‌سازی قابلیت‌ها را بررسی کنیم. در وب‌سایت MDN در هر صفحه مربوطه به مشخصه‌ها می‌توانید وضعیت آن مشخصه را روی مرورگرهای مختلف بینید و از این رو می‌توانید در مورد استفاده از آن در وب‌سایت خود تصمیم‌گیری کنید. برای نمونه نمودار داده‌های سازگاری قابلیت‌های CSS را روی مرورگرهای مختلف در این آدرس (+) ملاحظه کنید.

سخن پایانی

در این مقاله به عنوان اولین مقاله از سری مطالب آموزش جامع CSS با برخی مفاهیم مقدماتی CSS آشنا شدیم. در بخش بعدی آغاز کار عملی با CSS را خواهیم آموخت.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی روی لینک زیر کلیک کنید:

• آغاز کار با CSS — آموزش CSS (بخش دوم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

•  مجموعه آموزش‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های ابزارهای مدیریت وبسایت
• آموزش طراحی وب با CSS
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
• ۱۰ نمونه کد ساده CSS که می‌توان در ۱۰ دقیقه آموخت

==