آموزش css

با سلام خدمت شما دوستان عزیز، حال شما خوبه ؟ امیدوارم که سلامت باشید.همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و…) در صفحات وب است، display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با کاربرد این خاصیت در css بیشتر آشنا خواهیم شد.
ویژگی display
همان طور که پیش از این اشاره شد، ویژگی display برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود و بدین منظور مقادیر متفاوتی می پذیرد که هر کدام از آنها کاربرد خاصی دارند، از جمله این مقادیر می توان block، table ، inline-block، none، list-item و… را نام برد، در زیر به تفصیل به این موارد اشاره می کنیم.
display block
از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)، مثال:

<!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>
<!– http://webgoo.ir –>
<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>

برای دیدن پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.
نکته ۱: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته ۲: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.
display table
از display با مقادیر table برای ایجاد جداول، بدون استفاده از تگ table استفاده می شود، در واقع یک عنصر با خاصیت display table به صورت یک جدول نشان داده می شود و بلاک های درونی آن به عنوان سلول ها و ستون های جدول (با توجه به تنظیمات) پردازش می شوند، مثال:

<!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>
<!– http://webgoo.ir –>
<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 هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:

<!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>
<!– http://webgoo.ir –>
<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>

نکته ۱: اگر مثال بالا را در یک فایل html ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته ۲: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و…) صورت می گیرد، چرا که خاصیت هایی مانند height، width و… در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.
display inline-block
از display با مقادیر inline-block برای ایجاد بلاک های هم سطح و از نوع block استفاده می شود، یعنی یک لایه inline-block با اینکه یک بلاک است، اما به صورت هم سطح پردازش می شود، به این ترتیب می توان در عین استفاده از ویژگی های عناصر block، آنها را به صورت inline نیز نمایش داد، مثال:

<!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>وبگو | ویژگی inline-block در css</title>
<!– http://webgoo.ir –>
<style type=”text/css”>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:inline-block;
height:200px;
width:200px;
background:#F60;
margin-bottom:8px;
}
.block-2{
display:inline-block;
height:200px;
width:200px;
background:#39C;
margin-bottom:8px;
}
.block-3{
display:inline-block;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
}
</style>
</head>
<body>
<div class=”block-1″>
display:inline-block
</div>
<div class=”block-2″>
display:inline-block
</div>
<div class=”block-3″>
display:inline-block
</div>
</body>
</html>

نکته: برای سازگاری با تمام مرورگرها، بهتر است در کنار استفاده از inline-block از خاصیت float با مقادیر left یا right نیز استفاده شود.
display inline-table
از display با مقادیر inline-table برای ایجاد لایه های از نوع جدول اما به صورت هم سطح استفاده می شود، در واقع یک عنصر inline-table مشابه table بوده و در عین حال به صورت هم سطح پردازش می شود، مثال:

<!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>وبگو | ویژگی inline-block در css</title>
<!– http://webgoo.ir –>
<style type=”text/css”>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:inline-table;
height:200px;
width:200px;
background:#F60;
margin-bottom:8px;
}
.block-2{
display:inline-table;
height:200px;
width:200px;
background:#39C;
margin-bottom:8px;
}
.block-3{
display:inline-table;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
}
</style>
</head>
<body>
<div class=”block-1″>
display:inline-table
</div>
<div class=”block-2″>
display:inline-table
</div>
<div class=”block-3″>
display:inline-table
</div>
</body>
</html>

نکته: خاصیت های زیرمجموعه display inline-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 list-item
از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:

<!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>وبگو | ویژگی inline-block در css</title>
<!– http://webgoo.ir –>
<style type=”text/css”>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:list-item;
height:200px;
width:200px;
background:#F60;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
.block-2{
display:list-item;
height:200px;
width:200px;;
background:#39C;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
.block-3{
display:list-item;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
</style>
</head>
<body>
<div class=”block-1″>
display:list-item
</div>
<div class=”block-2″>
display:list-item
</div>
<div class=”block-3″>
display:list-item
</div>
</body>
</html>

نکته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).
display none
از display با مقادیر none برای ایجاد لایه های مخفی در صفحات وب استفاده می شود، بدین معنی که لایه و محتوای درون آن از دید کاربران مخفی می شود، مثال:

<!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>وبگو | ویژگی inline-block در css</title>
<!– http://webgoo.ir –>
<style type=”text/css”>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.block-1{
display:block;
height:200px;
width:200px;
background:#F60;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
.block-2{
display:none;
height:200px;
width:200px;;
background:#39C;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
.block-3{
display:block;
height:200px;
width:200px;
background:#FC0;
margin-bottom:8px;
list-style:circle;
margin-right:10px;
}
</style>
</head>
<body>
<div class=”block-1″>
display:block
</div>
<div class=”block-2″>
display:none
</div>
<div class=”block-3″>
display:block
</div>
</body>
</html>

نکته: استفاده از display none با استفاده از خاصیت visibility hidden متفاوت است، در هنگام استفاده از display none، لایه به کلی از صفحه حذف می شود (عرض و ارتفاع آن صفر در نظر گرفته می شود)، اما با استفاده از visibility hidden، اگرچه لایه و محتوای آن مخفی می شود، اما جای آن در صفحه باقی می ماند (عرض و ارتفاع آن در صفحه وجود دارد).
مثال و پیش نمایش آنلاین
در نمونه کد زیر ترکیبی از مقادیر پر کاربرد مربوط به خاصیت display و پیش نمایش آنلاین آن را ملاحظه می کنید.

آموزش css

درباره نویسنده

نوشته‌های مرتبط

ارسال دیدگاه

دسته ها

جستجو

رجیران

نمايندگی

سرورها

طراحی سایت

هاست

ثبت دامنه