021-20483015

نمايش در قالب بندی CSS

صفت display مهمترین صفت در CSS برای كنترل قالب بندی می باشد.
برای تعیین نمایش یا عدم نمایش عناصر از صفت display استفاده می كنیم. هر عنصری با توجه به نوع آن یك مقدار پیش فرض برای نمایش دارد. مقدار پیش فرض صفت display برای بسیاری از عناصر block یا inline می باشد.

 

 

عناصر سطح بلوك

یك عنصر سطح بلوك همیشه از سر سطر شروع شده و به اندازه كل عرض موجود طول ادامه می یابد.


مثال هایی از عناصر سطح بلوك :

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

 

 

 

 

 

عناصر داخل خط (inline)

یك عنصر داخل خط از خط جدیدی شروع نمی شود و تا جایی كه لازم باشد عرض می گیرد.


مثال هایی از عناصر داخل خطی :

<span>
<a>
<img>

 

 

 

 

 

 

;display:none

صفت و مقدار ;display:none معمولا به همراه جاوا اسكریپت برای مخفی كردن و نمایش عناصر بدون حذف یا دوباره سازی آنها ،‌استفاده می شود. برای عنصر <script> مقدار پیش فرض ;display:none است.

 

 

 

 

 

 

تغییر مقدار پیش فرض display

همانطور كه اشاره شد ،‌ صفت display مقدار پیش فرضی دارد. اما می توان آن را تغییر داد. تبدیل یك عنصر داخل خطی به عنصر سطح بلوك یا برعكس می تواند روشی برای خاص نشان دادن صفحه وب باشد، كه البته در هر حال از استانداردهای وب خارج نخواهد شد.

مثال زیر نشان دهنده تبدیل عنصر داخل خطی <li> به یك منوی افقی است.

مثال :

نحوه نمایش
li {
    display: inline;
}
مشاهده مثال
 


نكته ! تنظیم صفت display  یك عنصر فقط نحوه نمایش آن را تغییر می دهد و نوع آن را تغییر نمی دهد. پس عنصر داخل خطی با ;display:block نمی تواند عناصر سطح بلوك دیگری را در خود داشته باشد.


مثال زیر عناصر <span> را به عنوان عناصر سطح بلوك نمایش می دهد.

مثال :
نحوه نمایش بلوک
span {
    display: block;
}
مشاهده مثال
 

مثال زیر عناصر <a> را به عنوان عناصر سطح بلوك نمایش می دهد.

مثال :
نمایش لینک ها بصورت عناصر سطح بلوک
a {
    display: block;
}
مشاهده مثال
 

 

 

 

 

 

مخفی كردن عناصر

با تنظیم صفت display بر روی none میتوان یك عنصر را مخفی كرد. عنصر مخفی خواهد شد و صفحه به گونه نمایش داده می شود كه آن عنصر وجود ندارد.

مثال :

مقدار عدم نمایش
h1.hidden {
    display: none;
}
مشاهده مثال
 

;visibility:hidden هم عنصر را مخفی می كند. اما عنصر همچنان فضای مورد نظر را اشغال خواهد كرد و بر روی قالب بندی صفحه تاثیر خواهد گذاشت.

مثال :
مقدار نمایش مخفی
h1.hidden {
    visibility: hidden;
}
مشاهده مثال
 
 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

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

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط