آموزش css به صورت كامل و جامع

[elham666 10]

ممنون بسیار مفید و ارزنده بود

ویرایش شده در آبان 92 توسط elham666

[ansar2000 13]

سلام.من می خواستم به تصاویرم هنگامی که موس روی اون ها میره حالت برجسته بدم.ولی نمیدونم از چه کد css باید استفاده کنم ودر کجا!با توجه به کدهای html وcss من بایستی این ویژگی رو برای تصاویر در کجا تعریف کنم؟ چون تصاویر اکثر در بلوک ها هستند و با id و کلاس بلوک ها قرار گرفته اند.چطوری بهشون اعمال کنم؟درکجا اعامل کنم و کدش چیه!؟

کد css قالب:

#wrapper {max-width:100%; background: url(../images/body-bg.png); height:auto; margin: auto;}

body {background: url(../images/body-bg.png); margin: 0; height: 100%; min-width: 100%; font-family: tahoma; font-size: 10pt;}



#header {max-width:100%; height: 200px; background: url(../images/headeredit.png); border-radius: 10px;padding-left: 5%}


.css{position: absolute; font-family: b yekan; font-size: 10pt; color: white; background-color: none}

#container {background: url(../images/body-bg.png); width: 100%; height: auto; margin: auto;}

#menu  {background: url(../images/menu11.png); width: 100%; height: 35px  ;background-repeat: repeat-y; display: block; font-family: tahoma;  margin-top: 2px; border-radius: 10px; padding-top: 0px;}


.dj-main{min-width:  100%;background: none; position: absolute; font-family: tahoma ;  font-size: 1pt; direction:rtl; border-radius:10px}



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



#right-sidebar{  background: white; background-repeat: repeat-y;min-width: 19.5% ;  height: auto; display: block; float: right; border-radius: 10px;  margin-top: 2px; margin-bottom: 5px; border: solid; border-color:  silver}
#right-sidebar .block{ background:  url(../images/header-sidebar5.png); width: 100%; height: 30PX;  text-align: center; border-radius: 5px;}
#right-sidebar  .block-content{min-width: 20.5%; height: auto; font-family: tahoma;  text-align: right; border-radius: 10px; margin-bottom: 2%; margin-top:  2% ;padding-right: 4%}

.block1{ background: url(../images/header-sidebar6.png); width: 100%; height: 30PX; text-align: center; border-radius: 5px;}
.block2{ background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 5px;}
.block3{background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 10px;}
.block4{ background: url(../images/header-sidebar.png); width: 100%; height: 45PX; text-align: center; border-radius: 10px;}


#polldiv_1{text-align: right;direction:rtl}

#content{  background-color: white; max-width: 59.1% ;height: auto; float: right;  display: block; border-radius: 10px; margin-top: 2px; margin-bottom:  10px; margin-right: 6px; margin-left:6px;}
#content  .block1{background: url(../images/titr4.png); width: 100%; height: 30px;  font-size: 11px; text-align: right;display: block; font-family: b homa;  font-size: 10pt}
.sp_news_higlighter{margin-right: 5%}


.content1{background-color:  white; width: 24.15% ; height: 255px;  display: block; float:  right;border: solid; border-color: green; margin-top: 2%; border-radius:  5px; text-align: right; font-family: b yekan;}



#content  .content-content {text-align: right; height: auto; font-size: 8pt;  padding-right: 20px; padding-left:20px; font-family: tahoma;  padding-top: 5px; text-align: right; padding-left: 2% }

#content  .content-content .block-content1{ background-color: gray; width: 49%;  height: auto; display: block; text-align: right; float: right; border:  groove; border-color:white; border-radius:10px;}
#content  .content-content .block-content2{ background-color: gray; width: 49%;  height: auto; display: block; text-align: right; float:left; border:  groove; border-color:white; border-radius:10px;}


#left-sidebar  { background: white; background-repeat: repeat-y; width: 19.6%; height:  auto; float: left; display: block; border-radius: 10px; margin-top:  2px; border: solid; border-color: silver}
#left-sidebar .block{  background:url(../images/header-left.png) ; width: 100%; height: 20px;  font-family: b homa; font-size: 15pt; text-align: center; border-radius:  5px; padding-bottom: 10px; margin-bottom: 2%}
#left-sidebar  .block-content{max-width: 100%; height: auto; font-family: b homa;  text-align: center; border-radius: 10px; border: groove; border-color:  black}

#footer {background: url(../images/footer150.png); max-width: 100%; height: 150px;}
#footer .block-content{ background-color: none; max-width: 100%; height: auto; display: block; text-align: center;}

کد html قالب:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>toluekerman</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css"/>


</head>


<body>

<div id="wrapper">





<div id="header">



</div>

<div id="container">


<div id="menu">


</div>

<div id="right-sidebar">

<div class="block"></div>

<div class="block-content"></div>
<div class="block1"></div>

<div class="block-content"></div>
<div class="block2">کاربری</div>
<div class="block-content"></div>
<div class="block3">کاربری</div>
<div class="block-content"></div>
<div class="block4">پیوندها</div>
<div class="block-content"></div>


</div>


<div id="content">
<div class="block1">:تیترخبر</div>


<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>





<div class="content-content">

<div class="block-content1">
<div class="block-content2">

</div>
</div>

</div>



</div>



<div id="left-sidebar">

<div class="block"></div>

<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>
<div class="block-content"></div>


</div>


<br style="clear: both"/>

</div>



<div id="footer">


<div class="block-content"></div>





</div>


</div>



</body>



</html>

[tareno 10]

سلام من یه اسلاید شو دارم که تو یه سایت ازش استفاده کردم

میخوام الان جاشو با یه اسلاید شو دیگه عوض کنم

چطوری باید این کار روانجام بدم

[amirparvaneh 100]

درود و خوش آمد به جوملا فروم

اسلایدر قبلی رو غیر فعال کنید و اسلایدر جدید رو نصب و در همون موقعیت منتشر کنید

[tareno 10]

درود و خوش آمد به جوملا فروم

اسلایدر قبلی رو غیر فعال کنید و اسلایدر جدید رو نصب و در همون موقعیت منتشر کنید

برای منتشر کردن تو قسمت اسلایدر قبلی به چه صورت باید عمل کرد ؟

[mmfallah 67]

هیچی. مثل همه ماژول ها فقط موقعیت همون اسلایدر قبلی را ببینید و همون را برای اسلایدر جدید انتخاب کنید

[vahidehdabbagh 10]

سلام و خسته نباشید

میشه لطف کنید در ساخت سایت زیر کمکم کنید؟

301 Moved Permanently

پایین سایتم نوار پیمایش افتاده میخوام اونو حذف کنم بلد نیستم

و همچنین روی سایت حقوقی که میرم در آخرش کادر پشتش (یا سایه اش) یکم بزرگه ، میشه کمک کنید کوچیکش کنم؟

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

خیلی ممنون میشم

[CO-2014 23]

درود

از دوستان متخصص در انجمن خواهش میکنم scss رو آموزش بدن.

سپاس.

[elinahost 10]

خیلی کاربردی بود مرسی

[dindarloo 0]

آموزش مباحث پیشرفته html5 و css3 هم اگر میگذاشتید خوب بود.