همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و...) در صفحات وب است، display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با کاربرد این خاصیت در css بیشتر آشنا خواهیم شد
**
ویژگی display**
همان طور که پیش از این اشاره شد، ویژگی display برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود و بدین منظور مقادیر متفاوتی می پذیرد که هر کدام از آنها کاربرد خاصی دارند، از جمله این مقادیر می توان block، table ، inline-block، none، list-item و... را نام برد، در زیر به تفصیل به این موارد اشاره می کنیم.
**
display block
**
از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)، مثال:
کد PHP:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ویژگی display block در css</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:block;
height:200px;
width:200px;
border:1px solid #999;
background:#F60;
margin-bottom:8px;
}
.block-2{
display:block;
height:200px;
width:200px;
border:1px solid #999;
background:#39C;
margin-bottom:8px;
}
.block-3{
display:block;
height:200px;
width:200px;
border:1px solid #999;
background:#FC0;
margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:block 1
</div>
<div class="block-2">
display:block 2
</div>
<div class="block-3">
display:block 3
</div>
</body>
</html>
نکته 1: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته 2: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.
display table
از display با مقادیر table برای ایجاد جداول، بدون استفاده از تگ table استفاده می شود، در واقع یک عنصر با خاصیت display table به صورت یک جدول نشان داده می شود و بلاک های درونی آن به عنوان سلول ها و ستون های جدول (با توجه به تنظیمات) پردازش می شوند، مثال:
کد PHP:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ویژگی display table در css</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:table;
height:200px;
width:600px;
border:1px solid #999;
background:#F60;
padding:4px;
margin-bottom:8px;
}
.block-2{
display:table-cell;
height:200px;
width:200px;
background:#39C;
margin-bottom:8px;
}
.block-3{
display:table-cell;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:table
<div class="block-2">
display:table-cell
</div>
<div class="block-3">
display:table-cell
</div>
</div>
</body>
</html>
نکته: خاصیت های زیرمجموعه display table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group که می توانید از آنها برای لایه های درونی استفاده کنید.
display inline
از display با مقادیر inline برای ایجاد عناصر هم سطح استفاده می شود، یعنی لایه هایی که به صورت display inline هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:
کد PHP:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ویژگی display inline در css</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:inline;
height:200px;
width:200px;
background:#F60;
margin-bottom:8px;
}
.block-2{
display:inline;
height:200px;
width:200px;
background:#39C;
margin-bottom:8px;
}
.block-3{
display:inline;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline
</div>
<div class="block-2">
display:inline
</div>
<div class="block-3">
display:inline
</div>
</body>
</html>
نکته 1: اگر مثال بالا را در یک فایل html ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.