سی اس اس از کجا آمد و به چه دردی می خورد؟

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

Cascading Style Sheets که آن را به اختصار با نام CSS می شناسیم، در حقیقت یک زبان ساده طراحی است که روند ساخت صفحات وب زیبا و قابل ارائه را بسیار ساده می کند. در واقع این نام به این دلیل به کار می رود که کدهای سی اس اس صفحه ای از اطلاعات هستند که قیافه و شیوه چینش محتوا در صفحه وب را تعیین می کنند (استایل شیت= صفحه استایل ها).

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

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

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

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

 

تاریخچه سی اس اس
در میانه دهه ۱۹۹۰ استفاده از اینترنت به شکل محسوسی افزایش یافت. در آن زمان، تنها شیوه ارائه محتوا در صفحات وب، زبان HTML بود. اما با گسترش کاربرد و کاربران اینترنت، دیگر زبان اچ تی ام ال به تنهایی نمی توانست از پس ارائه ساده و کاربرپسند محتوا در وب برآید.  مثلا اچ تی ام ال توانایی طراحی صفحات را همانند کتاب، مجلات یا روزنامه های چاپی نداشت و شما امکان ارائه چنین صفحات وب شکیلی را نداشتید.

از همان ابتدای شروع HTML در سال ۱۹۹۰، استایل شیت (Stylesheet) به عنوان بخشی از پروژه تکمیل و توسعه اچ تی ام ال در دستور کار قرار داشت تا اینکه با همکاری «هاکون ویوم لی» و «برت بوس»، پایه ای برای توسعه و استانداردسازی کدهای سی اس اس و نحوه استفاده از آنها شکل گرفت و توسط W3C پیگیری شد. مایکروسافت هم به عنوان اولین حامی زبان سی اس اس، از آن در مرورگر مایکروسافت پشتیبانی کرد. اما مانند اغلب تکنولوژی های نوظهور در اینجا هم یک رقابت ایجاد شد. زیرا نت اسکیپ به عنوان دومین مرورگر پرکاربرد زمان خود، به جای پشتیبانی از زبان استایل شیت W3C، به ابداع و استفاده از زبان خاصی به نام جاوا اسکریپت استایل شیت یا JSSS پرداخت. اما مانند هر رقابت دیگری اینجا هم یکی از طرفین باید شکست را می پذیرفت و همانطور که می بینید شیوه کدنویسی نت اسکیپ برای استایل صفحه ها موفقیتی در بر نداشت و اینترنت اکسپلورر به حاکم بلامنازع دنیای مرورگرها بدل شد.

 

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

• تعیین شیوه نمایش تمامی صفحات یک سایت، به صورت مرکزی تنها بر دوش یک (یا تعداد انگشت شماری) فایل قرار می گیرد. همچنین هرگونه تغییر در چینش و شیوه نمایش محتوای مشترک تمامی صفحات سایت، تنها با انجام تغییر در یک فایل امکان پذیر است و به همه تعمیم داده می شود.  یعنی اینکه شما مثلا به جای تغییر خواص و اندازه های مربوط به فونت در تمامی صفحات سایت تان، تنها کافی است این کار را در فایل سی اس اس انجام دهید تا به صورت خودکار تمام صفحات تحت تاثیر قرار گیرند.
• در برخی سایت ها، کاربر می تواند استایل شیت دلخواه خودش را بسازد و سایت را با آن مشاهده کند. مثلا یک کاربر با چشمان ضعیف می تواند یک استایل شیت ویژه برای نمایش نوشته ها با تباین و کنتراست بالا ایجاد کند که بتواند به راحتی آنها را بخواند. این کار معمولا با استفاده از افزونه های ویژه در برخی مرورگرها امکان پذیر است.
• مرورگرها می توانند از چندین استایل شیت به صورت همزمان پشتیبانی کنند. با این قابلیت می توانید در یک زمان برای سایت تان چندین طرح و ظاهر متفاوت داشته باشید. کاربر هم به سادگی می تواند هر طرحی را که خوشش آمد و برای وی کارآیی بیشتری داشت، انتخاب کرده و از سایت با ظاهر مورد علاقه اش استفاده کند.
• استایل شیت ها به شما اجازه می دهند که محتوا را برای بیش از یک دستگاه بهینه سازی کنید. با استفاده از همان کدهای اچ تی ام ال ثابت، می توانید ظاهر و شیوه های نمایش مختلفی برای ابزارهای گوناگون، از قبیل تبلت، موبایل، کامپیوتر، پرینت و… داشته باشید.
• سی اس اس به شما این امکان را می دهد که صفحات وب را بسیار ساده تر برنامه ریزی، تولید و نگهداری کنید. به گونه ای که در زمان و مقدار کار نسبت به استفاده تنها از اچ تی ام ال، صرفه جویی چشمگیری صورت می گیرد.

 

سی اس اس چگونه کار می کند؟
همه چیز بسیار ساده است، حتی ساده تر از آنچه فکرش را کنید. به سادگی ۱، ۲ و ۳! البته قرار نیست شما در این دوره آموزشی سی اس اس یاد بگیرید و هدف این است که با آن و کارایی هایش آشنا بشوید. اگر دلتان خواست می توانید کمی جلوتر بروید:

1. کار را با یک فایل که توسط اچ تی ام ال ساخته شده، شروع کنید.
2. شروع به نوشتن قوانین استایل برای تگ ها و محتوای مورد نظر کنید تا مشخص شود هر کدام چگونه نمایش داده شوند. 
3. قوانین استایل نوشته شده را به فایل اچ تی ام ال مورد نظر ضمیمه کنید. هنگامی که مرورگر متن و محتوا را نمایش می دهد، قوانین شما را برای شکل دهی به محتوا و شیوه نمایش دنبال می کند. 

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

و آخرین نکته اینکه پیشنهاد می کنیم حتما سری به سایت Zen Garden بزنید تا به قدرت و زیبایی سی اس اس پی ببرید. در ستون سمت راست می توانید طرح های مختلف سایت را انتخاب کنید. زیبایی کار آنجا است که تمامی این طرح ها یک فایل اچ تی ام ال ثابت و واحد دارند و تنها با تغییر فایل سی اس اس مورد استفاده، طرح سایت به کلی تغییر می کند.

در این درس با سی اس اس و کاربردهایش آشنا شدید. اگر یک روزنامه نگار باشید کمتر پیش می آید که نیاز به سر و کله زدن با سی اس اس را پیدا کنید و معمولا این کار به عهده وبمستر سایت است. اما دانستن این مبانی به شما کمک می کند که در مواقع لزوم بدانید باید چه بکنید و از چه کسی تغییرات را درخواست بکنید.

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