زنگ CSS: جلسه اول - آشنایی کلی با زبان CSS و نحوه اضافه کردن CSS به صفحه

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

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

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

body 

{

background-color:

 linen;

     }

h1 

{

color:

 maroon;

margin-left:

 40px;

   } 

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

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

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

روش اول: CSS خطی

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

مثال:‌  متن با رنگ قرمز

روش دوم: CSS داخلی

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

روش سوم: فایل خارج از صفحه CSS:

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

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

نکته: برای به دست آوردن آدرس فایل ذخیره شده در ویندوز، بر روی فایل .css کلیک راست کرده و در منوی باز شده وارد تب general شوید و آدرس فایل را کپی کنید. سپس در انتهای این آدرس علامت / قرار داده و نام فایل را با پسوند .css وارد کنید. برای درک بهتر به مثال زیر توجه کنید:

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

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

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

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