وب

بررسی انواع استایل css

استایل ها تعیین کننده ویژگی های عناصر مختلف در طراحی وب هستند. استایل css در واقع بر روی کد های html  قرار می گیرد و ویژگی های قسمت های مختلف صفحه وب را تعیین می کنند. تعداد زیادی استایل وجود دارد که هر کدام نقش های مختلفی دارند، اما به طور کلی انواع استایل css را در سه دسته تقسیم می کنند. در این مقاله سعی می کنیم سه نوع اصلی استایل css یعنی استایل های درونی (Inline styles)، استایل جاسازی شده (Embedded styles) و استایل های خارجی (External styles) را به طور خلاصه بررسی کنیم و نکات مثبت و منفی آن ها را نیز شناسایی کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

 

استایل های درونی (Inline styles)

این نوع از استایل css به صورت مستقیم درون تگ های html نوشته می شوند. به همین دلیل نیز به نام استایل های درونی مشهور شده اند. این نوع استایل ها فقط بر روی تگ خاصی که بر روی آن اعمال شده اند اثر می گذارند. برای آشنایی با استایل درونی به کد های زیر دقت کنید:

<;”a href=”/index.html” style=”text-decoration: none>

همانطور که مشاهده می کنید  در این جا استایل text-decoration استاندارد به لینک داده شده اعمال شده است. بدین ترتیب این استایل فقط بر روی این لینک اعمال می شود و شامل سایر لینک های موجود در صفحه نخواهد شد. یکی از محدودیت های استایل های درونی همین است که فقط می تواند به یک عنصر خاص اعمال شود و شما برای کل صفحه html خود مجبور خواهید بود هر استایل را درون هر تگ قرار دهید تا طراحی صفحه شما کامل شود.  به همین دلیل امروزه حداقل برای تگ های فونت و ساختاری دیگر از استایل های درونی استفاده نمی شود.

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

استایل css

استایل جاسازی شده (Embedded styles)

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

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

 استایل css

استایل های خارجی (External styles)

نوع سوم استایل css همان چیزی است که این روز ها ما از آن استفاده می کنیم. در واقع css را این روز ها با استایل های خارجی می شناسند. در استایل های خارجی، استایل ها به صورت یک صفحه سند به صورت جداگانه نوشته شده اند و به اسناد مختلف وب پیوست می شوند. این صفحات استایل های خارجی بر روی هر صفحه از وب که به آن پیوست شده باشند استایل های خود را اعمال می کنند. یعنی اگر شما ۲۰ صفحه وب سایت خود را به یک صفحه استایل خارجی متصل کنید می توانید تغییرات مورد نظر خود را با تغییر همان یک صفحه به تمام ۲۰ صفحه پیوست شده اعمال کنید. به این ترتیب اداره سایت بسیار راحت تر خواهد شد و این دقیقا نشان دهنده قدرت css است. همان چیزی که سبب می شود امروزه css نقش ویژه ای در صفحات وب داشته باشد.

استایل css

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

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

کلام آخر

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

منبع : طراحی سایت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا