کامپیوتر, برنامه نویسی
CSS، شبه، شبه: شناور، کودک، هدف
با ترکیب HTML، CSS و شما می توانید کاملا تمام عناصر صفحات وب را کنترل کنید. با سبک شما به راحتی می توانید ظاهر هر بلوک و یا خط را تغییر دهید. اغلب رمز گذار نیاز به انجام یک کار پیچیده تر - برای تغییر نگاه خود عنصر است، به عنوان یک بخش جداگانه و یا یک کشور خاص. در این مورد، به کمک CSS شبه.
شبه کار در اصل همان کلاس های معمولی در نشانه گذاری، اما از لحاظ جسمی آنها در اینجا وجود نداشته باشد. آنها را می توان بر اساس عناصر در اطلاعات سند، که به انتخاب معمول را انتخاب کنید شامل نمی شود انتخاب شده است. در اینجا یک مثال ساده است: شما یک دکمه قرمز، و شما می خواهید زمانی که شما شناور آن را به آبی تبدیل شد. از لحاظ تئوری، می توان آن را در جاوا اسکریپت اجرا، اما چرا اینقدر دشوار است؟ بسیار راحت تر به استفاده از یک : شناور CSS. با کمک آن شما می توانید هر واحد پارامترهای که شد باعث خواهد شد تنها هنگامی که نشانگر موس را.
فهرست CSS شبه کلاس ها به طور منظم به روز شد. شاید، در حالی که شما این مواد، چند به نظر می رسد جدید است. برای شروع، در نظر آنهایی که در مشخصات CSS3 ظاهر شد.
: n ام از نوع
فرض کنید شما یک لیست که در آن شما می خواهید به استفاده از رنگ های متناوب، یعنی خط اول است، برای مثال، نوشته شده با حروف قرمز، و دوم - .. آبی، قرمز دوباره سوم، چهارم دوباره به رنگ آبی. پیش از این، شما را مجبور به ایجاد کلاس های جدید. طرح از گذشته به هر عنصر در لیست کلاس اضافه شده، و پس از آن ظاهر خود را در شیوه تغییر کرده است. این بود خیلی راحت و آلودگی طرح است.
حالا همه چیز آسان تر است. استفاده از CSS شبه کلاس: n ام از نوع. این یک فرصت برای گرفتن اثر بصری مورد نظر، بدون تغییر هر چیزی در نشانه گذاری است. این اصل ساده است: شما وارد یک انتخاب، و در داخل پرانتز بعد از نام ارسال یک فرمول یا یک کلمه کلیدی است که عناصر مورد نیاز را پیدا به عنوان مثال ،: n ام از نوع (حتی) همه حتی عناصر خواهد شد، و: n ام از نوع (عجیب و غریب) - به فرد. هستند تعداد زیادی از فرمول استفاده می شود برای کنترل دقیق وجود دارد. براکت نشان می دهد تعداد ممکن - در این مورد سبک به به عنصر که شاخص این برابر است با تعداد اعمال شود.
: NTH کودک
این CSS شبه کلاس در اصل عمل شبیه به یکی از قبلی است، اما بر خلاف آن منحصرا کار با کودکان از آیتم انتخاب شده است. برای مثال، اگر شما می خواهید به استفاده از آن برای سفارشی کردن ظاهر از پدر و مادر از
برای کنترل دقیق از فرمول استفاده می شود. آنها برای یک مبتدی بسیار دشوار هستند، اما آن را به ارزش کمی عمیق تر به نحو چگونه همه چیز را آسان تر می شود است. فرمول به شرح زیر است: یک B +، که در آن یک - افست - یک عامل، و ب است. برای مثال، اگر در پرانتز نشان می دهد N، شبه انتخاب همه عناصر فرزند (به دلیل آن است شرایط اضافی را در قالب یک مشخص نشده است و ب). اگر شما در N + 2، تمام عناصر به جز اولین مشخص (به دلیل جبران به دو برابر است) انتخاب خواهد شد. بهترین از همه، این زمان به مطالعه در عمل. آزمایش با اجزای کودک و فرمول های مختلف.
: آخرین فرزند
همه چیز ساده است. CSS کودک شبه کلاس ها استفاده می شود برای انتخاب یک آیتم خاص است. این انتخاب آخرین فرزند جزء پدر و مادر. استفاده شده است اغلب، برای مثال، برای انتخاب آخرین ردیف از جدول یا حذف دندانه از آخرین بلوک برای جلوگیری از انتقال آن به خط بعدی.
: n ام-آخرین-کودک
توسط اصل عمل هنگامی که با استفاده از عناصر به سمت بالا حرکت خواهد کرد مشابه که قبلا ذکر شد n ام کودک است، اما در جهت مخالف عمل می کند، به عنوان مثال. E.. این بسیار مفید است اگر شما نیاز به پیدا کردن چند مورد آخرین.
شما ممکن است فکر می کنم که این شبه کلاس ها و شبه عناصر CSS بی فایده است، از آنجا که شما می توانید همه چیز به خوبی توسط طبقات معمولی انجام می شود. این طوری نیست. : n ام کودک ،: nth- آخرین فرزند - برای مثال، در مواردی که بلوک دارای تعداد زیادی از کودکان و آنالوگ های آن در هنگام کار در پروژه های بزرگ بسیار مناسب هستند. دستی ترتیب کلاس های طولانی و سخت.
کنترل شبه دولت
اگر شما نیاز به تغییر ظاهر از یک عنصر در یک حالت خاص؟ این مورد CSS شبه کلیک کردن، اشاره و دیگر اقدامات فراهم می کند. اجازه دهید ما آنها را در جزئیات را بررسی کند.
: لینک
این مراجع شبه CSS، نه همه، اما تنها کسانی که بازدید نکرده است است. در آن شما می توانید سبک برای عناصر از ، که کاربران هنوز به تصویب رسید را مشخص کنید.
: بازدید
آنالوگ از تجسم های قبلی، که تنها کنترل لینک در حال حاضر بازدید. ترکیب این دو شبه کلاس ها، شما می توانید ظاهر دستورات از دقیقا سفارشی که شما نیاز دارید. توجه داشته باشید، با این حال، دولت ها برای مرورگرهای خاصی محاسبه و پس از سابقه درمان مرخص شده است.
شبه کلاس: CSS هدف
یکی از جالب ترین شبه کلاس ها، که اگر تا حدی استفاده جایگزین استفاده از جاوا اسکریپت. را قادر می سازد کنترل است که شناسه های موجود در آدرس ردیف از صفحه. بله، اولین بار آن را دشوار است به درک. سعی کنید به تجزیه به عنوان مثال.
بیایید می گویند ما در صفحه 3 بلوک div با شناسه خاص عبارتند از: ID1، ID2، ID3. # ID1، # ID2،: ما همچنین سه پیوند به مقادیر متناظر عکاس هنگام عکسبرداری اند # ID3. هنگامی که شما بر روی لینک برای اولین بار در آدرس ردیف از صفحه کلیک کنید بعد از لینک به شناسه مربوطه خواهد بود که صفحه خود را.
CSS برای تمام بلوک DIV مشخص نمایش اموال: هیچ کدام، است که، آنها به طور پیش فرض نمایش داده نمی شود. ما با استفاده از هدف: دیو و آن یک صفحه نمایش اموال را: بلوک. در حال حاضر، زمانی که شما در ارتباط با برخی از عکاس هنگام عکسبرداری کلیک کنید، بلوک با شناسه مربوطه خواهد شد به نمایش اختصاص داده: بلوک، و در نتیجه، آنها شروع خواهد شد به نظر می رسد در صفحه! هنگامی که شما لینک به عکاس هنگام عکسبرداری = HTTP کلیک کنید: // سایت / مقاله / 319683 /٪ E2٪ 80٪ 9D # ID1٪ E2٪ 80٪ 9D با ID1 مسدود خواهد شد، و غیره ..
هنوز هم هیچ چیز نمی فهمم؟ سعی کنید برای آزمایش. ایجاد طرح بندی صفحه و سبک در بالا شرح داده. چند دقیقه بعد شما یک همه چیز از شکل بزرگ است.
شبه است که می تواند به هر عنصر اعمال
بسیاری از شبه لینک در بالا شرح مورد نیاز برای این کار. با این حال، تمام عناصر از نیاز دارند. چند ماده را می توان به هر بخشی از صفحه به طور کامل اعمال می شود.
- : فعال به عناصر سبک که در آن کاربر کلیک دکمه سمت چپ ماوس استفاده می شود؛
- : شناور - CSS یک عنصر که کاربر ماوس از؛
- : تمرکز - برای آن قسمت از صفحه، که در حال حاضر در تمرکز. این شبه کلاس است که اغلب به کار با اشکال استفاده می شود. برای مثال، اگر شما می خواهید برای انتخاب نام کاربری سریع، زمانی که بازدید کننده مجموعه مکاننما را روی آن شروع می شود و شخصیت شماره گیری.
به یاد داشته باشید که: فعال تنها در زمان فشار دادن معتبر است. بلافاصله پس از ختم دکمه سمت چپ ماوس را با کمک از سبک مجموعه ناپدید می شوند و مورد نمایش داده خواهد شد آن را به عنوان به طور پیش فرض نمایش داده شود. در اغلب موارد، این شبه کلاس به کار با دکمه های استفاده می شود. شما می توانید آنها را به تعداد زیادی از کشورهای تعیین شده است. سبز، با فشار دادن - - برای مثال، دکمه پیش فرض آبی، شناور است قرمز، و غیره ...
البته، تنها شبه کلاس ها به طور کامل توسط مرورگرهای مدرن پشتیبانی می شود. برای مثال، در IE6 و 7 نخواهد بود قادر به استفاده از تمرکز و شناور و فعال تنها برای کار مرجع در IE6. امیدوارم، شما نمی خواهد که برای کار با این مرورگر، اما اگر شما هنوز هم نیاز به وجود آمد، استفاده از نظر مشروط.
شبه اضافی
گزینه های ذکر شده در بالا لیست متوقف نمی وجود دارد. (: فعال) و یا فقط برش (: غیر فعال) فقط شامل عناصر را می توان به لطف CSS مدرن بهبود، تنها سوئیچ چک باکس مشخص شده و رادیویی (: بررسی می شود). خلاصه چند گزینه بیشتر است که شما می توانید برای یک کنترل دقیق تر ظاهر محتوا استفاده کنید توصیف می کنند.
- : تنها فرزند - گرگرفتگی امکان اعمال این سبک به عنصر است که تنها عنصر فرزند؛
- : زبان - برای کار با عناصر است که زبان با استفاده از خاصیت lang داده اند.
- : ریشه - مورد استفاده برای انتخاب عنصر ریشه. بنابراین، چنین تگ HTML است ؛
- : - یک ابزار بسیار قدرتمند است. این اجازه می دهد شما را به محدود کردن استفاده از سبک های خاصی از انتخاب. .blue رنگ: نه (طول در اینجا یک مثال است ). یک انتخابگر اعمال کردن استایل به تمام عناصر با کلاس آبی رنگ، در صورتی که در است.
لیست کامل از شبه کلاس ها می توانید در یک صفحه نمی تواند کشیده شده. اکثر طراحان وب در عمل استفاده کنید، تنها برخی از آنها، ترجیح می دهند برای مدیریت شرایط با جاوا اسکریپت. بله، آن راحت است، اما برخی از لحظات که در آن نتایج موثر تر خواهد شد آسان تر به دست آورد، با استفاده از شبه مناسب وجود دارد.
Similar articles
Trending Now