وبینار رایگان از کنکور ارشد تا تحصیل در بهترین دانشگاه‌ها
دیدن جزئیات و ثبت‌نام رایگان
مدت زمان باقیمانده :
ثانیه -
دقیقه -
ساعت -
روز -
کنکور کامپیوتر
0
ورود | ثبت نام
نظرات
اشتراک
بالا
علاقه‌مندی

اشتراک
 

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

این مقاله عالی به معرفی انواع مختلف CSS و تعاریف، مزایا و معایب هر یک از CSS ها پرداخته همچنین روش های استایل دهی در CSS و CSS های خارجی و داخلی را معرفی کرده

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

CSS (Cascading Style Sheets) مسئولیت زیباسازی و بهبود بخشیدن به ظاهر صفحات وب سایت را بر عهده دارد. شما با استفاده از CSS می‌توانید رنگ‌ها، فونت‌ها و طرح بندی هر یک از عناصر وب سایت خود را کنترل کنید، همچنین این امکان را به شما می‌دهد تا افکت‌ها و انیمیشن‌های مختلفی را به وب سایت اضافه کنید. صفحات وب بدون استفاده از CSS تنها به صورت صفحات HTMLزبان html چیست؟ اچ تی ام ال (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>

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

 کدهای html و 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>

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

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

استایل های خارجی (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 پایه و اساس طراحی و زیباسازی صفحات وب است که برای توسعه صفحه وب در طراحی وب سایت‌ها و برنامه‌های تحت وب استفاده ‌می‌شود. در این مقاله با سه نوع پیاده‌سازی 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 وارد کنید که برای آزمایش یا پیش‌نمایش تغییرات و انجام اصلاحات سریع در وب‌سایت شما مفید است، همچنین در این روش نیازی به ایجاد فایل اضافی نیست.

امتیازدهی5 1 1 1 1 1 1 1 1 1 15.00 امتیاز (1 امتیاز)
اشتراک
بارگذاری نظرات
تلگرام اینستاگرام تماس با پشتیبانی: 09378555200 تماس با پشتیبانی: 09378555200