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

تصویر پیش زمینه – تکرار افقی و عمودی

بطور پیش فرض، property تصویر پیش زمینه، تصویری را هم بطور افقی و هم عمودی تکرار می کند.

بعضی از تصویر ها فقط باید افقی یا عمودی تکرار کرد، مگر نه عجیب غریب دیده می شوند، مانند مثال زیر:

body

{

background-image:url('gradient2.png');

}

 اگر تصویر فقط افقی تکرار شود (repeat-x)، پیش زمینه بهتر بنظر می رسد:

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

  تصویر پیش زمینه – تعیین موقعیت و عدم تکرار

نشان دادن تصویر فقط یکبار، توسط property تکرار پیش زمینه (background-repeat) تعیین می شود:

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

}

  در مثال بالا، تصویر پیش زمینه در همان مکانی که متن نشان داده شده، نشان داده می شود. ما می خواهیم موقعیت تصویر را تغییر دهیم، بطوریکه زیاد با متن تداخل نداشته باشد.

موقعیت تصویر توسط property موقعیت پیش زمینه (background-position) تعیین می شود:

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:right top;

}

متن CSS

رنگ متن

property رنگ برای تعیین رنگ متن استفاده می شود. رنگ را می توان از طرق زیر تعیین کرد:

• نام – نام یک رنگ، مثلاً "قرمز"
• RGB – مقدار RGB، مثلاً "rgb(255,0,0)"
• Hex – مقدار Hex، مثلاً ""#ff0000

رنگ پیش فرض برای صفحه در بدنه سلکتور تعریف می شود.

body {color:blue;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

  تراز کردن متن (Text Alignment)

property تراز متن برای تعیین تراز افقی متن استفاده می شود.

می توان متن را در میان، چپ یا راست صفحه چید، یا می توان justify کرد.

وقتی متن justify می شود، هر خط کشیده می شود بطوریکه هر خط دارای پهنای مساوی خواهد بود، و حاشیه های چپ و راست صاف می شوند.

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;} 

decoration متن

از این property برای تعیین یا حذف decorationها از متن استفاده می شود.

اکثراً از این property برای حذف underline از لینکها استفاده می شود:

a {text-decoration:none;}

 همچنین می توان برای decorate کردن متن نیز استفاده کرد:

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

انتقال متن (Text Transformation)

از این property برای تعیین بزرگ یا کوچک بودن حروف متن استفاده می شود.

می توان از آن برای بزرگ یا کوچک کردن حروف، یا بزرگ کردن حرف اول هر کلمه استفاده کرد.

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}