آموزش ساخت باکس با css

در این بخش از آموزش css به بحث ساخت باکس می پردازیم.

یکی از موارد مهم که در طراحی قالب سایت استفاده می شود ساخت باکس با استفاده از div میباشد.

با دستور div می توان یک بخش را ایجاد کرد. با استفاده از css یا استایل می توانیم این بخش را زیبا کنیم که یک چیز معمول در طراحی قالب سایت می باشد.

از div در طراحی قالب بسیار استفاده می شود. اگر سورس هر قالب سایتی را ببینید حتما بارها از این دستور استفاده شده است.

اما div و باکس بدون سی اس اس (css) یا استایل چیز بی روح و خشکی می باشد که اصلا برای کاربر جذاب نیست.

هر چه قالب سایت زیباتر باشد در بحث کسب درآمد سایت و افزایش تعداد کاربر تاثیر گذار است.

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

width

عرض باکس را مشخص می کند.

padding

فاصله خالی محتوا تا حاشیه را مشخص می کند. برای اینکه محتوا به حاشیه باکس نچسبد.

margin

فاصله بیرونی را مشخص می کند. باکس از بقیه عناصر فاصله می گیرد.

background-color

رنگ پس زمینه را مشخص می کند.

border

برای اینکه کادری دور متن بیفتد.

height

ارتفاع را مشخص نمی کنیم تا حالت auto باشد . اگر ارتفاع را مشخص کنیم متن اگر زیاد شود از کادر بیرون می زند و چهره جالبی ندارد.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 6px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css
عضویت طلایی
ثبت نظر