CSS چیست و از کجا استفاده می شود؟

صفحات سبک آبشار چیست؟

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

یک درس تاریخچه CSS

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

جداسازی ساختار و سبک اجازه می دهد تا HTML برای انجام بیشتر تابع که بر اساس آن بود بر اساس - نشانه گذاری محتوا، بدون نیاز به نگرانی در مورد طراحی و طرح از صفحه خود، چیزی که معمولا به عنوان "نگاه و احساس" از صفحه

CSS در حدود 2000 سالگی محبوبیت نداشت، زمانی که مرورگرهای وب شروع به استفاده بیشتر از جنبه های فونت و رنگ اصلی این زبان نشانه گذاری کرد. امروزه تمامی مرورگرهای مدرن پشتیبانی از CSS Level 1، بیشتر CSS Level 2 و حتی بیشتر جنبه های Level 3 CSS است. همانطور که CSS همچنان به تکامل و سبک های جدید معرفی شده است، مرورگرهای وب شروع به پیاده سازی ماژول هایی می کنند که پشتیبانی جدید CSS را در آن مرورگرها ایجاد می کنند و طراحان وب را به ابزارهای قدرتمند جدید ظاهر طراحی می کنند تا با آن کار کنند.

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

CSS علامت اختصاری است

همانطور که قبلا ذکر شد، اصطلاح CSS برای "Cascading Style Sheet" نامیده می شود. بگذارید این عبارت را کمی کمرنگ تر کنیم تا به طور کامل توضیح دهیم که این اسناد چه کار می کنند.

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

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

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

برای مثال دیگری از پیش فرض مرورگر، در مرورگر وب من، فونت پیش فرض " Times New Roman " است که در اندازه 16 نمایش داده می شود. تقریبا هیچ کدام از صفحاتی که در صفحه و اندازه فونت نمایش می کنند نمایش داده نمی شوند. این به این دلیل است که آبشار تعریف می کند که ورق های سبک دوم، که توسط طراحان خود تعیین می کنند، برای تعریف اندازه فونت و خانواده، منعکس کردن پیش فرض های مرورگر من است. هر جدول سبک که برای یک صفحه وب ایجاد می کنید، خاصیت بیشتری نسبت به سبک های پیش فرض مرورگر دارد، بنابراین این موارد پیش فرض تنها در صورتی اعمال خواهد شد که صفحه سبک شما آنها را نادیده نگیرد. اگر میخواهید لینکها به رنگ آبی و زیر خط قرمز باشد، نیازی نیست کاری را انجام دهید چون پیشفرض است، اما اگر فایل CSS سایت شما میگوید لینکها باید سبز باشند، این رنگ آبی پیش فرض را برمیگرداند. در این مثال، زیر خط مشی باقی خواهد ماند، زیرا شما مشخص نکرده اید.

CSS استفاده شده کجاست؟

CSS همچنین می تواند برای تعریف اینکه چگونه صفحات وب هنگام مشاهده در رسانه های دیگر از یک مرورگر وب باید نگاه کنند استفاده می شود. به عنوان مثال، شما می توانید یک ورق سبک چاپ ایجاد کنید که نحوه چاپ صفحه وب را مشخص می کند. از آنجا که اجزای صفحه وب مانند دکمه های ناوبری یا فرم های وب در صفحه چاپی هدف خاصی ندارند، هنگامی که یک صفحه چاپ می شود، یک Sheet Print Style می تواند مورد استفاده قرار گیرد. در حالیکه واقعا در بسیاری از سایتها معمول نیست، گزینهی ایجاد صفحات سبک چاپ، قدرتمند و جذاب است (در تجربه من - بیشتر متخصصان وب این کار را انجام نمیدهند، به این دلیل که محدوده بودجه سایت، این کار اضافی را انجام نمیدهد )

چرا CSS مهم است؟

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

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

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

مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در 7/5/17