14 - Basic CSS Selectors

به نام ایزد دانادر این پست آموزشی در مورد انواع انتخاب گرهای ساده صحبت خواهیم کرد.یک style در CSS شامل یک انتخاب کننده (selector) و بلاکی است که اعلان (declaration) در آن قرار میگیرد. در این فصل با نحوه ی تعریف کد های CSS و چگونگی انتخاب عناصر HTML جهت اعمال استایل روی آنها آشنا خواهیم شد.من برای این پست مطالب رو از سایت learn source , mizfa انتخاب کردم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000<br/>با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبآشنایی با style ها در زبان HTMLCSS زبانی برای استایل دهی به صفحاتی است که بر پایه HTML طراحی شده است. درحالی که HTML ساختار صفحه را فراهم می آورد، CSS با تعامل با مرورگر باعث به وجود آمدن ظاهر مناسب برای HTML در صفحه نمایش میشود.برای مثال ممکن است شما از HTML برای تبدیل یک عبارت به یک سرتیتر سطح بالا استفاده کنید و از CSS برای استایل دهی به آن سرتیتر. مثلا این سرتیتر باید بزرگ، به رنگ قرمز و در مکانی باشد که به اندازه ی 50 پیکسل از گوشه ی سمت چپ مرورگر فاصله داشته باشد. در CSS به قوانینی که ظاهر یک قسمت مشخص از صفحه را تعیین میکنند style میگویند و به مجموعه ای از style ها style sheet گفته میشود.شما میتوانید style ها را برای کار با هر تگ HTML ایی ایجاد کنید، برای مثال شما میتوانید استایل هایی ایجاد کنید که تصاویر در صفحه را فرمت بندی کنند. برای نمونه یک استایل میتواند یک تصویر را نسبت به دیگر عناصر ترازبندی کند، یک بوردر رنگی در اطراف تصویر ایجاد کند و فاصله ای به اندازه ی 50 پیکسل بین تصویر و دیگر عناصر موجود در صفحه تدارک ببیند.مرورگر استایل هایی را که شما ایجاد کرده اید بر روی متون، تصاویر، هیدینگ ها و دیگر عناصر صفحه اعمال میکند. برای مثال شما میتوانید استایلی ایجاد کنید که روی یک پاراگراف مشخص در یک صفحه اعمال شود و فورا سایز متن، رنگ و فوت آن را تغییر دهد. شما میتوانید استایل هایی را ایجاد کنید که روی تگ های خاصی از HTML اعمال میشود برای مثال مرورگر تگ های <h1> در صفحه شما را به یک شکل نشان میدهد و اهمیتی ندارد که این تگ ها در کجای صفحه قرار داشته باشند و حتی شما میتوانید استایلی تعریف کنید که تنها روی یک تگ خاصی اعمال شود که قبلا به طریقی در HTML نشانه گذاری شده است.حتی پیچیده ترین و زیبا ترین وب سایت ها هم مانند آن چیزی که در شکل زیر مشاهده میکنید با یک استایل CSS شروع شده اند. با اضافه کردن استایل ها به صفحات وب میتوانید صفحاتی را ایجاد کنید که موجب شگفتی کاربرانتان شود. چه در کار کردن با CSS یک حرفه ای باشید و یا یک تازه کار، نیاز است یک سری قوانینی را در مورد چگونگی ایجاد style ها و style sheet ها رعایت کنید. در این فصل به این قوانین خواهیم پرداخت.منطق کدهای CSSقبل از هرچیزی، باید منطق استفاده از دستورات CSS رو متوجه بشیم. منطقش بسیار سادست. با یک سوال بیاین شروع کنیم:چطور یک انسان رو توصیف می‌کنیم؟خب مثلا یک دوستی مثل بهرام، بینی قشنگی داره! چطور این موضوع رو توصیف می‌کنیم؟ مسلما با جمله ی زیر:بهرام، بینی قشنگی دارهطبق فرم کلی‌ای که برای ساختار کدهای CSS گفته شد، می‌تونیم جمله ی بالا رو به این فرم بنویسیم:Bahram{ nose: beautiful; }در اینجا، کلمه “Bahram” یک انتخابگر یا selector هست. چون میگه ویژگی ها متعلق به چه کسی یا چیزی هستن.کلمه “nose” یک ویژگی یا property از بهرام هست. یعنی شکل بینی بهرام.و در نهایت کلمه “beautiful” یک مقدار یا value برای بینی بهرام هست. مقداری که میتونه کلمات زیبا، نازیبا و غیره رو در به داشته باشه.در CSS هم دقیقا با اینطور منطقی، چه بسا ساده تر، سر و کار داریم! مراحل کار به شکل زیره:یک عنصر از صفحه رو انتخاب کن.ویژگی عنصر رو (قیافه اون رو! ) با مقادیر مختلف تغییر بده.مرحله اول با استفاده از انتخابگر ها انجام می‌گیره. برای مثال، در کد زیر، ما عناصر h1 رو در صفحه انتخاب می‌کنیم و چهره مورد نظرمون رو در {…} وارد می‌کنیم. عنصر متناسب با اطلاعات نوشته شده توسط ما، تغییر می‌کنه.h1{ … }حالا انتخابگر ها، فقط نام عناصر نیستن، بلکه می‌تونن انواع مختلفی داشته باشن.ویژگی ها و چهره ی یک عنصرحالا میون {…} چی باید قرار بدیم؟ چطور چهره ی عنصر رو مشخص کنیم؟ بسیار سادست، ما در CSS ویژگی ها و به تناسب با اون ویژگی ها، مقادیر مختلفی داریم. برای مثال، میخوایم رنگ عنصر h1 که انتخاب کردیم، قرمز باشه:h1 { color : red ; }این کد بیان می­کنه، رنگ تمام متن­هایی که داخلh1ها هستن، به رنگ قرمز تغییر کنه.حالا سه نکته رو با هم بررسی کنیم:۱. ما می­‌تونیم به هرتعداد که می­خوایم، به انتخابگر ویژگی اختصاص بدیم:h1 { color: red ; font-size: 10px ; text-align: center ; }۲. عموما برای راحتی کدنویسی، بهتر هست که کدها رو در خطوط جداگانه بنویسیم، یعنی:h1{ color: red; font-size: 10px; text-align: center; }۳. یک عنصر، نمی­تونه ویژگی تکراری داشته باشه، برای مثال، کد زیر اشتباهه:div { color: blue; color: black; }حالا چند مثال رو با هم بررسی کنیم:p { color: black; background-color: blue; }تمام پاراگراف ­ها در صفحه، به رنگ مشکی ظاهر بشن و رنگ پس‌­زمینه اون ­ها، آبی باشه.span { font-family: IranSansWeb; opacity: 0.8; }عناصر span در صفحه، دارای فونت IranSansWeb و شفافیت 0.8 باشند.به عبارت دیگر :ساختار یک Styleیک استایل به تنهایی ظاهر یک عنصر در یک صفحه را مشخص میکند. به عبارتی دیگر یک استایل دستورالعملی است که به مرورگر میگوید چطور عنصری در صفحه را فرمت بندی کند برای مثال رنگ یک عنصر هیدینگ را به آبی تغییر دهد، یک بورد قرمز اطراف یک تصویر ایجاد کند و یا ساید باری به عرض 150 پیکسل برای نگهداری لینک ها ایجاد کند. اگر یک استایل میتوانست صحبت کند حتما چیزی شبیه به این میگفت : "آهای مرورگر این را شبیه آن بکن".در واقع یک استایل از دو قسمت تشکیل شده است : عنصری در صفحه که قصد اعمال فرمتی جدید را روی آن داریم که به آن selector یا انتخاب کننده میگویند و دستورالعمل هایی که نحوه ی فرمت بندی را مشخص میکند که declaration block یا بلاک اعلان نام دارد. برای مثال یک selector میتواند یک عنصر هیدینگ ، پاراگرافی از متن، یک تصویر و ... باشد و بلاک اعلان میتواند شامل قوانینی مانند تغییر رنگ هیدینگ به آبی، اضافه شدن یک بوردر قرمز رنگ اطراف پاراگراف، قرار دادن تصویر در وسط صفحه و ... باشد.یک style در CSS شامل یک انتخاب کننده (selector) و بلاکی است که اعلان (declaration) در آن قرار میگیرد :selector به عنصری از HTML اشاره دارد که قصد داریم استایل را روی آن اعمال کنیم.بلاک اعلان خود شامل یک یا چندین تعریف است که با استفاده از علامت نقطه ویرگول (;) از هم جدا شده اند.تعریف ها خود شامل نام صفت CSS و مقدار آن هستند که توسط یک علامت دو نقطه (:) از هم جدا شده اند.تعریف ها در CSS همیشه با علامت نقطه ویرگول (;) خاتمه پیدا میکنند و بلاک اعلان همیشه توسط یک جفت بریس ({ }) احاطه شده است.نمونه مثال زیر کدی را نشان میدهد که تمام عناصر <p> در صفحه ی HTML را وسط چین کرده و رنگ آنها را به قرمز تغییر میدهد :p { color: red; text-align: center; }خودتان امتحان کنیدانواع selector در CSSعناصرکلاس هاآیدی هاانتخابگر کلیانتخاب‌کننده‌های گروهی ( در جلسات آینده یاد خواهیم گرفت )انتخاب‌کننده‌های پیشرفته ( در جلسات آینده یاد خواهیم گرفت )عناصرتا اینجا یاد گرفتیم که می­‌تونیم نام خود عناصر رو به جای selector یا انتخابگر قرار داده و توسط دستورات اون­‌ها رو تغییر بدیم. مانند:p { text-align: center; color: red; }خودتان امتحان کنیدبحث جدیدی که در مورد نه تنها عناصر، بلکه به­‌طور کلی در مورد انتخابگر­‌ها باید یاد بگیریم، بحث روابط ” فرزندی و خانوادگی ” هست!برای یادگیری این بحث، نیازمند تسلط کافی و مناسب در HTML هستیم. همون­طور که می‌­دونیم، کدهای HTML با هم دارای رابطه فرزند و خانواده هستن. نکته این هست:” اگر به عنصری،یک سری دستورات CSS اعمال شود، به فرزندان آن عنصر هم همان دستورات CSS اعمال می­‌شود “کد زیر رو در نظر بگیرید.<div> <p> mizfa css </p> <p> mizfa html </p> <p> mizfa javascript </p> </div>همونطور که مشاهده می­شه، عناصر p، فرزند عنصر div به حساب میان. فرض کنیم کد CSS ما به شکل زیر باشه:div { color: blue; }نتیجه به فرم زیر خواهد بود:از تکنیک فرزند خانواده در CSS، در آینده به وفور استفاده می‌کنید.حالا سوالی که پیش میاد این هست: اگه ما ۵ پاراگراف داشته باشیم و فقط بخوایم به پاراگراف اول و سوم، رنگ قرمز رو اضافه کنیم، از چه کدی باید استفاده کنیم؟این مشکل، با کلاس‌­ها رفع می­شه!کلاس هاکلاس­ ها زمانی به کار میرن که بخوایم به عناصر معدودی، دستورات CSS رو مرتبط کنیم. روش استفاده از کلاس ها به ترتیب زیر هست:در فایل HTML یک کلاس با نام دلخواه، برای عناصر موردنظر، تعریف می­‌کنیم.در فایل CSS، قبل از نام کلاس یک نقطه ” . ” گذاشته و خصوصیات رو برای اون می­‌نویسیم.برای مثال:کد در فایل HTML<p class=&quotclass-name&quot> mizfa css classes </p>کد در فایل CSS.class-name{ color: yellow; }خصوصیات ذکر شده در کد CSS تنها به عناصری اعمال می­‌شن که کلاس “class-name” رو دارا هستن.یه مثال دیگه:فایل HTML:<ul> <li class=”special”>Link1 </li> <li>Link2 </li> <li class=”special”>Link3 </li> <li>Link4 </li> <li class=”special”>Link5 </li> </ul>فایل CSS:.special { background-color: yellow ; }انتخاب کننده ی class عناصری را انتخاب میکند که دارای صفت class خاصی باشند.برای انتخاب عناصری با یک class خاص، در ابتدای selector ، کاراکتر نقطه (.) را قرار داده و به دنبال آن، مقدار class را مینویسیم.در نمونه مثال زیر تمام عناصری که دارای مقدار "class="center باشند، راست چین شده و مقدار رنگ آنها به قرمز تغییر خواهد کرد..center { text-align: center; color: red; }خودتان امتحان کنیدهمان طوری که در مثال زیر نشان داده شده است میتوان دایره انتخاب selector را به یک نوع عنصر محدود کرد.در مثال زیر تنها عناصر پاراگرافی (<p>) که دارای مقدار "class="center باشند راست چین شده و رنگ قرمز روی آنها اعمال میشود.p.center { text-align: center; color: red; }خودتان امتحان کنیدعناصر HTML میتوانند چندین مقدار برای صفت class داشته باشند.در نمونه مثال زیر عنصر پاراگراف دارای دو مقدار center و large برای صفت class است که هر کدام میتوانند استایل جداگانه ای در CSS داشته باشند.<p class=&quotcenter large&quot>This paragraph refers to two classes.</p>خودتان امتحان کنیدتا اینجا این کار رو برای چند عنصر خاص هم یاد گیرفتیم. ما اگه یه عنصر خاص بود چی؟آیدی­ هانحوه­‌ی استفاده از آیدی­‌ها در HTML و CSS به فرم زیر هست:در فایل HTML، برای عنصر موردنظر یک آیدی دلخواه انتخاب می­ کنیم.در فایل CSS، قبل از نام آیدی، هشتگ ( # ) قرار داده و ویژگی­‌ها رو برای عنصر مورد نظر تعریف می­‌کنیم.مثال:کد HTML:<h1 id=” id-name “>Mizfa Id tutorial</h1>کد CSS:#id-name{ color: yellow; }تقریبا می­شه گفت که آیدی­‌ها شباهت بسیاری به کلاس­‌ها دارن. اما تفاوت­‌های مهمی هم دارن که اون هارو در جلسه آینده بررسی می‌کنیم.انتخاب کننده ی idانتخاب کننده ی id ، از صفت id عنصر HTML جهت پیدا کردن یک عنصر منحصر به فرد استفاده میکند.مقدار id یک عنصر در صفحه باید منحصر به فرد بوده و به همین دلیل انتخاب کننده ی id نیز یک عنصر منحصر به فرد را انتخاب میکند.برای انتخاب یک عنصر با یک id خاص ، در ابتدای selector ، کاراکتر (#) را قرار داده و به دنبال آن، id عنصر را مینویسیم.نمونه کد زیر فقط به عنصری با شناسه "id="para1 اعمال میشود.#para1 { text-align: center; color: red; }خودتان امتحان کنیدانتخابگر کلیانتخابگر کلی، انتخابگری هست که می‌تونه تمام عناصر موجود در صفحه رو با یک ویژگی معین تغییر بده. این انتخابگر با علامت * مشخص می‌شه.به طور مثال در کد زیر، ما می‌گیم که فونت تمام نوشته های درون صفحه، باید b nazanin باشه:*{ font-family: b nazanin; }انتخابگر های گروهیفرض کنیم تعدادی عنصر داریم و می‌­خوایم به تمام اون­ ها دستورات یکسانی رو نسبت بدیم. مسلما اولین کدی که به ذهن ما می­رسه، شکلی شبیه به کد زیر داره:فایل HTML:<div> ... </div> <p> ... </p> <h3> ... </h3>فایل CSS:div{ font-size: 20px; } p{ font-size: 20px; } h3{ font-size: 20px; }برای سبک شدن کارمون، کافیه کدها را به وسیله کاما “ , “ به صورت یک گروه نوشت. کاما در اینجا حکم ” و ” رو داشته و ویژگی­ هارو به عناصر ذکر شده نسبت می­ده.div , h3 , p{ font-size: 20px; }مفهوم کد­، می­گه: ” عنصر div و h3 و p را بگیر و ویژگی­ هارو به آن­ها نسبت بده “.به طور خلاصه تر:اگر شما عناصری داشته باشید که استایل یکسانی داشته باشند همانند مثال زیر :h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }بهتر است برای صرفه جویی در نوشتن کد از selector های گروهی استفاده کنید.کد بالا را میتوان توسط انتخاب کننده های گروهی به شکل زیر باز نویسی کرد. در این روش انتخاب کننده های توسط علامت ویرگول (,) از هم جدا میشوند :h1, h2, p { text-align: center; color: red; }خودتان امتحان کنیدمباحث پیشرفته تر برای علاقه مندان :انتخاب عناصر فرزندفرض کنیم کد ما دارای تعدادی عنصر p در داخل عناصر دیگه هست.<div> <p> … </p> <p> … </p> </div> <span> <p> … </p> <p> … </p> </span>حالا می­خوایم عناصر p داخل عنصر span رو انتخاب کنیم. کافیه بنویسیم:span p{ … }مفهوم کد می­گه: ” به داخل span برو، عنصر p را پیدا کن و ویژگی­ ها رو به آن نسبت بده “.نکته این روش، در این هست، انتخاب­گر ­هایی که بین خودشون علامتی ندارن، ارتباط فرزند و خانواده با هم دیگه برقرار می­‌کنن.مثال های پیشرفته ترdiv , .right , #iran{ font-size: 30px; }مفهوم کد: عنصر div، عناصر با کلاس right و عناصر با آیدی iran رو پیدا کن و سایز فونت اون­ها رو به 30 پیکسل تغییر بده.div ul li{ color: red; }مفهوم کد: داخل عنصر div شو، سپس داخل عنصر ul شو، عنصر li رو پیدا کن و رنگ متن اون رو به قرمز تغییر بده.div.first p , div .first p{ background-color: blue; }مفهوم کد: عنصر div با کلاس first رو پیدا کن و p داخل اون رو انتخاب کن. همزمان تمام div های دیگه رو پیدا کن، هر عنصری داخل اون ها با کلاس first رو پیدا کن و داخل اون ها p رو پیدا کن. سپس به این 2 عنصر p انتخاب شده، رنگ پس زمینه آبی رو اختصاص بده.این مبحث هم به پایان رسید. اگه به توضیح بیشتر نیاز داشتید بهم اطلاع بدید.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ