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

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

آموزش CSS

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

  • ساخت منو راهنما
  • ساخت جعبه کشویی
  • ساخت نوار راهنما
  • انتخاب کردن عناصر بر اساس خصیصه های آن ها

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

ساخت منوی راهنما

منوی راهنما کجای یک سایت قرار دارد؟ چرا این منو را می سازیم؟

بله دوستان، در هر وب سایت باید منویی برای راحتی کاربران داشته باشیم تا کاربر به راحتی به صفحات مختلف وب سایت ما دسترسی داشت باشد. این منو معمولا در قسمت هِدِر سایت قرار دارد و شامل لینک صفحات خانه، مقالات، تماس با ما، ارتباط با ما و … می باشد.

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

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

خب حالا می توانیم این لیست را به صورت عمودی و یا افقی طراحی کنیم که در ادامه با هم این کار را انجام می دهیم:

نوار راهنمای عمودی

قبل از توضیح ادامه مراحل به این سوال که: موارد این لیست ما که می خواهیم به یک نوار راهنما تبدیل کنیم، چی هستند؟

بله درست فرمودید (!) موارد این لیست عنصر <a> می باشد یعنی یک لینک که باید کاربر را به صفحه خاصی هدایت کند.

خب همانطور که می دانید، در یک لینک فقط متن لینک قابل کلیک می باشد. اگر بخواهیم اطراف متن هم قابل کلیک باشد، باید دستور display: block  را برای تگ <a>  بنویسیم.

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

بله باز هم درست گفتید، عرض لینک ها را محدود می کنیم با استفاده از ویژگی width . حال می توانیم رنگ زمینه ای را برای تگ <a>  نیز انتخاب کنیم. مثال ساده زیر را ببینید:

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

حال در دستورات CSS دستور width: 70px  را حذف کنید و نتیجه را مشاهده کنید.

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

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

فعال کردن لینک کلیک شده

حالا کاربر فرضا صفحه “درباره ما” را کلیک می کنید. یعنی این گزینه باید فعال باشد. برای این کار برای لینک درباره ما یک کلاس، مثلا active انتخاب می کنیم و به آن سبک دهی می کنیم. مثال زیر را بررسی کنید:

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

حالا من فکر می کنم که موارد این منو اگر حاشیه داشته باشند و متن ها وسط چین شوند، منوی بهتری خواهیم داشت.

مثال زیر رو نگاه کنید:

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

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

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

حال بیایید نحوه طراحی منوی راهنمای افقی را بررسی کنیم:

ساخت منوی راهنمای افقی

منوی راهنما را به دو صورت می توان ایجاد کرد. در روش اول می توانیم نحوه نمایش <li>  ها را به inline تغییر دهیم و در روش دوم آنها را شناور می کنیم (با استفاده از ویژگی float ). به مثال زیر توجه کنید:

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

در مثال زیر میبینیم که با شناور کردن <li>  ها به راحتی می توان منوی افقی ایجاد کرد. اما هنگام استفاده از ویژگی float باید نکاتی را رعایت کنیم:

نخست این که ابتدا لینک ها را چپ چین یا راست چین می کنیم. در ادامه باید نحوه نمایش لینک ها (یعنی <a>  ) را به block تغییر دهیم تا بتوانیم با استفاده از ویژگی padding ، ناحیه ای قابل کلیک را ایجاد کنیم (یعنی فقط متن لینک قابل کلیک نباشد.) همچنین فاصله ای را بین لینک ها قرار دهیم که این فاصله ها قابل کلیک خواهند بود.

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

و یک مثال بهتر:

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

اما چطور برای گزین های منو حاشیه ایجاد می کنیم؟

بله، درسته، با استفاده از ویژگی border-right/left  می توان سمت چپ یا راست li ها حاشیه را ایجاد کرد.

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

حاشیه گزینه آخر را با کلاس مجازی last-child  از بین می بریم.

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

خب دوستان، حال می بینیم که با چه ویژگی هایی می توان منو را ثابت نگه داشت به طوری که با اسکرول صفحه، همواره در بالای صفحه قرار داشته باشد:

با استفاده از ویژگی position می توان ul  را در بالا یا پایین صفحه قرار داد. در مثال بالا برای ul ویژگی position و top را تنظیم می کنیم تا منوی ثابتی ایجاد شود و کاربر با اسکروا کردن صفحه، همچنان منو را در بالای صفحه مشاهده کند:

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

اگر <ul>  را با دستور bottom: 0;  سبک دهی کنیم، منو به پایین صفحه منتقل می شود:

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

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

جعبه های کشویی

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

برای طراحی چنین اجزایی به ترتیب زیر عمل می کنیم:

  • در قسمت کدهای HTML

در ابتدا یک المان دربرگیرنده را ایجاد می کنیم. مثلا یک دیو کلاس dropdown.

حال المانی که می خواهیم با قرار گیری موس بر روی آن جعبه کشویی باز شود را ایجاد می کنیم. این المان می تواند یک <span>  و یا یک <button>  باشد.

حال باید المان دیگری را ایجاد کنیم که نقش جعبه کشویی را ایفا کند. مثلا یک دیو کلاس dropdown-content  که درون این عنصر، محتوای مورد نظر ما قرار می گیرد.

  • در قسمت دستورات CSS

المان دربرگیرنده یعنی .dropdown  را با استفاده از دستور position: relative  تثبیت مکانی می کنیم و نحوه نمایش آن را به inline-block  تغییر می دهیم.

حال به سراغ المان .dropdown-content  می رویم. در ابتدا می خواهیم که این المان نمایش داده نشود. بنابراین دستور display: none  را برای آن می نویسیم. حال می خواهیم که این المان نسبت به پدر خود (یعنی .dropdown ) تثبیت مکانی شود. بنابراین دستور position: absolute  را برای آن می نویسیم. و در ادامه سبک های دلخواه را برای نمایش زیباتر به آن می دهیم.

در قدم بعدی تعیین می کنیم که با قرار گیری موس روی div.dropdown  نحوه ی نمایش المان dropdown.content  به صورت بلوکی باشد.

مراحل بالا را در مثال زیر با هم می بینیم:

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

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

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

تمرین: یک منوی راهنما بسازید و یکی از گزینه های آن را به صورت بالا بسازید.

می توان به جای لینک ها، عکسی را به عنوان جزء فهرست کشویی در صفحه قرار داد. با همان دستورات CSS ، کدهای HTML زیر را در ادیتور بنویسید:

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

خب دوستان عزیزم، حالا نحوه طراحی نوار راهنما را می آموزیم.

طراحی نوار راهنما

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

برای طراحی تولتیپ نیز به ترتیب زیر عمل می کنیم:

  • در قسمت HTML

در ابتدا باید المان دربرگیرنده تولتیپ را ایجاد کنیم. فرضا <div class="tooltip">

حال باید متن راهنمای کاربر را در یک المان قرار دهیم. به عنوان مثال <span class="tooltiptext">

  • در بخش CSS

در ابتدا div.tooltip  را به این صورت سبک دهی می کنیم که به صورت relative تثبیت مکانی شود و نحوه نمایش آن inline-block  باشد.

در قدم بعدی باید span.tooltiptext  را سبک دهی کنیم. اولین کاری که می کنیم پنهان سازی آن با استفاده از دستور visibility: hidden;  می باشد. و در قدم بعدی باید آن را تثبیت مکانی کنیم. و سپس CSS های دلخواه دیگر را به آن اعمال می کنیم.

در قدم سوم تعیین می کنیم که زمانی که نشانگر موس روی div.tooltip  حرکت کرد، span.tooltiptext  نمایش داده شود و شفافیت آن به عدد 1 تغییر یابد.

در CSS ها دستور transition را استفاده کرده این که تعیین می کند در مدت زمان 5 ثانیه، شفافیت تغییر یابد. با این ویژگی در جلسه یازدهم CSS آشنا خواهیم شد.

لطفا خط به خط دستورات مثال زیر را بررسی کنید:

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

حالا بیایید ببینیم مکان این نوار راهنما رو چطور می توانیم تنظیم کنیم؟

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

ابتدا ویژگی های visibility  و opacity  و transition  را در قسمت span.tooltiptext  کامنت می کنیم تا تولتیپ نمایش داده شود.

حال به سراغ ویژگی های top  و right  می رویم. مقدار این دو ویژگی را صفر می دهیم. اگر مرورگر را رفرش کنید، تولتیپ دقیقا بر روی دیو قرار می گیرد. صفر مبدا این مکان است. حال نسبت به این مکان ویژگی های top  و right  را مقدار دهی می کنیم.

چون می خواهیم نوار راهنما کاملا در سمت راست دیو باشد، مقدار ویژگی right را 100% می دهیم. (می توانید مقدار مناسب را با هر واحدی انتخاب کنید که در این صورت باید هر مقدار را چک کنید تا ببینید تولتیپ کاملا در سمت چپ دیو قرار گرفته است یا نه؟)

وقتی که مقدار right را 100% تعیین کردید یعنی تولتیپ را 100 درصد ( اندازه کل عرض div.tooltip  ) از سمت راست از divtooltip  فاصله داده اید. حال برای تنظیم تولتیپ در راستای div.tooltip  مقدار top  را با توجه به فاصله داخلی span.tooltip  تعیین می کنیم. مقدار padding  هر چقدر بود، منفی آن را برای ویژگی top  تنظیم می کنیم. (انتخاب این مقادیر دلخواه است و بستگی به مکان دلخواه تولتیپ دارد.)

با همان دستورات css مثال قبل، ویژگی های top  ، bottom  ، right  و left  را برای قرار دادن تولتیپ در 4 سمت div.tooltip  بررسی می کنیم. قبلا هم پَدینگ بالا و پایین spon.tooltip  را 7px تنظیم کرده ایم:

تولتیپ در سمت راست:

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

تولتیپ در سمت چپ دیو:

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

تولتیپ بالای دیو:

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

تولتیپ پایین دایو:

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

روش دیگری که برای تنظیم تولتیپ در بالا یا پایین داریم این است که margin  چپ یا راست span.tooltiptext  را منفی نصف عرض آن تنظیم کنیم.

در مثال های بالا عرض span.tooltiptext  برابر 110 پیکسل است که نصف آن 55 پیکسل خواهد بود. بنابراین برای تنظیم تولتیپ در پایین دیو دستورات زیر را می نویسیم:

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

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

ما می توانیم از طریق خصیصه های المان ها به آن ها دسترسی داشته باشیم. بیایید با هم این موضوع مهم را بررسی کنیم:

انتخاب المان ها با استفاده از خصیصه ها

باید اعتراف کنم (!) که می توانیم از طریق خصیصه و حتی مقدار خصیصه ها، المان های مختلف را انتخاب کرد:

انتخاب کننده [attribute]

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

انتخاب کننده [attribute=”value”]

این انتخاب کننده عنصر را با خصیصه و مقدار آن انتخاب می کند:

انتخاب کننده [attribute~=”value”]

این انتخاب کننده المان هایی را انتخاب می کند که خصیصه ای از آنها چند قسمتی باشد که یک قسمت از آن value باشد. خب این یعنی چی؟

فرض کنید که دو المان داریم که المان اول کلاس main container و المان دوم کلاس main-container  دارد. وقتی که این انتخاب کننده را به صورت زیر به کار ببریم فقط المان اول انتخاب می شود:

انتخاب کننده [attribute|=”value”]

این انتخاب کننده المان هایی را انتخاب می کند که خصیصه ای داشته باشند که مقدار آن با value  آغاز شود.

توجه کنید که این انتخاب کننده المان هایی را انتخاب می کند که مقدار خصیصه آنها بصورت value-anyword  یا فقط value  باشد. یعنی با value  شروع می شود. اگر مقدار خصیصه valueanyword  باشد، آن عنصر انتخاب نخواهد شد.

انتخاب کننده [attribute^=”value”]

این انتخاب کننده المان هایی که خصیصه ای با مقدار value  یا value-anyword  و یا valueanyword  داشته باشند را انتخاب می کند.

انتخاب کننده [attribute$=”value”]

این انتخاب کننده المان هایی را انتخاب می کند مقدار خصیصه آن ها با value  تمام شود. یعنی المان هایی که خصیصه آن ها مقادیر value  یا anyword-value  و یا anywordvalue  باشد را انتخاب می کند.

انتخاب کننده [attribute*=”value”]

این انتخاب کننده المان هایی را انتخاب می کند که خصیصه آنها شامل value  باشد را انتخاب می کند. مقدار خصیصه به هر صورتی می تواند باشد.

انتخاب ورودهای فرم ها

انتخاب کننده های زیر، ورودی های فرم را انتخاب می کنند:

دوستان عزیزم آموزش CSS – بخش نهم را هم در اینجا به پایان می رسانم. نظرات، انتقادات و پیشنهادات فراموش نشه. هدف ما تهیه آموزش طراحی سایت مطابق با خواست و نیاز شماست و با همکاری شما عزیزان آموزش های مفیدتری را ارائه خواهیم داد.

همراه سایت سازان باشید در جلسه دهم آموزش CSS با مطالب جذابتری از این فصل.

سرافراز باشید.

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