دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » فیلم آموزش CSS – ترکیب انتخابگر ها
فیلم آموزش CSS - ترکیب انتخابگر ها

فیلم آموزش CSS – ترکیب انتخابگر ها

در این قسمت از فیلم آموزش CSS ترکیب انتخابگرها آموزش داده شده :

در این قسمت از فیلم آموزش CSS با نحوه ترکیب انتخابگرها ( Selector ) آشنا خواهید شد که به شرح زیر هستند :

ترکیب ارثی ( Descendant ) در فیلم آموزش CSS :

در ترکیب ارثی شما مشخص می کنید مثلاً عنصر <P> که در داخل عنصر <div> قرار دارد چه استایل به خود بگیرد . به مثال زیر توجه کنید در این مثال عنصر <P> داخل div است . پس <P> می شود فرزند <div> و همین طور عنصر <div> ، پدر عنصر <P> است .

<div>
	<p> CSS آموزش </p>
</div>

برای استایل دادن به <P> در CSS کافیست اسم پدر آن را بنویسیم و بعد یک فاصله ( space ) بزنیم و P را بنویسیم و بهش استایل بدیم :

div p{
	width: 300px;
	height: 300px;
	color: green;
	background-color: yellow;
}

توضیحات بیش تر در فیلم آموزش CSS داده شده است .

  فرزند اصلی :

با استفاده از علامت < می توانیم به فرزندهای اصلی یک عنصر استایل مورد نظرمان را بدهیم . به مثال زیر توجه کنید :

div > p{
	width: 300px;
	height: 300px;
	color: yellow;
	background-color: blue;
}

فرزند اصلی یعنی این که داخل عنصر دیگری نباشد .
با این کار به همه عنصر های P که فرزند اصلی div هستند این استایل را می دهیم ، برای این که به یک عنصر خاصی این استایل را بدهیم کافیست که برای آن یک class تعریف کنیم مانند مثال زیر :

<div class="text">
	<p> CSS آموزش </p>
</div>

در CSS : 

.text > p{
	width: 300px;
	height: 300px;
	color: yellow;
	background-color: blue;
}

اولین عنصر مجاور در CSS :

با استفاده از علامت + می توانیم به اولین عنصر مجاور استایل بدهیم . به مثال زیر دقت کنید :

در HTML

<!Doctype html>
	<head>
		<title>Web30ty</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
           
		<div>
			<p> CSS آموزش </p>
		</div>
		<p> HTML آموزش </p>
		
		 
	</body>
</html>

در این مثال یک عنصر <P> در داخل div قرار دارد و دیگری در بیرون از آن حال اگر بخواهیم به اولین تگ <P> بعد از div استایل بدهی در CSS به صورت زیر عمل می کنیم :

.text + p{
	width: 300px;
	height: 300px;
	color: yellow;
	background-color: blue;
}

با این کار به همه اولین عنصر های تگ P بعد از div این استایل داده می شود برای جلوگیری از این کار می توانید یک id یا class به عنصر مورد نظر خود بدهید مانند کد زیر :

<div id="text">
	<p> CSS آموزش </p>
</div>
<p> HTML آموزش </p>

در CSS : 

#text + p{
	width: 300px;
	height: 300px;
	color: yellow;
	background-color: blue;
}

عناصر عمومی مجاور در CSS  :

با استفاده از علامت ~ می توان به همه عناصر مجاور استایل داد . در مثال زیر می توان به همه عناصر P بعد از div استایل داد :

div ~ p{
	width: 300px;
	height: 300px;
	color: yellow;
	background-color: blue;
}

توضیحات بیش تر در فیلم آموزش CSS گفته است .

شاید برای شما این سوال پیش بیاید که چرا از ترکیب انتخابگر ها استفاده می کنیم ؟؟؟
باید بگم برای این استفاده می کنیم که حجم کدها کم شود و اگر حجم کد های شما کمتر شود در سئو سایت خیلی تاثیر دارد و باعث کم شدن زمان لود می شود .

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

نظرات کاربران :



جواب سوال چیه ؟ *