style دهی فهرست ها

فهرست بخش آدرس دهی سایت ما هنوز در زمینه style ظاهری کار دارد. به طور پیش فرض نشان های کنار موارد فهرست به شکل نقطه های سیاه رنگ در نظر گرفته شده اند، اما به سادگی می توانید این اشکال را آنطور که می خواهید به کار اختصاص دهید. بیایید به CSS خود برگردیم تا ببینیم چگونه می توان به این هدف نایل آمد:

1. درون style1.css تگِ li را بیابید.

2. تغییرات زیر را به آن اعمال کنید(تغییرات جدید به شکل bold نشان داده شده اند):

3. فایل CSS را ذخیره کرده و تغییرات جدید را درون مرورگر مشاهده نمایید.

4. مقدار list-style-type را به ترتیب به disc، square و none تغییر داده و برای هرکدام جداگانه CSS را ذخیره کرده و تغییرات را مشاهده کنید. ما برای سایت خود مقدار none را در نظر می گیریم که باید به شکل نشان داده شده در عکس 4.40 باشد.

عکس 4.40: نشان های مختلف اختصاص داده شده به بخش فهرست آدرس دهی ها، در این جا مقدار none در نظر گرفته شده است.

می توان از CSS برای style-دهی های بیشتر به فهرست ها استفاده کرد:

1. قرار دادن لینک ها به شکل Button با استفاده از ایجاد تغییرات در زمینه حاشیه و لایه ها.

2. درست کردن محوطه کلیک کردن بزرگ تر؛ بیشتر از عرض و ارتفاع نوشته درون لینک.

3. تنظیم فهرست ها به شکل افقی.

برای فرا گرفتن موارد بیشتر از جمله آن هایی که در بالا اشاره شد به شما کتاب CSS Anthology: 101 Essential Tips, Tricks & Hacks را پیشنهاد می کنیم، البته بعد از تسلط کامل به مباحث پایه ای مرور شده در این کتاب.

خلاصه فصل چهارم

این فصل نیز با تمامی پستی و بلندی ها و سختی و آسانی هایش به پایان رسید، می توان گفت یکی از فصل های پربارِ کتاب پیش روی شما به شمار می آید. با تفاوت های بین تگ های inline و block-level کار را آغاز کردیم. سپس به گزینه های در دسترس برای style-دهی به تگ های block-level پرداختیم، از جمله اضافه کردن حاشیه، لایه گذاری و اندازه ها. تمامی این مباحث تئوری را درون کار عملی پیاده کرده و حتی تعدادی از آن ها را به پروژه سایت خود اعمال کردیم. در آخر هم با جایگذاری ها و نحوه style-دهی بیشتر فهرست ها آشنا شدیم.

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

در فصل بعد به بررسی نحوه قرار دادن عکس ها درون سایت خود می پردازیم. عکس های پس زمینه ای که با استفاده از CSS به سایت خود اختصاص می دهیم و عکس های inline که می توانیم به عنوان بخشی از محتوا به سایت خود اضافه کنیم(عکس غواصان در فصل دوم را به خاطر آورید).