خواص پيشرفته CSS
تنظيمات نمايش در CSS :
با مجموعه خواص ارائه شده در اين قسمت می توان نحوه و مکان نمايش عناصر را در صفحه
توسط CSS تنظيم کرد .
خواص ارائه شده دراين قسمت در ليست زير قرار دارند . برای درياقت اطلاعات درباره هر
کدام بر روی نام آن کليک کنيد :
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
clear |
right
left
both
none
|
در دو طرف عناصر ، برخی عناصر ديگر همانند عکس يا متن می توانند قرار بگيرند . توسط
اين خاصيت ، کناره هايي از عنصر را که می خواهيم متن يا عکس در آن سمت قرار نگيرد را
مشخص می کنيم ، که حالت های ممکن زير را می تواند داشته باشد .
در واقع از اين خاصيت برای خالی کردن فضای اطراف يک عنصر استفاده می شود .
- right : هيچ متن يا عکسی نمی تواند در سمت راست عنصر قرار بگيرد .
- left : هيچ متن يا عکسی نمی تواند در سمت چپ عنصر قرار بگيرد .
- both : هيچ متن يا عکسی نمی تواند در دو طرف عنصر قرار بگيرد .
- none : در دو طرف عنصر مجاز است که عکس يا متن قرار بگيرد ، که حالت پيش فرض است
.
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
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 : اشاره گر به صورت ساعت شنی در می آيد .
|
مثال : در مثال زير برخی از حالت های اشاره گر موس را بر
روی عناصر بررسی کرده ايم . برای مشاهده هر کدام از حالت ها بر روی يک خانه جدول مثال
برويد :
< 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 |
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 ، که حالت پيش فرض است با
يک خط فاصله نمايش داده شده اند . بررسی بقيه حالت ها را به عهده خواننده می گذاريم
:
< 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" / >
|
|
< 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"
/ >
|
|
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
float |
right
left
none
|
توسط اين خاصيت ، نحوه تراز بندی و موقعيت قرار گيری عناصر را در صفحه نسبت به هم تعيين
می کنيم ، که می تواند يکی از حالت های زير باشد :
نکته : از اين خاصيت می توان برای قرار گيری عناصر در يک
خط ، در کنار هم استفاده کرد .
- right : عنصر در سمت راست عنصر ديگر قرار می گيرد .
- left : عنصر در سمت چپ عنصر ديگر قرار می گيرد .
- none : عناصر به همان ترتيبی که در طراحی و کدنويسی صفحه تعيين شده است ، در کنار
هم قرار می گيرند .
|
مثال : در مثال زير يک عنصر جدول و يک عنصر عکس قرار داده
ايم . در حالت 1 ، عکس را در سمت چپ جدول و در حالت 2 ، عکس را در سمت راست آن قرار
داده ايم :
نکته : چنانچه فضای کافی در عرض صفحه برای قرار گرفتن دو
عنصر يا بيشتر در کنار هم وجود نداشته باشد ، عنصر به خط بعدی انتقال می يابد .
< 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"
/ >
|
|
< 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"
/ >
|
|
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
position |
static
relative
absolute
fixed
|
توسط اين خاصيت می توان موقعيت و مختصات قرار گيری عنصر را در صفحه تعيين کرد ، که
می تواند يکی از حالت های زير باشد :
- static : در اين حالت عنصر در موقعيتی که مرورگر در هنگام تنظيم نمايش صفحه با توجه
به مکان ساير محتويات به آن اختصاص می دهد ، قرار می گيرد که حالت پيش فرض است .
- relative :در اين حالت ، چنانچه برای عنصر توسط يکی از خواص left , right , top و
bottom مقداری تعيين شود ، آن مقدار به موقعيت عادی آن عنصر اضافه شده و نمايش داده
می شود . برای مثال چنانچه مقدار خاصيت left = 20px در نظر گرفته شود ، 20px به موقعيت
قرار گيری عنصر در سمت چپ اضافه می شود .
- absolute : در اين حالت موقعيت قرار گيری عنصر با توجه به مختصات تعيين شده ، توسط
4 خاصيت left , right , top و bottom در صفحه يا عنصر در برگيرنده آن
تعيين می شود . در اين حالت امکان قرار گيری عناصر بر روی هم وجود دارد .
- fixed : اين حالت هم عملکردی همانند حالت absolute دارد و می توان موقعيت قرار گيری
عنصر را به طور دقيق در صفحه تعيين کرد .
|
مثال : در مثال زير نيز يک عنصر جدول و يک عنصر عکس قرار
داده ايم . در 3 حالت انواع حالت های قرار گيری عناصر را در صفحه بررسی کرده ايم :
< 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" / >
|
|
|
< 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" / >
|
|
|
< 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" / >
|
|
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
visibility |
visible
hidden
|
توسط اين خاصيت نمايش يا عدم نمايش عنصر را در صفحه تعيين می کنيم ، که 2 حالت ممکن
دارد : :
- visible : در اين حالت عنصر بر روی صفحه نمايش داده می شود ، که حالت پيش فرض است
.
- hidden : در اين حالت عنصر بر روی صفحه وجود دارد ، ولی نمايش داده نمی شود ( به
اصطلاح مخفی است ) .
|
مثال : در مثال زير نيز يک عنصر جدول را قرار داده ايم ،
که در حالت اول قابل مشاهده و در حالت دوم مخفی است :
< 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 >
|
|
|
< 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 >
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :