خواندن ۱۲ دقیقه·۵ سال پیش

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 ها در زبان HTML

CSS زبانی برای استایل دهی به صفحاتی است که بر پایه 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 ب.ظ

ARiyou Jahan

شاید از این پست‌ها خوشتان بیاید

14 - Basic CSS Selectors

آشنایی با style ها در زبان HTML

منطق کدهای CSS

ویژگی ها و چهره ی یک عنصر

به عبارت دیگر :

ساختار یک Style

انواع selector در CSS

عناصر

کلاس ها

یه مثال دیگه:

آیدی­ ها

انتخاب کننده ی id

انتخابگر کلی

انتخابگر های گروهی

مباحث پیشرفته تر برای علاقه مندان :

انتخاب عناصر فرزند

مثال های پیشرفته تر

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

آیدی ها