درون خطی، جاسازی شده و ورق های سبک خارجی: در اینجا چیزی است که شما باید بدانید
توسعه وب سایت در فضای باز اغلب به عنوان مدفوع 3 پا بیان شده است. این پاها به شرح زیر است:
قسمت دوم این مدفوع، CSS یا Cascading Style Sheets، چیزی است که امروز به اینجا نگاه می کنیم. به طور خاص، ما می خواهیم به 3 نوع سبک که می توانید به یک سند اضافه کنید اشاره شده است.
- سبک های درونی
- سبک های جاسازی شده
- سبک های خارجی
هر کدام از این سبک های CSS دارای مزایا و معایب خود هستند، بنابراین اجازه دهید نگاهی عمیق تر به هر کدام از آنها داشته باشیم.
سبک های درونی
سبک های درونی هستند سبک هایی هستند که به طور مستقیم در برچسب در سند HTML نوشته می شوند. سبک های درون خطی فقط بر برچسب خاصی که به آنها اعمال می شود، تاثیر می گذارد. در اینجا یک مثال از یک سبک درونی است که به یک لینک استاندارد یا لنگر تگ مورد استفاده قرار می گیرد:
این قاعده CSS، دکوراسیون متن زیر را با استفاده از این لینک پیوند می دهد. با این وجود، هیچ پیوند دیگری در صفحه تغییر نخواهد کرد. این یکی از محدودیت های سبک های درون خطی است. از آنجایی که آنها فقط در یک مورد خاص تغییر می کنند، شما باید HTML خود را با این سبک ها پر کنید تا یک طراحی صفحه واقعی ایجاد شود. این بهترین تمرین نیست در حقیقت، این یک گام از روزهای "برچسب فونت" و مخلوط ساختار و سبک در صفحات وب حذف شده است.
سبک های درون خطی نیز دارای خاصیت بسیار بالایی هستند.
این کار آنها را بسیار سخت می کند تا با دیگر سبک های غیر خطی بازنویسی کنند. به عنوان مثال، اگر می خواهید یک سایت را پاسخگو باشید و با استفاده از پرس و جوی رسانه ها یک عنصر به نقطه های نقطه خاصی نگاه می کند ، سبک های درون خطی بر روی یک عنصر باعث می شود که این کار بسیار سخت باشد.
در نهایت، سبک های درون خطی واقعا مناسب هستند زمانی که به شدت استفاده می شود.
در حقیقت، من به ندرت همیشه از سبک های درونی در صفحات وب استفاده می کنم.
سبک های جاسازی شده
سبک های جاسازی شده، سبک هایی هستند که در سر سند تعبیه شده اند. سبک های جاسازی شده فقط بر روی برچسب هایی که روی آنها قرار دارند تاثیر می گذارد. این بار یکی از نقاط قوت CSS را نادیده می گیرد. از آنجا که هر صفحه سبک را در
، اگر می خواهید یک تغییر در سایت ایجاد کنید، مانند تغییر رنگ لینک ها از قرمز به سبز، شما باید این تغییر را در هر صفحه انجام دهید، زیرا هر صفحه از یک صفحه سبک جاسازی شده استفاده می کند. این بهتر از سبک های درون خطی است، اما در بسیاری موارد مشکل ساز است.
جدول های استایل اضافه شده به
یک سند نیز یک مقدار قابل توجهی از کد نشانه گذاری را به آن صفحه اضافه می کند که می تواند صفحه را در آینده نیز سخت تر کند.
مزایای استفاده از صفحات سبک جاسازی شده این است که بلافاصله با بارگذاری صفحه خود به جای نیاز به سایر فایل های خارجی بارگذاری می شود. این می تواند یک مزیت از سرعت دانلود و دیدگاه عملکرد باشد.
ورق های سبک خارجی
امروزه اکثر وبسایتها از ورق های سبک خارجی استفاده می کنند. سبک های خارجی سبک هایی هستند که در یک سند جداگانه نوشته می شوند و سپس به اسناد مختلف وب متصل می شوند. ورق های سبک خارجی می توانند هر سندی را که به آن متصل شده است، تحت تأثیر قرار دهد، بدین معنی است که اگر شما یک وب سایت 20 صفحه ای داشته باشید که هر صفحه از یک صفحه سبک استفاده می کند (این معمولا نحوه انجام آن است)، شما می توانید تغییرات بصری را برای هر یک از آن صفحات به سادگی با ویرایش این ورق سبک.
این باعث می شود مدیریت سایت درازمدت بسیار ساده تر شود.
ضعف به ورق های سبک خارجی این است که آنها صفحات را برای بارگیری و بارگذاری این فایل های خارجی نیاز دارند. هر صفحه از هر سبک در صفحه CSS استفاده نمی کند، بنابراین بسیاری از صفحات یک صفحه CSS بسیار بزرگتر را بارگذاری می کنند که در واقع نیاز دارند.
در حالی که درست است که عملکرد برای فایل های CSS خارجی وجود دارد، قطعا می تواند به حداقل برسد. در واقع، فایل های CSS فقط فایل های متنی هستند، بنابراین معمولا برای شروع بسیار زیاد نیستند. اگر کل سایت شما از یک فایل CSS استفاده می کند، پس از آنکه ابتدا بارگذاری شد، مزایای آن سند را نیز ذخیره می کنید.
این بدان معنی است که برخی از بازدیدکنندگان ممکن است یک عملکرد کوچک در صفحه اول وجود داشته باشد، اما صفحات بعدی از فایل CSS cached استفاده می کنند، بنابراین هر ضربه ممکن است منفی شود. فایل های خارجی CSS چگونگی ساخت تمام صفحات وب را دارند.