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

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

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

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

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

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

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

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

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

  فرزند اصلی :

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

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

در CSS : 

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

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

در HTML

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

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

در CSS : 

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

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

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

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

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

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

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

عاشق برنامه نویسی

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



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