آموزش CSS – جلسه ششم – font – color – text-align

نویسنده: فرزاد ربیعی
تاریخ: 2012 - 03 - 03
دسته بندی: CSS طراحی سایت

برای مشخص کردن فونت، از تگ font-family استفاده می کنیم.
در صفحه html:


<p>استفاده از سی اس اس برای تعیین فونت ها</p>

در صفحه css:


p{
 font-family:Tahoma;
}

ابتدا ویژگی font-family که برای معرفی فونت به کار می رود را نوشته و سپس مقدارش را می نویسیم. یکی از فونت های مناسب فارسی در صفحات وب، Tahoma است.
font-size: برای مشخص کردن سایز نوشته، از این تگ استفاده می کنیم.


font-size:15px;

می توانید در جلسه سوم آموزش CSS، روش های مختلف مقدار دهی فونت را ببینید.
font-weight: برای bold کردن نوشته به کار می رود.


font-weight:bold;

font-style: برای italic کردن نوشته کاربرد دارد.


font-style:italic;

ضمنا می توانید به جای نوشتن هر خصوصیت در یک خط، آن ها را با هم بیاورید. مثلا کدهای بالا را می توان در خط زیر خلاصه کرد:


font:italic bold 14px tahoma;

color: برای مشخص کردن رنگ نوشته به کار می رود.


color:orange;

در این جلسه می توانید ببینید که چگونه رنگ ها در CSS مشخص می شوند.
letter-spacing: برای تعیین این که حرف ها چقدر از هم فاصله داشته باشند به کار می رود


letter-spacing:3px;

word-spacing: برای تعیین فاصله کلمه ها از هم


word-spacing:4px;

تا این جای کار، خروجی در مرورگر به صورت زیر خواهد بود

direction: جهت نوشتن را مشخص می کند که شامل دو حالت rtl (مخصوص فارسی از راست به چپ) و ltr (مخصوص انگلیسی از چپ به راست) می تواند استفاده شود (در نرم افزار word هم این ویژگی وجود دارد) .


direction:rtl;

با اضافه کردن این ویژگی جهت نوشتن از سمت راست به چپ می شود. مانند شکل زیر

text-align: برای این که نوشته در چه سمتی باشد، به کار می رود که می تواند مقدارهای left (چپ)، right (وسط)، justify (مرتب بودن نوشته از سمت چپ و راست) و center (وسط) را قبول کند.


text-align:center;

text-decoration: می تواند مقادیر line-through که وسط نوشته یک خط باشد، overline بالای نوشته خط باشد، underline زیر نوشته خط باشد و none که هیچ خطی نباشد را برای نوشته ایجاد کند.


text-decoration:line-through;

که خروجی شکل زیر خواهد بود.

text-indent هم برای این که خط اول را مقداری فاصله می دهد
text-transform هم برای uppercase یا lowercase کردن حرف ها می تواند به کار رود

دانلود فایل آموزش این جلسه

برچسب: - - - -

درباره ی

در زمینه CSS، ASP.Net و شبکه (MCITP) فعالیت میکنم

Comments are closed.