Font Family

در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.

در css دو نوع از خانواده فونت ها وجود دارد.

• "generic family" مثل  "Serif" یا "Monospace"
• "font family" مثل "Times New Roman" یا "Arial"

با ویژگی font-family شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.
برای مثال :

p{font-family:"Times New Roman", Times, serif;}

در صفحات نمایش کامپیوترها فونت های خانواده sans-serif نسبت به فونت های خانواده serif آسانتر خوانده میشوند و عمومی تر هستند.

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

Font Style
با این ویژگی شما نوع نمایش متن را مشخص میکنید.این ویژگی دارای دومقدار زیر میباشد :

1.  normal   :متن به صورت معمولی نمایش داده میشود
2.  italic   : متن به صورات ایتالیک نمایش داده میشود
3.  oblique  :  متن به صورت مورب نمایش داده میشود

مثال : 

p {font-style:normal;} p {font-style:italic;} p {font-style:oblique;}

Font Size
این ویژگی سایز متن را مشخص میکند. اندازه متن در طراحی وب سایت بسیار حائز اهمیت است. ویژگی font-size را میتوانید به صورت مطلق یا نسبی مقداردهی کنید . اگرچه در زوم و رزولیشن های مختلف این مقدار تغییر میکند.ولی این تغییر اندازه برای کل صفحه میباشد وشامل یک بخش نیست. سایز پیش فرض برای یک متنن نرمال 16px تعریف میشود.
برای متن هایی که در بالای صفحه (header) نمایش داده میشوند از تگ های <h1> - <h6> و تگ <p> برای پاراگراف های خود استفاده کنید، در مورد این تگ ها در قسمت آموزش HTML میتوانید بیشتر اطلاعات کسب کنید .
مثال :

h1 {font-size:30px;} h2 {font-size:20px;} p {font-size:14px;}

تنظیم فونت با واحد EM
در نسخه های اولیه Internet Explorer به دلیل پشتتیباتی نشدن واحد px بسیاری از طراحان از واحد em استفاده میکردند.
هر 1em رابر با 16px میباشد.
مثال :

h1 {font-size:2.5em;} /* 40px/16=2.5em */

این واحد در تمامی مرورگرها پشتیبانی میشود.

Background

در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های  پس زمینه برای یک عنصر به کار میرود.این ویژگی درطراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

• background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر  پس زمینه بدنه سایت از کد زیر استفاده میکنیم :
• 
  body {background-image:url('paper.gif');}
  
  

• background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی  تکرار شود  زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :

• زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :
• 
  body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
  
  
• background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.
• 
  body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }
  
  
• background-position : این خاصیت موقعیت  یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست -  بالا  از کد زیر استفاده میکنیم :
• 
  body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right;}
  
  

این سه خط را میتوان به صورت خلاصه تر نوشت :

body {background:#ffffff url('img_tree.png') no-repeat right top;}

در این بخش ازآموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

• گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

• قوانین نام گذاری فایل های css

1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
3. نام فایل بایستی با یک حرف شروع شود.
4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .