ویژگی display یا دستور display

در این بخش از آموزش css بهدستور display یا ویژگی display می پردازیم.

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

حتما دستور displayرا خوب یاد بگیرید چون در پروژه ها حتما بکار می رود.

display: inline

تگ li به صورت پیش فرض در یک خط قرار می گیرد.

با ویژگی display: inline می توانیم دستوراتی مانند li را که هر کدام در یک خط قرار می گیرند را در یک خط و کنار هم قرار دهید.

inline عناصر را در کنار هم قرار می دهد.

مثال زیر را ببینید تا با ویژگی display: inline بیشتر آشنا شوید.

<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>sh711.com menu inline:</p>
<ul>
<li><a href="#" target="_blank">HTML</a></li>
<li><a href="#" target="_blank">CSS</a></li>
<li><a href="#" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>

display: block

در دستور displayحالت block یا display: blockباعث می شود هر عنصر در یک خط بکار رود.

در حالت پیش فرض span ها در کنار هم قرار می گیرند.

اما در مثال پایین با دستور display حالت نمایش آن را تغییر دادیم و هر عنصر span مقدارش در یک خط قرار گرفت.

<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>sh711.com </span> <span>span dar halat pishfarz dar kenar ham gharar migirad</span>
</body>
</html>

display: none

در دستور displayحالت none باعث می شود عنصر مخفی شود .

اگر برای یک عنصر display: none را انتخاب کنیم عنصر مخفی می شود.

بعضی مواقع مجبوریم یک عنصر را مخفی کنیم و سپس با جی کوئری آن را نمایش دهیم. مانند منوها در سایت ریسپانسیو

ما با این دستور h2 را مخفی کردیم و آدرس سایت شیرازلرن نمایش داده نمی شود.

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
display: none;
}
</style>
</head>
<body>
<h1>display none</h1>
<h2>sh711.comn</h2>
</body>
</html>

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

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