انواع مختلف CSS ⚡️ تعاریف، مزایا و معایب آن ها

Q: روش های استایل دهی در CSS کدامند؟

3 روش متمایز برای طراحی ظاهر صفحات وب توسط CSS وجود دارد که شامل سبک درون خطی یا (Inline Styles) ، سبک داخلی یا (Internal/Embedded CSS) و سبک خارجی یا (External Styles) وجود دارد. هر سبک طراحی دارای اولویت سلسله مراتبی متفاوتی است و به دلایل مختلف استفاده می شود.

Q: CSS خارجی یا External Styles چیست و چگونه استفاده میشود؟

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

CSS چیست؟ - مروری بر CSS

CSS (Cascading Style Sheets) مسئولیت زیباسازی و بهبود بخشیدن به ظاهر صفحات وب سایت را بر عهده دارد. شما با استفاده از CSS می‌توانید رنگ‌ها، فونت‌ها و طرح بندی هر یک از عناصر وب سایت خود را کنترل کنید، همچنین این امکان را به شما می‌دهد تا افکت‌ها و انیمیشن‌های مختلفی را به وب سایت اضافه کنید. صفحات وب بدون استفاده از CSS تنها به صورت صفحات HTMLزبان html چیست؟ اچ تی ام ال (HTML) چیست و چه کاربردی دارد؟این مقاله عالی به معرفی زبان html پرداخته سپس موارد چون : html چه کاربردی دارد؟ فایل html چیست؟ بررسی مزایا و معایب HTML، پرکاربرد ترین تگ های HTML پرداخته ساده خواهند بود. علاوه بر مواردی که به آنها اشاره کردیم، استفاده از CSS باعث بهبود بخشیدن به سرعت وب‌سایت و همچنین بهبود سئو در موتور جستجوی گوگل می‌شود. سه روش برای پیاده سازی CSS در HTML استفاده می‌شود که در این مقاله، به بررسی این سه نوع سبک مهم CSS شامل درون خطی، خارجی و داخلی می‌پردازیم و با معایب و مزایای هر سبک به طور مفصل آشنا می‌شویم.

CSS مخفف عبارت Cascading Style Sheet به معنی برگه های سبک آبشاری است و یک زبان نشانه گذاری است که با استفاده از آن در کنار HTML می‌توان سبک یک وب‌سایت را تعریف کرد.

استایل های درون خطی (Inline Styles)

CSS درون خطی، بالاترین اولویت را دارد. هر سبکی که در شیوه نامه داخلی و خارجی تعریف شده باشد، توسط سبک‌های Inline لغو می‌شود. در ادامه نحوه نوشتن آن را مرور می‌کنیم:

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<h1 style="color:bluesky;text-align:right;">This is a Heading</h1>
		<p style="color:green;">www.konkurcomputer.ir</p>
	</body>
</html>

مزایای استفاده از استایل درون خطی

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

معایب استفاده از استایل درون خطی

استفاده از CSS درون خطی مدیریت وب‌سایت را کند می‌کند؛ زیرا باید برای هر تگ Html، جداگانه CSS درون خطی نوشته شود.
افزودن استایل به هر عنصر زمان‌بر است و باعث می‌شود ساختار نامرتب شود.
استایل‌دهی به چند عنصر می‌تواند روی زمان دانلود صفحه تاثیر بگذارد.
استفاده از CSS درون خطی به شما این اجازه را نمی‌دهد که از سلکتورها استفاده کنید.

استایل های داخلی (Internal/Embedded CSS)

استایل دهی به روش Internal یا Embedded در اولویت دوم قرار می‌گیرد و سبک‌های موجود در شیوه‌نامه خارجی را لغو می‌کند. CSS داخلی به CSS جاسازی شده نیز شناخته می‌شود که برای استایل دهی به یک صفحه‌ی وب مورد استفاده قرار می‌گیرد. استفاده از این روش برای استایل‌دهی به چندین صفحه زمان‌بر است؛ زیرا باید برای هر صفحه به طور جداگانه تعریف شود. نحوه استفاده از این روش به این صورت است که باید CSS موردنظر را در داخل تگ <style> که در سند HTML قرار دارد، بنویسیم.

محل قرارگیری تگ‌های <style> در سر سند یا تگ <head> است که در زیر ساختار آن را می‌بینید:

<!DOCTYPE html>
<html>
	<head>
		<style>
			body{
				background-color : blue;
			}
			h1{
				color : red;
				font-size : 20px;
			}
		</style>
	</head>
	<body>
		<h1>This is a Heading</h1>
		<p>www.konkurcomputer.ir</p>
	</body>
</html>

مزایای استفاده از استایل داخلی

در CSS داخلی می‌توانید از سلکتورهایی مانند ID و کلاس برای نوشتن دستورات CSS استفاده کنید.
استفاده از CSS داخلی باعث می‌شود که کدها تنها در یک فایل HTML نوشته شود و دیگر نیازی به ایجاد فایل یا آپلود چندین فایل نداشته باشید.

معایب استفاده از استایل داخلی

نوشتن کدها در یک فایل HTML باعث می‌شود که استایل دهی به چندین صفحه زمان‌بر شود.
افزودن کدهای CSS به سند HTML باعث افزایش زمان بارگذاری صفحه وب شود.

حتما بخوانید :

رابط کاربری چیست و چرا مهم است؟

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

استایل دهی به روش خارجی کمترین اولویت از بین روش‌های گفته شده، را دارد. اگر هیچ استایلی در شیوه‌نامه داخلی و درون خطی تعریف نشده باشد، دستورات تعریف شده در صفحه CSS خارجی برای تگ‌های HTML اعمال می‌شود، اما این نوع از CSS روش کارآمدتری است؛ زیرا با ویرایش یک فایل CSS می‌توانید تمام سایت را به یکباره تغییر دهید. CSS خارجی حاوی فایل های CSSای است که به طور جداگانه ایجاد شده‌اند که محتوای آنها شامل ویژگی‌های سبک مورد نظر، به همراه ویژگی‌های برچسب است. با CSS خارجی، صفحات وب را به فایلی با پسوند css. خارجی لینک می‌دهیم که این فایل خارجی می‌تواند توسط ویرایشگر متنی دلخواه مانند Notepad++ ایجاد ‌شود. در این روش، تعریف استایل برای هر عنصر تنها یکبار امکان‌پذیر است که در تمام صفحات وب هم اعمال می‌شود.

استایل های خارجی در عنصر <link> در داخل بخش <head> صفحه HTML تعریف می‌شوند:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="/mystyle.css">
	</head>
	<body>
		<h1>This is a Heading</h1>
		<p>www.konkurcomputer.ir</p>
	</body>
</html>

همان‌گونه که گفتیم، یک CSS خارجی را می‌توان در هر ویرایشگر متنی نوشت و باید با پسوند css. ذخیره کرد و باید توجه کرد که فایل CSS خارجی نباید حاوی هیچ برچسب HTML باشد.

در اینجا نحوه ظاهر و محتوای فایل "mystyle.css" آورده شده است:


body{
	background-color : blue;
}
	
h1{
	color : red;
	font-size : 20px;
}

مزایای استفاده از استایل خارجی

به دلیل این‌که کدهای CSS را در یک سند جداگانه می‌نویسیم، ساختار فایل‌های HTML، تمیزتر و همچنین اندازه آنها کوچکتر خواهد بود.
امکان استفاده از یک فایل css. برای چندین صفحه فراهم است.

معایب استفاده از استایل خارجی

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

جمع‌بندی

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

روش های استایل دهی در CSS کدامند؟

3 روش متمایز برای طراحی ظاهر صفحات وب توسط CSS وجود دارد که شامل سبک درون خطی یا (Inline Styles)، سبک داخلی یا (Internal/Embedded CSS) و سبک خارجی یا (External Styles) وجود دارد. هر سبک طراحی دارای اولویت سلسله مراتبی متفاوتی است و به دلایل مختلف استفاده می شود.

CSS خارجی یا External Styles چیست و چگونه استفاده می‌شود؟

CSS خارجی یکی از انواع CSS است که به منظور افزودن استایل به چندین صفحه HTML و طراحی طرح‌بندی بسیاری از صفحات وب HTML به طور هم‌زمان استفاده می‌شود. CSS خارجی همیشه با پسوند css. ذخیره می‌شود و از طریق این فایل می‌توانیم سبک کامل صفحه وب HTML خود را تغییر دهیم تا به صفحاتی با ظاهر زیبا و مناسب برای ارائه به کاربران دست یابیم.

CSS داخلی یا Internal/Embedded CSS چیست و چگونه استفاده می‌شود؟

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