آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

خواص پيشرفته CSS

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

با مجموعه خواص ارائه شده در اين قسمت می توان نحوه و مکان نمايش عناصر را در صفحه توسط 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 : اشاره گر به صورت يک فلش 4 جهته در می آيد .
- e-resize : اشاره گر به صورت يک فلش 2 جهته رو به بالا در می آيد .
- help : اشاره گر به صورت معمولی به همراه يک علامت سئوال در کنارآن نمايش داده می شود .
- n-resize : اشاره گر به صورت يک فلش 2 جهته رو به بالا در می آيد .
- ne-resize : اشاره گر به صورت يک فلش 2 جهته مورب چپ به راست در می آيد .
- nw-resize : اشاره گر به صورت يک فلش 2 جهته مورب راست به چپ در می آيد .
- s-resize : اشاره گر به صورت يک فلش 2 جهته عمودی در می آيد .
- text : اشاره گر به صورت نمايش در محيط های متنی در می آيد .
- w-resize : اشاره گر به صورت يک فلش 2 جهته افقی در می آيد .
- wait : اشاره گر به صورت ساعت شنی در می آيد .

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

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

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

    < td style="border: solid 2px blue; cursor: pointer" >
      3  pointer
    < /td >

    < td style="border: solid 2px blue; cursor: move" >
    4  move
    < /td >

  < /tr >

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

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

    < td style="border: solid 2px blue; cursor: text" >
      7  text
    < /td >

    < td style="border: solid 2px blue; cursor: wait" >
      8  wait
    < /td >

  < /tr >

< /table >
کد
1
default
2
crosshair
3
pointer
4
move
5
ne-resize
6
e-resize
7
text
8
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 : عنصر به صورت عنوان يک جدول نمايش داده می شود .

مثال : در مثال زير 2 حالت inline و block با هم مقايسه شده اند . به نحوه نمايش 2 عنصر در کنام هم توجه کنيد ، در حالت 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 : عناصر به همان ترتيبی که در طراحی و کدنويسی صفحه تعيين شده است ، در کنار هم قرار می گيرند .

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

Example
حالت 1
< 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
خروجی
حالت 2
< 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 در نظر گرفته شود ، 20px به موقعيت قرار گيری عنصر در سمت چپ اضافه می شود .
- absolute : در اين حالت موقعيت قرار گيری عنصر با توجه به مختصات تعيين شده ، توسط 4 خاصيت left , right , top و bottom در صفحه يا عنصر در برگيرنده آن تعيين می شود . در اين حالت امکان قرار گيری عناصر بر روی هم وجود دارد .
- fixed : اين حالت هم عملکردی همانند حالت absolute دارد و می توان موقعيت قرار گيری عنصر را به طور دقيق در صفحه تعيين کرد .

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

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. برای عنصر جدول از سمت چپ 30px و برای عنصر عکس از سمت بالا 10px فاصله تعيين کرده ايم . برای درک بهتر ، خروجی اين حالت را با خروجی حالت قبل مقايسه کنيد .
  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 موقعيت قرار گيری عناصر نسبت به کل صفحه در نظر گرفته می شود ، نه نسبت به عنصر در بر گيرنده آن . برای عنصر جدول از سمت بالا 6700px  و از سمت راست 250px و برای عنصر عکس از سمت بالا 6700px و از سمت چپ 550px فاصله تعيين کرده ايم . برای درک بهتر ، خروجی اين حالت را با خروجی حالت های قبل مقايسه کنيد .
  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
توسط اين خاصيت نمايش يا عدم نمايش عنصر را در صفحه تعيين می کنيم ، که 2 حالت ممکن دارد : :
- 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 >
کد
a b
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟