مقالات طراحي سايت

درين نشست از فراگيري مجاني HTML و CSS به سراغ معني شبه كلاس‌ها در CSS مي رويم. شبه كلاس كه به انگليسي به آن Pseudo كلاس گفته ميگردد، طراحي سايت در مشهد  مضمون‌ پيچيده‌اي وجود ندارد البته در پباده سازي صفحه ها اينترنت بسيار كاربردي ميباشد. پس درين نشست هم همپا ادمين‌وبسايت باشيد تا اين مضمون‌ را تماما نظارت كنيم.
معنا شبه كلاس‌ در CSSدر جلسات گذشته گفتيم كه قادر خواهيم بود براي موادسازنده، كلاس تعريف‌و‌تمجيد كنيم و به امداد يك (.) آنها‌را در CSS با اسم كلاس گزينش كنيم. به عنوان مثال box. همگي عناصري كه دارنده كلاس box‌ مي‌باشند را گزينش مي‌نمايد.
معني شبه كلاس مانند كلاس وجود ندارد كه بخواهيم براي هر عنصر آن را تعريف و تمجيد كنيم. شبه كلاس‌ها در CSS ياري مي‌نمايند موقعيت خاصي از يك عنصر را گزينش كنيم. يا اين كه يك عنصر را در حالت مشخصي تعيين كنيم.
مثلا فرض نماييد در يك ليست مي خواهيم موادتشكيل دهنده ليست را گزينش كنيم. به ياري li قادر خواهيم بود همگي عنصرها ليست را تعيين كنيم، ولي در صورتي‌كه تنها مقصود ما تعيين اولي عضو ليست باشد چه؟ آن‌گاه از شبه كلاس استعمال ميكنيم:

123li:first-child {    background: red;}شبه كلاس first-child: تنها li اي را تعيين مي‌نمايد كه عضو نخستين ميباشد. در شرايطي‌كه از دو نقطه اولِ آن متعجب گرديده‌ايد بهتر ميباشد به سراغ تحليل ساختار و نحو آن‌ها برويم.
نحو (Syntax) شبه كلاس‌ها در CSS
123selector:pseudo-class {  property: value;}كافيست نخست يك عنصر را با هر روشي كه مي دانيد گزينش نماييد آن گاه به امداد آرم : از يك شبه‌كلاس براي معين كردن شرايط خاص آن عنصر ياري بگيريد. منظورم از موقعيت خاص يكي‌از موردها پايين ميباشد:
تعيين يك عنصر كه ماوس روي آن قرار گرفتهگزينش لينكي كه به وسيله مخاطب كليك گرديدهتعيين فرزند چندم از يك والدو….
مهم ترين Pseudo كلاس‌هادر صورتي‌كه تا به اينجا مقداري سردرگم ميباشيد و مي پنداريد چيزي متوجه نشده‌ايد تماماً طبيعي ميباشد!! يك‌سري قسمت بعدي زمينه را به نيكي برايتان جا مي‌اندازد!
شبه كلاس براي تكان ماوسميخواهيم هنگامي كه مخاطب موشواره را روس عنصر خاصي قرار اعطا كرد، آن عنصر يك استايل نو داشته باشد. براي مثال كد پايين منجر ميگردد رنگ پس‌مسئله تگ a پس از قرار دريافت كردن موشواره، رنگ آن به آبي‌رنگ تيره‌خيس تغيير و تحول ‌نمايد.

123a:hover {  background-color: #138496;}براي مشاهده فيض ماوس خويش را روي دكمه مقابل قرار دهيد.
شبه كلاس hover
معلوم كردن اولي عنصر والد
123div span:first-child {    color: blue;}عضو اوليه عضو دوم عضو سوم
همانگونه كه مشاهده ميكنيد، عضو اوليه تعيين و رنگ دلخواه به آن داده شد.

بقيه شبه كلاس‌هادوستان عزيز ميتوانيد هر مورد از كانال‌ كلاس‌هاي پايين را در CSS تست نماييد تا با معنا ظريف‌خيس آن آشنا گرديد.
شبه كلاس مثال كاربردactive a:active گزينش پيوند فعال (لحظه كليك ماوس روي لينك و پيوند)link a:link تعيين لينك و پيوند‌هايي كه هنوز كليك نشده‌اند.visited a:visited تعيين پيوند‌هايي كه از روي آن ها كليك گرديده (چشم گرديده)empty p:empty گزينش عنصري كه هيچ فرزندي ندارد.last-child li:last-child تعيين فرزند پايان يك تگ()not ( p )not: گزينش نكردن اين عنصر، در نمونه تعيين كليه موادسازنده جز p()nth-child (2n)nth-child تعيين فرزندان معين يك تگ، در نمونه فرزندان زوجfirst-of-type p:first-of-type تعيين اولي عنصر نوع خاص در والد، مثال:گزينش اولي p در والدlast-of-type p:last-of-type گزينش نهايي عنصر نوع خاص در والد، نمونه: گزينش آخري p والدchecked input:checked تعيين عنصري كه تيك خورده (در گردهمايي فرم‌ها به آن مي پردازيم)focus input:focus تعيين فيلدي كه ماوس روي آن فوكوس كرده (گرد هم آيي فرم‌ها)تمرين: براي اينكه مطمئن گرديد كه مطالب فوق را به نيكي آموخته‌ايد، به پرسش ذيل جواب دهيد.در جدول بالا برخي از سطرها رنگ گرديده‌اند. در CSS اين سطرها چه‌گونه تعيين گرديده‌اند؟ در كامنت اسم شبه‌كلاس مربوطه را بنويسيد.