کلمه CSS مخفف «Cascading Style Sheets» است و به نام زبان برنامه‌نویسی اشاره می‌کند که برای توصیف نحوه نمایش و طراحی صفحات وب استفاده می‌شود. اگر بخواهیم به طور خلاصه بگوییم هدف از ساختن CSS چیست، باید یادآور شویم که زبان HTML برای پشتیبانی از تگ‌های مربوط به طراحی ظاهری صفحات ساخته نشده است. با استفاده از HTML فقط می‌شود عبارت‌های نشانه‌گذاری شده‌ای را در صفحات اینترنتی نوشت. تگ‌هایی مانند <font>  در HTML نسخه ۳٫۲ معرفی شدند. وجود همین‌ تگ‌ باعث ایجاد مشکلات بسیار زیادی برای توسعه‌دهندگان صفحات اینترنتی شد. از آن‌جا که صفحات اینترنتی از فونت‌های مختلف، تصاویر پس‌زمینه رنگی و چندین قالب‌ متفاوت استفاده می‌کردند، فرایند بازنویسی کدهای آن‌ صفحات بسیار طولانی، پُر زحمت و هزینه‌بر بود.

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

CSS چیست؟

«شیوه‌نامه آبشاری» (Cascading Style Sheets | CSS) برای طرح و رنگ دادن به عناصر نوشته شده در زبان‌های نشانه‌گذاری مانند HTML به کار برده می‌شود. زبان CSS محتوای سایت را از نمایش‌ گرافیکی آن جدا می‌کند. HTML و CSS رابطه بسیار نزدیکی با یکدیگر دارند. زیرا HTML مانند زیربنای سایت عمل می‌کند و CSS وظیفه راه‌اندازی تمام ویژگی‌های زیبایی ظاهر سایت‌های اینترنتی را برعهده دارد.

به عبارت دیگر می‌توان چنین گفت که CSS زبان مربوط به طراحی ظاهری است که برای توصیف نما و قالب‌بندی اسناد HTML به کار برده می‌شود. از آن جهت که CSS به توسعه‌دهندگان برای مدیریت «ویژگی‌های نویسه‌نگاری» (Typographic Characteristics)، مشخصات رنگ و چیدمان عناصر در صفحه سایت کمک می‌کند، ابزاری بسیار ضروری در طراحی وب سایت‌های اینترنتی است.

CSS از زمان تولد در سال ۱۹۹۶ با هدف برآورده کردن احتیاجات رو به تغییر اینترنت به صورت دائم ارتقا داده شده است. با این کار، CSS به ثابت بودن ظاهر وب‌سایت بر روی مرورگر‌ها و وسایل مختلف کمک کرده است. با اینکه بعضی از ویژگی‌های CSS شاید زیادی پیچیده باشند، اما هدف اصلی آن جدا کردن محتوی وب‌سایت از کدهای مربوط به شکل و ظاهر آن است. در نتیجه استفاده از سایت‌ها ساده‌تر شده و از نظر بصری هم جذاب‌تر شده‌‌اند.

کاربرد CSS چیست؟

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

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

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

توصیه فرادرس برای آموزش CSS چیست؟

بعد از اینکه متوجه شدیم CSS چیست، نوبت به آشنا شدن باید با اهمیت یادگیری CSS می‌رسد. به طور کلی هر صفحه وب دارای دو بخش Client Side و Server Side است. بخش Client Side را می‌‌توان به سه‌ بخش اساسی تفکیک کرد. اول ساختار صفحه است که توسط HTML ساخته می‌شود. دوم شکل، شمایل و رنگ و لعاب صفحه است که باید در CSS تعیین شود و سوم منطق برنامه در سمت کلاینت است که با زبان‌های برنامه نویسی مانند JavaScript نوشته می‌شود.

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

تفاوت بین HTML و CSS چیست؟

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

«زبان نشانه‌‌گذاری ابَرمتن» (Hypertext Markup Language | HTML) برای تعریف محتوی صفحه وب به‌ کار برده می‌شود. این محتوی شامل متن‌، لینک، تصویر، ویدئو و غیره است. فایل‌های HTML همه چیز‌های موجود در صفحه را فهرست می‌کنند. اما این زبان، روش نمایش این چیزها را در مرورگر مشخص نمی‌کند.

همین‌طور که تا به این جا متوجه شدیم، CSS، وظیفه مدیریت ظاهر عناصر موجود در سایت را بر عهده دارد. CSS با هدف نمایش محتوی HTML مطابق با هدف طراحان سایت، به کار برده می‌شود.

حتما متوجه شده‌اید که کدهای دو زبان HTML و CSS با اینکه نزدیکی بسیار زیادی به یکدیگر دارند، اما به صورت جدا از هم نگهداشته می‌شوند. دلیل آن ماجرا این است که جداسازی قوانین مربوط به ظاهر سایت از محتوای آن، ساختن وب‌سایت‌ها را ساده‌تر می‌کند.

وقتی که زبان HTML در سال ۱۹۹۰ میلادی ساخته شد، تمام هدفش نمایش اطلاعات بر روی صفحه وب بود. در آن زمان، توجه چندانی به ظاهر سایت نمی‌شد. بعدها توسعه‌دهندگان شروع کردن به افزودن ویژگی‌های گرافیکی ساده‌ای مانند فونت‌های مختلف و رنگ‌ها. اما با مرور زمان و بزرگ‌تر شدن سایت‌ها دیگر امکان مدیریت تمام عناصر موجود در صفحه به صورت مجزا وجود نداشت. بنابراین CSS برای دادن شکل و ظاهر زیبا به فایل‌های HTML به وجود آمد.

درک عملکرد CSS

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

در این بخش از مطلب می‌خواهیم بدانیم که روش کار CSS چیست. برای رسیدن به این هدف، باید با دو مولفه اساسی تشکیل دهنده CSS آشنا شویم. این دو مولفه سینتکس و «گزینش‌گرها» (Selectors) هستند.

CSS چگونه کار می کند؟

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

سینتکس CSS چیست؟

اگر قبلا با HTML آشنا شده‌‌اید حتما متوجه تفاوت بین سینتکس HTML و CSS می‌شوید. ساختمان اصلی CSS بر اساس سینتکس آن بنیان‌گذاری شده است. این سینتکس با ترکیب دو بخش اصلی ساخته می‌شود.

1. گزینش‌گرها یا همان سلکتورها
2. «اعلان‌های» (Declarations) مربوط به تعریف ظاهر در هر گزینش‌گر

هر اعلانی خود به دو بخش جداگانه دیگر تقسیم می‌شود. بخش اول، مربوط به «ویژگی» (Property) مدل ظاهری است که باید اعمال شود و بخش دوم «مقدار» (Value) یا شدتی است که مدل مورد نظر باید طبق آن طراحی شود.

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

در فهرست زیر بخش‌های مختلف تشکیل دهنده سینتکس کلی همه دستورهای CSS را دسته‌بندی کرده‌ایم.

• «گزینش‌گر» (Selector): اهدافی از عناصر موجود در HTML که باید به آن‌ها ظاهر خاصی اختصاص داده شود.
• «ویژگی» (Property): این صفت، جنبه‌ای از عنصر مورد نظر را مشخص می‌کند که باید تغییر کند.
• «مقدار» (Value): مقدار تغییرات ظاهری را نشان می‌دهد که آن ویژگی خاص از گزینش‌گر مورد نظر باید تغییر کند.

در تصویر زیر بخش‌های مختلف دستورات CSS را می‌توانید مشاهده کنید.

در ادامه، تمام بخش‌های معرفی شده سینتکس بالا را به ترتیب توضیح داده‌‌ایم.

سلکتور در CSS چیست؟

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

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

در جدول زیر، چند نمونه گزینش‌گر یا سلکتور مختلف را معرفی کرده‌ایم.

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

فرض کنیم که کد زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

همین‌طور که در جدول بالا نشان دادیم، می‌توانیم عنصری را با استفاده از کلاس یا شماره شناسایی ID نیز هدف قرار دهیم. برای نوشتن سلکتور Class ابتدا نقطه‌ای نوشته شده و بعد از آن نام کلاس قرار می‌گیرد. اما شماره ID را با علامت «#» شروع می‌کنیم. بعد از این علامت باید نام مربوط به ID قرار بگیرد. برای این موارد هم در کدهای زیر مثال زده‌ایم.

فرض کنیم که کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

فرض کنیم که کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم. به فضای خالی بین عنصرهای div  و p  توجه کنید.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

فرض کنیم که کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

اعلان در CSS چیست؟

بعد از سلکتورها نوبت به بلوک اعلان‌ها یا همان Declaration-ها می‌شود. یعنی یک جفت آکولاد باز و بسته که شامل یک یا چند اعلان CSS هستند. اعلان‌های CSS به مرورگرها می‌گویند که عناصر انتخاب شده را چگونه نمایش دهد. هر اعلان شامل ویژگی و مقدار است.

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

چند مفهوم مهم در CSS

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

از جمله مفاهیم مهم CSS می‌توان به موارد فهرست پایین اشاره کرد.

• ویژگی‌ها
• رنگ‌ها
• طراحی حروف
• کامنت‌نویسی

در ادامه مطلب به بررسی ویژگی‌ها و مقادیر در CSS پرداخته‌ایم.

ویژگی در CSS چیست؟

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

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

تعریف رنگ در CSS

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

طراحی حروف با CSS

CSS تعداد بی‌شمار زیادی ویژگی برای پراختن به ظاهر متن و مدیریت کاراکترهای نویسه‌ای فراهم کرده است. از آن قبیل می‌توان به مشخصات فونت‌ها مانند Font-Family، اندازه فونت و وزن فونت در کنار مشخصات متن مانند Text-Align و Text-Decoration و Text-Transform و Line-Height اشاره کرد.

در جدول زیر، انواع ویژگی‌های مربوط به مدیریت ظاهر متن و کاراکترهای نویسه‌ای یا CSS Typography را معرفی کرده و یک به یک توضیح داده‌ایم.

مثال هایی درباره طراحی حروف با CSS

در مثال اول روش استفاده از مقدارهای مربوط به طراحی حروف و رنگ پس‌زمینه متن را نمایش داده‌ایم.

برای این مثال، کدهای زیر را در فایل HTML نوشتیم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

در مثال دوم از Padding هم استفاده کرده‌ و متن نوشته شده را نیز کمی جابه‌جا کرده‌ایم. ابتدا کد زیر را در فایل HTML نوشتیم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

کامنت در CSS

در CSS هم مانند HTML می‌توانیم کامنت‌ بنویسیم. کامنت‌ها توسط مرورگرها نادیده گرفته شده و با هدف تعریف هدف کد و کاری که می‌کند، توسط توسعه‌دهنده برای خودش یا دیگران نوشته می‌شود.

برای کامنت نویسی در CSS همیشه ابتدای کامنت را با کاراکترهای /* شروع کرده و انتهای کامنت را با کاراکترهای */ به پایان می‌رسانیم. برای مثال در کد زیر کامنتی را نمایش داده‌ایم.

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

برای مثال، کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

در صورتی که در کدهای CSS بالا، بخش پایین را کامنت کرده و بخش بالا را از حالت کامنت خارج کنیم، ظاهر متن نمایش داده شده در صفحه، تغییر خواهد کرد.

چگونه کدهای CSS را به HTML اضافه کنیم؟

CSS را می‌توان به سه روش مختلف به سند HTML اضافه کرد. در فهرست این سه روش را معرفی کرده‌ایم.

1. External CSS: اولین روش، به شکل فایل جداگانه‌ای – با پسند .css  - است که به سند HTML مورد نظر متصل می‌شود. این روش، به خصوص برای استفاده در سایت‌های بزرگ، کارآمدترین روش است. در این روش دستورات مربوط به استایل‌دهی به سایت در فایل‌های مجزایی از HTML نگهداری می‌شوند. با این کار کدها تمیزتر بوده و فرایند مدیریت آن‌ها نیز ساده‌تر است.
2. Internal CSS: روش دوم، اضافه کردن از داخل عنصر <style>  و در بخش <head>  فایل‌های HTML است. این روش اعمال قوائد مربوط به شکل و شمایل، فقط برای استفاده در یک صفحه یا صفحات مختلف به صورت مجزا از هم مفید است.
3. Inline CSS: و سومین روش‌ هم اضافه کردن کدهای CSS به شکل مستقیم درون تگ HTML است. با اینکه این روش پیاده‌سازی سریعی دارد اما برای اعمال دستورات مربوط به ظاهر در چند عنصر مختلف، معمولا توصیه نمی‌شود.

بعد از اینکه به صورت کلی متوجه شدیم روش ترکیب کدهای HTML و CSS چیست، به ترتیب، در ادامه تمام این روش‌ها را همراه با مثال‌های مرتبط توضیح داده‌ایم.

روش External CSS چیست؟

روش External CSS به این شکل است که دستورات در فایل‌ مخصوص به خود نوشته می‌شوند. این فایل هم با استفاده از تگ <link>  به فایل HTML مشخص شده‌ای متصل می‌شود. این روش رایج‌ترین راه برای افزودن دستورات CSS به فایل‌های HTML است. از آن‌جا که فقط یک شیوه‌نامه‌ خارجی می‌تواند استایل چند فایل HTML مختلف را تعریف کند، این روش به توسعه‌دهندگان برای اعمال تغییرات ظاهری در تمام سایت فقط با استفاده از یک فایل CSS کمک می‌کند.

در این روش، برای ساخت فایل CSS، ابتدا باید کدهای CSS خود را با کمک کد ادیتور یا هر ویرایشگر متنی بنویسیم. سپس فایل را با پسوند .css  ذخیره می‌کنیم. برای متصل کردن فایل CSS نوشته شده به هر فایل HTML، ابتدا فایل‌های HTML و CSS را در پوشه یکسانی قرار می‌دهیم. بعد از آن کد زیر را در بخش <head>  فایل HTML نوشته و آن فایل را ذخیره می‌کنیم.

در کد بالا style.css  نام فایل CSS نوشته شده است. فایل CSS با نام style.css  را می‌توان به هر چند عدد فایل HTML متصل کرد. دستورات درون فایل style.css بر روی کدهای همه فایل‌های HTML متصل به آن، اجرا می‌شوند.

فرض کنیم که کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر نشان داده می‌شود.

روش Internal CSS چیست؟

در روش Internal CSS، کدهای CSS درون سند HTML قرار می‌گیرند. در این روش باید کدها را درون عنصر <style>  نوشت. عنصر <style>  را هم در بخش<head>  در فایل HTML قرار می‌دهیم.

برای مثال، کدهای زیر را در فایل HTML نوشته‌ایم.

دیگر نیازی به داشتن فایل CSS جداگانه نیست. بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

روش Inline CSS چیست؟

از روش Inline CSS در تگ‌های مشخص HTML و با هدف تغییر دادن ظاهر عنصر خاصی استفاده می‌شود. سینتکس مربوط به نوشتن کدهای CSS در این روش کمی با روش‌های قبلی متفاوت است. در این روش، از اعلان‌ها به عنوان مقدار برای ویژگی style  استفاده می‌شود.

برای نمونه، کدهای زیر را در فایل HTML نوشته‌ایم.

بعد از اجرای کد بالا، خروجی فایل به شکل زیر می‌شود.

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

روش تعیین چیدمان عناصر در CSS چیست؟

ویژگی‌های مربوط به CSS Layout، روش قرارگیری و نمایش عناصر را در صفحات وب مدیریت می‌کنند. این ویژگی‌ها شامل «نمایش» (Display)، «موقعیت» (Position) و وضعیت «شناوری» (Float) هستند.

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

ویژگی نمایش

«ویژگی نمایش» (Display Property) روش رفتار عنصر را در چیدمان سند مورد نظر نشان می‌دهد. این ویژگی می‌تواند چندین مقدار مختلف داشته باشد. برای مثال می‌توان به Block و Inline و None اشاره کرد.

در فهرست زیر مقدارهای مختلف و قابل پذیرش توسط «ویژگی‌ نمایش» را به شکل کامل توضیح داده‌ایم.

• Block: این عنصر، «جعبه بلوک عنصر» (Block Element Box) را تولید می‌کند که باعث می‌‌شود قبل و بعد از عنصر مورد نظر کاراکتر Line Break یا رفتن به خط بعدی، قرار بگیرد. به عنوان مثال‌هایی از این عنصر می‌توان به بلوک‌های <div> و <p>  و <h1>  تا <h6>  و <ol>  و <ul>  و <li>  و <menu>  و <table>  اشاره کرد.
• Inline: این عنصر، «جعبه عنصر درون‌خطی» (Inline Element Box) تولید می‌کند. این بلوک‌ها قبل و بعد از خودشان کاراکتر Line Break یا رفتن به خط بعدی، قرار نمی‌دهند. در روال عادی کار، به شرطی که در انتهای خط به اندازه کافی فضا باشد، عنصر بعدی در همان خط عنصر فعلی قرار می‌گیرد. به عنوان مثال‌هایی از این عنصر می‌توان به بلوک‌های <span>  و <a>  و <img>  اشاره کرد.
• Inline-Block: این عنصر، «جعبه بلوک عنصر» ایجاد می‌کند اما مانند «بلوک عنصر درون‌خطی» تنها کار می‌کند.
• Flex: این عنصر مانند «جعبه بلوک عنصر» رفتار می‌کند و محتوای خود را با استفاده از مدل Flexbox مرتب می‌کند.
• Grid: این عنصر مانند عنصر بلوک رفتار کرده و محتوای خود را منطبق بر مدل شبکه‌ای مرتب می‌کند.
• None: این عنصر اصلا نمایش داده نمی‌‌شود. یعنی هیچ مولفه قابل نمایشی ندارد.

ویژگی موقعیت

«ویژگی موقعیت» (Position Property) روش تعیین موقعیت عناصر در CSS را مشخص می‌کند. به صورت پیش‌فرض، «ویژگی موقعیت» در حالت ایستا قرار دارد. اما می‌‌‌تواند در حالت‌های دیگری هم در صفحه قرار بگیرد.

در فهرست زیر، ویژگی‌های موقعیت مختلف را معرفی کرده‌‌ایم.

• Static: این ویژگی، حالت پیش‌فرض برای تعیین موقعیت تمام عناصر است. یعنی هر عنصر با توجه به جریان عادی کار، در کجای سند قرار می‌گیرد.
• Relative: این ویژگی، نسبت به موقعیت عادی هر عنصر در صفحه، موقعیت آن را تعیین می‌کند. با استفاده از مشخصات بالا، پایین، چپ و راست نیز می‌توانیم موقعیت عناصر را تغییر دهیم. اما به هر حال، موقعیت اصلی عنصر در سند به صورت رزور شده باقی می‌ماند.
• Absolute: موقعیت Position Absolute به معنای این است که عنصر مورد نظر بر اساس موقعیت فعلی نزدیک‌ترین والد خود در صفحه قرار می‌گیرد. بنابراین از قوانین مربوط به چیدمان معمول عناصر مانند خود در صفحه پیروی نمی‌کند. در ضمن با استفاده از ویژگی‌های بالا، پایین، چپ و راست نیز می‌توانیم موقعیت آن را تغییر دهیم.
• Fixed: در این حالت، عنصر مورد نظر بر اساس پنجره مرورگر جای خود را پیدا می‌کند. این عنصر از ترتیب معمولی باقی عناصر در صفحه، پیروی نمی‌کند. در موقعیت خاصی از صفحه قرار گرفته و حتی با اسکرول کردن صفحه وب نیز مکان آن تغییر نمی‌کند.

ویژگی شناور

«ویژگی شناور» (Float Property) برای قرار دادن متن در اطراف تصویر یا ساخت منو‌های افقی به کار برده می‌شود. وقتی که عنصری از ویژگی‌ شناور برای تعیین موقعیت خود استفاده کند، موقعیت آن عنصر از حالت ترتیب عادی خارج شده و به جهت‌های چپ و راست حرکت می‌کند.

این موقعیت هم دارای چهار حالت کلی است که در فهرست زیر معرفی کرده‌ایم.

• None: در این حالت، عنصر شناور نبوده و در مکان عادی خود در صفحه وب‌سایت ظاهر می‌شود. این حالت، حالت پیش‌فرض در «ویژگی شناور» (Float Property) است.
• Left: در این حالت، عنصر مورد نظر به سمت چپ ظرف خود انتقال داده می‌شود. متن و باقی عناصر اینلاین هم دور بر آن را می‌پوشانند.
• Right: در این حالت، عنصر مورد نظر به سمت راست ظرف خود انتقال داده می‌شود. متن و باقی عناصر اینلاین هم دور بر آن را می‌پوشانند.
• Inherit: در این حالت، عنصر مورد نظر، مقدار ویژگی شناور والدین خود را به ارث می‌برد.

Cascade، ارجحیت و وراثت در CSS

تا به اینجای مطلب، مفاهیمی که بررسی کرده‌ایم نسبتا ساده بودند. CSS فهرستی از دستورات مربوط به ظاهر صفحه وب است که بر روی محتوای HTML اعمال می‌شوند. هر دستور مرتبط با یک یا چند عنصر در صفحه است. همچنین متوجه شدیم که دستورات CSS را می‌توان به سه روش External و Internal یا Inline اعمال کنیم.

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

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

• Cascade
• ارجحیت
• وراثت

در ادامه این بخش از مطلب، عبارت‌های بالا را به ترتیب و همراه با مثال، توضیح داده‌ایم.

Cascade در CSS چیست؟

برای درک بهتر مثال زده شده به کدهای پایین توجه کنید. در این کدها به نظر می‌رسد که دو دستور مختلف، ویژگی background-color  مربوط به عنصر p  را هدف قرار داده‌اند. این مسئله باعث تداخل می‌شود. زیرا هیچ عنصری نمی‌تواند دو رنگ پس‌زمینه مختلف داشته باشد. بعد از اجرای کدهای زیر می‌بینیم که کدام رنگ به پس‌زمینه متن داده شده اضافه می‌شود.

فرض کنیم که کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

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

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

مفهوم Cascade دستورات را به ترتیب و با اولویت اول Inline CSS، سپس Internal CSS و در آخر External CSS اجرا می‌کند. اگر هیچ کد CSS وجود نداشته باشد که بر روی محتوای HTML اعمال شود، در نهایت هم کدهای مربوط به استایل خود مرورگر – که به صورت پیش‌فرض تعبیه شده‌اند – اعمال خواهند شد.

مفهوم Cascade در CSS بسیار مهم است. حتی در نام CSS هم حرف C از همین عبارت Cascade گرفته شده است. قبل از شروع به کدنویسی یا دستکاری کدهای نوشته شده در CSS، حتما باید این مفهوم را به طور کامل درک کرده باشید.

ارجحیت در CSS چیست؟

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

برای مثال، کد زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

مشکل این مثال مربوط به تفاوت نوع سلکتورهای CSS است. با اینکه نوع این سلکتور‌ها فرق می‌کند اما عنصر یکسانی را تعریف می‌کنند. در چنین مواردی، CSS بعضی از سلکتورها را با عنوان «خاص‌تر» از دیگران مشخص می‌کند. به این رفتار در CSS، ارجحیت گفته می‌شود. در زمان رویدادن تداخل در کدهای CSS، ترکیبی از مفاهیم ارجحیت و Cascade در کنار هم تصمیمی می‌گیرند که در نهایت کدام دستورات اعمال شوند.

معمولا چنین است که CSS به سلکتورهای کلاسی بیشتر از سلکتورهای مربوط به عناصر اهمیت قائل می‌شود. یعنی اینکه سلکتورهای کلاسی «خاص‌تر» هستند. در مثال قبلی، اولین دستور CSS از سلکتور id استفاده می‌کند. از آن‌جا که سلکتور id خاص‌تر از سلکتور عنصر است، بنابراین دستور مربوط به رنگ قرمز بر رنگ آبی غلبه پیدا می‌کند.

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

مفهوم ارجحیت هم در ظاهر، شبیه به Cascade است اما با هم تفاوت دارند. این مفهوم وقتی کار می‌کند که سلکتورهای مختلفی برای تاثیر گذاری بر روی عنصر یکسانی در صفحه وب با هم تداخل پیدا کنند. برای مثال اگر دو دستور وجود داشته باشند که برای اثرگذاری بر روی عنصر یکسانی، یکی از سلکتور id استفاده کند و دیگری از سلکتور کلاس، دستوری که از سلکتور id استفاده می‌کند در نهایت بر روی عنصر اعمال خواهد شد. زیرا سلکتور id اولویت یا ارجحیت بیشتری نسبت به سلکتور کلاسی دارد.

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

وراثت در CSS چیست؟

این مسئله نسبت به مفاهیم قبلی ساده‌تر است. وراثت در CSS به معنای این است که قواعد و دستورات مربوط به شکل و ظاهر عناصر والد به صورت خودکار بر روی شکل و ظاهر عناصر فرزند هم اعمال می‌شوند.

در مثال زیر با استفاده از ویژگی مانند اندازه فونت font-size، می‌توانیم روش کار مفهوم وراثت در CSS را مشاهده کنیم. به عنوان نمونه، کدهای زیر را در فایل HTML نوشته‌ایم.

سپس کد زیر را هم به عنوان کد CSS به مطلب اضافه کردیم.

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

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

وراثت یکی دیگر از مفاهیم CSS است که فرایند کدنویسی را به میزان زیادی کارآمدتر کرده است. برای مثال، بیشتر وب‌سایت‌ها از فونت ثابتی برای تمام متن نوشته شده در صفحات مختلف استفاده می‌کنند. در این سایت‌ها به‌جای اینکه اعلان مربوط به font-size  یکسانی را به صورت تکراری به تمام بلوک‌های حاوی فونت و عناصر متنی اختصاص دهند، می‌توانند اعلان مربوط به font-size  را به عنصری در سطح بالا مانند <body>  اختصاص بدهند. در این صورت تمام فرزندان – زیر مجموعه‌های آن عنصر – اعلان font-size  را به ارث برده و از آن فونت استفاده می‌کنند.

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

برای مثال، کد زیر را در فایل HTML نوشته‌ایم.

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

بعد از اجرای کدهای بالا، خروجی فایل به شکل زیر می‌شود.

مثالی از ترکیب چند کد CSS مختلف

در این مطلب، مثال‌های زیادی از دستورات CSS را مشاهده کردیم. در این مثال چندین ویژگی مختلف CSS را با یکدیگر ترکیب کرده‌ایم تا ظاهر عنصر دکمه را به شکل نسبتا خوبی ایجاد کنیم.

از کدهای HTML زیر برای نوشتن متن روی دکمه و لینک مربوط به سایت استفاده کرده‌ایم.

کدهای CSS زیر هم ظاهر، اندازه، رنگ و بقیه ویژگی‌های دکمه را تعیین کرده‌اند.

در نهایت بعد از اجرای کدهای بالا، خروجی تولید می‌شود که تصویر آن را در پایین نمایش داده‌ایم.

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

HTML و CSS و را با کمک فرادرس یاد بگیریم

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

مزایای استفاده از CSS چیست؟

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

ثبات در طراحی ظاهری صفحات وب مختلف

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

کاهش زمان مورد نیاز برای بارگذاری صفحه

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

جدایی محتوا از طراحی ظاهری

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

افزایش توان دسترسی به اینترنت

CSS برای افراد دارای ناتوانی، در فرایند دسترسی به اینترنت نقش بسیار حیاتی را ایفا می‌کند. CSS به کاربرانی که مشکل ضعف بینایی دارند کمک می‌کند که فونت‌های نوشته شده با اندازه متناسب برای آن‌ها نمایش داده شود. همچنین با ابزار‌هایی مانند Screen Reader-ها به خوبی همکاری می‌کند. از طریق جداسازی محتوای سایت از چیدمان عناصر آن، دسترسی به محتوای سایت برای تکنولوژی‌های دستیار و نمایش اطلاعات با روش ساده‌تری ممکن شده است. همه این‌ها در کنار هم قابلیت دسترسی وب‌سایت‌ها را بهبود بخشیده و باعث اختصاصی‌سازی‌تر شدن سایت‌ها شده‌اند. کمک به مردم بیشتر برای دسترسی ساده‌تر به سایت‌ها باعث رویدادن تاثیرات مثبت اجتماعی شده است.

فریم ورک ها و پیش پردازشگرهای CSS

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

به عنوان مشهور‌ترین گزینه‌های موجود در این صنعت می‌توان به فریم‌ورک‌هایی مانند Bootstrap و Tailwind CSS اشاره کرد.

• Bootstrap: بخاطر عناصر از پیش‌ طراحی شده و سیستم شبکه‌ای پاسخگویی که دارد در این حوزه بسیار مشهور شده است. یعنی اینکه در بین توسعه‌دهندگانی که می‌خواهند به سرعت سایت‌های قابل اتکا و زیبایی داشته باشند بوت استرپ به انتخاب محبوبی برای تبدیل شده است.
• Tailwind CSS: فریم‌ورک Tailwind CSS از رویکرد «اولویت با فایده» (Utility-First) پیروی می‌کند. بنابراین کلاس‌های سطح پایین و ساده مفیدی را ارائه می‌دهد. این کلاس‌ها به توسعه‌دهندگان برای ساخت طراحی‌های سفارشی، بدون ترک‌ کردن فضای HTML کمک می‌کنند.

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

توصیفی از پیش پردازشگرهای CSS

«پیش‌پردازشگرها» (Preprocessors) CSS مانند SASS و LESS روش نوشتن کدهای CSS را توسط توسعه‌دهندگان تغییر دادند. این ابزارها با استفاده از ویژگی‌هایی مانند متغیرها، «قوانین تو‌درتو» (Nested Rules)، میکسین‌ها و توابع، توانایی‌های CSS معمولی را گسترش داده‌اند.

• SASS: این نام، مخفف عبارت انگلیسی « شیوه‌نامه‌های نحوی عالی» (Syntactically Awesome StyleSheets) است. SASS راه حل محکم و پیشرفته‌ای را ارائه می‌دهد. این پیش‌پردازشگر شامل ویژگی‌هایی مانند «دستور‌العمل‌های کنترلی» (Control Directives) می‌شود که در فرایند ساخت کتابخانه‌ها کاربردی هستند.
• LESS: از لحاظ کاربردی شبیه به SASS است. در عین حال، سینتکس و فرایند راه‌اندازی ساده‌تری نیز دارد. به همین دلیل به یکی از گزینه‌های ترجیحی برای مبتدی‌ها تبدیل شده است.

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

تاثیر فریم ورک ها و پیش پردازشگرها در ساده سازی کدنویسی CSS چیست؟

استفاده و ترکیب فریم‌ور‌ک‌ها و پیش‌پردازشگرها فرایند کدنویسی CSS را از چند جهت ساده‌تر می‌کنند. مهم‌ترین تاثیرات مثبت این ابزارها را در فهرست زیر توضیح داده‌ایم.

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

فریم‌ورک‌ها و پیش‌پردازشگرهای CSS ابزارهای بسیار مفیدی در فرایند توسعه وب‌ هستند. استفاده از این ابزارها کدنویسی را ساده‌تر کرده و باعث ارتقای کیفیت و سرعت دسترسی به نتیجه نهایی می‌شوند.

جمع‌بندی

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

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