محتوای آموزشی

معرفی سلکتورهای اولیه در CSS

معرفی سلکتورهای اولیه در CSS

در ادامه مقالات آموزش CSS در این مقاله در مورد انواع رایج سلکتورها در سی اس اس صحبت خواهیم کرد.

انتخاب گرهای CSS به شما این امکان را می دهد که المان های html را انتخاب کرده و متناسب با نیاز خود،با استفاده از کدهای css نحوه نمایش و ظاهر آنها را تغییر دهید.

Element Selector

اولین و رایج ترین نوع Selector ها در زبان سی اس اس (CSS) تحت عنوان Element Selector شناخته می شوند. منظور از Element تگ های اچ تی ام ال (HTML) به همراه محتوای داخل آنها است. به طور مثال برای تگ h1 باید از یک Element Selector ای تحت عنوان {} h1 استفاده کرد. همانطور که می بینیم علامت های <> که در زبان اچ تی ام ال (HTML) مورد استفاده قرار می گیرند در سی اس اس حذف می شوند و نیازی به ذکر آنها نمی باشد.

به طور کلی این نوع از Selector ها بسیار گسترده هستند یعنی اگر از Selector ای مانند p{} استفاده کنیم، این Selector کلیه تگ های p که در صفحه ما قرار دارند را تحت تاثیر قرار خواهد داد و با استفاده از آن می توانیم برای کلیه پاراگراف های خود یک استایل عمومی تعریف کنیم.

به عنوان مثال فرض کنید می خواهیم تمام تگ های p موجود در صفحه دارای رنگ قرمز و فونت سایز 20 پیکسل باشند و کلیه تگ های div نیز دارای پس زمینه خاکستری باشند.برای این منظور می توانیم از کدهای سی اس اس زیر استفاده کنیم:

p { color:red;
	font-size:20px;
}
div {
	background:grey;
}

class Selector

نوع دوم از Selector ها تحت عنوان class Selector شناخته می شوند. به طور کلی یکی از Attribute های عمومی در زبان HTML که تمام تگ ها می توانند آن را دارا باشند تحت عنوان class شناخته می شود.نحوه نام گذاری class ها به این شکل است که هر نامی که بخواهیم می توانیم برای آن ها در نظر بگیریم (البته باید قواعدی را رعایت کنیم که در انتهای مقاله به انها اشاره خواهیم کرد)،علاوه بر این،class مد نظر خود را به هر تعداد و برای هر تعداد تگ که نیاز داشته باشیم می توانیم مورد استفاده قرار دهیم. برای روشن شدن این مطلب کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
	</head>
	<body>
		<p class="myClass">آشنایی با سلکتورهای زبان سی اس اس</p>
	</body>
</html>

همانطور که در کد فوق مشاهده می کنید،داخل تگ body یک تگ p قرار داده و داخل تگ آغازین پاراگراف از Attribute ای به نام class استفاده کرده و نامی دلخواه همچون myClass برای آن در نظر گرفته ایم (نحوه نوشتن myClass به این شکل است که حرف اول به صورت کوچک نوشته شده سپس اولین حرف کلمه دوم با حرف بزرگ نوشته شده است. این نوع نامگذاری اصطلاحاً camelCase گفته می شود. واژه camel به معنی "شتر" است و از آنجا که این طور نامگذاری شبیه به کوهان شتر است camelCase نامیده می شود. البته این نوع نامگذاری اجباری نبوده و صرفا برای خوانایی بیشتر مورد استفاده قرار می گیرد(.

حال فایل styles.css خود را به صورت زیر تکمیل می کنیم:

.myClass {
   background-color:black;
   color:white;
   width:400px;
   font-size:18px;
   padding:10px;
   margin:0 auto;
   text-align:center;
   border-radius:5px;
   direction:rtl;
   font-weight:normal;
}

همانطور که در کد فوق می بینیم، داخل فایل styles.css ابتدا یک نقطه قرار داده سپس نامی که برای class در نظر گرفتیم را می نویسیم و هر کدی که بخواهیم به این class اختصاص یابد را داخل دو علامت {} می نویسیم.

خروجی قطعه کدهای بالا در مرورگر به صورت زیر خواهد بود:

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

در حال حاضر،داخل کدهای HTML خود،اگر به هر عنصری کلاس myClass را اختصاص دهیم،استایل های فوق به آن عنصر نیز اعمال خواهد شد.به عنوان مثال در کد زیر مقدار خاصیت class تگ های h1,h2 را نیز myClass قرار می دهیم.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
	</head>
	<body>
		<p class="myClass">آشنایی با سلکتورهای زبان سی اس اس</p>
		<h1 class="myClass">این یک تگ h1 می باشد</h1>
		<h2 class="myClass">این یک تگ h2 می باشد</h2>
	</body>
</html>

خروجی کدهای بالا را در تصویر زیر مشاهده می کنید:

همانطور که ملاحظه می کنید تگ های h1,h2 نیز همان استایلی را به خود گرفته اند که تگ p نیز داشت دلیل این موضوع نیز اسفتاده از خاصیت کلاس با مقدار myClass برای هر 3 عنصر ، و استایل هایی که در فایل سی اس اس خود تعریف کرده ایم.می باشد.

Id Selector

Selector دیگری که در استایل دهی های CSS بسیار پرکاربرد می باشد id Selector می باشد.ویژگی id نیز جزو خاصیت های عمومی زبان HTML می باشد که هر عنصری می تواند این خاصیت را داشته باشد اما یک تفاوت عمده با class Selector ها دارند و آن هم این است که id Selector ها فقط به یک آیتم در صفحات اچ تی ام ال (HTML) می توانند اختصاص داده می شوند. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<link rel="stylesheet" type="text/css" href="styles.css"/>
	</head>
	<body>
		<p id="myId">آشنایی با ایدی سلکتور</p>
	</body>
</html>

همانطور که مشاهده می کنید از خاصیت id برای تگ p استفاده کرده و مقدار آن را myId قرار داه ایم،حال با توجه به خاصیت id کدهای سی اس اس خود را ویرایش می کنیم.

#myId {
	background:darkblue;
	color:white;
	width:300px;
	font-size:18px;
	margin:10px auto;
	text-align:center;
	font-weight:bold;
}

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

نکته : دقت کنید که در کدهای CSS برای استفاده از id Selector باید از علامت # استفاده کنید که اصطلاحاً Hash Mark نامیده می شود.

نامگذاری class و ایدی

به طور کلی نامگذاری در هر زبان برنامه نویسی بسیار حائز اهمیت می باشد چرا که یک اشتباه کوچک منجر به این خواهد شد که برنامه به درستی اجرا نگردد. نامگذاری در اچ تی ام ال (HTML) و سی اس اس (CSS) هم از این قاعده مستثنی نیست. در نامگذاری id ها و class ها حتماً به خاطر داشته باشیم که از علائمی همچون @ و $ و % و ... استفاده نکنیم. علاوه بر این اجازه نداریم تا در نامگذاری از Space یا فاصله هم استفاده کنیم.

CSS یک زبان case-sensitive است.یعنی به حروف کوچک و بزرگ حساس می باشد به عبارت دیگر نام myClass با myclass دو کلاس مجزا تلقی می شوند. بنابراین همواره نام هایی که برای id ها یا class های خود انتخاب می کنید را می بایست به خاطر داشته باشید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'