طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش هشتم

آموزش CSS

درورد بر شما دوستان و همراهان گرامی  سایت سازان. امروز هم با آموزش CSS – بخش هشتم همراه شما عزیزان هستم. در این جلسه آنچه را که خواهید آموخت عبارتند از:

  • Combinators
  • کلاس ساختگی
  • المان ساختی
  • شفافیت

خب دوستان عزیزم، در این جلسه هم با بخش های دیگری از CSS و جذابیت های آن آشنا می شوند و چند ترفند جالب رو هم یاد می گیریم. همراه من باشید.

قبل از هر چیز سراغ Combinator بریم و ببینیم که چی هستن و چه کاربردی دارند؟

Combinator ها در CSS

یک Combinator (که معادل مناسبی در فارسی براش پیدا نکردیم. اگر شما معنی مناسبی در نظر دارید، در قسمت نظرات به ما اطلاع بدین. مرسی) چیزیه که رابطه بین انتخاب کننده ها را توضیح می دهد. رابطه بین انتخاب کننده ها؟ یعنی چی؟ (این ها سوالاتی هستند که در ذهن شماست و من می خوام که به اونا پاسخ بدم.)

خدمت شما عرض شود که انتخاب کننده ها در CSS می توانند چیزی فراتر از یک انتخاب کننده ساده باشند. یعنی انتخاب کننده می تواند چند قسمتی باشد که رابطه ای بین قسمت ها برقرار باشد. این یعنی چی؟

مفهوم این توضیح رو با مطالعه ادامه مطلب خواهید یافت. حضور شما عارضم که در CSS3 تعداد چهار combinator متفاوت داریم که عبارتند از:

  • انتخاب کننده نوادگان
  • انتخاب کننده فرزند
  • انتخاب کننده برادر مجاور
  • انتخاب کننده برادر عمومی

حالا ببینیم که این انتخاب کننده ها چی هستند؟

انتخاب کننده نوادگان

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

در مثال بالا p، فرزند دیو است. برای انتخاب p بدین ترتیب عمل می کنیم که ابتدا div را انتخاب می کنیم و بعد یک بار دکمه فاصله (space) را فشار می دهیم و سپس p را می نویسیم:

از این طریق تمام p هایی که فرزند یا نوه دیو هستند انتخاب می شوند.

المان p می تواند نوه دیو باشد. در این صورت باید درون المان دیگری قرار بگیرد:

در این مثال دیو کلاس d01  پدر دیو کلاس d02 و پدربزرگ <p>  است. همچنین دیو کلاس d02 فرزند و p نوه دیو کلاس d01  هستند.

حال اگر درون p مثلا یک <a>  وجود داشته باشد، دیو کلاس d01 جد <a>  خواهد بود و به همین ترتیب می توان رابطه ها را بین المان های مختلف تعریف کرد.

امیدوارم که متوجه موضوع شده باشید. اگر هم سوالی دارید می توانید از بخش نظرات سوالاتتون رو بپرسید.

انتخاب کننده فرزند

برای انتخاب فرزندان مستقیم یک المان از این انتخاب کننده استفاده می کنیم. برای این کار بین نام عنصر والد و فرزند علامت بزرگتر (>) قرار می دهیم.

انتخاب کننده فرزندان مستقیم div.d01  به صورت زیر خواهد بود:

انتخاب کننده برادر مجاور

المان هایی که پدر مشترک دارند با هم برادر (یا خواهر) هستند. برادر می تواند قبل یا بعد از خود المان باشد.

این انتخاب کننده که علامت (+) می باشد، برادری را که دقیقا بعد از المان مورد نظر قرار دارد را انتخاب می کند. به مثال زیر توجه کنید:

انتخاب کننده زیر پاراگراف پنجم را انتخاب خواهد کرد. چرا که پاراگراف پنجم دقیقا بعد از div.d01  قرار دارد و با هم برادر هستند:

انتخاب کننده برادر عمومی

خب حالا اگر بخواهیم پاراگراف های پنجم و ششم را که با div.d01  هم نژاد هستند (یعنی فرزند <body>  هستند) و بعد از دیو قرار دارند را انتخاب کنیم از انتخاب کننده (~) استفاده می کنیم.

برای انتخاب پاراگراف پنجم و ششم داریم:

خب حالا به سراغ بحث مهم بعدی یعنی کلاس ساختگی (pseudo-class) می رویم.

کلاس های ساختگی در CSS3

برای تعریف حالت خاصی از یک المان از کلاس های ساختگی استفاده می کنیم. حالت خاص یعنی چی؟

مثلا حرکت موس روی المان یک حالت خاص می باشد. زمان کلیک در یک ورودی فرم می تواند یک حالت خاص باشد. که این موارد مثال هایی ساده از حالت المان ها می باشد.

اما ساختار کلاس ساختی به صورت زیر می باشد:

قبلا هم از کلاس ساختگی استفاده کردیم. کجا؟ بله دوستان، در جلسه ششم آموزش CSS برای سبک دهی به حالات مختلف یک لینک از کلاس های مجازی استفاده کردیم. در واقع برای هر حالت یک لینک کلاسی ساختگی تعیین و سپس به آن سبک دهی می کردیم. کلاس هایی که دیدیم عبارتند از:

  • a:link
  • a:visited
  • a:hover
  • a:active

که a انتخاب کننده است و link  و visited  و hover  و active  کلاس هایی ساختگی برای حالات مختلف یک لینک می باشند.

بین کلاس ساختگی و انتخاب کننده، دونقطه (:) قرار می گیرد.

برای هر المان با هر کلاسی، می توان کلاس ساختگی تعریف کرد:

یک مثال را با هم می بینیم:

آموزش CSS – بخش هشتم

خب حالا می خوام شما رو با یک ترفند جالب آشنا کنم.

همانطور که دیده اید، در بعضی المان ها زمانی که نشانگر موس روی آن حرکت می کند نوار راهنمایی ظاهر می شود که به آن tooltip می گوییم. در مثال زیر نحوه ایجاد تولتیپ را می آموزیم:

آموزش CSS – بخش هشتم

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

حالا می خواهم شما را با عناصر ساختگی آشنا کنم.

عناصر ساختگی در CSS3

عنصر ساختگی چیست؟

بله درست حدس زدید. عناصری هستند که در کد های HTML ایجاد نشده اند و آن ها را با استفاده از CSS و برای منظوری خاص ایجاد کرده ایم. مثلا با استفاده از این عناصر می توان بدون دست زدن به کد های HTML محتوایی را قبل یا بعد از یک المان قرار داد. که این یک کاربرد ساده از عناصر ساختگی می باشد.

ساختار المان های ساختگی به صورت زیر است:

در المان های ساختگی بین انتخاب کننده و المان ساختگی ( :: ) قرار دارد ولی در کلاس ساختگی ( : ) بین انتخاب کننده و کلاس مجازی قرار می گیرد.

خب حالا بیایید با چند تا از این المان های مجازی آشنا شویم:

::first-line

این عنصر ساختگی برای سبک دهی به خطوط اول متن ها در عناصر بلوک شده به کار می رود. همچنین برای سبک دهی می توان از ویژگی های زیر استفاده کرد:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

آموزش CSS – بخش هشتم

برای سبک دهی به حرف اول متن ها در المان های بلوک شده از این المان ساختگی استفاده می شود. ویژگی هایی را که می توان از آن ها استفاده کرد عبارتند از:

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align  (فقط برای زمانی که float:"none"  باشد.)
  • text-transform
  • line-height
  • float
  • clear
  • انتخاب کننده هر المانی با هر کلاسی می تواند باشد.
  • برای یک المان مشخص می توان چند المان ساختگی ایجاد کرد:

::before و ::after

با استفاده از این المان های می توان محتوایی (عکس، متن و …) را قبل ویا بعد از المان قرار داد:

آموزش CSS – بخش هشتم

::selection

از این المان مجازی برای سبک دهی به المان انتخاب شده توسط کاربر، استفاده می کنیم و از ویژگی های زیر می توانیم استفاده کنیم:

  • color
  • background
  • cursor
  • outline

کدهای زیر را در ادیتور خود بنویسید و متنی را در مرورگر انتخاب کنید:

آموزش CSS – بخش هشتم

خب دوستان حال آخرین مبحث این جلسه، یعنی شفافیت و تاری عکس و یا رنگ المان ها را بررسی می کنیم.

شفافیت و تاری در CSS3

در CSS3 با استفاده از ویژگی opacity می توان میزان شفافیت و تاری را تعیین کرد. بیایید کمی بیشتر با این ویژگی آشنا شویم:

شفافیت عکس ها

ویژگی opacity با مقدار بین 0 تا 1 میزان شفافیت عکس ها را کنترل می کند. هر چه عدد به صفر نزدیک تر باشد، عکس تارتر و هر چه به 1 نزدیکتر باشد، عکس شفافتر خواهد بود.

برای اینترنت اکسپلورر ورژن 8 و قدیمی تر باید از ویژگی filter و به صورت زیر برای تنظیم شفافیت استفاده کرد:

مقدار x می توان بین 0 تا 100 باشد و هرچه مقدار کمتر باشد عکس کدرتر است.

به مثال زیر توجه کنید:

آموزش CSS – بخش هشتم

تمرین:

چند عکس را در صفحه قرار دهید و با استفاده از کلاس ساختگی :hover  و ویژگی opacity تنظیماتی را انجام دهید تا با حرکت بر روی عکس ها میزان شفافیت آن ها تغییر یابد.

آموزش CSS – بخش هشتم

شفافیت المان و محتوای آن

وقتی شفافیت یک المان را تغییر می دهید، میزان شفافیت متن (و درکل فرزندان آن المان) درون آن نیز به همان میزان تغییر پیدا می کند:

آموزش CSS – بخش هشتم

برای جلوگیری از تغییر شفافیت فرزندان یک عنصر، رنگ زمینه را با rgba تنظیم می کنیم. پارامتر a میزان شفافیت زمینه را تغییر می دهد. این پارامتر مقداری بین 0 تا 1 می گیرد. دستورات css مثال بالا را به صورت زیر تغییر می دهیم:

آموزش CSS – بخش هشتم

در مثال مهم زیر می بینیم که چگونه می توان متنی با رنگ زمینه مشخص را بر روی یک عکس قرار داد:

آموزش CSS – بخش هشتم

دوستان عزیز، آموزش CSS – بخش هشتم را در اینجا به پایان میرسانم. امیدوارم که از یادگیری مطالب امروز نیز لذت برده باشید.

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

همراه ما باشید در جلسه نهم آموزش CSS با بررسی چند مثال مهم و کاربردی.

موفق و پیروز باشید.

نوشته های مرتبط