استفاده از چندین class در یک تگ

[<?php?>]

سلام دوستان.
خیلی سرچ کردم ولی نتونستم جواب درست حسابی بگیرم .
به این عکس یک نگاهی بندازید : http://uupload.ir/files/uvdp_01.jpg

خب من میخوام کدش کنم / میخوام بدونم این ترفندی که میزنم درسته؟ اصولیه؟ شدنیه؟
---------------------------------
ابتدا در بخش body یک تگ div میزنم و سلکتور class رو اینطور تنظیم میکنم :


<div class="box1 box2 title img description more"></div>


بعدش میریم قسمت فایل css مون : ( من فقط کد های box 1 و box 2 رو میزارم فعلا )


.box1{
width:600px;
height:400px;
background-color:#7e7d7d;
}
.box2{
width:568px;
height:378px;
background-color:#ffffff;
}


خب نتیجش اینه که box 2 نمایش داده میشه و box1 حذف میشه از نمایش . مشکلش چیه؟

میشه از چنین شیوه ای برای کد نویسی یک باکس به همراه متون + عکس های توشو + رنگ بندی هاشو + اندازه ها و ... استفاده کرد ؟

تشکر

[ABZiko]

باید هم همین طور باشه، نگاه کن، شما وقتی می آی به یک div مثلا 100 تا کلاس می دی، اون می آد، مقادیری که با هم در یک کلاس یک سان هستند رو به آخرینش نسبت می ده، شما اومدی توی کلاس .box1 یک بک گراند دادی و در .box2 هم یک بک گراند دادی، حالا چون HTML و CSS زبان هایی هستند که به صورت خطی ترجمه می شن توسط موتور های رندر مرورگر ها، طبیعی هستش که می آد رنگ پس زمینه دومین کلاس رو به کارت نسبت می ده ولی اگر مثلا شما در box1 از یک Property که در box2 وجود نداره استفاده کنی ، به خاطر این که کلا یک دونه وجود داره و در خط های دیگر به به قول گفتنی OverWrite نمی شه، اون رو به کارت می ده، حالا شاید شما بخواین دو تا کلاس با مقادیر یکسان بنویسید ولی از اولی استفاده کنید، برا این کار جلوی مثلا Property ارتفاع در box1 می نویسید :


height : 400px !important;


برای سوال دومتون باید بگم که این طوری نمی شه اون رو ساخت ، شما به تگ های بیشتری برای ایجاد اجسام در کارتون دارید ولی شما بشتر از CSS استفاده کردین و به تگ های بیشتری نیاز دارین ، (CSS یک زبان استایل دهی هست نه یک زبانی که بخواین باهاش اجسام مختلفی رو در کارتون ایجاد کنید ...) ولی در کل شما می تونید از هر روشی استفاده کنید ولی کاری که شما می کنید باید بهینه باشه تا سایتتون در بحث کد نویسی بهینه سر آمد باشه و کلا باید کار هم بکنه !

شما اومدی برای هر ویژگی باکستون یک کلاس نوشتین در صورتی که اصلا نیازی نیست و باید هر کلاس رو به تگ مخصوص همون قسمت نسبت داد، در ضمن شما برای اینکه اون باکس عکس رو در داخل باکس والد قرار بدین نیاز هستش که یک div دیگه داخل همون div والد ایجاد کنید و حالا اگر می خواین با CSS استایل دهیش کنید باید همون کلاس img رو به همین تگ داخل تگ والد نسبت بدین ... یا هم این که از Selector های CSS استفاده کنید که در هر صورت به این قدر کلاس نیازی نیست ...


این رو برای محض اطلاعتون می گم که در همین الان با کد نویسی بهنیه بیشتر آشنا بشین :

مثلا دو تا باکس دارین که رنگ و اندازه شون شبیه هم هستش ، فقط توی یک Property با هم تفاوت دارن، خب در این جا بهتر هستش که شما بیای دو تا کلاس باکس ها رو با هم بگیری و مشخصات یکسان رو براشون توی یک بخش استایل دهی کنی و فقط برای باکس دیگری که یک مشخصه اضافی داره ، فقط بیای براش یک استایل باز کنی و همون مشخصه رو براش بنویسی ، مثلا :


.box1,.box2 {
width: 200px;
height: 200px;
background-color: #0099FF;
}

.box2 {
text-align:center;
}

[<?php?>]

ممنون
خب پس الان چند کلاس در یک تگ ( مثل div ) به چه دردی میخوره؟ میشه یک مثال بزنی که تو طراحیمون استفاده شدنی باشه .

اینکه خطی همه چیو میخونه رو خبر داشتم . فکر میکردم در این زمینه خاصیت های هر class رو جدا جدا اجرا میکنه .

[pyramid_ali]

استفاده از چنتا کلاس برای یک div
فرض کن شما داری از یک سیستم گرید استفاده می کنی! یک div با کلاس row می سازی، حالا می خوای به اون ردیف یک استایل خاص مثله رنگ و بک گراند بدی و .. و اون کلاس مثلا به اسم fancy-box رو اضافه می کنی و خیلی از چیزای دیگه! البته توی طراحی ها دادن بیشتر از 4 یا 5 کلاس به یک تگ زیاد جالب نیست ولی از نظر تئوری محدودیتی برای دادن کلاس وجود نداره و شما راحت می تونی 100 تا کلاسم به یک آیدی بدی! در اصل کلاس برای گروه کردن چند عنصر به کار میره! اگه شما یک طرحی رو مجبوری برای چند عنصر در نظر بگیری بهتر اون طرح رو به صورت یک کلاس در بیاری و به عناصرت اضافه کنی! حالا ممکنه این عناصر توی بخشایی یکسان باشن و توی یه بخشایی متفاوت که اینجا وجود چنتا کلاس رو الزامی میکنه، مثله چیزی که مثال زدم! بهتره یک سری به فریم ورک های CSS بزنی و با چند کلاسه بودن بیشتر آشنا می شی!