۷-۱۱-۱۳۹۰, ۱۲:۳۰ صبح
از انجایی که بعضی از قالبهای جوملا با هر بروزیری یه جوری دیده میشوند این مقالا را در اینجا قرار میدهم تا از هر قالبی که دوست دارید فارق از این غصه که با چه برزرهایی بهینه است خودتا ان را بهینه کنید خیلی ساده
سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف نمایش ( LCD رایانه ، پرینت، صفحه موبایل) تعیین کند. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری استایل لود شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.
برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را نمایش میدهند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید
برای اعمال توسط کلیه مرورگرها :
<link href="styles1.css" rel="stylesheet" type="text/css" media="screen" />
برای اعمال فقط توسط مرورگر کروم :
<link href="styles1chrome.css" rel="stylesheet" type="text/chrome" />
برای اعمال فقط توسط مرورگر سافاری:
<link href="styles1safari.css" rel="stylesheet" type="text/safari" />
برای اعمال هنگام پرینت کردن صفحه :
<link href="styles2.css" rel="stylesheet" type="text/css" media="print" />
برای اعمال هنگام باز شدن صفحه در انواع PDA :
<link href="styles3.css" rel="stylesheet" type="text/css" media="handheld" />
برای اعمال فقط در مرورگر IE و یا نسخه خاصی از IE
در این پست
اعمال چند استایل از فایل CSS (بدون افزودن فایل CSS دیگر) فقط در مرورگر کروم
در این پست
شما میتوانید هر 5 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند. همچنین مرورگر اگر کروم باشد از فایل styles1chrome و اگر مرورگر سافاری باشد از فایل styles1safari برای رندرکردن صفحه استفاده خواهد کرد.
یکی از کاربردهای کوچک دیگه این اموزش : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه.
سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف نمایش ( LCD رایانه ، پرینت، صفحه موبایل) تعیین کند. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری استایل لود شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.
برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :
<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را نمایش میدهند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید
برای اعمال توسط کلیه مرورگرها :
<link href="styles1.css" rel="stylesheet" type="text/css" media="screen" />
برای اعمال فقط توسط مرورگر کروم :
<link href="styles1chrome.css" rel="stylesheet" type="text/chrome" />
برای اعمال فقط توسط مرورگر سافاری:
<link href="styles1safari.css" rel="stylesheet" type="text/safari" />
برای اعمال هنگام پرینت کردن صفحه :
<link href="styles2.css" rel="stylesheet" type="text/css" media="print" />
برای اعمال هنگام باز شدن صفحه در انواع PDA :
<link href="styles3.css" rel="stylesheet" type="text/css" media="handheld" />
برای اعمال فقط در مرورگر IE و یا نسخه خاصی از IE
در این پست
اعمال چند استایل از فایل CSS (بدون افزودن فایل CSS دیگر) فقط در مرورگر کروم
در این پست
شما میتوانید هر 5 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند. همچنین مرورگر اگر کروم باشد از فایل styles1chrome و اگر مرورگر سافاری باشد از فایل styles1safari برای رندرکردن صفحه استفاده خواهد کرد.
یکی از کاربردهای کوچک دیگه این اموزش : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه.