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

Indentation متن

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

p {text-indent:50px;}

  فونت CSS

propertyهای فونت CSS، نوع فونت، ضخیم بودن، اندازه و سبک متن را تعریف می کنند.

گروه فونت های CSS

در CSS، دو گروه فونت وجود دارد:

گروه معمولی – گروهی از فونت ها با ظاهری مشابه (مانند "serif"، یا Monospace)

گرو مخصوص – نوع بخصوصی از فونت ها ( مانند Times New Roman یا Arial)

گروه فونت

گروه فونت متن با property نوع فونت تعیین می شود.

این property باید چندین نام فونت را به صورت سیستم "fallback" داشته باشد. اگر مرورگر اولین فونت را ساپورت نکند، از فونت بعدی استفاده می کند.

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

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

 استایل فونت

property استایل فونت (font-style) اکثراً برای کج (italic) کردن متن بکار می رود.

این property دارای سه value است:

• نرمال – متن بطور عادی نمایش داده می شود
• کج – متن بصورت کج نمایش داده می شود
• اریب – متن بصورت "تکیه زده" نمایش داده می شود ( این value شبیه قبلی است، اما کمتر استفاده می شود)

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

اندازه فونت

این property،اندازه فونت را تعیین می کند.

داشتن قابلیت مدیریت اندازه فونت در طراحی وب مهم است. اما، نباید از تنظیمات اندازه فونت برای شبیه کردن پاراگراف ها به هدینگ یا بالعکس استفاده کرد.

همیشه از تگ HTML مناسب، از قبیل <h1> - <h6> برای هدینگ ها و از <p> برای پاراگراف ها استفاده کنید.

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

فونت مطلق:

• متن را به اندازه ای معین در می آورد
• به کاربر اجازه تغییر اندازه فونت را در همه مرورگرها نمی دهد
• فونت مطلق هنگامی مفید است که اندازه فیزیکی خروجی مشخص باشد

فونت نسبی:

• اندازه را نسبت به عنصر مجاور تعیین می کند
• به کاربر اجازه تغییراندازه متن در مرورگر را می دهد.

تعیین اندازه فونت با پیکسل ها

تنظیم اندازه متن با پیکسل ها به شما امکان کنترل کامل روی اندازه متن را می دهد.

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

مثال بالا به Firefox، Chrome، و Safari اجازه resize کردن متن را می دهد، ولی به Internet Explorer نمی دهد.

می توان متن را با استفاده از ابزار zoom در همه مرورگرها resize کرد ( اما این کار، کل صفحه را resize می کند، نه فقط متن را).

تعیین اندازه فونت با Em

خیلی از برنامه نویسان جهت پرهیز از مشکل resize کردن ذر Internet Explorer، از em بجای پیکسل استفاده می کنند.

واحد اندازه em، توسط W3C معرفی شده است.

یک em برابر با اندازه کنونی فونت است. اندازه متن پیش فرض در مرورگرها 16px است. پس اندازه پیش فرض یک em، برابر با 16px است.

تبدیل پیکسل به em را می توان از طریق این فرمول انجام داد: pixels/16=em

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

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

در مثال بالا، اندازه متن در em همان اندازه مثال قبلی در پیکسل است. اما، با اندازه em، تنضیم اندازه متن در همه مرورگرها ممکن است.

متاسفانه، هنوز مشکلی در IE وجود دارد. هنگام resize کردن متن، از مقداری که باید، بزرگتر ، و از مقداری که باید، کوچکتر می شود.

استفاده از ترکیبی از درصد و Em

solutionیی که در همه مرورگرها جواب می دهد، تنظیم اندازه فونت به درصدی از عنصر بدنه است:

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

حالا کد ما کار می کند. و در همه مرورگرها اندازه یکسان را نشان می دهد، و به همه مرورگرها اجازه zoom یا resize کردن متن را می دهد.

لینک های CSS

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

Style کردن لینک ها

لینک ها را می توان با هر پراپرتی CSS، استایل کرد ( مثلاً رنگ، گروه فونت، رنگ پشت زمینه).

نکته ویژه در مورد لینک ها این است که می توان آنها را به طور متفاوتی، بسته به حالتی که در آن هستند، استایل کرد.

لینک ها چهار حالت دارند:

• a:link – یک لینک نرمال و بازدید نشده
• a:visited – لینکی که کاربر بازدید کرده است
• a:hover – یک لینک، هنگامی که کاربر روی آن کلیک می کند
• a:active – یک لینک، لحظه ای که کلیک می شود

a:link {color:#FF0000;}      /* unvisited link */

a:visited {color:#00FF00;}  /* visited link */

a:hover {color:#FF00FF;}  /* mouse over link */

a:active {color:#0000FF;}  /* selected link */

 استایل های رایج لینک

در مثال بالا، لینک، رنگ را بر اساس حالتی که در آن است تغییر می دهد.

بیایید نگاهی به روش های رایج دیگر برای استایل کردن لینک ها بیاندازیم:

decoration متن

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

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

پراپرتی رنگ پیش زمینه (background-color)، رنگ پیش زمینه برای لینک را تعیین می کند:

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}