Div یکی از مهمترین و پر کاربردترین تگ های html است که از آن برای تقسیم بندی بخش های مختلف یک صفحه Html استفاده می شود. به عبارتی دیگر هنگامی که قصد دارید یک قالب برای وبسایت خود طراحی کنید، هریک از بخش های آن درون یک Div قرار می گیرد. قبل از معرفی Div، قالب کلی صفحه با استفاده از Table (جدول) طراحی می شد که امروزه این روش منسوخ شده است.
برای استفاده از Div کافی است تک مورد نظر را درون body قرار دهید.
<div>
</div>
در صورتیکه یک صفحه html با محتوای فوق ایجاد کرده باشید پس از اجرا هیچ چیزی مشاهده نخواهید زیرا شما یک کادر (div) در صفحه قرار داده اید که عرض، ارتفاع، رنگ و ... ندارد.
تعیین عرض و ارتفاع در CSS
در CSS از دو خاصیت width و height برای تعیین عرض و ارتفاع عناصر استفاده می شود. هنگام مقداردهی به این خاصیت ها می بایست واحد مورد نظر را نیز ذکر کنید که به دو صورت نسبی (درصد) و ثابت (پیکسل) قابل اعمال است.
مقداردهی ثابت
در این روش از واحد px به معنی پیکسل برای تعیین واحد استفاده می شود. برای مثال فرض کنید قصد داریم به یک divعرض و ارتفاع 200 پیکسل اختصاص دهیم.
div{
width: 200px;
height: 200px;
}
مقداردهی نسبی
تعیین مقداردهی نسبی با علامت % انجام می شود و به معنی نسبتی از عنصر پدر (عنصری که تگ فعلی در آن قرار دارد) مشخص می گردد.
div{
width: 20%;
height: 200px;
}
نکته: یکی از اشتباهات برنامه نویسان مبتدی، تعیین ارتفاع به صورت درصدی می باشد که کار بسیار اشتباهی بوده و استفاده از آن به هیچ وجه توصیه نمی شود.
هر کدی که می نویسیم و اجرا میشه، لزوماً درست نیست!
برای تعیین ارتفاع از مقدار auto نیز می توان استفاده نمود و به این معنی می باشد که ارتفاع عنصر، به اندازه محتوای آن باشد. در این شرایط اگر عنصر مورد نظر محتوایی نداشته باشد، مقدار ارتفاع صفر خواهد بود.
div{
width: 20%;
height: auto;
}
یکی دیگر از روش های تعیین ارتفاع، استفاده از واحد vh می باشد که درصدی از ارتفاع مروگر می باشد و مقدار آن می تواند بین 0 تا 100 باشد. برای مثال فرض کنید قصد دارید یک div ایجاد نمایید که عرض آن به اندازه عرض صفحه و ارتفاع آن به اندازه نصف ارتفاع صفحه باشد.
div{
width: 50%;
height: 50vh;
}
نکته: برای تعیین عرض و ارتفاع عناصر، تنها از تکنیک های مخصوص به هریک استفاده نمایید!
تعیین Background (بک گراند)
یکی دیگر از دستورات پرکاربرد Css دستور background-color می باشد که توسط آن می توان رنگ بک گراند را تعیین نمود. البته ما در مقاله جداگانه ای راجع به Background صحبت کرده ایم و در این قسمت تنها نحوه استفاده از background-color توضیح داده خواهد شد. برای تعیین رنگ پس زمینه عناصر می توانید به شکل زیر عمل کنید:
div{
background-color: red;
}
برای انتخاب رنگ هم نیز می توانید مقاله مربوط به رنگ ها را مطالعه فرمایید.
مثال: قصد داریم یک کادر با عرض و ارتفاع 200 پیکسل و رنگ قرمز به صفحه اضافه کنیم.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
حاصل اجرای صفحه به شکل زیر خواهد بود:
تمرین1: صفحه ای طراحی کنید که در آن دو Div با عرض و ارتفاع 200 و رنگ های قرمز و آبی وجود داشته باشند.
برای آنکه بتوانیم به هریک از عناصر استایل جداگانه ای اختصاص دهیم نیاز داریم برای هریک از آنها id مشخص کنیم.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
}
#box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
تمرین 2: چهار div با عرض و ارتفاع 100 در صفحه قرار دهید بطوریکه divهای اول و سوم با رنگ قرمز و divهای دوم و چهارم با رنگ آبی باشند.
از آنجایی که نیاز داریم به بیش از یک عنصر استایل مشخصی اعمال کنیم باید از Class Selector استفاده نماییم.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
<style>
.redbox{
width: 100px;
height: 100px;
background-color: red;
}
.bluebox{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="redbox"></div>
<div class="bluebox"></div>
<div class="redbox"></div>
<div class="bluebox"></div>
</body>
</html>
همانطور که متوجه شدید هر تعداد div که در صفحه قرار گیرند زیر هم نمایش داده می شوند. اگر قصد داشته باشید divها در کنار هم نمایش داده شوند باید آنها را شناور کنید
نحوه نمایش (display) برخی از عناصر بصورت پیش فرض block می باشد یعنی در هر بخشی از صفحه که قرار گیرند کل بلاک (ردیف) را اشغال کرده و اجازه نمی دهند عنصر دیگری در مجاورت آنها قرار گیرند. در چنین شرایطی برای آنکه عناصر را مجاورت یکدیگر قرار دهیم نیاز است با استفاده از خاصیت (دستور) float آنها را شناور کنیم. برای خاصیت float می توان دو مقدار زیر را اختصاص داد:
مثال: قصد داریم دو div با رنگ های بنفش و نارنجی طراحی کنیم به طوریکه یکی در سمت راست و دیگری در سمت چپ قرار گیرد.
<!DOCTYPE html>
<html>
<head>
<title>Beno Academy | Html & Css Tutorial</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: purple;
float: left;
}
#box2{
width: 200px;
height: 200px;
background-color: orange;
float: right;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
نتیجه اجرا کدهای فوق به شکل زیر خواهد بود:
اگر قصد داشته باشیم هر دو کادر در سمت چپ صفحه قرار گیرند می توان به شکل زیر عمل کرد:
<style>
#box1{
width: 200px;
height: 200px;
background-color: purple;
float: left;
}
#box2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
در مقاله بعدی نحوه ساخت یک قالب ساده با استفاده از div آموزش داده خواهد شد.
