نكاتي پیرامون تگ Div
تعيين رنگ زمينه:
|
<div id="m1" style="background:yellow;">Computer Union</div> |
در صورتي كه بخواهيد لايه شفاف باشد عبارت transparent را بلافاصله بعد از رنگ بنويسيد.
|
<div id="m1" style="background:yellow;"> |
مثلا در مثال بالا لايه قرمز رنگ شفاف است و ديده نمي شود.
نمايش عكس در پس زمينه لايه:
توجه داشته باشيد در صورتي كه براي لايه هم تصوير زمينه و هم رنگ زمينه انتخاب شوداولويت نمايش با تصوير است.
|
<div id="m2" style="background-image:url(1.jpg); ">Computer Union</div> |
مثلا در مثال فوق عكس براي زمينه انتخاب شده است.در صورتي كه بخواهيد تصويري نمايش داده نشود عبارت none را بجاي آدرس تصوير قرار دهيد.شايد اين نكته بي مورد به نظر برسد ولي در صورتي كه بخواهيم با كدنويسي بين دو حالت سوئيچ كنيم لازم است.
در مثال بالا تصوير آنقدر تكرار مي شود تا كل زمينه را بپوشاند.براي جلوگيري از اين امر اين طور عمل مي كنيم:
|
<div id="m2" style="background-image:url(1.jpg); background-repeat:no-repeat">Computer Union</div> |
عبارت no-repeat موجب ميشود كه تصوير تنها يكبار نمايش داده شود.حالت پيش فرض اين خاصيت repeat مي باشد.دو حالت repeat-x و repeat-y هم هست كه به ترتيب تصوير را به صورت طولي و عرضي تكرار مي كند.
در صورتي كه تصوير تكرار شود شما مي توانيد تعيين كنيد كه اين تكرار از كدام سمت شروع شود.همچنين از لحاظ ارتفاع كدام مقطع از تصوير نمايش داده شود.
|
<div id="m2" style="background-image:url(1.jpg); background-position=center left;">Computer Union</div> |
پارامتر اول تعيين مي كند كه وسط تصوير نمايش داده شود و پارامتر دوم هم تعيين مي كند كه چينش تصاوير از سمت چپ شروع شود.در صورتي كه تنها يك پارامتر تعيين شود به عنوان پارامتر دوم محسوب خواهد شد.
نمايش كادر :
شما مي توانيد نوع ، رنگ و ضخامت كادر را تعيين كنيد.
|
<div id="m2" style="border-style=solid; border-color=red; border-width=thin">Computer Union</div> |
در مثال بالا border-style كادر را تعيين مي كند و مي تواند مقادير زير باشد.
dotted براي كادر نقطه چين ،
dashed براي كادر خط چين ،
solid براي كادر خطي ،
groove / ridge / inset / outset هم انواع كادر هاي سه بعدي را رسم مي كنند.
border-width هم ضخامت را تعيين مي كند.مقدار پيش فرض اين خاصيت medium مي باشد.دو مقدار thin/thick هم به ترتيب ضخامت را كوچتر و بزرگتر از حد پيش فرض مي كنند.البته شما مي توانيد مقدار دلخواه خود را همراه با واحد آن وارد كنيد.واحدها عبارتند از:
cm, mm, in, pt, pc, px
نكته آخر در مورد كادر ها اين است كه با استفاده از خصوصيات شما مي توانيد خطوط هر طرف را كه مايليد نمايش دهيد و نوع و رنگ و ضخامت را هم مشخص كنيد.
border-bottom / border-left / border-right / border-top
تعيين رنگ متن:
|
<div id="m2" style="color:red;">Computer Union</div> |
تعيين اسكرول براي لايه:
اين مورد اين امكان رو فراهم مي كند كه در فضاي كمي عكس بزرگ يا متني زيادي رو قرار بدهيم.
|
<div id="m2" style="overflow=scroll; height=100; width=100;">Computer Union Computer Union Computer Union Computer Union Computer Union</div> |
همچنين به جاي scroll مي توان عبارت auto رو قرار داد كه در صورت لزوم اسكرول را ظاهر مي كند.