TAHA
10-14-2009, 11:25 AM
به نام خدا
CSS مخفف عبارت Cascading Style Sheets مي‌باشد.
CSS در واقع ليستي از دستورات در قالب متن است كه مي‌توان آن را هم در داخل سند ايجاد شده با HTML به كار برد و هم مي‌توان اين دستورات را در داخل يك فايل جداگانه با پسوند css ذخيره كرد و سپس با استفاده از دستور زير آن را به سند HTML لينك كنيم. به اين فايل CSS فايل CSS خارجي مي‌گويند.
<link rel="stylesheet" type="text/css" href="sheet1.css">
در اين كد يك فايل CSS به نام sheet1 را به صفحه مورد نظر لينك كرده‌ايم. اين تگ بايد در داخل تگ head قرار بگيرد.
البته براي ساخت قالب كمتر از فايل CSS خارجي استفاده مي‌كنيم. چون اين فايل بايد در يك هاست آپلود شود. و براي وبلاگ نويسان معمولا چنين امكاني وجود ندارد.
البته ناگفته نماند كه براي ساخت قالب حتما بايد بر روي اينترنت فضايي براي آپلود فايل‌هايمان داشته باشيم. مي‌توانيم از سايت‌هايي كه خدمات هاستينگ رايگان انجام مي‌دهند هم استفاده كنيم.
براي قرار دادن دستورات CSS در سند HTML از تگ style به صورت زير استفاده مي‌كنيم.
<style type="text/css">
...
CSS Codes
...
</style>
بهتر است كه اين دستورات را در تگ head بنويسيم، چون با اين كار در بالاي تگ‌هاي ديگر قرار خواهد گرفت. ولي استفاده آن در ديگر قسمت‌هاي سند HTML نيز مانعي ندارد.
قابليت‌هاي CSS :
با استفاده از CSS امكانات زيادي در اختيار طراح قرار مي‌گيرد.
براي مثال مي‌توانيد براي هر عنصري در صفحه تصوير پس زمينه قرار بدهيد و يا خطي به عنوان حاشيه با رنگ و اندازه دلخواه رسم كنيد. (اين قابليت‌ها به طور كامل در HTML وجود نداشت)
يكي از دلايلي كه طراحان از heading ها استفاده نمي‌كردند اين بود كه آنها كنترلي بر روي رنگ، اندازه و فونت آنها نداشتند. ولي با CSS شما قادريد كه كه تمام خصوصيات heading ها را تغيير دهيد.
نه تنها خصوصيات heading ها بلكه خصوصيات هر تگ ديگري را هم مي‌توانيد تغيير دهيد.
براي ايجاد تغيير در خصوصيات يك تگ مي‌بايست ابتدا نام تگ سپس دستورات را داخل {} قرار بدهيم.
براي مثال در كد زير مي‌خواهيم تغييراتي را بر روي تگ h1 ايجاد كنيم.
<style type="text/css">
h1{
font-family:Tahoma;
font-size:10px;
color:#009900;
}
</style>
<h1>CSS آموزش</h1>
: نتيجه
h1{ font-family:Tahoma; font-size:10px; color:#009900; } CSS آموزش
نكته :
بعد از نوشتن هر دستور بايد يك سمي كالن (;) قرار بدهيم.
اگر اين كد را بنويسيم، بعد از آن هر بار كه از تگ h1 استفاده كنيم، متن داخل آن به همين صورت خواهد شد.
براي نوشتن دستورات CSS راه ديگري نيز وجود دارد كه آن هم استفاده از خصوصيت style تگ‌هاست. همه‌ي تگ‌ها داراي خصوصيتي به اين نام مي‌باشند و ما مي‌توانيم از آن استفاده كنيم. تفاوت اين راه با روش قبلي در اين است كه در روش دوم فقط همان تگي كه خصوصيت style آن را مشخص كرده‌ايم تغيير خواهد كرد. و بر روي تگ‌هايي كه در ادامه مي‌نويسيم هيچ تاثيري ندارد.
براي درك بهتر اين موضوع به مثال زير توجه كنيد.
<h2 style="background:#FFCC00;
font-family:Tahoma;
font-size:12px;
width:30px;">سلام</h2>
<h2>به شما</h2>
سلام
به شما
همانطور كه فهميديد با اين كار مي‌شه به هر تگ خواص متفاوتي داد.
البته استفاده از CSS محدود به اين دو حالت نيست. و تا اونجايي كه من مي‌دونم دو روش ديگر هم وجود داره، كه در ادامه به اونها اشاره مي‌كنم.
يكي ديگر از قابليت‌هاي CSS پايين آوردن حجم صفحات HTML مي‌باشد. چون با استفاده از CSS شما يك كد را يك بار مي‌نويسيد و در هزار جاي صفحه از اون استفاده مي‌كنيد.حتي مي‌توان يك فايل CSS خارجي ايجاد كرد و از آن در تمام صفحات سايت استفاده كرد. با اين كار هم حجم اطلاعات كم مي‌شود و هم سرعت كار بيشتر مي‌شود.
فرض كنيد از يك تگ font در 100 جاي صفحه استفاده كرده باشيد، و در پايان كار از نوع فونت يا رنگ اون خوشتون نياد. در اين صورت اگه از CSS استفاده نكرده باشيد، مي‌بايست كل 100 تگ را پيدا كرده و تغيير بدهيد. ولي در صورتي كه از CSS استفاده كرده باشيد مي‌توانيد با تغيير دادن يك خط كد همان كار را انجام دهيد.
فكر مي‌كنم شما هم قانع شده باشيد كه چرا بايد از CSS استفاده كنيم.
دو روش ديگري كه براي استفاده از CSS وجود دارد، بدين صورت است كه ابتدا يك سبك را ايجاد مي‌كنيم و سپس از طريق خاصيت id و class آن را به عناصر مورد نظر نسبت مي‌دهيم.
نكته 1 :
تفاوت دو خاصيت class و id در اينست كه براي خاصيت id فقط مي‌توانيم يك سبك تعيين كنيم. ولي در خاصيت class مي‌توانيم چندين سبك را در كنار هم قرار دهيم.
نكته 2 :
نحوه نامگذاري سبك‌ها : براي ايجاد سبك‌هايي كه در خاصيت class قرار مي‌گيرند، ابتدا يك نقطه و سپس نام سبك و بعد از آن {options}. ولي براي ايجاد سبك‌هايي كه در خاصيت id قرار مي‌گيرند ابتدا يك # سپس نام سبك و بعد از آن {options}.
به نمونه‌هاي زير توجه كنيد.
<style type="text/css">
.fon{font-family:Tahoma;font-size:12px;color:#999999}
.dim{width:120px;border-color:red;border-width:1px;border-style:solid}
</style>
<font class="fon">ترفندهاي كامپيوتر</font><br><br>
<font class="fon dim">ترفندهاي كامپيوتر</font>
: نتيجه
.fon{font-family:Tahoma;font-size:12px;color:#999999} .dim{width:120px;border-color:red;border-width:1px;border-style:solid} ترفندهاي كامپيوتر
در آموزش HTML گفته بودم كه اين باكس‌هاي آبي رنگ را كه كدها را داخلشون قرار مي‌دهم با استفاده از CSS ايجاد كردم. در كدهاي پايين نحوه ايجاد اين باكس‌ها را مي‌بينيد.
<style type="text/css">
#box{
border-color:#999999;
border-style:dashed;
border-width:1px;
background:#E0EAF3;
padding:5px;
direction:ltr;
margin:12px 0px 12px 0px
}
</style>
<div align="left" id="box">
...
codes
...
</div>
تشريح كدها :
border يعني حاشيه، color يعني رنگ، style يعني سبك، width يعني عرض. اين يعني كه حاشيه‌اي به قطر يك پيكسل و با سبك خط‌چين و رنگ خاكستري.
background براي تعيين رنگ پس زمينه و يا تصوير پس زمينه به كار مي‌ره، padding براي ايجاد فاصله از ديواره‌ها، margin براي ايجاد فاصله عنصر با عناصر اطرافش و dir هم كه مي‌دونيد.
توضيحات مربوط به تعدادي از خصوصيات مهم :
در صورتي كه بعد از خصوصيت background كد يك رنگ را بنويسيد، آن رنگ به عنوان رنگ پس‌زمينه خواهد بود.
در صورتي كه بعد از اين خصوصيت عبارت ()url را بنويسيد مي‌توانيد در داخل پرانتز آدرس تصوير پس زمينه را مشخص كنيد.
اگر از url استفاده كنيد مي‌توانيد نحوه قرارگيري تصوير و تكرار يا عدم تكرار را نيز در ادامه اين خصوصيت مشخص كنيد.
مثلا مي‌توانيد براي نحوه قرارگيري تصوير از گزينه‌هاي top,bottom,right,left,center استفاده كنيد. و همچنين مي‌توانيد از گزينه‌هاي no-repeat,repeat-x,repeat-y,repeat براي تعيين تكرار شدن تصوير و جهت تكرار و يا تكرار نشدن تصوير استفاده كنيد. همچنين گزينه‌ي ديگري به نام fixed وجود دارد كه باعث ثابت ماندن تصوير در هنگام scroll مي‌شود. در زير نحوه استفاده از اين گزينه‌ها را مي‌بينيد.
background:url(آدرس كامل تصوير پس‌زمينه) bottom left no-repeat
اين كد تصوير را در پايين سمت چپ عنصر مورد نظر قرار مي‌دهد و از تكرار شدن تصوير جلوگيري مي‌كند
background:url(bgpic.jpg) center repeat-y
اين كد تصوير را در وسط عنصر قرار مي‌دهد و باعث تكرار شدن تصوير در راستاي محور قائم مي‌شود
براي ايجاد حاشيه مي‌توانيم رنگ، سبك و اندازه هر خط رو به طور جداگانه مشخص كنيم. مثلا مي‌نويسيم border-bottom-color كه اين يعني رنگ حاشيه پايين و به همين ترتيب مي‌تونيم خواص حاشيه‌هاي ديگر رو هم به طور جداگانه تعيين كنيم.
البته يك راه ديگر هم براي انجام اين كار وجود دارد كه در اين روش بعد از نوشتن نام خاصيت مثلا border-style به اين ترتيب يعني top right bottom left سبك هر كدام از حاشيه‌ها رو تعيين مي‌كنيم. براي نمونه خاصيت margin باكس‌هاي آبي رنگ رو به اين شيوه تعيين كردم، كه در بالا ديديد.
به كد زير توجه كنيد.
top right bottom left
border-style: dashed solid dashed solid;
مقادير مجاز براي خاصيت border-style را در زير مي‌نويسيم.
dashed/dotted/double/groove/hidden/inherit/inset/none/outset/ridge/solid
مي‌توانيد اين‌ها را تست كنيد و ببينيد هر كدام چه تاثيري دارند.
يكي از خاصيت‌هاي مهم ديگه خاصيت display مي‌باشد. تعداد مقادير مجاز اين خاصيت زياده، به همين خاطر من فقط دو تا از آنها را توضيح مي‌دهم.
اگر به اين خاصيت مقدار block را بدهيم، عنصر مورد نظر به يك بلوك تبديل مي‌شود. مثلا در صورتي كه آن را به يك لينك (تگ a) نسبت بدهيم، متن لينك در يك خط جداگانه قرار خواهد گرفت و در صورتي كه ماوس را بر روي هر كدام از قسمت‌هاي خط بياوريم همانند وقتي مي‌باشد كه ماوس را بر روي متن لينك قرار داده‌ايم. براي مثال نگاهي به قسمت آرشيو موضوعي اين وبلاگ بياندازيد، تا بهتر متوجه منظورم بشويد.
<a href="http://www.ulfsoft.blogfa.com/" style="display:block">ULFSoft</a>
: نتيجه
(http://www.ulfsoft.blogfa.com/)
يك مقدار ديگر براي خاصيت display مقدار none مي‌باشد. با دادن اين مقدار به اين خاصيت عنصر مورد نظر نمايش داده نمي‌شود. كه در حال حاظر براي ما كاربرد زيادي ندارد، مگر در مواقعي كه بخواهيم يك عنصر در صفحه داشته باشيم كه به كاربر نمايش داده نشود. ولي براي اسكريپت‌نويسي با مثلا زبان جاوااسكريپت كاربرد‌هاي زيادي مي‌تواند داشته باشد.
خاصيت float يكي ديگر از خاصيت‌هاي مهم مي‌باشد. از اين خاصيت زماني استفاده مي‌شود كه بخواهيم دو عنصر را كه در كنار يكديگر قرار نمي‌گيرند، در يك خط قرار دهيم. مثلا دو تگ div را. چون به طور معمول اين تگ را هر جا بنويسيم، عناصر ديگر در ادامه آن قرار نمي‌گيرند و به خط‌هاي بعد از آن منتقل مي‌شوند. ولي با مشخص كردن مقادير left و يا right براي اين خاصيت مي‌توانيم اين گونه تگ‌ها را در كنار هم قرار بدهيم.
<div style="float:right;background:#009933;width:200px">آموزش</div>
<div style="float:left;background:#66CCFF;width:200px">CSS</div>
: نتيجه
آموزش
CSS
دو خاصيت ديگه كه مي‌خوام معرفي كنم، خاصيت line-height و خاصيت letter-spacing مي‌باشند. خاصيت line-height براي تعيين ارتفاع خطوط متن‌ها به كار مي‌رود. در واقع با افزايش مقدار اين خاصيت، فاصله‌ي بين خطوط افزايش پيدا مي‌كنه. خاصيت letter-spacing براي تعيين فاصله‌ي بين حروف به كار مي‌رود. البته در زبان فارسي كاربرد زيادي نداره، ولي براي متون انگليسي مي‌تواند مفيد باشد.
دو خاصيت ديگر، خواص text-align و vertical-align مي‌باشند كه براي طراز كردن به كار مي‌روند. text-align براي طراز كردن افقي متن و vertical-align براي طراز عمودي عناصر.
البته اين دو خاصيت هميشه نتيجه‌ي مطلوب را به ما نمي‌دهند، كه من هم دليل آن را نمي‌دانم. ولي كاربرد دارند. مثلا از vertical-align بايد براي بالا نگه داشتن ستون‌هاي وبلاگ استفاده كرد. در غير اين صورت ستوني كه ارتفاع كمتري دارد، به وسط صفحه منتقل مي‌شود.
آخرين خاصيتي كه مي‌خواهم معرفي كنم، خاصيت z-index مي‌باشد. از اين خاصيت براي ايجاد لايه در صفحات استفاده مي‌كنيم. بدين صورت كه عنصري كه عدد z-index آن بيشتر باشد در بالاي بقيه عناصر قرار مي‌گيرد و بالعكس.
اگر برنامه‌اي رو كه قبلا گفته بودم، يعني Macromedia Dreamweaver را نصب كرده باشيد، اين برنامه تمام خاصيت‌هايي را كه براي يك سبك مي‌توان تعريف كرد رو به شما نشان مي‌دهد و فقط كافيه كه يك مقدار انگليسي بلد باشيد تا معني هر خاصيت رو بفهميد. با اين كار ديگه احتياجي نيست كه من تك تك اين خواص رو توضيح بدهم.
پس هرچه سريعتر اين برنامه رو روي كامپيوترتون نصب كنيد و شروع كنيد به تمرين.
در حال حاظر روي كامپيوتر من نسخه 8 اين برنامه نصبه، كه فكر مي‌كنم آخرين نسخه تا به امروز باشه.
يك نكته مهم :
مرورگرها در ترجمه كدها بويژه كدهاي CSS يكسان عمل نمي‌كنند. و معمولا IE متفاوت از بقيه مرورگرها مي‌باشد. توصيه من اينه كه قبل از قرار دادن قالب‌هاتون روي وبلاگ حتما اونها رو توي مرورگرهاي معمول تست كنيد.
پس اگه فقط IE روي سيستمتون نصبه، بايد حداقل يك نسخه از Mozila و يك نسخه از Opera هم تهيه كنيد. كه فكر نمي‌كنم اين كار خيلي سخت باشه، چون هر دوي اين مرورگرها رايگان مي‌باشند و به راحتي مي‌تونيد از سايت خودشون آخرين نسخه‌ها رو دانلود كنيد.
اين نكته رو واقعا جدي بگيريد، چون در حال حاظر اكثر طراحان قالب فارسي فقط قالب‌ها رو توي مرورگر IE تست مي‌كنند و وقتي يه نفر مثل من با Mozila به اين وبلاگ‌ها مي‌ره هيچي از مطالب اون وبلاگ نمي‌فهمه و با يك كليك ساده روي دكمه X اون صفحه رو مي‌بنده. چون واقعا قالب وبلاگ بلانسبت مثل روده گاو مي‌شه.
از اونجايي كه بررسي خواص قابل استفاده رو گذاشتم بر عهده خودتون، ديگه درباره اون كدها توضيحي نمي‌دم. چون درك اون خواص كار ساده‌اي است و البته تعدادشون هم خيلي زياده كه از حوصله من هم خارجه كه بخوام همشون رو توضيح بدم.
البته اگه سوالي داشتيد مي‌تونيد توي قسمت نظرات بپرسيد، تا بعدن جوابتون رو بدم.
پس الآن يك سري از ترفندهاي CSS رو براتون معرفي مي‌كنم، كه از گوشه و كنار نت جمعشون كردم.
CSS expression :
تا حالا حتما وبلاگ‌هاي زيادي رو ديديد كه به خاطر گذاشتن تصاوير با سايزهاي بزرگ قالبشون رو به هم ريختن.
CSS براي حل اين مشكل يك راه حل پيش پاي ما گذاشته.
در CSS شناسه‌ای وجود دارد که به وسیله‌ی آن می‌توان حداکثر یا حداقل اندازه‌ی طول یا عرض عناصر را مشخص کرد.
max-width, min-width, max-height, min-height
.cntnt img { max-width: 300px; }
<div class="cntnt"><img src="pic.jpg"></div>
این دقیقا همان چیزی‌ست که دنبالش بودیم. حالا می‌توان مشخص کرد همه‌ی تصاویر تا زمانی که عرض آنها کوچکتر از 300px هستند با اندازه‌ی اصلی و تصاویر با عرض برزگتر از 300px با اندازه‌ی 300px نمایش داده شوند. اما خبر بد اینست که Internet Explorer اصلا این شناسه‌ها را در نظر نمی‌گیرد و کار خود را می‌کند! برعکس FireFox به‌خوبی با این کدها مشکل را حل می‌کند.
پیش از آنکه طرفداران FireFox خوشحال شوند از این همه برتری FireFox و حماقت IE، به نکته‌ای که دلیل اصلی نوشته شدن این نوشته است اشاره می‌کنم: CSS expression.
CSS expression امکانی‌ست که IE ورژن ۵ به بعد از آن پشتیبانی می‌کند به‌وسیله‌ی این امکان می‌توان در فایل‌های CSS از کدهای JavaScript برای داشتن تنظیمات هوشمندتر استفاده کرد البته FireFox از امکان درک و تحلیل این expressionها عاجز است! به صورت زیر:
width: expression( javascript code);
برگردیم به مسئله‌ی اصلی. مشکل را در FireFox حل کردیم. برای حل مشکل در IE با استفاده از expressionهای گفته شده، خط زیر را هم به CSS اضافه می‌کنیم.
.cntnt img{
max-width:300px;
width:expression(this.width<300 ? "auto":"300px");
}
<div class="cntnt"><img src="pic.jpg"></div>
جمله‌ی مشخص شده یک عبارت (اپراتور؟) شرطی است که JavaScript آنرا از زبان C قرض گرفته! A?B:C به این صورت است که اگر A درست باشد B برگردانده می‌شود در غیر این صورت C. کلمه کلیدی this هم در JavaScript به شی یا المان جاری اشاره می‌کند. در خط بالا this.width در واقع به شناسه‌ی width از المان img اشاره دارد که اگر از 300 کوچکتر باشد مقدار شناسه‌ی width در CSS برابر auto می‌شود (یعنی هرآنچه هست!) در غیر این صورت برابر 300px می‌شود. و در هیچ حالتی بیشتر از 300px نخواهد بود که مقصود ماست.
رفع مشکل حاشیه دوبرابر در IE :
زمانی که از margin:100px برای یک div استفاده میکنید. در Firefox همون فاصله 100px رو از حاشیه اعمال میکنه اما در IE به اشتباه دو برابر این مقدار یعنی 200px رو اعمال میکنه !!! میتونید کد زیر رو در IE و Firefox مقایسه کنید:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
برای اینکه در FireFox و IE به صورت یکسان و حاشیه صحیح نمایش داده شود.
کافیست که از display: inline استفاده نمائید.
یعنی کد تکمیل شده بالا بدین صورت خواهد شد:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
(http://forum.majidonline.com/showpost.php?p=506281&postcount=15)
روش ساختن Box با موقعیت ثابت در صفحه :
در این روش، از طریق CSS ما Box مي‌سازيم که در حالت Position:absolute موقعیت ثابت در صفحه می‌گیره و با حرکت ScrollBar موقعیت او عوض نمیشه!!!! من در Opera 7.6 , Netscape 7.0 , FireFox 2.0 امتحان کردم جواب داد، متاسفانه در IE 6.0 جواب نداد!
<style type="text/css">
/* <![CDATA[ */
body{
margin: 0;
padding: 1em 12em 1em 2em;
}
#menu{
position: fixed;
_position:absolute;
top: 1em; right: 1em; width: 10em;
margin: 0;
background: yellow;
}
/* ]]> */
</style
>
اینم کد body
<h1>Position:fixed Example</h1>
<p id="menu">This box has 'position:fixed', fixed to 'absolute' in Windows MSIE</p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
(http://forum.majidonline.com/showpost.php?p=394652&postcount=3)
رفع مشکل ناسازگاری IE با دیگر مرورگرها :
همیشه IE یه مشکلی داره در نمایش ندادن همسان با دیگر مرورگرها!!!
بار ها شده زمان طراحی وب سایت، وقتی که از وب سایت خود در مرورگر های متداول (مرورگرهای متداول دنیا شامل: IE, NS, FF, Opera, AOL browser, Safari) نمایش میگیرید، وب سایت شما در تمام مرورگر ها به غیر از IE به یک شکل نمایش داده میشه!!!
یکی از راه حل های رفع این مشکل بدین صورت است که ما برای IE فایل CSS جدایی طراحی کنیم ، که فقط مرور گر IE از آن استفاده کنه و دیگر مرور گر ها از فایل CSS پیش فرض طراحی صفحه استفاده کنند.
سوال اینجاست که ما چگونه این نکته رو به مرورگر های مختلف بفهمونیم که این فایل CSS خاص، فقط در IE لود بشه؟؟
راه حل اینجاست شما باید از یک فرمان شرطی که در head صفحه درج میشه استفاده کنید:
<!--[if IE]>
<style type="text/css">
body { background: silver;}
</style>
<![endif]-->
در صورت اینکه از این صفحه نمایش بگیرید متوجه میشید که تنها در IE، پس زمینه صفحه به رنگ خاکستری در میاد. شما در بین تگ های:
<!--[if IE]>
insert code
<![endif]-->
می توانید : فایل های CSS ، کد های HTML ، کد های JavaScript ،... دیگر کد های مورد نظر خودتون رو قرار بدهيد که فقط در مرورگر IE نمایش داده بشه.
نکته قابل ذکر دیگر این است که: شما می‌توانید فایل CSS پیش فرض رو به صفحاتتان لینک کنید و تغییراتی که باید در IE انجام شود را در زیر آن درج کنید. با این کار ، تمام مرورگر ها از فایل CSS پیش فرض شما استفاده می‌کنند و IE علاوه بر آن فایل CSS پیش فرض، از فایل CSS که در عبارت شرطي قرار گرفته نیز استفاده می‌کند.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ULFSoft</title>
<style type="text/css">
body {background: silver;}
</style>
<!--[if IE]>
<style type="text/css">
body {background: red;}
</style>
<![endif]-->
</head>
ايجاد مستطيل گوشه گرد با CSS :
اين كدها را در تگ head كپي كنيد.
<style type="text/css">
.xrnd h1 {margin:0;font-size:1.2em;padding:0 10px 5px 10px;border-bottom:1px solid #444;}
.xrnd p {margin:0;padding:5px 10px;font-size:10px}
.xrnd {background: transparent;width:240px;float:left;margin:0 3px}
.xtop, .xbottom {display:block;background:transparent;font-size:1px}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden}
.xb1, .xb2, .xb3 {height:1px}
.xb2, .xb3, .xb4 {background:#fff;border-left:1px solid #666666;border-right:1px solid #666666}
.xb1 {margin:0 5px;background:#666666}
.xb2 {margin:0 3px;border-width:0 2px}
.xb3 {margin:0 2px}
.xb4 {height:2px;margin:0 1px}
.xboxcontent {display:block;border:0 solid #666666;border-width:0 1px;height:auto;font-family:Tahoma}
* html .xboxcontent {height:1px}
.color_a {background:#c9ba65;color:#fff}
.color_b {background:#d4d8bd;color:#000}
.color_c {background:#758279;color:#fff}
.color_d {background:#b2ab9b;color:#000}
</style>
اين كدها را هم در تگ body كپي كنيد.
<div class="xrnd">
<strong class="xtop">
<strong class="xb1">
</strong>
<strong class="xb2">
</strong>
<strong class="xb3">
</strong>
<strong class="xb4">
</strong>
</strong>
<div dir="rtl" class="xboxcontent">
<p>این جعبه که با گوشه های گرد ساخته شده تماما با CSS و HTML طراحی شده است .</p>
<p>درمورد <a href="http://forum.majidonline.com/showthread.php?t=57699">
مستطيل گوشه گرد</a> قبلا در مجیدآنلاین بحث شده بود. </p>
</div>
<strong class="xbottom">
<strong class="xb4">
</strong>
<strong class="xb3">
</strong>
<strong class="xb2">
</strong>
<strong class="xb1">
</strong>
</strong>
</div>
نكته :
تگ strong از نظر عملكرد با تگ b برابري مي‌كند. به همين خاطر به اين تگ در آموزش HTML اشاره‌اي نكردم. علاوه بر اين تگ چند تگ ديگر هم وجود دارد كه استفاده از آنها منسوخ شده و به همين خاطر آنها را معرفي نمي‌كنم.
هر چي فكر كردم چيزي راجع به نويسنده اين مطلب يادم نيومد
ايجاد تصوير نيمه شفاف با CSS :
براي ايجاد اين جلوه در مرورگر Firefox مي‌توان از خصوصيت opacity استفاده كرد. و در مرورگر IE با استفاده از filter:alpha مي‌توان اين كار را انجام داد.
حالا براي اينكه اين جلوه در هر دو مرورگر ايجاد بشه، مي‌توانيم از هر دوي اين خصوصيات استفاده كنيم.
به صورت زير عمل مي‌كنيم.
<style>
#transparent{
opacity: 0.5;
filter: alpha(opacity=50);
width: 200px;
height: 200px;
background:#0099CC
}
</style>
<div id="transparent">some texts</div>
اين كد براي ما يك باكس كه شفافيت معادل 50% داره، ايجاد مي‌كنه.
البته براي اينكه اين شفافيت رو ببينيد بهتره كه از تگ div جايي استفاده كنيد كه يك تصوير پس‌زمينه داشته باشه.
CSS مخفف عبارت Cascading Style Sheets مي‌باشد.
CSS در واقع ليستي از دستورات در قالب متن است كه مي‌توان آن را هم در داخل سند ايجاد شده با HTML به كار برد و هم مي‌توان اين دستورات را در داخل يك فايل جداگانه با پسوند css ذخيره كرد و سپس با استفاده از دستور زير آن را به سند HTML لينك كنيم. به اين فايل CSS فايل CSS خارجي مي‌گويند.
<link rel="stylesheet" type="text/css" href="sheet1.css">
در اين كد يك فايل CSS به نام sheet1 را به صفحه مورد نظر لينك كرده‌ايم. اين تگ بايد در داخل تگ head قرار بگيرد.
البته براي ساخت قالب كمتر از فايل CSS خارجي استفاده مي‌كنيم. چون اين فايل بايد در يك هاست آپلود شود. و براي وبلاگ نويسان معمولا چنين امكاني وجود ندارد.
البته ناگفته نماند كه براي ساخت قالب حتما بايد بر روي اينترنت فضايي براي آپلود فايل‌هايمان داشته باشيم. مي‌توانيم از سايت‌هايي كه خدمات هاستينگ رايگان انجام مي‌دهند هم استفاده كنيم.
براي قرار دادن دستورات CSS در سند HTML از تگ style به صورت زير استفاده مي‌كنيم.
<style type="text/css">
...
CSS Codes
...
</style>
بهتر است كه اين دستورات را در تگ head بنويسيم، چون با اين كار در بالاي تگ‌هاي ديگر قرار خواهد گرفت. ولي استفاده آن در ديگر قسمت‌هاي سند HTML نيز مانعي ندارد.
قابليت‌هاي CSS :
با استفاده از CSS امكانات زيادي در اختيار طراح قرار مي‌گيرد.
براي مثال مي‌توانيد براي هر عنصري در صفحه تصوير پس زمينه قرار بدهيد و يا خطي به عنوان حاشيه با رنگ و اندازه دلخواه رسم كنيد. (اين قابليت‌ها به طور كامل در HTML وجود نداشت)
يكي از دلايلي كه طراحان از heading ها استفاده نمي‌كردند اين بود كه آنها كنترلي بر روي رنگ، اندازه و فونت آنها نداشتند. ولي با CSS شما قادريد كه كه تمام خصوصيات heading ها را تغيير دهيد.
نه تنها خصوصيات heading ها بلكه خصوصيات هر تگ ديگري را هم مي‌توانيد تغيير دهيد.
براي ايجاد تغيير در خصوصيات يك تگ مي‌بايست ابتدا نام تگ سپس دستورات را داخل {} قرار بدهيم.
براي مثال در كد زير مي‌خواهيم تغييراتي را بر روي تگ h1 ايجاد كنيم.
<style type="text/css">
h1{
font-family:Tahoma;
font-size:10px;
color:#009900;
}
</style>
<h1>CSS آموزش</h1>
: نتيجه
h1{ font-family:Tahoma; font-size:10px; color:#009900; } CSS آموزش
نكته :
بعد از نوشتن هر دستور بايد يك سمي كالن (;) قرار بدهيم.
اگر اين كد را بنويسيم، بعد از آن هر بار كه از تگ h1 استفاده كنيم، متن داخل آن به همين صورت خواهد شد.
براي نوشتن دستورات CSS راه ديگري نيز وجود دارد كه آن هم استفاده از خصوصيت style تگ‌هاست. همه‌ي تگ‌ها داراي خصوصيتي به اين نام مي‌باشند و ما مي‌توانيم از آن استفاده كنيم. تفاوت اين راه با روش قبلي در اين است كه در روش دوم فقط همان تگي كه خصوصيت style آن را مشخص كرده‌ايم تغيير خواهد كرد. و بر روي تگ‌هايي كه در ادامه مي‌نويسيم هيچ تاثيري ندارد.
براي درك بهتر اين موضوع به مثال زير توجه كنيد.
<h2 style="background:#FFCC00;
font-family:Tahoma;
font-size:12px;
width:30px;">سلام</h2>
<h2>به شما</h2>
سلام
به شما
همانطور كه فهميديد با اين كار مي‌شه به هر تگ خواص متفاوتي داد.
البته استفاده از CSS محدود به اين دو حالت نيست. و تا اونجايي كه من مي‌دونم دو روش ديگر هم وجود داره، كه در ادامه به اونها اشاره مي‌كنم.
يكي ديگر از قابليت‌هاي CSS پايين آوردن حجم صفحات HTML مي‌باشد. چون با استفاده از CSS شما يك كد را يك بار مي‌نويسيد و در هزار جاي صفحه از اون استفاده مي‌كنيد.حتي مي‌توان يك فايل CSS خارجي ايجاد كرد و از آن در تمام صفحات سايت استفاده كرد. با اين كار هم حجم اطلاعات كم مي‌شود و هم سرعت كار بيشتر مي‌شود.
فرض كنيد از يك تگ font در 100 جاي صفحه استفاده كرده باشيد، و در پايان كار از نوع فونت يا رنگ اون خوشتون نياد. در اين صورت اگه از CSS استفاده نكرده باشيد، مي‌بايست كل 100 تگ را پيدا كرده و تغيير بدهيد. ولي در صورتي كه از CSS استفاده كرده باشيد مي‌توانيد با تغيير دادن يك خط كد همان كار را انجام دهيد.
فكر مي‌كنم شما هم قانع شده باشيد كه چرا بايد از CSS استفاده كنيم.
دو روش ديگري كه براي استفاده از CSS وجود دارد، بدين صورت است كه ابتدا يك سبك را ايجاد مي‌كنيم و سپس از طريق خاصيت id و class آن را به عناصر مورد نظر نسبت مي‌دهيم.
نكته 1 :
تفاوت دو خاصيت class و id در اينست كه براي خاصيت id فقط مي‌توانيم يك سبك تعيين كنيم. ولي در خاصيت class مي‌توانيم چندين سبك را در كنار هم قرار دهيم.
نكته 2 :
نحوه نامگذاري سبك‌ها : براي ايجاد سبك‌هايي كه در خاصيت class قرار مي‌گيرند، ابتدا يك نقطه و سپس نام سبك و بعد از آن {options}. ولي براي ايجاد سبك‌هايي كه در خاصيت id قرار مي‌گيرند ابتدا يك # سپس نام سبك و بعد از آن {options}.
به نمونه‌هاي زير توجه كنيد.
<style type="text/css">
.fon{font-family:Tahoma;font-size:12px;color:#999999}
.dim{width:120px;border-color:red;border-width:1px;border-style:solid}
</style>
<font class="fon">ترفندهاي كامپيوتر</font><br><br>
<font class="fon dim">ترفندهاي كامپيوتر</font>
: نتيجه
.fon{font-family:Tahoma;font-size:12px;color:#999999} .dim{width:120px;border-color:red;border-width:1px;border-style:solid} ترفندهاي كامپيوتر
در آموزش HTML گفته بودم كه اين باكس‌هاي آبي رنگ را كه كدها را داخلشون قرار مي‌دهم با استفاده از CSS ايجاد كردم. در كدهاي پايين نحوه ايجاد اين باكس‌ها را مي‌بينيد.
<style type="text/css">
#box{
border-color:#999999;
border-style:dashed;
border-width:1px;
background:#E0EAF3;
padding:5px;
direction:ltr;
margin:12px 0px 12px 0px
}
</style>
<div align="left" id="box">
...
codes
...
</div>
تشريح كدها :
border يعني حاشيه، color يعني رنگ، style يعني سبك، width يعني عرض. اين يعني كه حاشيه‌اي به قطر يك پيكسل و با سبك خط‌چين و رنگ خاكستري.
background براي تعيين رنگ پس زمينه و يا تصوير پس زمينه به كار مي‌ره، padding براي ايجاد فاصله از ديواره‌ها، margin براي ايجاد فاصله عنصر با عناصر اطرافش و dir هم كه مي‌دونيد.
توضيحات مربوط به تعدادي از خصوصيات مهم :
در صورتي كه بعد از خصوصيت background كد يك رنگ را بنويسيد، آن رنگ به عنوان رنگ پس‌زمينه خواهد بود.
در صورتي كه بعد از اين خصوصيت عبارت ()url را بنويسيد مي‌توانيد در داخل پرانتز آدرس تصوير پس زمينه را مشخص كنيد.
اگر از url استفاده كنيد مي‌توانيد نحوه قرارگيري تصوير و تكرار يا عدم تكرار را نيز در ادامه اين خصوصيت مشخص كنيد.
مثلا مي‌توانيد براي نحوه قرارگيري تصوير از گزينه‌هاي top,bottom,right,left,center استفاده كنيد. و همچنين مي‌توانيد از گزينه‌هاي no-repeat,repeat-x,repeat-y,repeat براي تعيين تكرار شدن تصوير و جهت تكرار و يا تكرار نشدن تصوير استفاده كنيد. همچنين گزينه‌ي ديگري به نام fixed وجود دارد كه باعث ثابت ماندن تصوير در هنگام scroll مي‌شود. در زير نحوه استفاده از اين گزينه‌ها را مي‌بينيد.
background:url(آدرس كامل تصوير پس‌زمينه) bottom left no-repeat
اين كد تصوير را در پايين سمت چپ عنصر مورد نظر قرار مي‌دهد و از تكرار شدن تصوير جلوگيري مي‌كند
background:url(bgpic.jpg) center repeat-y
اين كد تصوير را در وسط عنصر قرار مي‌دهد و باعث تكرار شدن تصوير در راستاي محور قائم مي‌شود
براي ايجاد حاشيه مي‌توانيم رنگ، سبك و اندازه هر خط رو به طور جداگانه مشخص كنيم. مثلا مي‌نويسيم border-bottom-color كه اين يعني رنگ حاشيه پايين و به همين ترتيب مي‌تونيم خواص حاشيه‌هاي ديگر رو هم به طور جداگانه تعيين كنيم.
البته يك راه ديگر هم براي انجام اين كار وجود دارد كه در اين روش بعد از نوشتن نام خاصيت مثلا border-style به اين ترتيب يعني top right bottom left سبك هر كدام از حاشيه‌ها رو تعيين مي‌كنيم. براي نمونه خاصيت margin باكس‌هاي آبي رنگ رو به اين شيوه تعيين كردم، كه در بالا ديديد.
به كد زير توجه كنيد.
top right bottom left
border-style: dashed solid dashed solid;
مقادير مجاز براي خاصيت border-style را در زير مي‌نويسيم.
dashed/dotted/double/groove/hidden/inherit/inset/none/outset/ridge/solid
مي‌توانيد اين‌ها را تست كنيد و ببينيد هر كدام چه تاثيري دارند.
يكي از خاصيت‌هاي مهم ديگه خاصيت display مي‌باشد. تعداد مقادير مجاز اين خاصيت زياده، به همين خاطر من فقط دو تا از آنها را توضيح مي‌دهم.
اگر به اين خاصيت مقدار block را بدهيم، عنصر مورد نظر به يك بلوك تبديل مي‌شود. مثلا در صورتي كه آن را به يك لينك (تگ a) نسبت بدهيم، متن لينك در يك خط جداگانه قرار خواهد گرفت و در صورتي كه ماوس را بر روي هر كدام از قسمت‌هاي خط بياوريم همانند وقتي مي‌باشد كه ماوس را بر روي متن لينك قرار داده‌ايم. براي مثال نگاهي به قسمت آرشيو موضوعي اين وبلاگ بياندازيد، تا بهتر متوجه منظورم بشويد.
<a href="http://www.ulfsoft.blogfa.com/" style="display:block">ULFSoft</a>
: نتيجه
(http://www.ulfsoft.blogfa.com/)
يك مقدار ديگر براي خاصيت display مقدار none مي‌باشد. با دادن اين مقدار به اين خاصيت عنصر مورد نظر نمايش داده نمي‌شود. كه در حال حاظر براي ما كاربرد زيادي ندارد، مگر در مواقعي كه بخواهيم يك عنصر در صفحه داشته باشيم كه به كاربر نمايش داده نشود. ولي براي اسكريپت‌نويسي با مثلا زبان جاوااسكريپت كاربرد‌هاي زيادي مي‌تواند داشته باشد.
خاصيت float يكي ديگر از خاصيت‌هاي مهم مي‌باشد. از اين خاصيت زماني استفاده مي‌شود كه بخواهيم دو عنصر را كه در كنار يكديگر قرار نمي‌گيرند، در يك خط قرار دهيم. مثلا دو تگ div را. چون به طور معمول اين تگ را هر جا بنويسيم، عناصر ديگر در ادامه آن قرار نمي‌گيرند و به خط‌هاي بعد از آن منتقل مي‌شوند. ولي با مشخص كردن مقادير left و يا right براي اين خاصيت مي‌توانيم اين گونه تگ‌ها را در كنار هم قرار بدهيم.
<div style="float:right;background:#009933;width:200px">آموزش</div>
<div style="float:left;background:#66CCFF;width:200px">CSS</div>
: نتيجه
آموزش
CSS
دو خاصيت ديگه كه مي‌خوام معرفي كنم، خاصيت line-height و خاصيت letter-spacing مي‌باشند. خاصيت line-height براي تعيين ارتفاع خطوط متن‌ها به كار مي‌رود. در واقع با افزايش مقدار اين خاصيت، فاصله‌ي بين خطوط افزايش پيدا مي‌كنه. خاصيت letter-spacing براي تعيين فاصله‌ي بين حروف به كار مي‌رود. البته در زبان فارسي كاربرد زيادي نداره، ولي براي متون انگليسي مي‌تواند مفيد باشد.
دو خاصيت ديگر، خواص text-align و vertical-align مي‌باشند كه براي طراز كردن به كار مي‌روند. text-align براي طراز كردن افقي متن و vertical-align براي طراز عمودي عناصر.
البته اين دو خاصيت هميشه نتيجه‌ي مطلوب را به ما نمي‌دهند، كه من هم دليل آن را نمي‌دانم. ولي كاربرد دارند. مثلا از vertical-align بايد براي بالا نگه داشتن ستون‌هاي وبلاگ استفاده كرد. در غير اين صورت ستوني كه ارتفاع كمتري دارد، به وسط صفحه منتقل مي‌شود.
آخرين خاصيتي كه مي‌خواهم معرفي كنم، خاصيت z-index مي‌باشد. از اين خاصيت براي ايجاد لايه در صفحات استفاده مي‌كنيم. بدين صورت كه عنصري كه عدد z-index آن بيشتر باشد در بالاي بقيه عناصر قرار مي‌گيرد و بالعكس.
اگر برنامه‌اي رو كه قبلا گفته بودم، يعني Macromedia Dreamweaver را نصب كرده باشيد، اين برنامه تمام خاصيت‌هايي را كه براي يك سبك مي‌توان تعريف كرد رو به شما نشان مي‌دهد و فقط كافيه كه يك مقدار انگليسي بلد باشيد تا معني هر خاصيت رو بفهميد. با اين كار ديگه احتياجي نيست كه من تك تك اين خواص رو توضيح بدهم.
پس هرچه سريعتر اين برنامه رو روي كامپيوترتون نصب كنيد و شروع كنيد به تمرين.
در حال حاظر روي كامپيوتر من نسخه 8 اين برنامه نصبه، كه فكر مي‌كنم آخرين نسخه تا به امروز باشه.
يك نكته مهم :
مرورگرها در ترجمه كدها بويژه كدهاي CSS يكسان عمل نمي‌كنند. و معمولا IE متفاوت از بقيه مرورگرها مي‌باشد. توصيه من اينه كه قبل از قرار دادن قالب‌هاتون روي وبلاگ حتما اونها رو توي مرورگرهاي معمول تست كنيد.
پس اگه فقط IE روي سيستمتون نصبه، بايد حداقل يك نسخه از Mozila و يك نسخه از Opera هم تهيه كنيد. كه فكر نمي‌كنم اين كار خيلي سخت باشه، چون هر دوي اين مرورگرها رايگان مي‌باشند و به راحتي مي‌تونيد از سايت خودشون آخرين نسخه‌ها رو دانلود كنيد.
اين نكته رو واقعا جدي بگيريد، چون در حال حاظر اكثر طراحان قالب فارسي فقط قالب‌ها رو توي مرورگر IE تست مي‌كنند و وقتي يه نفر مثل من با Mozila به اين وبلاگ‌ها مي‌ره هيچي از مطالب اون وبلاگ نمي‌فهمه و با يك كليك ساده روي دكمه X اون صفحه رو مي‌بنده. چون واقعا قالب وبلاگ بلانسبت مثل روده گاو مي‌شه.
از اونجايي كه بررسي خواص قابل استفاده رو گذاشتم بر عهده خودتون، ديگه درباره اون كدها توضيحي نمي‌دم. چون درك اون خواص كار ساده‌اي است و البته تعدادشون هم خيلي زياده كه از حوصله من هم خارجه كه بخوام همشون رو توضيح بدم.
البته اگه سوالي داشتيد مي‌تونيد توي قسمت نظرات بپرسيد، تا بعدن جوابتون رو بدم.
پس الآن يك سري از ترفندهاي CSS رو براتون معرفي مي‌كنم، كه از گوشه و كنار نت جمعشون كردم.
CSS expression :
تا حالا حتما وبلاگ‌هاي زيادي رو ديديد كه به خاطر گذاشتن تصاوير با سايزهاي بزرگ قالبشون رو به هم ريختن.
CSS براي حل اين مشكل يك راه حل پيش پاي ما گذاشته.
در CSS شناسه‌ای وجود دارد که به وسیله‌ی آن می‌توان حداکثر یا حداقل اندازه‌ی طول یا عرض عناصر را مشخص کرد.
max-width, min-width, max-height, min-height
.cntnt img { max-width: 300px; }
<div class="cntnt"><img src="pic.jpg"></div>
این دقیقا همان چیزی‌ست که دنبالش بودیم. حالا می‌توان مشخص کرد همه‌ی تصاویر تا زمانی که عرض آنها کوچکتر از 300px هستند با اندازه‌ی اصلی و تصاویر با عرض برزگتر از 300px با اندازه‌ی 300px نمایش داده شوند. اما خبر بد اینست که Internet Explorer اصلا این شناسه‌ها را در نظر نمی‌گیرد و کار خود را می‌کند! برعکس FireFox به‌خوبی با این کدها مشکل را حل می‌کند.
پیش از آنکه طرفداران FireFox خوشحال شوند از این همه برتری FireFox و حماقت IE، به نکته‌ای که دلیل اصلی نوشته شدن این نوشته است اشاره می‌کنم: CSS expression.
CSS expression امکانی‌ست که IE ورژن ۵ به بعد از آن پشتیبانی می‌کند به‌وسیله‌ی این امکان می‌توان در فایل‌های CSS از کدهای JavaScript برای داشتن تنظیمات هوشمندتر استفاده کرد البته FireFox از امکان درک و تحلیل این expressionها عاجز است! به صورت زیر:
width: expression( javascript code);
برگردیم به مسئله‌ی اصلی. مشکل را در FireFox حل کردیم. برای حل مشکل در IE با استفاده از expressionهای گفته شده، خط زیر را هم به CSS اضافه می‌کنیم.
.cntnt img{
max-width:300px;
width:expression(this.width<300 ? "auto":"300px");
}
<div class="cntnt"><img src="pic.jpg"></div>
جمله‌ی مشخص شده یک عبارت (اپراتور؟) شرطی است که JavaScript آنرا از زبان C قرض گرفته! A?B:C به این صورت است که اگر A درست باشد B برگردانده می‌شود در غیر این صورت C. کلمه کلیدی this هم در JavaScript به شی یا المان جاری اشاره می‌کند. در خط بالا this.width در واقع به شناسه‌ی width از المان img اشاره دارد که اگر از 300 کوچکتر باشد مقدار شناسه‌ی width در CSS برابر auto می‌شود (یعنی هرآنچه هست!) در غیر این صورت برابر 300px می‌شود. و در هیچ حالتی بیشتر از 300px نخواهد بود که مقصود ماست.
رفع مشکل حاشیه دوبرابر در IE :
زمانی که از margin:100px برای یک div استفاده میکنید. در Firefox همون فاصله 100px رو از حاشیه اعمال میکنه اما در IE به اشتباه دو برابر این مقدار یعنی 200px رو اعمال میکنه !!! میتونید کد زیر رو در IE و Firefox مقایسه کنید:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
برای اینکه در FireFox و IE به صورت یکسان و حاشیه صحیح نمایش داده شود.
کافیست که از display: inline استفاده نمائید.
یعنی کد تکمیل شده بالا بدین صورت خواهد شد:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
(http://forum.majidonline.com/showpost.php?p=506281&postcount=15)
روش ساختن Box با موقعیت ثابت در صفحه :
در این روش، از طریق CSS ما Box مي‌سازيم که در حالت Position:absolute موقعیت ثابت در صفحه می‌گیره و با حرکت ScrollBar موقعیت او عوض نمیشه!!!! من در Opera 7.6 , Netscape 7.0 , FireFox 2.0 امتحان کردم جواب داد، متاسفانه در IE 6.0 جواب نداد!
<style type="text/css">
/* <![CDATA[ */
body{
margin: 0;
padding: 1em 12em 1em 2em;
}
#menu{
position: fixed;
_position:absolute;
top: 1em; right: 1em; width: 10em;
margin: 0;
background: yellow;
}
/* ]]> */
</style
>
اینم کد body
<h1>Position:fixed Example</h1>
<p id="menu">This box has 'position:fixed', fixed to 'absolute' in Windows MSIE</p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
<p><a href="http://ulfsoft.blogfa.com/">ULFSoft</a></p>
<a href="http://ulfsoft.blogfa.com/">ترفندهاي كامپيوتر</a></p>
(http://forum.majidonline.com/showpost.php?p=394652&postcount=3)
رفع مشکل ناسازگاری IE با دیگر مرورگرها :
همیشه IE یه مشکلی داره در نمایش ندادن همسان با دیگر مرورگرها!!!
بار ها شده زمان طراحی وب سایت، وقتی که از وب سایت خود در مرورگر های متداول (مرورگرهای متداول دنیا شامل: IE, NS, FF, Opera, AOL browser, Safari) نمایش میگیرید، وب سایت شما در تمام مرورگر ها به غیر از IE به یک شکل نمایش داده میشه!!!
یکی از راه حل های رفع این مشکل بدین صورت است که ما برای IE فایل CSS جدایی طراحی کنیم ، که فقط مرور گر IE از آن استفاده کنه و دیگر مرور گر ها از فایل CSS پیش فرض طراحی صفحه استفاده کنند.
سوال اینجاست که ما چگونه این نکته رو به مرورگر های مختلف بفهمونیم که این فایل CSS خاص، فقط در IE لود بشه؟؟
راه حل اینجاست شما باید از یک فرمان شرطی که در head صفحه درج میشه استفاده کنید:
<!--[if IE]>
<style type="text/css">
body { background: silver;}
</style>
<![endif]-->
در صورت اینکه از این صفحه نمایش بگیرید متوجه میشید که تنها در IE، پس زمینه صفحه به رنگ خاکستری در میاد. شما در بین تگ های:
<!--[if IE]>
insert code
<![endif]-->
می توانید : فایل های CSS ، کد های HTML ، کد های JavaScript ،... دیگر کد های مورد نظر خودتون رو قرار بدهيد که فقط در مرورگر IE نمایش داده بشه.
نکته قابل ذکر دیگر این است که: شما می‌توانید فایل CSS پیش فرض رو به صفحاتتان لینک کنید و تغییراتی که باید در IE انجام شود را در زیر آن درج کنید. با این کار ، تمام مرورگر ها از فایل CSS پیش فرض شما استفاده می‌کنند و IE علاوه بر آن فایل CSS پیش فرض، از فایل CSS که در عبارت شرطي قرار گرفته نیز استفاده می‌کند.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ULFSoft</title>
<style type="text/css">
body {background: silver;}
</style>
<!--[if IE]>
<style type="text/css">
body {background: red;}
</style>
<![endif]-->
</head>
ايجاد مستطيل گوشه گرد با CSS :
اين كدها را در تگ head كپي كنيد.
<style type="text/css">
.xrnd h1 {margin:0;font-size:1.2em;padding:0 10px 5px 10px;border-bottom:1px solid #444;}
.xrnd p {margin:0;padding:5px 10px;font-size:10px}
.xrnd {background: transparent;width:240px;float:left;margin:0 3px}
.xtop, .xbottom {display:block;background:transparent;font-size:1px}
.xb1, .xb2, .xb3, .xb4 {display:block;overflow:hidden}
.xb1, .xb2, .xb3 {height:1px}
.xb2, .xb3, .xb4 {background:#fff;border-left:1px solid #666666;border-right:1px solid #666666}
.xb1 {margin:0 5px;background:#666666}
.xb2 {margin:0 3px;border-width:0 2px}
.xb3 {margin:0 2px}
.xb4 {height:2px;margin:0 1px}
.xboxcontent {display:block;border:0 solid #666666;border-width:0 1px;height:auto;font-family:Tahoma}
* html .xboxcontent {height:1px}
.color_a {background:#c9ba65;color:#fff}
.color_b {background:#d4d8bd;color:#000}
.color_c {background:#758279;color:#fff}
.color_d {background:#b2ab9b;color:#000}
</style>
اين كدها را هم در تگ body كپي كنيد.
<div class="xrnd">
<strong class="xtop">
<strong class="xb1">
</strong>
<strong class="xb2">
</strong>
<strong class="xb3">
</strong>
<strong class="xb4">
</strong>
</strong>
<div dir="rtl" class="xboxcontent">
<p>این جعبه که با گوشه های گرد ساخته شده تماما با CSS و HTML طراحی شده است .</p>
<p>درمورد <a href="http://forum.majidonline.com/showthread.php?t=57699">
مستطيل گوشه گرد</a> قبلا در مجیدآنلاین بحث شده بود. </p>
</div>
<strong class="xbottom">
<strong class="xb4">
</strong>
<strong class="xb3">
</strong>
<strong class="xb2">
</strong>
<strong class="xb1">
</strong>
</strong>
</div>
نكته :
تگ strong از نظر عملكرد با تگ b برابري مي‌كند. به همين خاطر به اين تگ در آموزش HTML اشاره‌اي نكردم. علاوه بر اين تگ چند تگ ديگر هم وجود دارد كه استفاده از آنها منسوخ شده و به همين خاطر آنها را معرفي نمي‌كنم.
هر چي فكر كردم چيزي راجع به نويسنده اين مطلب يادم نيومد
ايجاد تصوير نيمه شفاف با CSS :
براي ايجاد اين جلوه در مرورگر Firefox مي‌توان از خصوصيت opacity استفاده كرد. و در مرورگر IE با استفاده از filter:alpha مي‌توان اين كار را انجام داد.
حالا براي اينكه اين جلوه در هر دو مرورگر ايجاد بشه، مي‌توانيم از هر دوي اين خصوصيات استفاده كنيم.
به صورت زير عمل مي‌كنيم.
<style>
#transparent{
opacity: 0.5;
filter: alpha(opacity=50);
width: 200px;
height: 200px;
background:#0099CC
}
</style>
<div id="transparent">some texts</div>
اين كد براي ما يك باكس كه شفافيت معادل 50% داره، ايجاد مي‌كنه.
البته براي اينكه اين شفافيت رو ببينيد بهتره كه از تگ div جايي استفاده كنيد كه يك تصوير پس‌زمينه داشته باشه.