نحوه فراخوانی در css

[mehran788]

با سلام و خسته نباشید خدمت دوستان
تو کد زیر فراخوانی چطور انجام میشه؟
کد css

#Menu-Wraper {
width: 1000px;
height: 37px;
float: right;
}
#Menu-List-Wraper {
width: 700px;
height: 37px;
float: right;
}
#Menu-Home a {
background-image: url("Images/Home-Icon.png");
background-repeat: no-repeat;
line-height: 25px;
margin-left: 8px;
padding: 0 6px 14px 28px;
}
#Menu-Home {
width: 45px;
height: 37px;
float: right;
background-image: url('Images/Menu-Bg-Home.png');
background-repeat: no-repeat;
}
#Menu-Home:Hover {
width: 45px;
height: 37px;
float: right;
background-image: url('Images/Menu-Bg-Home-Hover.png');
background-repeat: no-repeat;
}
کد html
<div id="Menu-Wraper">
<div id="Menu-List-Wraper">
<div id="Menu-Home"><a href="#"></a></div>
</div>
</div>
چون من عین همین رو تو یه فایل دیگه نوشتم و انجام نشد.چطور میشه که تو html فقط menu-home رو فراخوانی می کنیم و در کنارش menu-home a و menu-home:hover هم فراخوانی میشه
ممنون

[patmat2]

سلام تو قسمت head سایت کد زیر رو بنویس.
</link rel="stylesheet" type="text/css" href="your css file name.css" >

[mrgraphy]

سلام.
دوست عزیز اول از همه اینکه کد هاتون رو به ترتیب بنویسید.



#Menu-Home {
width: 45px;
height: 37px;
float: right;
background-image: url('Images/Menu-Bg-Home.png');
background-repeat: no-repeat;
}


#Menu-Home a {
background-image: url("Images/Home-Icon.png");
background-repeat: no-repeat;
line-height: 25px;
margin-left: 8px;
padding: 0 6px 14px 28px;
}




اول #Menu-Home که والد هست رو بنویسید بعد #Menu-Home a رو که چایلد اون هست.

دوم اینکه شما Menu-Home رو یک بار تعریف کردید و Menu-Home a یعنی تمامی تگ های a که داخل Menu-Home وجود دارند. و نیازی نیست که این selector رو به تگی نسبت بدید. اصطلاحا بهش میگن وراثت. PARENT & CHILD .

حالا Menu-Home:hover چی هستش ؟

ما توی css یک سری event ها یا اتفاقات رو میتونیم کنترل کنیم. نمونش همین hover هست. یعنی وقتی موس روی اون شئ قرار گرفت این اتفاق بیوفته.
که حالا با قرار گرفتن موس روی اون div که آی دی اون Menu-Home هستش عکس بکگراندش عوض میشه.
در ضمن کد اصطلاح شده css شما این هستش که سرعتش هم بیشتره.به اصطلاح Optimize کردمش.




#Menu-Wraper, #Menu-List-Wraper {
width: 1000px;
height: 37px;
float: right;
}

#Menu-List-Wraper {
width: 700px !important;
}

#Menu-Home {
width: 45px;
height: 37px;
float: right;
background: url('Images/Menu-Bg-Home.png') no-repeat;
}

#Menu-Home:Hover {
background: url('Images/Menu-Bg-Home-Hover.png') no-repeat;
}

#Menu-Home a {
background: url("Images/Home-Icon.png") no-repeat;
line-height: 25px;
margin-left: 8px;
padding: 0 6px 14px 28px;
}




موفق باشید.