فرض کنید قصد طراحی یک قالب بسیار شیک با تصاویر و افکت های زیبا دارید. اولین مشکلی که وجود دارد عدم پشتیبانی مرورگر IE6 از بسیاری دستورات CSS و از همه مهمتر عدم پشتیانی این مرورگر از فرمت تصویری PNG است. همچنین برخی دیگر از دستورات که در IE8 اجرا میشوند، در IE7 و IE6 عمل نمیکنند.
برای ساخت دکمه های زیبا می توان از این تکنیک ها استفاده نمود
sprite تصویر مجموعه ای از تصاویر است که درون یک تصویر واحد گذاشته شده اند.
صفحه وبی با تصاویر زیاد، مدت طولانی طول می کشد تا load شود و requestهای زیادی از سرور می کند.
استفاده از spriteهای تصویر، تعداد requestها از سرور را کاهش می دهد و پهنای باند را ذخیره می کند.
در این آموزش با نحوه ایجاد تصاویر شفاف و همچنین کاهش شفافیت background آشنا می شویم .
ایجاد تصاویر شفاف با CSS آسان است.
از CSS می توان برای ایجاد گالری عکس استفاده کرد.
گالری عکس زیر با CSS ایجاد شده است:
می توان چندین pseudo-elements را نیز با هم ترکیب کرد.
در مثال زیر، حرف اول پاراگراف قرمز خواهد شد، با سایز فونت xx-large. بقیه خط اول، آبی و بصورت حروف کوچک خواهد بود. بقیه پاراگراف دارای اندازه فونت و رنگ پیش فرض خواهد بود.
Pseudo-classes و کلاس های CSS
می توان Pseudo-classes را با کلاس های CSS ترکیب کرد.
a.red:visited {color:#FF0000;}<a class="red" href="css_syntax.asp">CSS
Syntax</a>
اگر لینک مثال بالا بازدید شده باشد، قرمز نمایش داده خواهد شد.
:first-child pseudo-class با عنصری معین شده که اولین child عنصر دیگر است، match می شود.
نکته مهم: برای اینکه :first-child در IE کارکند، یک DOCTYPE> باید تعریف شود.
عنصرهای روی هم افتاده (Overlapping Elements)
هنگامی که عنصرها خارج از جریان نرمال موقعیت یابی می شوتد، ممکن است با عنصرهای دیگر تداخل د اشته باشند.
پراپرتی z-index، stack order یک عنصر را تعیین می کند ( که باید در جلو، پشت دیگران قرار گیرد)
عنصر ممکن است stack order مثبت یا منفی داشته باشد:
در style sheetها، اغلب عناصری با یک استایل وجود دارند.
h1
{color:green;
}h2
{color:green;
}p
{color:green;
}
outline، خطی است که اطراف عناصر و بیرون از لبه border کشیده می شود تا عنصر را برجسته تر کند.
پراپرتی outline، استایل، رنگ، و پهنای outline را تنظیم می کند.
مثال زیر چگونگی رسم یک outline را در اطراف عنصر نشان می دهد:
تمامی عناصر HTML را می توان box در نظر گرفت. در CSS، عبارت "box model" هنگام صحبت در مورد design و layout استفاده می شود.
CSS Box Model، الزاماً یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از: حاشیه ها، قاب ها (border)، padding، و محتوای واقعی.
box model، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.
تصویر زیر، box model را تشریح می کند:
پراپرتی های لیست CSS به شما اجازه می دهند:
در HTML، دو نوع لیست وجود دارد:
با CSS، می توان لیست ها را بیشتر style کرد، و می توان تصاویر را بعنوان لیست item marker استفاده کرد.
از این property برای تعیین indentation سطر اول متن استفاده می شود.
p {text-indent:50px;}
فونت CSS
propertyهای فونت CSS، نوع فونت، ضخیم بودن، اندازه و سبک متن را تعریف می کنند.
بطور پیش فرض، property تصویر پیش زمینه، تصویری را هم بطور افقی و هم عمودی تکرار می کند.
بعضی از تصویر ها فقط باید افقی یا عمودی تکرار کرد، مگر نه عجیب غریب دیده می شوند، مانند مثال زیر:
body
{
background-image:url('gradient2.png');
}
استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.
برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
سند HTML را می توان با styleهای مختلف نمایش داد.