CSS مخفف Cascading Style Sheets با تأکید بر “سبک” است. در حالی که از HTML برای ساختار یک سند وب استفاده می شود (مواردی مانند عناوین و پاراگراف ها را تعریف می کند و به شما امکان می دهد عناصر وب سایت را جاسازی کنید)، CSS سبک این اسناد html شما را ارائه می دهد، مانند چیدمان عناصر صفحه، رنگ ها و فونت ها همه مشخص شده. کافیست به HTML به عنوان پایه و اساس کار و به CSS به عنوان گزینه های زیبایی نگاه کنید. در این مقاله قصد داریم شما را با طراحی وب با کد نویسی و با استفاده از زبان css آشنا کنیم.
فواید استفاده از CSS
اگر در صفحات وب خود از CSS استفاده نمی کنید، بهتر است هر چه زودتر آن را یاد بگیرید. CSS از پشتیبانی عالی در مرورگر های امروز برخوردار است. یادگیری و تولید کد بهتر و تمیز تر نسبت به استفاده از همه آن سبک ها به طور مستقیم در HTML شما، نسبتاً آسان است.
استفاده از CSS وب سایت های شما را به همان روشی که برنامه نویسان برای یک سال کد نرم افزار را مدوله کرده اند، مدولار می کند. کد مدولار در وب سایت شما امکان سازگاری بیشتر در طراحی و نگهداری آسان تر را فراهم می کند. CSS استاندارد جدیدی است و اکنون چندین سال است که وجود دارد. زمان آن فرا رسیده است که ساختار HTML و ارائه CSS را از هم تفکیک کنیم.
بنابراین اگر ما سال هاست که از HTML استفاده می کنیم و انواع وب سایت های عالی را با آن ها ایجاد می کنیم چرا سوییچ می کنیم؟ برخی از مزایای استفاده از CSS عبارتند از:
- نگهداری و به روزرسانی آسان تر
- سازگاری بیشتر در طراحی
- گزینه های قالب بندی بیشتر
- کد سبک
- زمان بارگیری سریع تر
- مزایای بهینه سازی موتور جستجو
- سهولت ارائه سبک های مختلف به بینندگان مختلف
- قابلیت دسترسی بیشتر
در ادامه به بررسی بیشتر برخی از این مزیت هامی پردازیم.
تفکیک سبک و ساختار
ایده اصلی در پشت CSS جدا کردن ساختار یک سند از ارائه سند است. HTML برای ساختار در نظر گرفته شده است. هرگز برای چیز دیگری در نظر گرفته نشده بود. همه خصوصیاتی که شما برای سبک کردن صفحات خود اضافه می کنید بعداً به عنوان درخواست بازدید کنندگان اضافه شد. همه این موارد اضافه شده HTML را دست و پا چلفتی جلوه می دهند و بر خلاف هدف اصلی آن از ساختار یک سند عمل می کنند. HTML وجود دارد تا به مرورگر اطلاع دهد که این مجموعه متن یک پاراگراف است و آن مجموعه متن عنوان این پاراگراف است و چیز هایی از این قبیل.
بدون وجود HTML اضافی برای فرم دهی ساختار سند شما بسیار خوانا تر است و به راحتی می توانید آن را به روز کنید. تمام CSS های مورد استفاده شما را می توان به عنوان یک فایل جداگانه به فایل HTML الصاق کرد و همچنین به روزرسانی سبک های شما را آسان تر می کند. قبل از اینکه به هر یک از صفحات خود رنگ زمینه بدهید، می توانستید “bgcolor=red” را به هر برچسب بدنه در سایت خود اضافه کنید. چه اتفاقی افتاد وقتی فهمیدید که قرمز رنگ زمینه خوبی ایجاد نمی کند و می خواهید آن را به یک خاکستری روشن تغییر دهید.
با داشتن یک سایت کوچک، باز کردن 10 پرونده و ایجاد تغییر از “FF0000 #” (قرمز) به “EEEEEE #” (خاکستری روشن) مسئله چندان مهمی نیست. اما اگر 100 صفحه داشته باشید چه می کنید؟ 1000 صفحه؟ برای کد گذاری پس زمینه در هر صفحه از سایت خود با استفاده از CSS، به طور کلی یک خط کد لازم است، کافیست متن {background: # ff000} در صفحه style شما نوشته شود. یک خط کد به راحتی در عرض چند ثانیه تغییر می کند تا بر تغییر رنگ پس زمینه در سطح سایت تأثیر بگذارد و تمام صفحات شما که به آن فایل css خاص متصل هستند نیز تغییری که شما ایجاد کرده اید را بپذیرند.
زمان بارگیری سریع تر صفحه وب
استفاده از CSS به طور کلی منجر به کد کمتری در پشت صفحات وب شما می شود که به بارگیری سریع تر یک صفحه کمک می کند. وقتی مرورگر جدولی را در کد شما مشاهده می کند، لازم است همه کد شما را دو بار بخواند. یک بار برای درک ساختار جدول و یک بار دیگر برای نمایش واقعی محتوای داخل جدول. زمان اضافی باعث کند شدن صفحه شما می شود.
استفاده از جداول در طرح بندی یک صفحه وب به طور کلی منجر به استفاده بیشتر از تصاویر در آن صفحه می شود. تصاویر اغلب سنگین ترین عنصر صفحات هستند و معمولاً مقصر اصلی کاهش سرعت صفحات شما هستند. مطمئناً می توان تصاویر را به منظور به حداقل رساندن آن ها بهینه کرد، اما با این وجود بزرگ تر از یک خط کد هستند و هر تصویر به درخواست دیگری از مرورگر به سرور نیاز دارد.
در مصاحبه اریک میر با مایک دیویدسون از ESPN، آقای دیویدسون تخمین زد که هر روز 2 ترابایت پهنای باند پس از انتقال به CSS در وب سایت ESPN ذخیره می شود. شما همچنین می توانید برای درک بهتر این موضوع به مقاله ما در مورد استفاده از فونت ها و آیکون های CSS مراجعه کنید و کد ها را ببینید.
کنترل بیشتر ارائه
CSS امکان کنترل بیشتر بر ارائه صفحات وب شما را فراهم می کند. با توجه به اینکه گاهی اوقات طراحان وب کنترل کمی دارند، خوب است بدانید که راهی برای بازگرداندن مقداری از آن وجود دارد. گذشته از این که CSS دارای گزینه های قالب بندی بیشتری نسبت به HTML است مانند گزینه هایی برای کنترل فاصله و هدایت متن، CSS همچنین می تواند تعیین کند که صفحه به ترتیب خود نمایش می دهد.
اگر از گرافیک های سنگین استفاده می کنید، می توان آن ها را آخر در کد خود قرار دهید تا اطمینان حاصل کنید که بازدید کنندگان شما حداقل می توانند متن را بخوانند در حالی که منتظر بارگیری نمودار های شما هستند. با جداول همه یا هیچ چیز نیست. شما نمی توانید یک قسمت از جدول خود را قبل از یک قسمت دیگر دریافت کنید. CSS همچنین به شما امکان کنترل بیشتر بر روی رسانه های مختلف را می دهد. می توانید کد خود را سازماندهی کنید تا دنبال کردن آن برای خوانندگان صفحه آسان تر شود و یک صفحه وب با دسترسی بیشتر ایجاد کنید.
یکی از کاربرد های متداول CSS ارائه صفحه مشابه با رسانه های مختلف در چاپی بودن اسناد شما است. صفحات وب همیشه مناسب چاپگر نبوده اند. با استفاده از CSS به راحتی می توانید چند استایل را تغییر دهید تا کاملاً متفاوت از صفحه نمایش باشند و از طریق چاپگر به راحتی ظاهر شود. بازدید کنندگان سایت شما نیز نیازی به انجام کار خاصی ندارند. آن ها می توانند صفحات شما را از طریق مرورگر چاپ کنند و سندی را که با رنگ پس زمینه و تصاویر بارگیری نشده است، دریافت کنند که مناسب چاپ شدن است.
بهینه سازی موتور جستجو
اگرچه به طور کلی مورد موافقت همه نیست، اما احتمالاً CSS می تواند به شما در یافتن صفحات شما در موتور جستجو کمک کند. از آنجا که سایت CSS شما دارای کد کمتری است و ساختار ساده تری دارد، خواندن آن نه تنها برای شما، بلکه همچنین برای ربات های موتور جستجو آسان تر است. اجازه می دهد ربات های موتور جستجو سریعتر از کد شما عبور کنند، به این معنی است که صفحات وب شما سریع تر ایندکس می شوند.
همچنین این احتمال وجود دارد که کد کمتری به عنوان متنی که چگالی کلمات کلیدی صفحه را بهبود می بخشد، تفسیر شود. با کد کمتر برای درهم آمیختن، ربات های موتور جستجو راحت تر می توانند تعیین کنند صفحه به چه چیزی مربوط می شود. همه موارد دیگر برابر بودن صفحات وب که از CSS برای طراحی خود استفاده می کنند، به احتمال زیاد رتبه بالاتری در موتورهای جستجو دارند.
CSS چگونه کار می کند؟
CSS با تعامل با عناصر HTML استایل را به صفحات وب شما می آورد. عناصر، همان عناصر جداگانه HTML یک صفحه وب هستند – به عنوان مثال یک پاراگراف – که در HTML ممکن است به این شکل باشد:
<p>This is my paragraph!</p>اگر می خواهید این پاراگراف برای افرادی که صفحه وب شما را از طریق مرورگر وب مشاهده می کنند، صورتی و پررنگ جلوه کند، می توانید از کد CSS استفاده کنید که به این شکل است:
p{
color:pink;
font-weight:bold;
}در این حالت، “p” (پاراگراف) “selector” نامیده می شود، این بخشی از کد CSS است که مشخص می کند کدام یک از عناصر HTML در حال گرفتن استایل است. در CSS، انتخابگر در سمت چپ اولین کروشه نوشته شده است. اطلاعات بین کروشه را اعلان می نامند و حاوی خصوصیات و مقادیری است که برای سلکتور اعمال می شود. خصوصیات مواردی مانند اندازه فونت، رنگ و حاشیه (border) هستند. در مثال بالا، “color” و “font-weight” هر دو از خصوصیات هستند و “صورتی” و “bold” مقادیر هستند. مجموعه پرانتز کامل از:
p{
color:pink;
font-weight:bold;
}اعلامیه و دوباره، “p” (به معنی پاراگراف HTML) سلکتو است. همین اصول اساسی را می توان برای تغییر اندازه فونت، رنگ پس زمینه، تو رفتگی حاشیه و موارد دیگر استفاده کرد. برای مثال:
body{
background-color:lightblue;
}پس زمینه صفحه شما را آبی روشن می کند، یا در مثالی دیگر:
p{
font-size:20px;
color:red;
}یک پاراگراف با فونت 20 پیکسلی با حروف قرمز ایجاد خواهد کرد.
CSS خارجی، داخلی یا Inline؟
شاید از خود بپرسید که چگونه این کد CSS در واقع در محتوای HTML اعمال می شود. دقیقاً مانند HTML، زبان CSS kdc با یک متن ساده و از طریق ویرایشگر متن یا پردازشگر کلمه در رایانه شما نوشته می شود و سه روش اصلی برای افزودن کد CSS به صفحات HTML شما وجود دارد. کد CSS (یا Style Sheets) می تواند خارجی، داخلی یا اینلاین باشد.
CSS های خارجی به عنوان پرونده های “css.” ذخیره می شوند و می توانند برای تعیین ظاهر یک وب سایت کامل از طریق یک فایل (به جای افزودن موارد منفرد کد CSS به هر عنصر HTML که می خواهید تنظیم کنید.) مورد استفاده قرار گیرند. برای استفاده از یک css خارجی فایل های “html.” شما باید شامل یک بخش هدر باشند که به صفحه سبک خارجی لینک می شود و چیزی شبیه به این است:
<head>
<link rel="stylesheet" type="css" href="style.css">
</head>با این کار فایل html به استایل شیت خارجی شما لینک داده می شود (در حالت style.css) و تمام دستورالعمل های CSS موجود در آن پرونده در صفحات لینک داده شده html اعمال می شود.
استایل های داخلی دستورالعمل های CSS هستند که مستقیماً در هدر یک صفحه خاص html نوشته می شوند. (این به ویژه اگر یک صفحه در سایتی داشته باشید که دارای ظاهری منحصر به فرد باشد بسیار مفید است.) یک صفحه سبک داخلی به این شکل به نظر می رسد:
<head>
<style>
Body{background-color:thistle;}
P{font-size:20px; color:mediumblue;}
</style>
</head>یک رنگ پس زمینه و پاراگراف هایی با فونت آبی رنگ و سایز 20 پیکسلی متوسط، اکنون روی این صفحه html منفرد اعمال می شود.
و در آخر استایل های اینلاین قطعه هایی از CSS هستند که مستقیماً در کد HTML نوشته شده اند و فقط در یک نمونه کد گذاری اعمال می شوند. مثلا:
<h1 style="font-size:40px; color:violet;"> Check out this headline! </h1>باعث می شود که یک عنوان خاص در یک صفحه html با فونت 40 پیکسل بنفش ظاهر شود. به طور کلی، استایل های خارجی کارآمد ترین و حرفه ای ترین روش برای پیاده سازی CSS در وب سایت هستند (پیگیری و پیاده سازی استایل سایت از یک فایل اختصاصی CSS آسان تر است)، در حالی که سبک های داخلی و سبک inline می توانند مورد استفاده قرار گیرند، بر اساس مواردی که لازم است تغییرات سبک جداگانه ایجاد شود.
سخن آخر
مزایای فایل های خارجی css بسیار است و با توجه به پشتیبانی مرورگر های مدرن، هیچ بهانه ای برای عدم یادگیری و استفاده از آن ها وجود ندارد. اگر همه موارد بالا شما را متقاعد نکرده باشند، بهتر است بدانید HTML قبلاً منسوخ شده است و در برخی از مراحل آینده دیگر در مرورگر ها کار نمی کند. با رسیدن آن زمان، در بسیاری از مرورگر های جدید نمایش داده نمی شوند و نیاز به کد گذاری مجدد دارند. کسانی که در حال حاضر از کد های css استفاده می کنند به عملکرد عادی خود ادامه خواهند داد.
