نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

ادامه اموزش طراحی سایت با CSS :

font-family خصوصیت:

می توان نوع فونت مورد استفاده برای متن را با استفاده از خاصیت font family تعیین کرد.

حال می خواھیم که متن تگ h2 را با فونت Courier New و متن تگ p را با فونت Tahoma  نمایش دھیم، کد css ماچنین خواھد شد :

h2 { font-family: "courier new"; } 

h4 {font-family: tahoma; }

حال حتما می پرسید که چرا نام فونت  courier new را داخل کوتیشن (” “) گذاشته ام اما نام فونت Tahoma را نه. اینکار، به این دلیل است که نام فونت courier new  دارای فضای خالی (space) نیز ھست، ھرگاه نام فونتی دارای فضای

خالی بود باید نام آن را داخل کوتیشن قرار داد. درضمن می توان از چندین فونت برای یک تگ استفاده کرد به طور مثال :

h2 { font-family: times , "times new roman" , serif; }

ھنگامی که از چندین فونت استفاده می شود، این فونت ھا باید با علامت (,) از یکدیگر جدا شوند. در این حالت اگر

فونت اول بر روی سیستم کاربر موجود نباشد دومین فونت اعمال خواھد شد و اگر فونت دوم نیز بر روی سیستم کاربرموجود نباشد سومین فونت اعمال خواھد شد و الی آخر.

استایل تعریف شده در مثال فوق فونت تمامی تگ ھای h2 را به فونت times تغییر خواھد داد و اگر فونت times بر رویسیستم کاربر موجود نباشد از فونت times new roman استفاده خواھد شد و اگر ……

font-style خصوصیت

با استفاده از این خاصیت می توان متن را به صورت italic یا مورب نمایش داد. و سه مقدار را می پذیرد:

Normal : مقدار پیشفرض و حالت عادی فونت می باشد.

Italic : متن را به صورت مورب نمایش می دھد.

Oblique : متن را به صورت مورب نمایش می دھد و در اکثر فونت ھا تفاوت ظاھری چندانی با italic ندارد.

به یاد داشته باشید که ھمه ی فونت ھا شکل italic ندارند.

مثال :

h2 { font-style: italic; } 

h4 { font-style: oblique; }

font-variant خصوصیت

این خصوصیت حروف را به صورت uppercase (حروف بزرگ)  نمایش می دھد. اما در این حالت حروف کمی از حالتcapitalized کوچکترند. این خصوصیت دو مقدار زیر را می گیرد:

Normal : مقدار پیشفرض و حالت عادی حروف

uppercase نمایش حروف به صورت : Small-caps

مثال :

h2 , h4 { font-variant: small-caps; }

font-weight خصوصیت

با استفاده از این خاصیت می توان مقدار ضخامت متن را مشخص کرد.

و یکی از مقادیر زیر را می گیرد.

normal , bold , bolder , lighter , 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

مقدار پیشفرض این خصوصیت normal  است.

در عمل فقط سه مقدار normal و bold و lighter در اکثر مرورگرھا به درستی کار می کنند.

به طور معمول مقدار normal معادل مقدار 400 و مقدار bold معادل مقدار 700  می باشد.

font-size خصوصیت

با استفاده از خاصیت font-size می توان اندازه فونت متون را کنترل کرد.

مقادیر ممکن برای این خاضیت عبارتند از:

xx-small , x-small , small , medium , large , x-large , xx-large

که مقدار پیشفرض medium است.

:

در کلمات کلیدی ھر مقدار 1.2  برابر مقدار قبلی خود می باشد، به طور مثال اگر medium برابر px16 باشد آنگاه largeبرابر 16 ضربدر 1.2 مساوی با 19.2  یا تقریبا 19 خواھد بود.

مقادیر نسبی: مقادیر نسبی یکی از دو مقدار larger و smaller را می پذیرد.

مقدار larger در مقادیر نسبی، فونت را 1.2 برابر فونت قبلی می کند.

مقادیر زیر %100 معادل smaller و مقادیر بالای %100 معادل larger می باشند.

مقادیر درصدی : مقادیر درصدی برای font-size وابسته به عنصر پدر می باشند.

مثال :

p { font-size: 80%; }

اموزش طراحی سایت با CSS !! ادامه اموزش در جلسه بعدی…