صفحات ساده و اغلب بدون رنگبندی قابل ملاحظه، پس زمینه سفید، کادر ها و جدول های مربع یا مستطیل شکل با گوشه‌های تیز و بدون خمیدگی که عموما برای ساختاربندی محتوای متنی یا تصویری استفاده می شد و متن‌هایی با فونت‌های پیشفرض مرورگر مثل Arial و Tahoma صفحه را پر کرده بودند. اگر هم مرورگر را کوچکتر می‌کردیم اجزاء صفحه همراه با آن تغییر وضعیت نمی دادند و یک اسکرول‌بار عرضی در پایین صفحه ظاهر می‌شد.
تقریبا این مشخصات تمام وبسایت‌های اواسط تا اواخر دهه هفتاد خورشیدی بود. اما با پیشرفت و گسترش تکنولوژی‌های تحت وب امروزه شاهد طراحی های بسیار پیچیده و جذاب در وبسایت‌ها هستیم. این امر با ظهور و تکامل زبان طراحی و استایل دهی CSS محقق شد.
CSS چیست؟
CSS مخفف (Cascading Style Sheets) به معنی “شیوه نامه های آبشاری” است. این بدین معنیست که دستورات و کدهای CSS از بالا به پایین (مانند جریان آبشار) خوانده می شوند و در خوانش و اجرای آنها اولویت اینکه کدام زودتر یا دیرتر نوشته شده‌اند اهمیت دارد. از CSS برای ایجاد تغییرات ظاهری صفحات وب در جهت هر چه بهتر کردن تجربه کاربر استفاده می شود.
سی اس اس چه کاربردی دارد؟
در مرحله اول برای ایجاد هر صفحه در وب از زبان نشانه گذاری (markup language) HTML برای ساخت اسکلت آن استفاده می شود. اما برای استایل دهی و ایجاد تغییرات در ظاهر، اندازه و رنگِ عناصر در صفحه، انتخاب و ویرایش فونت، نحوه نمایش صفحه در اندازه های مختلف مرورگر و دستگاههای نمایش صفحات وب مثل مانیتور، تبلت و تلفن همراه و حتی ایجاد انیمیشن، از زبان طراحی CSS استفاده می شود. همانطور که پیشتر اشاره شد وظیفه اصلی CSS کمک به خلق صفحات زیبا و کاربرپسند برای هرچه بهتر و جذابتر کردن تجربه کاربری در صفحات وب است.
CSS یک زبان برنامه نویسی با تعریف استاندارد آن مانند جاوااسکریپت نیست، بلکه می توان آن را زبان طراحی و استایل دهی صفحات وب بشمار آورد.
سی اس اس چطور کار می کند؟
HTML با فراخوانی CSS استایلها را وارد صفحه می کند. هر صفحه HTML از ترکیب مجموعه ای از عناصر ایجاد می شود. برای مثال برای ایجاد پاراگراف از تگ <p> استفاده می شود:
<p>.این یک متن نمونه است</p>
حال اگر بخواهیم متن پاراگراف را به رنگ قرمز دراوریم و اندازه آن را تغییر دهیم، با استفاده از انتخابگر های CSS (در اینجا p) آن را هدف گرفته و تغییرات دلخواه را اعمال می کنیم:
p {
color: red;
font-size: 23px;
}
سی اس اس با استفاده از انتخابگر ها (در مثال بالا p برای انتخاب پاراگراف) عناصر مختلف HTML را هدف گرفته و تغییرات ظاهری را بر روی آن اعمال می کند. انتخابگر قبل آکولاد باز “}” قرار می گیرد. ویژگی ها و دستورات سی اس اس نیز میان آکولاد های باز و بسته { } قرار می گیرند. در این مثال ویژگی ها مثل اندازه فونت، رنگ، میزان ضخامت فونت، فاصله سطرها از هم، طول سطرها و بسیاری تغییرات دیگر را می توانند بر روی پاراگراف متنی اعمال کنند.
چطور CSS را در HTML فراخوانی کنیم؟
یکی از اولین سؤالاتی که ممکن است برای شما ایجاد شود اینست که چطور می توان از دستورات CSS در HTML استفاده کرد؟ این کار به ۳ روش انجام می شود:
روش Inline:
در این روش کدهای CSS داخل تگ های HTML مورد استفاده قرار می گیرد. این روش توصیه نمی شود چون برای هر تگ باید یک استایل نوشت که این باعث صرف وقت بسیار زیادی می شود و نکته دوم اینکه نمیتوان در این روش تغییرات گروهی و بصورت یکجا در عناصر HTML اعمال کرد.
<p style="color: red; font-size: 23px;"></p>
روش Internal:
در این روش کدهای CSS در قسمتheadو داخل تگ<style>قرار می گیرد. این روش نسبت به inline انعطاف پذیری و کارکرد بهتری دارد چون میتوان از کدهای CSS برای انتخاب گروهی عناصر در آن صفحه استفاده کرد. اما باید باز هم برای هر صفحه کدها را تکرار کرد.
<style>
p {
color: red;
font-size: 23px;
}
</style>
روش External:
این روش به عنوان یک روش استاندارد توسط طراحان و توسعه دهندگان وب مورد استفاده قرار می گیرد. در این حالت کدها داخل فایلی با فرمت (css.) نوشته می شوند و توسط تگ<link>به صفحه HTML فراخوانی می‌شوند.
<link rel="stylesheet" href="https://opentag.ir/css/style.css" type="text/css">
طراحی صفحات ریسپانسیو، هدیه CSS!
اگر تجربه کار با وبسایت‌های غیر ریسپانسیو را دارید حتما تفاوت تجربه کار با صفحات ریسپانسیو برای شما روشن است. با ظهور موبایل‌های هوشمند و تبلت‌ها، یکی از دغدغه های اصلی توسعه دهندگان وب تجربه‌ی هر چه بهتر کاربر در بازدید از صفحات وب در این دستگاه‌ها است. این مسئله بسیار مهم توسط CSS انجام می شود. برای کسب اطلاعات بیشتر می‌توانید به نحوه عملکرد media@ در CSS مراجعه کنید.
در این مقاله سعی شد بطور خلاصه به ابعاد مختلف زبان طراحی CSS اشاره شود تا یک نمای کلی از چیستی و چگونگی عملکرد آن برای شما ترسیم شود. اگر HTML را به مانند اسکلت و آجر برای ساختمان در نظر بگیریم، CSS نقش نما، رنگ دیوار و درب و پنجره را بازی میکند. بدیهیست که همه ما دوست داریم در خانه ای با طراحی زیبا زندگی کنیم.
