آموزش مقدماتی HTML و CSS (جلسه 5: آشنایی با CSS – بخش ۱)
1398/02/11 17:35 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه 5: آشنایی با CSS – بخش ۱)

در دو جلسه قبل تقریباً با تمام اصول اولیه و اساسی HTML آشنا شدیم. حالا نوبت به CSS می‌رسد.

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

CSS یک زبان پیچیده است که قدرت خیلی زیادی دارد.

این زبان به ما امکان می‌دهد تا layout و طراحی به صفحاتمان اضافه کنیم و به ما اجازه می‌دهد تا است ایل‌ها را از یک عنصر برای یک عنصر دیگر و از یک صفحه برای یک صفحه دیگر به اشتراک بگذاریم. قبل از اینکه بتوانیم تمام ویژگی‌های CSS را بیاموزیم، ابتدا چند جنبه از این زبان وجود دارند که باید کاملاً آن‌ها را درک کنیم.

ابتدا، ضروری است که دقیقه بدانیم است ایل‌ها چگونه بندر می‌شوند. مخصوصاً، باید بدانیم که چگونه انواع مختلف selectorها کار می‌کنند و چگونه ترتیب آن Selectorها می‌تواند بر نحوه بندر شدن است ایل‌ها تأثیر بگذارد.

همچنین باید چند مقدار property مرسوم را که دائماً در کدهای CSS ظاهر می‌شوند را نیز بشناسیم، به خصوص آن‌هایی که مرتبط با رنگ و طول هستند.

اجازه دهید تمام این موارد CSS را دقیق‌تر بررسی کنیم تا خوب متوجه شویم که CSS چه کاری انجام می‌دهد.

Cascade

با بررسی این موضوع که cascade دقیقه چیست و مطالعه چند مثال از cascade، تجزیه و بررسی چگونگی بندر شدن است ایل‌ها را شروع می‌کنیم. درون CSS، همه است ایل‌ها از بالای style sheet به سمت پایین cascade می‌شوند. در نتیجه همین‌طور که style sheet پردازش می‌شود، استایل‌های مختلف اضافه یا بازنویسی می‌شوند.

برای مثال، فرض کنید تمام عنصرهای پاراگراف در بالای style sheet را انتخاب می‌کنیم و رنگ پشت زمینه آن‌ها را orange و سایز فونت آن‌ها را ۲۴ پیکسل تنظیم می‌کنیم. سپس به پایین style sheet می‌رویم، دوباره همه عنصرهای پاراگراف را انتخاب و رنگ پشت زمینه آن‌ها را green تنظیم می‌کنیم، که در کد زیر چگونگی انجام آن را مشاهده می‌کنید.

p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

چون selector پاراگراف که رنگ پشت زمینه را Green تنظیم کرده است، بعد از selector پاراگرافی آمده است که رنگ پشت زمینه را orange قرار داده، پس در cascade اولویت بالاتری می‌گیرد.

پس همه پاراگراف‌ها با پشت زمینه سبز ظاهر می‌شوند. سایز فونت هم همان ۲۴ پیکسل باقی می‌ماند، چون دومین selector پاراگراف هیچ سایز فونت جدیدی مشخص نکرد.

ویژگی‌های Cascading

Cascade همچنین با ویژگی‌های درون هر کدام از selectorها نیز کار می‌کند. برای مثال، دوباره فرض کنید که همه عنصرهای پاراگراف را انتخاب و رنگ پشت زمینه آن‌ها را orange قرار می‌دهیم.

سپس دقیقا در زیر ویژگی پشت زمینه orange و تعریف مقدار، ما یک ویژگی و تعریف مقدار دیگر اضافه می‌کنیم که رنگ پشت زمینه را به سبز تغییر می‌دهد و در کد زیر آن را مشاهده می‌کنید.

p {
  background: orange;
  background: green;
}

چون تعریف رنگ پشت زمینه green بعد از تعریف رنگ پشت زمینه green آمده است، پس نسبت به پشت زمینه orange ارجحیت می‌یابد و همانند دفعه قبل، پاراگراف‌های ما با پشت زمینه سبز ظاهر می‌شوند.

همه است ایل‌ها از بالای style sheet به سمت پایین آن Cascade می‌شوند. به هر حال، گاهی اوقات Cascade به این خوبی عمل نمی‌کند. این اوقات زمانی اتفاق می‌افتند که انواع مختلف selectorها مورد استفاده قرار گرفته باشند و برخی از انواع خاص آن Selectorها، ترتیب و نظم cascade را از بین می‌برند.

اجازه دهید دقیق‌تر بررسی کنیم.

محاسبه وزن‌های خاص

هر selector در CSS دارای یک وزن خاص است. یک وزن خاص از Selector همراه با جایگاهش در Cascade، مشخص می‌کند که استایل‌هایش چگونه بندر می‌شوند.

در جلسه دوم در مورد سه نوع مختلف selectorها صحبت کردیم: نوع، کلاس و ID. هر کدام از این selectorها دارای یک وزن خاص متفاوت است.

Selector نوع دارای کمترین میزان وزن خالص است و ارزش امتیاز 0-0-1 دارد. کلاس Selector دارای وزن خاص متوسط است و ارزش امتیاز 0-1-0 دارد. در آخر، ID Selector دارای بیشترین وزن خاص است و ارزش امتیاز  1-0-0 دارد. همان‌طور که مشاهده می‌کنید، امتیازهای خاص با استفاده از سه ستون محاسبه می‌شوند.

اولین ستون ID Selectorها را می‌شمارد، دومین ستون کلاس Selectorها را می‌شمارد و سومین ستون Selectorهای نوع را شمارش می‌کند.

چیزی که در اینجا مهم است و باید به آن توجه کنید این است که ID Selector دارای وزن خاص بیشتری نسبت به کلاس Selector است و کلاس Selector دارای وزن خاص بیشتری نسبت به Selector نوع دارد.

امتیازهای خاص

امتیازهای خاص از عمد با خط تیره از هم جدا شده‌اند، چون ارزش و مقادیر آن‌ها از ۱۰ محاسبه نمی‌شود. کلاس selectorها دارای ارزش امتیاز ۱۰ نیستند یا ID selectorها دارای ارزش امتیاز ۱۰۰ نیستند.

در عوض، این امتیازها باید به صورت 0-1-0 و 1-0-0 خوانده شوند. وقتی selectorها را با هم ترکیب کردیم، دقیق‌تر بررسی می‌کنیم که چرا این ارزش امتیازها با خط تیره از هم جدا شده‌اند.

هر چه وزن خاص یک selector بیشتر باشد، در زمان اعمال استایل نیز اولویت بیشتری خواهد داشت.

برای مثال، اگر یک عنصر پاراگراف در یک محل با استفاده از selector نوع انتخاب شده باشد و در جای دیگری با استفاده از یک ID selector انتخاب شده باشد، آنگاه ID selector نسبت به selector نوع اولویت بیشتری می‌یابد (مهم نیست ID selector در کجای cascade قرار بگیرد).

HTML

<p id="food">...</p>

CSS

#food {
  background: green;
}
p {
  background: orange;
}

در اینجا یک عنصر پاراگراف با یک مقدار اتریبیوت id برای food داریم. درون فایل CSS، آن پاراگراف توسط دو نوع selector مختلف انتخاب شده است: یک selector نوع و یک ID selector.

اگرچه selector نوع بعد از ID selector قرار گرفته است (در cascade)، اما ID selector نسبت به selector نوع اولویت دارد، چون دارای وزن خاص بیشتری است. در نتیجه، پاراگراف با پشت زمینه سبز ظاهر می‌شود.

به خاطر سپردن وزن‌های خاص از نوع‌های مختلف selector بسیار مهم است. گاهی اوقات است ایل‌ها آن‌طور که انتظار می‌رود روی عنصرها اعمال نمی‌شوند، در چنین مواقعی به احتمال زیاد وزن‌های خاص بعضی از selectorها باعث شکسته شدن ترتیب Cascade می‌شوند، در نتیجه است ایل‌ها به صورت مناسب و صحیح اعمال نمی‌شوند.

درک چگونگی عملکرد cascade و وزن خاص یک مزیت بزرگ است و ما باز هم در مورد این موضوع صحبت خواهیم کرد. فعلاً، اجازه دهید بررسی کنیم که چگونه می‌توانیم با ترکیب کردن selectorها، دقیق‌تر و هدفمندتر عمل کنیم. به خاطر داشته باشید که وقتی selectorها را ترکیب می‌کنیم، می‌توانیم وزن خاص آن‌ها را تغییر دهیم.

ترکیب selectorها

تا اینجای کار، هر کدام از selectorها را به صورت تکی و انفرادی بررسی کردیم، اما همچنین باید بدانید که چگونه می‌توان از این selectorها در کنار یکدیگر استفاده کرد. با ترکیب selectorها می‌توانیم در انتخاب عنصر یا گروه عنصرهای مورد نظرمان، دقیق‌تر و هدفمند عمل کنیم.

برای مثال، فرض کنید می‌خواهیم تمام عنصرهای پاراگرافی که درون یک عنصر دارای اتریبیوت کلاس با مقدار hotdog قرار دارند را انتخاب کنیم و رنگ پشت زمینه آن‌ها را brown انتخاب کنیم.

به هر حال، اگر یکی از این پاراگراف‌ها بر حسب اتفاق دارای اتریبیوت کلاس با مقدار mustard باشد، می‌خواهیم رنگ پشت زمینه آن را yellow تنظیم کنیم. فایل‌های HTML و CSS مشابه کدهای زیر خواهند شد:

HTML

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

CSS

.hotdog p {
  background: brown;
}
.hotdog p.mustard {
  background: yellow;
}

وقتی selectorها با هم ترکیب می‌شوند، باید از راست به چپ خوانده شوند. Selector که در سمت راست و دقیقه قبل از آکولاد باز قرار دارد، به عنوان selector کلیدی شناخته می‌شود. Selector کلیدی مشخص می‌کند که است ایل‌ها دقیقه روی کدام عنصر اعمال می‌شوند.

هر selector که در سمت چپ selector کلیدی قرار گرفته باشد، به عنوان prequalifier (از پیش تعریف شده)عمل می‌کند.

اولین selector ترکیب شده در بالا (یعنی hotdog p.) شامل دو selector است: یک کلاس selector و یک selector نوع. این دو selector با یک Space از هم مجزا شده‌اند. Selector کلیدی یک selector نوع است که عنصرهای پاراگراف را هدف قرار می‌دهد.

و چون این selector نوع با یک selector  کلاس hotdog از پیش تعریف شده است(prequalified شده است)، کل selector ترکیبی فقط عنصرهای پاراگرافی که درون یک عنصر قرار دارند و دارای اتریبیوت کلاس با مقدار hotdog هستند را انتخاب می‌کند.

دومین selector کد بالا (یعنی hotdog p.mustartd.، شامل سه selector است: دو کلاس selector و یک selector نوع. تنها تفاوت بین دومین selector و اولین selector، اضافه شدن یک selector کلاس  mustard به آخر selector نوع پاراگراف است.

چون کلاس selector جدید (mustard) در سمت راست selector ترکیبی قرار گرفته است، پس selector کلیدی است و تمام selectorهایی که قبل از آن آمده‌اند، prequalifier هستند.

Spaceهای میان selectorها

در selector ترکیبی قبلی (hotdog p.mustard.) یک space بین selector  کلاس hotdog و selector نوع پاراگراف (p) وجود دارد، اما بین selector نوع پاراگراف و selector  کلاس mustard وجود ندارد. بودن یا نبودن Spaceها تفاوت بزرگی در selectorها ایجاد می‌کنند.

چون بین selector نوع پاراگراف و  selector کلاس  mustard هیچ space وجود ندارد، پس selector فقط عنصرهای پاراگراف دارای کلاس mustard را انتخاب می‌کند. اگر selector نوع پاراگراف حذف شده باشد و selector کلاس mustard در هر دو طرفش Space داشته باشد، آنگاه هر عنصری که دارای کلاس mustard است انتخاب می‌شد، نه فقط پاراگراف‌ها.

بهترین کار این است که هیچ‌وقت یک selector نوع را به عنوان پیشوند برای یک selector کلاس به کار نبریم. در کل ما می‌خواهیم هر عنصر دارای یک کلاس خاص را انتخاب کنیم، نه فقط یک نوع عنصر را. همچنین بهتر است selector ترکیبی جدید نیز به شکل hotdog .mustard. باشد.

چون selector ترکیبی از راست به چپ خوانده می‌شود، پس پاراگراف‌هایی که دارای اتریبیوت کلاس با مقدار mustard هستند و درون یک عنصر با اتریبیوت کلاس با مقدار hotdog قرار دارند را هدف قرار می‌دهد.

می‌توانیم انواع مختلفی از selectorها را با هم ترکیب کنیم تا هر گونه عنصر را در یک صفحه هدف قرار دهند. در آینده وقتی selectorهای ترکیبی مختلف بیشتری نوشتیم،  قدرت‌ آن‌ها را به خوبی درک خواهید کرد. قبل از اینکه این کار را انجام دهیم، اجازه دهید بررسی کنیم که ترکیب selectorها چگونه وزن خاص یک selector را تغییر می‌دهد.

وزن خاص درون selectorهای ترکیبی

وقتی selectorها ترکیب می‌شوند، وزن‌های خاص هر کدام از آن selectorها نیز با هم ترکیب می‌شوند. برای محاسبه وزن‌های خاص ترکیب شده می‌توانیم هر کدام از انواع مختلف selector که در یک selector ترکیبی به کار رفته‌اند را شمارش کنیم.

در selectorهای ترکیبی قبلی، اولین selector (یعنی hotdog p.) هم دارای selector کلاس و هم selector نوع بود. با دانستن ارزش امتیاز یک selector کلاس که برابر با 0-1-0 است و ارزش امتیاز selector نوع که برابر با 0-0-1 است، کل ارزش امتیاز ترکیبی برابر با 0-1-1 خواهد شد که شمارش و جمع کردن هر کدام از selectorها با هم به دست می‌آید.

دومین selector (یعنی hotdog p.mustard.) دو selector کلاس و یک selector نوع داشت. وقت با هم ترکیب شوند، آنگاه selector ترکیبی دارای ارزش امتیاز خاص 0-2-1 است. صفر در اولین ستون به خاطر وجود صفر ID selector است. ۲ در ستون دوم به خاطر وجود دو selector کلاس و ۱ در ستون آخر به خاطر وجود یک selector نوع است.

اگر این دو selector را با هم مقایسه کنیم، selector دوم که دارای دو کلاس بود، وزن خاص بیشتر و در نتیجه ارزش امتیاز بیشتری هم دارد. در نتیجه، درون Cascade اولویت بیشتری خواهد داشت.

حتی اگر ترتیب این selectorها را درون style sheet تغییر دهیم (مثلاً selector با وزن بیشتر را بالاتر از selector با وزن کمتر قرار دهیم، همانند کد زیر)، باز هم ترتیب اعمال است ایل‌ها تغییر نمی‌کند چون اولویت در این مورد بر اساس وزن خاص هر selector تعیین می‌شود.

.hotdog p.mustard {
  background: yellow;
}
.hotdog p {
  background: brown;
}

در کل، ما باید همیشه مراقب وزن‌های خاص selectorهای خود باشیم. هر چه وزن‌های خاص ما افزایش یابند، احتمال break‌ شدن cascade بیشتر می‌شد.

لایه‌بندی کردن است ایل‌ها با چندین کلاس

یک روش برای کم نگه داشتن وزن‌های خاص selectorها، این است که تا حد ممکن modular عمل کنید و استایل‌های مشابه را از یک عنصر برای یک عنصر دیگر به اشتراک بگذارید. یک روش برای modular بودن تا بیشترین حد ممکن، این است که استایل‌های مختلف را با استفاده از چندین کلاس، لایه‌بندی کنید.

عنصرهای داخل HTML می‌توانند بیشتر از یک مقدار کلاس اتریبیوت داشته باشند، البته به شرطی که هر مقدار با Space از هم جدا شده باشند. با این کار، می‌توانیم استایل‌های خاص را روی تمام عنصرهای مشابه (دارای یک نوع) اعمال کنیم، در حالی که استایل‌های دیگر فقط روی بعضی از عنصرهای خاصی که دارای آن نوع هستند، اعمال می‌شوند.

می‌توانیم استایل‌هایی که می‌خواهیم مدام استفاده کنیم را در یک کلاس قرار دهیم و استایل‌های بیشتری که گاهی نیاز داریم را به صورت لایه‌ای از کلاس‌های دیگر بگیریم.

برای مثال کلید‌ها را در نظر بگیرید. فرض کنید می‌خواهیم همه کلیدهایمان دارای سایز فونت ۱۶ پیکسل باشند، اما می‌خواهیم رنگ پشت زمینه کلیدها بسته به محلی که کلید قرار گرفته است، متفاوت باشد. می‌توانیم چند کلاس ایجاد کنیم و آن‌ها را با یک عنصر که برای اعمال استایل‌های مطلوب ضروری است، لایه‌بندی کنیم.

HTML

<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>

CSS

.btn {
  font-size: 16px;
}
.btn-danger {
  background: red;
}
.btn-success {
  background: green;
}

در اینجا می‌توانید دو عنصر anchor را مشاهده کنید که هر دو دارای چند مقدار اتریبیوت کلاس هستند. اولین کلاس (btn)، برای اعمال سایز فونت ۱۶ پیکسل برای همه عنصرها استفاده می‌شود.

سپس، اولین عنصر anchor از یک کلاس اضافی به نام btn-danger برای اعمال رنگ پشت زمینه قرمز استفاده می‌کند، در حالی که دومین عنصر anchor از یک کلاس اضافه به نام btn-success برای اعمال پشت زمینه سبز استفاده می‌کند. استایل‌های ما در اینجا تمیز و modular هستند.

 با استفاده از چندین کلاس، می‌توانیم هر تعداد استایلی که می‌خواهیم را لایه‌بندی کنیم، کدمان را تمیز و مرتب نگه داریم و وزن‌های خاص را نیز کم کنیم. درست همانند درک cascade و محاسبه وزن‌های خالص، این موضوع نیز برای درک کامل به زمان نیاز دارد، اما در جلسات آینده مسلماً بهتر خواهید بود.

خلاصه

در این جلسه با مفهوم cascade، وزن‌های خاص selectorها و محاسبه آن‌ها و همچنین با لایه‌بندی استایل‌ها برای تمیز و مرتب نگه داشتن کد و استفاده از استایل‌های بیشتر آشنا شدید. در جلسه آینده در مورد دیگر ویژگی‌های مرسوم CSS صحبت خواهیم کرد و با اصول ابتدایی CSS نیز کاملاً آشنا خواهید شد.

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات