PDA

View Full Version : سوال: تو css اگه کلاسها رو بدون فاصله از همدیگه بنویسیم، چه تفاوتی با اینکه یه فاصله بینشون باشه داره؟؟


sahel65
یک شنبه 10 خرداد 1394, 18:19 عصر
سلام دوستان گلم؛
این یه خورده کد رو ببینین:
.header .left .top{
width:170px;
height:20px;
margin-left:205px;

}
میشه این کد بالا رو برام تفسیر کنید.
حالا چرا همون کد بالا با این کد فرق داره عزیزان؟؟

.header.left.top{
width:170px;
height:20px;
margin-left:205px;
}
الان من احساس می کنم کد اولیم اصلا بی معنیه چون وقتی که تو Html بدون header اولی هم می نویسم میبینم درست داره کار میکنه، میخواستم ببینم چه تفاوتی بین کدهای اولی و دومی هستش؟؟ فکر کنم از نظر پدر و فرزندی تفاوت باشه مگه نه؟؟؟؟؟
الان تفسیر کد دوم اینه دیگه: به تگهای top که در تگ left از تگ header قرار گرفتن این کدها رو اعمال کن.
درست میگم؟؟
ممنون میشم تفسیر هر دو تا کد رو بهم بگین و اگه منبعی هستش در این زمینه معرفی کنین. دارم گیج میشم.
afshinz
یک شنبه 10 خرداد 1394, 18:40 عصر
ببین وقتی شما اینجوری مینویسی

.header .left .top{
width:170px;
height:20px;
margin-left:205px;

}


یعنی اون المنتی رو سلکت کن که کلاس top داره و داخل المنتی هست که کلاس left داره که خود اون داخل المنتی هست که کلاس header داره که همون پدر و فرزندی هستش

اما وقتی شما این رو مینویسی

.header.left.top{
width:170px;
height:20px;
margin-left:205px;
}

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

<div class="header left top"></div>
sahel65
یک شنبه 10 خرداد 1394, 19:08 عصر
بارک اله افشین جان، ولی خب ببین چیزی که داره من رو گیج میکنه اینه که ببین تو این تکه کدی که گذاشتم:
.header .left .top{
width:170px;
height:20px;
margin-left:205px;

}
من هم همون استنباط شما رو داشتم، یعنی اینکه بیا و اونهایی که داخل کلاس top هستن و باز داخل کلاس left هستن و باز داخل کلاس Header هستن( چقدر باز باز گفتم :خجالت: ) رو تحت تاثیر قرار بده. حالا میدونی چیه و جالبی کار کجاست که دارم گیج میشم. اینه که اگه بیام الان تو اینجا کلاس header رو پاک کنم یعنی بشه:


.left .top{
width:170px;
height:20px;
margin-left:205px;
}
باز هم اعمال میشه و تغییری در خروجی بوجود نمیاره؛ نباید اینجوری باشه دیگه!! چرا پس داره خودشو بی تاثیر نشون میده انگاری !!!! :گریه::گریه:
این هم کدهای من :
کد css :

*{
margin:0;
padding:0;
}
body{


}
.header{
width:100%;
height:110px;
background-color:#001f46;
}
.header .left .top{
width:170px;
height:20px;
margin-left:205px;

}
ul{


}

.top li{
padding:0 9px;
border-right:solid 1px white;
margin-top:1px;
list-style:none;
display:inline-block;
}

a{
color:#bfbfbf;
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}

a:hover{
color:white;
}

li:last-child{
border-right:none;
}

.header .left .searchbox{
width:250px;
height:40px;
margin-left:205px;
margin-top:10px;
}

.header .left .searchbox .img{
background-image:url(images/search.png);
width:36px;
height:34px;
background-repeat:no-repeat;
float:left;
margin-top:1px;
}

.header .left .searchbox #search-input{
text-align:right;
width:210px;
height:32px;
float:right;
border-radius:0.4em;
font-family:Tahoma, Geneva, sans-serif;
}
.header .left .menu{
background-color:#e1e1e1;
margin-left:207px;
margin-top:5px;
width:203px;
height:35px;

}

.header .left .menu ul{

}

.header .left .menu ul li{
display:inline-block;
float:right;
width:67px;
height:35px;
border-right:solid 1px #001f46;

}

.header .left .menu ul li:first-child{
border-right:none;
}

.header .left .menu ul li a{
padding:12px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
color:#4c4c4c;
padding-top:20px;
}

.boxunderheader{
background-image:url(images/boxheader.png);
background-repeat:repeat-x;
width:100%;
height:50px;
}


و اینهم کد html :



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style3.css" >
<title>good Proman</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="left">
<!------------ part 1 ---------------------------------------------------->
<div class="top">
<ul>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">تبلیغات</a></li>
<li><a href="#">راهنما</a></li>
</ul>
</div><!--- end of top --->
<!------------ part 2 ---------------------------------------------------->
<div class="searchbox">
<div class="img">
</div><!-- enf of img --->
<div class="myform">
<input type="text" id="search-input" placeholder="...جستجو"/>
</div><!-- enf of myform --->
</div><!--- end of searchbox --->

<!------------ part 3 ---------------------------------------------------->
<div class="menu">
<ul>
<li><a href="#">عضــویت</a></li>
<li><a href="#">انجمن</a></li>
<li><a href="#">فروشگاه</a></li>
</ul>
</div><!--- end of Menu --->
</div><!--- end of left --->
</div><!--- end of header --->
<!---------- End part of Header ------------------------------------------->
<div class="boxunderheader">
</div><!--- boxunderheader --->
</div><!--- wrapper --->
</body>
</html>
afshinz
یک شنبه 10 خرداد 1394, 19:30 عصر
ببین اینجوری میگم کامل بفهمی قضیه چیه.
این سلکتور های سی اس اس آخرشن!
یعنی شما اینقدر میتونی اونا رو خاص بکنی که حتما روی اونی که میخوای اثر بزارن . مثلا حتی اگه کلاس left رو هم برداری ممکنه باز عمل کنه ولی دیگه سلکتور خاصی نیست و چون کلاسه، ممکنه المنت دیگه با اون کلاس باشه و رو همه ی المنتایی که اون کلاس رو دارن تاثیر میزاره(امیدوارم گرفته باشی مطلبو چون خودم نفهمیدم چی نوشتم:لبخند:)
حالا دیگه بسته به خودته که چطوری المنتارو سلکت کنی ولی کاملا کار اینا منطقیه.
sahel65
یک شنبه 10 خرداد 1394, 19:39 عصر
حوصله ت نگرفت کدهامو نگاه کنی مگه نه!!! فقط همون قسمتی رو که گفتم رو هم حوصله ت نمیگیره نگاه کنی؟ یعنی اینجوری میشه ها، ببین:
.header .left .top{
width:170px;
height:20px;
margin-left:205px;

}



و اینهم html ش :

<div class="header">
<div class="left">
<!------------ part 1 ---------------------------------------------------->
<div class="top">
<ul>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">تبلیغات</a></li>
<li><a href="#">راهنما</a></li>
</ul>
</div><!--- end of top --->
<!------------ part 2 ---------------------------------------------------->
<div class="searchbox">
<div class="img">
</div><!-- enf of img --->
<div class="myform">
<input type="text" id="search-input" placeholder="...جستجو"/>
</div><!-- enf of myform --->
</div><!--- end of searchbox --->

<!------------ part 3 ---------------------------------------------------->
<div class="menu">
<ul>
<li><a href="#">عضــویت</a></li>
<li><a href="#">انجمن</a></li>
<li><a href="#">فروشگاه</a></li>
</ul>
</div><!--- end of Menu --->
</div><!--- end of left --->
</div><!--- end of header --->


حالا بشینم جمله شما رو تفسیر کنم! جمله خودت باز یه پست جداگانه میشه ها برای سوال. :قهقهه::قهقهه::قهقهه:
H:Shojaei
یک شنبه 10 خرداد 1394, 19:48 عصر
کدی که نوشتید به این صورت .left .top و کدی که به این صورت .header .left .top این دو کد با هم هیچ تفاوتی ندارن هردو میگن که روی .top تاثیر بذار...
حالا شما از این کدها چه انتظاری دارید؟
afshinz
یک شنبه 10 خرداد 1394, 20:17 عصر
خب جواب همین بود که گفتم فقط باید بری تو عمق فاجعه که دقیقا چی گفتم:لبخند:
ببین این کلاس های پشت سر هم بخاطر اینه که مطمئا بشی که حتما روی همونی که میخوای اثر بزاره
مثال برات بزنم: مثلا تو همون div با کلاس header اگه بخوای المنتی رو سلکت کنی که داخل searchbox هست و کلاس 123 داره به چندین روش میتونی اون رو سلکت کنی که این چن مورد ساده ترینا هستن، میشه با چن روش دیگه هم این المنت رو سلکت کرد که نیازی نیست. تو باید بنا به کد نوشته شده، بیای سلکتوری رو استفاده کنی که بهترین کارایی رو برات داره. اون سلکتوری که نوشتی و سه تا کلاس رو با فاصله داشت، نشون میده که میخوای خیلی سلکتورت خاص باشه و حتما روی همونی که میخوای تاثیر بزاره و گر نه به شیوه های پیچیده تر و یا ساده تر هم ممکنه همون کار رو بتونی انجام بدی
div.header div.searchbox div.123


.haeder .searchbox .123


.seachbox .123


div.seachbox .123

.header .123

حالا ممکنه سوال برات پیش بیاد فرق سلکتور اول با دوم چیه؟؟
جواب اینه که حتما سلکتوری رو انتخاب میکنه که اون کلاسارو داشته باشه و حتما div باشه ولی سلکتور دوم براش مهم نیست چه المنتی باشه ، فقط کلاس براش مهم هست
امیدوارم دیگه متوجه شده باشی
sahel65
دوشنبه 11 خرداد 1394, 08:11 صبح
کدی که نوشتید به این صورت .left .top و کدی که به این صورت .header .left .top این دو کد با هم هیچ تفاوتی ندارن هردو میگن که روی .top تاثیر بذار...
حالا شما از این کدها چه انتظاری دارید؟
آها یعنی چون هنوز left هم هست پشت سرش، داره اعمال میشه، من میدونی منظورم چی بود؟؟ میگفتم چرا با اینکه Header رو برمیدارم بازم داره این کد css اثر میکنه علیرغم اینکه داخل دایو header هستن!!!!!! پس اگه الان left رو هم بردارم، بازم باید اثر کنه دیگه مگه نه!!!! فقط اگه top رو تغییرش بدم دیگه تاثیری نداره. درست میگم آقای شجاعی جان؟؟
sahel65
دوشنبه 11 خرداد 1394, 08:35 صبح
1) div.header div.searchbox div.123
2) .haeder .searchbox .123
3) .seachbox .123
4) div.seachbox .123
5) .header .123

آقا افشین از مثالی که زدی واقعا ممنونم. دست گلت درد نکنه. فقط برای اینکه حسابی شیر فهم بشم، میشه در خصوص کدهایی که برام مثال زدی، خودم کد Htmlش رو بنویسم که ببینی درست درک کردم یا نه؟؟؟؟؟؟؟؟ مرسی و متشکرم ازت.
برای کد اول: چون فاصله دارن یعنی اینکه سلکتوری رو انتخاب کن که داخل دایو باشه حتما ، و بعدش هم داخل 123 و بعد داخل searchbox و بعد داخل header (این header پدربزرگش میشه! چه پدربزرگ باکلاسی هستش :قهقهه:)
نمونه کد html برای اعمال کد اول:


<div class="header">
<div class="searchbox">
<div class="123">
our code
</div>
</div>
</div>
توضیح کد دوم: بدون در نظر گرفتن استفاده از div (بصورت غیرضروری) هر تگ دیگه ای بود با این کلاسها بیا و بهش اعمال کن، البته ترتیب توالی قرار گرفتنش مثل بالایی باید باشه ها، یعنی کلاس 123 ای که داخل کلاس searchbox هستش و اونهم داخل کلاس header :
نمونه کد:


<div class="header">
<input class="searchbox">
<span class="123">
</span>
</div>
</div>
توضیح کد سوم: مثل مثال بالایی هستن با این تفاوت که اگه داخل کلاس header هم نباشن اعمال میشه روی اونها.


<input class="searchbox">
<span class="123">
</span>
</div>

توضیح کد چهارم: حتما داخل کلاسی با div ی که شامل کلاس searchbox هستش، و با هر المنتی داخل کلاس 123 (حتما به div نیازی نیست):



<div class="searchbox">
<input class="123">
</input>
</div>


و اما یه مورد رو فکر کنم جا انداخته بودی افشین جان: اینکه همه اینها رو به همدیگه بچسبونی و بدون فاصله بنویسی که منظور این باشه که هر تگی که شامل هر سه کلاس باشه؛ یعنی اینجوری


.header.searchbox.123
الان تو اینجا دیگه خاصیت پدر فرزندی نداریم ولی در عوض کلاسی که میخوایم تحت تاثیر این کد قرار بگیره باید هر سه تا رو داشته باشه، یعنی اینجوری:


<div class="header searchbox 123">
</div>
دیگه فکر کنم فهمیدم، مگه نه ؟؟ یا هنوز باید توضیح بخونم و بعدش بیام توضیح بدم بهتون؟؟ همین پست رو هم ملاحظه کن لطفا.
afshinz
دوشنبه 11 خرداد 1394, 09:13 صبح
همه چی رو خوب درک کردی ولی یه اشتباه کردی که کار رو خراب کرد.
تگ input ، تگ بسته نداره و نمیتونی خودت براش تگ بسته بزاری! و وقتی تگی، تگ بسته نداره پس محتوایی هم بینش قرار نمیگیره.
کد دوم اشتباهه چون اومدی برای تگ input که تگ بسته نداره تگ بسته گذاشتی که حتی از نوع خودش هم نیست و از div استفاده کردی!
کد سوم: باز هم اشتباه کد دوم رو کردی و input رو با div بستی!
کد چهارم: باز مشکل input ، input تگ بسته نداره و باید انجوری بسته بشه
کد پنجم هم که درسته. سعی کن در مورد تگ ها بیشتر بخونی و کاربرد و نحوه استفاده رو درک کنی نه همینجوری استفاده کنی
<input type="" class="" />
اما در رابطه با سلکتورها دیگه یادگرفتی و مثالا غیر از اونی که گفتم درست بودن:تشویق:
موفق باشی
sahel65
دوشنبه 11 خرداد 1394, 09:48 صبح
مرسی افشین جان، ای داد بیداد، راستش این رو میدونستم ولی حواسم نبود چون یه کاری پیش اومده بود که میخواستم تند تند بنویسم و جواب رو زود بگیرم، اصلا حواسم نبود بخدا. کاش بجای اون یه تگ دیگه میذاشتم، حالا گذشته از اشتباه Input خوب فهمیدم تقریبا دیگه! همین کافیه. دیگه از Input خوشم نمیاد :گریه: و همش span میزارم از این به بعد.:قهقهه::قهقهه:
afshinz
دوشنبه 11 خرداد 1394, 11:32 صبح
پیش میاد اشکال نداره.
موفق باشی
H:Shojaei
دوشنبه 11 خرداد 1394, 12:02 عصر
آها یعنی چون هنوز left هم هست پشت سرش، داره اعمال میشه، من میدونی منظورم چی بود؟؟ میگفتم چرا با اینکه Header رو برمیدارم بازم داره این کد css اثر میکنه علیرغم اینکه داخل دایو header هستن!!!!!! پس اگه الان left رو هم بردارم، بازم باید اثر کنه دیگه مگه نه!!!! فقط اگه top رو تغییرش بدم دیگه تاثیری نداره. درست میگم آقای شجاعی جان؟؟
بله .top تنها رو هم که بذارید باز هم اعمال میشه...
کلا هیچوقت نیاز نیست شما از خارجیترین دایو کلاسش رو بیارید تا به اون دایوی که نیاز دارید برسید و اون موقع سی اس اس روش اعمال کنید هرکجایی هست فقط اسمشو بیارید خلاص...