آموزش Css – جلسه هفتم

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

مطالبی که توی این جلسه می خوایم در موردش صحبت کنیم در رابطه با لینک ها و نحوه ی effect دادن به اونهاست .برای مثال بصورت پیش فرض لینک های ما چه رنگی ، چه فونتی و چه سایزی داشته باشن و یا زمانی که موس و روی لینک ها میبریم به چه صورتی تغییر حالت بدن و در ادامه ساخت منو رو به وسیله ی لیست های html یادمیگیریم ، اینکه چطور می تونیم منوهای وب سایت و به سادگی ایجادکنیم و به اونها style مورد نظرمون و بدیم .

خب همونطور که می دونید برای ایجاد لینک توی html از تگ <a></a> استفاده می کنیم و href اونو مثلا صفحه ی hom.html در نظر میگیریم و اسمش رو هم hom می زاریم. لینک های دیگه هم به همین ترتیب.

توی جلسات قبل دیدید که ما توی footer سایتمون سه تا box قرار دادیم حالا من میخوام یکسری لینک  رو توی box سمت راست ایجاد کنم.پس داخل div مربوط به box سمت راست کد های زیر و می نویسم:

            <div id="right-box" class="box">
                <a href="Hom.html">Home</a>
                <a href="cantact.html">cantact</a>
                <a href="about.html">about</a>
            </div>

الان این صفحه های html (Home.html,cantact.html,about.html)که توی کد بالا نوشتیم وجود ندارند من فقط نوشتم تا بتونم به عنوان لینک ازشون استفاده کنم.

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

همونطور که دقت می کنید به صورت پیش فرض رنگ لینک ها آبیه و آندرلاین هم دارند اما ما میخوایم رنگشون و عوض کنیم و آندرلاین و هم حذف کنیم

برای اینکار به فایل Css  مراجعه می کنیم و تگ  a رو انتخاب میکنیم به عنوان مثال میگم رنگش قرمز بشه

a:link{color:red}

الان از طریق این selector کل تگ های a  که توی صفحه ی html  قرار دارند رو انتخاب کردیم  ، چه  لینک هایی که توی  header  قرار داشته باشند ، چه توی footer یا هرجای دیگه از صفحه ی html، و رنگ قرمزو بهشون اختصاص دادیم.

حالا اگه من به عنوان  مثال یه لینک دیگه داخل header داشته باشم رنگش قرمز میشه

        <div id="header">
            <a href="#">link2</a>
            <div id="logo">
            </div><!--logo-->
            <div id="left_header"></div>
        </div><!--header div-->

هر لینک سه تا حالت مختلف داره

۱.حالت عادی

۲.زمانی که موس و روش نگه میداریم

۳.زمانی که روش کلیک شده

الان ما رنگ لینک و در حالت عادی تغییر دادیم

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

میایم selector خودمون و به این صورت می نویسیم

a:hover{color: blue}

یعنی زمانی که اشاره گر موس روش قرار میگیره به رنگ آبی دربیاد

و برای تغییر رنگ لینک زمانی که روش کلیک شده از selector زیر استفاده می کنیم:

a:active{color: chartreuse}

با اینکار در لحظه ای که روی لینک کلیک میکنیم رنگش  زرد میشه.

اما یک حالت دیگه وجود داره برای مشخص شدن اینکه قبلا روی این لینک کلیک شده

a:visited{color: greenyellow}

لینک هایی که توی box  نوشتیم  چون آدرس مشخصی ندارن نمیشه اینکار و روشون تست کنیم اما برای لینکی که توی header نوشته شده و آدرس “#” داره بعد از این که قطعه کد بالا رو براش نوشتیم به رنگ  سبز درمیاد چون قبلا روی این لینک کلیک کرده بودیم

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

a:link{color: red}  
a:hover{color: blue}
a:active{color:gold}
a:visited{color: greenyellow}

اگر مثلا کد مربوط به hover ابتدا نوشته بشه دیگه وقتی که موس و روی لینک میگیریم رنگش عوض نمیشه

حالا برای اینکه آندرلاین  و حذف کنیم از خاصیت text-decoraion استفاده می کنیم به این صورت:

a:link{color: red;text-decoration:none}

علاوه بر دستوراتی که گفتیم ما می تونیم کار های دیگه ای رو هم انجام بدیم بنا بر سلیقه خودمون مثلا زمانی که موس و  روی لینک قرار میدیم علاوه بر رنگ فونتش هم تغییر کنه  یا یک background-color بگیره و..

طراحی یک منوی ساده برای وب سایت:

ما می خوایم یه منوی ساده برای وب سایت خودمون به وسیله ی لیست ها ایجاد بکنیم اول از همه من یک لیست ایجاد می کنم(لینک هایی که قبلا ایجاد کردم و حذف می کنم و اینکار و توی همون box سمت راست انجام می دم)

خب اگه اموزش های html و دنبال کرده باشید می دونید که برای ایجاد لیست های نامرتب از تگ <ul></ul>  استفاده میشه که در داخل این تگ ها ما می تونیم آیتم های خودمون و به وسیله ی تگ <li></li> تعریف کنیم که من آیتم ها رو به صورت لینک قرار میدم

            <div id="right-box" class="box">
                <ul>
                    <li><a href="http://www.google.com">googl</a></li>
                    <li><a href="http://www.yahoo.com">yahoo</a></li>
                    <li><a href="https://www.irprogram.com">irprogram</a></li>
                </ul>
            </div>

استایلی که برای لینک ها در ابتدای این آموزش نوشتم و پاک کردم حالا اگه به فایل html داخل مرورگر رفرش بدم همون استایل های پیش فرض برای لینک ها رو میبینید

همونطور که می بینید سایت irprogram , google چون قبلا بازدید کردم رنگ بنفش گرفتند اما سایت yahoo حالت عادی یعنی رنگ آبی رو داررنگ آبیه. پس به صورت پیش فرض اگر لینک بازدید نشده باشه رنگ آبی و اگر قبلا بازدید شده باشه رنگ بنفش داره.

اولین خصوصیتی که در مورد این منوها می خوام توضیح بدم اون نقطه ی سیاه رنگی هستش که سمت چپ این آیتم ها قرار گرفته

خب اول میام به این لیستم یک آی دی میدم که بتونم توی فایل Css بهش استایل بدم پس توی تگ ul که نوشتیم  آی دی my link بهش میدم

حالا توی فایل Css برای اینکه این آیکون و حذف کنم یا تغییر بدم از دستورList-style-type استفاده می کنم برای اینکه بخوام کلا حذف بشه روی none قرار میدم حالت  مربعی روی square و ..

#my-link{list-style-type:none}

می تونیم یک شکل به دلخواه خودمون به جای این ایکون ها قرار بدیم با استفاده از دستور List-style-image

فقط باید توجه داشته باشیم که سایز این آیتم ها باید ده پیکسل باشه چون بزرگ تر کوچیک تر باشه ممکنه زیاد جالب نباشه

#my-link{list-style-image: url(images/pic5.jpg)}

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

برای اینکار باید تگ <Li></Li> داخل آی دی my-link و انتخاب کنم Float و براش left کنم،اما اگه لینک هامون فارسی بود float و براش right  می کنیم

#my-link li{float: left;}

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

برای اینکه این آیتم ها از هم فاصله بگیرن یه margin-left بهشون میدیم اگه فارسی بودن از margin-right استفاده می کنیم

#my-link li{float:left;margin-left: 20px}

یکی دیگه از selector هایی که می تونیم اینجا بکار ببریم اینه که بیایم تگ <a></a> داخل id=”my-link”  و انتخاب کنیم

و مثلا رنگشون و تغییر بدیم به این صورت

#my-link li a{color:yellow}

و کارای دیگه سایزشون و تغییر بدیم آندرلاین و حذف کنیم و به همین ترتیب..

اگه بخوایم زمانی که موس روی اون قرار میگیره رنگش تغییر کنه selector و به این صورت می نویسیم:

#my-link li a:hover{color: teal}

توضیحاتی که در مورد لینک ها در ابتدای جلسه گفتیم به همین ترتیب می تونیم روی منوها پیاده کنیم

یا مثلا می تونیم دور آیتم ها مون border ایجاد کنیم از دستور border برای حاشیه دادن دور item، div دور همه چی  می تونیم ازش استفاده کنیم می تونیم حالت solid،dashed،dotted بهش بدیم

به این صورت:

#my-link li a{color:yellow;border:1px solid}

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

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