قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / تنظيمات نمايش در CSS

تنظيمات نمايش در CSS

تنظيمات نمايش در CSSReviewed by سالار on Apr 19Rating: 5.0

با مجموعه خواص ارائه شده در اين قسمت می توان نحوه و مکان نمايش عناصر را در صفحه توسط CSS تنظيم کرد .
خواص ارائه شده دراين قسمت در ليست زير قرار دارند . برای درياقت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد :

clear
curser
display
float
position
visibility

خاصيت clear

نام خاصيت نوع خاصيت شرح
clear right
left
both
none
در دو طرف عناصر ، برخی عناصر ديگر همانند عکس يا متن می توانند قرار بگيرند . توسط اين خاصيت ، کناره هايي از عنصر را که می خواهيم متن يا عکس در آن سمت قرار نگيرد را مشخص می کنيم ، که حالت های ممکن زير را می تواند داشته باشد .
در واقع از اين خاصيت برای خالی کردن فضای اطراف يک عنصر استفاده می شود .
– right : هيچ متن يا عکسی نمی تواند در سمت راست عنصر قرار بگيرد .
– left : هيچ متن يا عکسی نمی تواند در سمت چپ عنصر قرار بگيرد .
– both : هيچ متن يا عکسی نمی تواند در دو طرف عنصر قرار بگيرد .
– none : در دو طرف عنصر مجاز است که عکس يا متن قرار بگيرد ، که حالت پيش فرض است .

 


خاصيت curser

نام خاصيت نوع خاصيت شرح
curser URL
auto
crosshair
default
poniter
move
help
e-resize
ne-resize
nw-resize
s-size
text
w-size
wait
نوع اشاره گر موس را در هنگام قرار گيری بر روی عنصر مورد نظر تعيين می کند ، که انواع حالت های آن عبارتند از :
– URL : مسير فايل نگهدارنده اطلاعات مربوط به يک نوع خاص از اشاره گر را تعيين می کند .
– default : اشاره گر پيش فرض .
– auto : مرورگر به صورت اتوماتيک يک اشاره گر را انتخاب می کند .
– crosshair : اشاره گر به صورت يک علامت بعلاوه بزرگ در می آيد .
– pointer : اشاره گر به صورت يک دست در می آيد .
– move : اشاره گر به صورت يک فلش ۴ جهته در می آيد .
– e-resize : اشاره گر به صورت يک فلش ۲ جهته رو به بالا در می آيد .
– help : اشاره گر به صورت معمولی به همراه يک علامت سئوال در کنارآن نمايش داده می شود .
– n-resize : اشاره گر به صورت يک فلش ۲ جهته رو به بالا در می آيد .
– ne-resize : اشاره گر به صورت يک فلش ۲ جهته مورب چپ به راست در می آيد .
– nw-resize : اشاره گر به صورت يک فلش ۲ جهته مورب راست به چپ در می آيد .
– s-resize : اشاره گر به صورت يک فلش ۲ جهته عمودی در می آيد .
– text : اشاره گر به صورت نمايش در محيط های متنی در می آيد .
– w-resize : اشاره گر به صورت يک فلش ۲ جهته افقی در می آيد .
– wait : اشاره گر به صورت ساعت شنی در می آيد .

مثال : در مثال زير برخی از حالت های اشاره گر موس را بر روی عناصر بررسی کرده ايم . برای مشاهده هر کدام از حالت ها بر روی يک خانه جدول مثال برويد :

Example
< table style=”border: solid 2px blue; width: 500px; text-align: center” >
  < tr >
  < td style=”border: solid 2px blue; cursor: default” >
۱   default
< /td >

    < td style=”border: solid 2px blue; cursor: crosshair” >
۲  crosshair
< /td >

< td style=”border: solid 2px blue; cursor: pointer” >
۳  pointer
< /td >

< td style=”border: solid 2px blue; cursor: move” >
۴  move
< /td >

< /tr >

< tr >
< td style=”border: solid 2px blue; cursor: ne-resize” >
۵  ne-resize
< /td >

< td style=”border: solid 2px blue; cursor: e-resize” >
۶  e-resize
< /td >

< td style=”border: solid 2px blue; cursor: text” >
۷  text
< /td >

< td style=”border: solid 2px blue; cursor: wait” >
۸  wait
< /td >

< /tr >

< /table >
کد
۱
default
۲
crosshair
۳
pointer
۴
move
۵
ne-resize
۶
e-resize
۷
text
۸
wait
خروجی

 


خاصيت display

نام خاصيت نوع خاصيت شرح
display none
inline
block
list-item
run-in
compact
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-group
table-cell
table-caption
خاصيت display نحوه نمايش عنصر مورد نظر را در صفحه تعيين می کند ، که می تواند يکی از حالت های زير را داشته باشد :
– none : عنصر بر روی صفحه نمايش داده نمی شود .
– block : عنصر به صورت يک شی مجزا با يک خط فاصله قبل و بعد از آن نمايش داده می شود .
– inline : عنصر به صورت يک شی درون خطی بدون هيچ خط فاصله قبل و بعد از آن نمايش داده می شود ، که حالت پيش فرض است .
– list-item : عنصر به صورت يک ليست نمايش داده می شود .
– run-in : عنصر به صورت يک شی مجزا يا درون خطی ، بسته به محتويات درونی صفحه نمايش داده می شود .
– compact : عنصر به صورت يک شی مجزا يا درون خطی ، بسته به محتويات درونی صفحه نمايش داده می شود .
– table : عنصر به صورت يک جدول با يک خط فاصله قبل و بعد از آن صفحه نمايش داده می شود .
– inline-table : عنصر به صورت يک شی دورن جدولی بدون خط فاصله قبل و بعد از آن صفحه نمايش داده می شود .
– table-row-group : عنصر به صورت بخشی از اجزای يک سطر جدول ( در کنار هم ) همانند تگ < tbody > نمايش داده می شود .
– table-header-group : عنصر به صورت بخشی از اجزای يک سطر جدول ( در کنار هم ) همانند تگ < thead > نمايش داده می شود .
– table-footer-group : عنصر به صورت بخشی از اجزای يک سطر جدول ( در کنار هم ) همانند تگ < tfoot > نمايش داده می شود .
– table-row : عنصر به صورت اجزای يک سطر جدول ( در کنار هم ) همانند تگ < tr > نمايش داده می شود .
– table-column-group : عنصر به صورت بخشی از اجزای يک ستون جدول همانند تگ < colgroup > نمايش داده می شود .
– table-column : عنصر به صورت اجزای يک ستون جدول همانند تگ < td > نمايش داده می شود .
– table-group : عنصر به صورت يک خانه ستون های جدول همانند تگ < col > نمايش داده می شود .
– table-cell : عنصر به صورت خانه يک ستون جدول همانند تگ های < td > و < th > نمايش داده می شود .
– table-caption : عنصر به صورت عنوان يک جدول نمايش داده می شود .

مثال : در مثال زير ۲ حالت inline و block با هم مقايسه شده اند . به نحوه نمايش ۲ عنصر در کنام هم توجه کنيد ، در حالت inline دو عنصر به صورت خطی و در کنار هم نمايش داده شده ولی در حالت block ، که حالت پيش فرض است با يک خط فاصله نمايش داده شده اند . بررسی بقيه حالت ها را به عهده خواننده می گذاريم :

Example
حالت inline
< table style=”border: solid 2px blue ; width: 400px; display: inline” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
     c
< /td >

< /tr >

< /table >
< img src=”../Pic/imgexample.jpg” style=”display: inline” / >
کد
a b c

Display Example ; inline Mode

خروجی
حالت block
< table style=”border: solid 2px blue ; width: 400px; display: block” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
     c
< /td >

< /tr >

< /table >
< src=”../Pic/imgexample.jpg” style=”display: block” / >
کد
a b c

Display Example ; block Mode

خروجی

 


خاصيت float

نام خاصيت نوع خاصيت شرح
float right
left
none
توسط اين خاصيت ، نحوه تراز بندی و موقعيت قرار گيری عناصر را در صفحه نسبت به هم تعيين می کنيم ، که می تواند يکی از حالت های زير باشد :
نکته : از اين خاصيت می توان برای قرار گيری عناصر در يک خط ، در کنار هم استفاده کرد .
– right : عنصر در سمت راست عنصر ديگر قرار می گيرد .
– left : عنصر در سمت چپ عنصر ديگر قرار می گيرد .
– none : عناصر به همان ترتيبی که در طراحی و کدنويسی صفحه تعيين شده است ، در کنار هم قرار می گيرند .

مثال : در مثال زير يک عنصر جدول و يک عنصر عکس قرار داده ايم . در حالت ۱ ، عکس را در سمت چپ جدول و در حالت ۲ ، عکس را در سمت راست آن قرار داده ايم :
نکته : چنانچه فضای کافی در عرض صفحه برای قرار گرفتن دو عنصر يا بيشتر در کنار هم وجود نداشته باشد ، عنصر به خط بعدی انتقال می يابد .

Example
حالت ۱
< table style=”border: solid 2px blue ; width: 400px; float: right” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
      c
< /td >

< /tr >

< /table >
< img src=”../Pic/bgexample.jpg” style=”float: left” / >
کد
a b c

float Example ; Left Position

خروجی
حالت ۲
< table style=”border: solid 2px blue; width: 400px; float: left” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
      c
< /td >

< /tr >

< /table >
< img src=”../Pic/bgexample.jpg” style=”float: right” / >
کد
a b c

float Example ; Right Position

خروجی

 


خاصيت position

نام خاصيت نوع خاصيت شرح
position static
relative
absolute
fixed
توسط اين خاصيت می توان موقعيت و مختصات قرار گيری عنصر را در صفحه تعيين کرد ، که می تواند يکی از حالت های زير باشد :
– static : در اين حالت عنصر در موقعيتی که مرورگر در هنگام تنظيم نمايش صفحه با توجه به مکان ساير محتويات به آن اختصاص می دهد ، قرار می گيرد که حالت پيش فرض است .
– relative :در اين حالت ، چنانچه برای عنصر توسط يکی از خواص left , right , top و bottom مقداری تعيين شود ، آن مقدار به موقعيت عادی آن عنصر اضافه شده و نمايش داده می شود . برای مثال چنانچه مقدار خاصيت left = 20px در نظر گرفته شود ، ۲۰px به موقعيت قرار گيری عنصر در سمت چپ اضافه می شود .
– absolute : در اين حالت موقعيت قرار گيری عنصر با توجه به مختصات تعيين شده ، توسط ۴ خاصيت left , right , top و bottom در صفحه يا عنصر در برگيرنده آن تعيين می شود . در اين حالت امکان قرار گيری عناصر بر روی هم وجود دارد .
– fixed : اين حالت هم عملکردی همانند حالت absolute دارد و می توان موقعيت قرار گيری عنصر را به طور دقيق در صفحه تعيين کرد .

مثال : در مثال زير نيز يک عنصر جدول و يک عنصر عکس قرار داده ايم . در ۳ حالت انواع حالت های قرار گيری عناصر را در صفحه بررسی کرده ايم :

Example
حالت static
< table style=”border: solid 2px blue; width: 400px; position : static” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
      c
< /td >

< /tr >

< /table >
< img src=”../Pic/bgexample.jpg” style=”position : static” / >
کد
a b c

position Example ; static mode

خروجی
حالت relative

نکات :

  1. برای عنصر جدول از سمت چپ ۳۰px و برای عنصر عکس از سمت بالا ۱۰px فاصله تعيين کرده ايم . برای درک بهتر ، خروجی اين حالت را با خروجی حالت قبل مقايسه کنيد .
  2. تراز بندی عناصر در خروجی نسبت به عنصر در برگيرنده آنها ، يعنی خانه جدول تعيين می شود .
< table style=”border: solid 2px blue; border-spacing: 20px; width: 400px; position: relative; left: 30px” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
      c
< /td >

< /tr >

< /table >
< img src=”../Pic/bgexample.jpg” style=”position: relative; top: 10px” / >
کد
a b c

position Example ; relative mode

خروجی
حالت absolute و fixed

نکات :

  1. در حالت absolute , fixed موقعيت قرار گيری عناصر نسبت به کل صفحه در نظر گرفته می شود ، نه نسبت به عنصر در بر گيرنده آن . برای عنصر جدول از سمت بالا ۶۷۰۰px  و از سمت راست ۲۵۰px و برای عنصر عکس از سمت بالا ۶۷۰۰px و از سمت چپ ۵۵۰px فاصله تعيين کرده ايم . برای درک بهتر ، خروجی اين حالت را با خروجی حالت های قبل مقايسه کنيد .
  2. در حالت absolute و fixed عناصر به صورت شناور در می آيند و در محيط Design می توان آنها را با موس جابجا کرد .
< table style=”border: solid 2px blue; border-spacing: 20px; width: 400px; position: absolute ; top: 6700px; right: 550px” >
  < tr >
    < td style=”border: solid 2px blue” >
      a
< /td >
< td style=”border: solid 2px blue” >
      b
< /td >
< td style=”border: solid 2px blue” >
      c
< /td >

< /tr >

< /table >
< img src=”../Pic/bgexample.jpg” style=”position: position: absolute; top: 6700px; right: 250px” / >
کد
a b c

position Example ; relative mode

خروجی

 


خاصيت visibility

نام خاصيت نوع خاصيت شرح
visibility visible
hidden
توسط اين خاصيت نمايش يا عدم نمايش عنصر را در صفحه تعيين می کنيم ، که ۲ حالت ممکن دارد : :
– visible : در اين حالت عنصر بر روی صفحه نمايش داده می شود ، که حالت پيش فرض است .
– hidden : در اين حالت عنصر بر روی صفحه وجود دارد ، ولی نمايش داده نمی شود ( به اصطلاح مخفی است ) .

مثال : در مثال زير نيز يک عنصر جدول را قرار داده ايم ، که در حالت اول قابل مشاهده و در حالت دوم مخفی است :

Example
حالت visible
< table cellpadding=”10″ cellspacing=”0″ style=”border: solid 2px blue; width: 400px; visibility: visible” >
  < tr >
    < td style=”border: solid 2px blue; color: Red” >
      a
< /td >
< td style=”border: solid 2px blue; color: Red” >
      b
< /td >

< /tr >

< /table >
کد
a b
خروجی
حالت hidden
< table cellpadding=”10″ cellspacing=”0″ style=”border: solid 2px blue; width: 400px; visibility: hidden” >
  < tr >
    < td style=”border: solid 2px blue; color: Red” >
      a
< /td >
< td style=”border: solid 2px blue; color: Red” >
      b
< /td >

< /tr >

< /table >
کد
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید