طراحي وب سايت و المانهای تبلیغاتی

برای ساخت دکمه های زیبا می توان از این تکنیک ها استفاده نمود

sprite تصویر مجموعه ای از تصاویر است که درون یک تصویر واحد گذاشته شده اند.

صفحه وبی با تصاویر زیاد، مدت طولانی طول می کشد تا load شود و requestهای زیادی از سرور می کند.

استفاده از spriteهای تصویر، تعداد requestها از سرور را کاهش می دهد و پهنای باند را ذخیره می کند.

در این آموزش با نحوه ایجاد تصاویر شفاف و همچنین کاهش شفافیت background آشنا می شویم .

ایجاد تصاویر شفاف با CSS آسان است.

ایجاد تصاویر شفاف:

از CSS می توان برای ایجاد گالری عکس استفاده کرد.

گالری عکس

گالری عکس زیر با CSS ایجاد شده است:

Pseudo-elements چندگانه

می توان چندین 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>

 اگر لینک مثال بالا بازدید شده باشد، قرمز نمایش داده خواهد شد.

CSS- The :first-child Pseudo-class

:first-child pseudo-class با عنصری معین شده که اولین child عنصر دیگر است، match می شود.

نکته مهم: برای اینکه :first-child در IE کارکند، یک DOCTYPE> باید تعریف شود.

عنصرهای روی هم افتاده (Overlapping Elements)

هنگامی که عنصرها خارج از جریان نرمال موقعیت یابی می شوتد، ممکن است با عنصرهای دیگر تداخل د اشته باشند.

پراپرتی z-index، stack order یک عنصر را تعیین می کند ( که باید در جلو، پشت دیگران قرار گیرد)

عنصر ممکن است stack order مثبت یا منفی داشته باشد:

سلکتور های Grouping و Nesting در CSS

سلکتورهای Grouping

در style sheetها، اغلب عناصری با یک استایل وجود دارند.

h1
{color:green;
}h2
{color:green;
}p
{color:green;
}

outlineهای CSS

outline، خطی است که اطراف عناصر و بیرون از لبه border کشیده می شود تا عنصر را برجسته تر کند.

پراپرتی outline، استایل، رنگ، و پهنای outline را تنظیم می کند.

مثال زیر چگونگی رسم یک outline را در اطراف عنصر نشان می دهد:

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS، عبارت "box model" هنگام صحبت در مورد design و layout استفاده می شود.

CSS Box Model، الزاماً یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از: حاشیه ها، قاب ها (border)، padding، و محتوای واقعی.

box model، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.

تصویر زیر، box model را تشریح می کند:

پراپرتی های لیست CSS به شما اجازه می دهند:

• لیستی متفاوت از item markerها را برای لیست های سفارش داده شده تعیین کنید
• لیستی متفاوت از item markerها را برای لیست های سفارش داده نشده تعیین کنید
• تصویری را بعنوان لیست item marker تعیین کنید

لیست

در HTML، دو نوع لیست وجود دارد:

• لیست های سفارش داده شده – لیست آیتم ها با bullet نشانه گذاری می شوند
• لیست های سفارش داده شده – لیست آیتم ها به اعداد یا حروف نشانه گذاری می شوند

با 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>

• CSS مخفف Cascading Style Sheets است
• styleها چگونگی نمایش عناصر HTML را تعریف می کنند
• styleها برای حل یک مشکل به HTML 4.0 اضافه شدند
• External Style Sheets می تواند در در انجام کار صرفه جویی کند
• External Style Sheets در فایل های CSS ذخیره می شوند

نمایش CSS

سند HTML را می توان با styleهای مختلف نمایش داد.