uody
25th March 2011, 07:31 PM
نکات css
Block و Inline
در مواردی که خصوصیت Block رو داشته باشند:
1. همیشه در یک سطر مجزا و جدید قرار میگیرند
2. عرض (Width) و ارتفاع (Height) و حاشیه بالا (Top-Margin) و پایین (Bottom-Margin) در آنها قابل تغییر است
3. عرض در آنها به صورت پیشفرض 100% است.
تگهایی که این خصوصیت رو دارند:
<div>, <p>, <h1>, <form>, <ul>, <li>
در موارد Inline:
1. به صورت دورن خطی قرار میگیرند!
2. عرض (Width) و ارتفاع (Height) و حاشیه بالا (Top-Margin) و پایین (Bottom-Margin) در آنها قابل تغییر نیست!
3. عرض آنها بر اساس اندازه محتوایشان تعیین میشود و قابل تغییر به صورت مقداردهی نیست!
تگهایی که این خصوصیت رو دارند:
<span>, <a>, <label>, <input>, <img>, <strong>, <em>
برای تغییر خصوصیت نمایش تگها به صورتهای بالا در CSS به این صورت استفاده میشود:
display: inline
و
display: block
قرار دادن حداقل برای طول و عرض تگها:
Min-Height و Min-Width
کد بالا بخش دوم که expression استفاده شده است در مرورگرهای IE کاربرد دارد و بر اساس جاوا اسکریپت عمل میکند! به این صورت که توسط دستور شرطی بررسی میکند که آیا عرض صفحه از 600 کوچکتر است یا خیر
min-width در نسخه های IE شناسایی نمیشود و برای همین منظور از expression استفاده میشود و مقدار آن در width قرار میگیرد!
مثال برای حداقل و حداکثر:
<div id="tagID">
TEXT TEXT TEXT
</div>
<style>
#tagID
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
</style>
استفاده از قابلیت پدر-فرزند
در مرورگر IE این قابلیت کارایی ندارد از آن میتوان به عنوان روشی امن و استاندارد برای هک CSS استفاده کرد!
به این مثال توجه کنید:
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
در این مثال کلاس box در CSS تعریف و خصوصیت عرض و ارتفاع مقداردهی شدند!
در قسمت دوم این کد تمام تگهایی که Class آنها برار box باشد و در زیر مجموعه body قرار گرفته باشند مقدار دهی مشوند!
یعنی برروی این تگ در تاثیر ندارد!
<html>
<body>
<div class="box"></div?
</body>
<div class="box" id="out"></div>
</html>
در این کد تگ دوم که شناسه آن out میباشد مقادیر کلاس تعریف شده box در CSS را نمیگیرد! در مرورگرهای IE این نوع کلاس دهی CSS مفهومی ندارد و شناسایی نمیشود! "html>body .box"
---------
خلاصه نویسی مقادیر:
margin: 5px 10px 20px; /* top left/right bottom */
margin: 10px 20px; /* top/bottom left/right */
margin: 0; /* all */
کدهارو به صورت تک خط بنویسید و به سرعت بازسازی صفحه بیافزایید!
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
h2 اول خلاصه و تک خط
h2 دوم مرتب و سریع ولی برای چشم نه برای ماشین! چون ماشین به صورت خط به خط کدهارو بررسی و تحلیل میکنه!
منبع:forum.vatandownload.com
Block و Inline
در مواردی که خصوصیت Block رو داشته باشند:
1. همیشه در یک سطر مجزا و جدید قرار میگیرند
2. عرض (Width) و ارتفاع (Height) و حاشیه بالا (Top-Margin) و پایین (Bottom-Margin) در آنها قابل تغییر است
3. عرض در آنها به صورت پیشفرض 100% است.
تگهایی که این خصوصیت رو دارند:
<div>, <p>, <h1>, <form>, <ul>, <li>
در موارد Inline:
1. به صورت دورن خطی قرار میگیرند!
2. عرض (Width) و ارتفاع (Height) و حاشیه بالا (Top-Margin) و پایین (Bottom-Margin) در آنها قابل تغییر نیست!
3. عرض آنها بر اساس اندازه محتوایشان تعیین میشود و قابل تغییر به صورت مقداردهی نیست!
تگهایی که این خصوصیت رو دارند:
<span>, <a>, <label>, <input>, <img>, <strong>, <em>
برای تغییر خصوصیت نمایش تگها به صورتهای بالا در CSS به این صورت استفاده میشود:
display: inline
و
display: block
قرار دادن حداقل برای طول و عرض تگها:
Min-Height و Min-Width
کد بالا بخش دوم که expression استفاده شده است در مرورگرهای IE کاربرد دارد و بر اساس جاوا اسکریپت عمل میکند! به این صورت که توسط دستور شرطی بررسی میکند که آیا عرض صفحه از 600 کوچکتر است یا خیر
min-width در نسخه های IE شناسایی نمیشود و برای همین منظور از expression استفاده میشود و مقدار آن در width قرار میگیرد!
مثال برای حداقل و حداکثر:
<div id="tagID">
TEXT TEXT TEXT
</div>
<style>
#tagID
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
</style>
استفاده از قابلیت پدر-فرزند
در مرورگر IE این قابلیت کارایی ندارد از آن میتوان به عنوان روشی امن و استاندارد برای هک CSS استفاده کرد!
به این مثال توجه کنید:
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
در این مثال کلاس box در CSS تعریف و خصوصیت عرض و ارتفاع مقداردهی شدند!
در قسمت دوم این کد تمام تگهایی که Class آنها برار box باشد و در زیر مجموعه body قرار گرفته باشند مقدار دهی مشوند!
یعنی برروی این تگ در تاثیر ندارد!
<html>
<body>
<div class="box"></div?
</body>
<div class="box" id="out"></div>
</html>
در این کد تگ دوم که شناسه آن out میباشد مقادیر کلاس تعریف شده box در CSS را نمیگیرد! در مرورگرهای IE این نوع کلاس دهی CSS مفهومی ندارد و شناسایی نمیشود! "html>body .box"
---------
خلاصه نویسی مقادیر:
margin: 5px 10px 20px; /* top left/right bottom */
margin: 10px 20px; /* top/bottom left/right */
margin: 0; /* all */
کدهارو به صورت تک خط بنویسید و به سرعت بازسازی صفحه بیافزایید!
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
h2 اول خلاصه و تک خط
h2 دوم مرتب و سریع ولی برای چشم نه برای ماشین! چون ماشین به صورت خط به خط کدهارو بررسی و تحلیل میکنه!
منبع:forum.vatandownload.com