امروز تنظیمات پایه برای متن ها را مورد بررسی قرار می دهیم.
متن ها حدود 75% از محتویات سایت را به خود اختصاص می دهند و با تزئین متن ها می توانید سایتی زیبا را بسازید.
1.font-family
با استفاده از font-family شما می توانید فونت بکار برده شده در سایت خود را تغییر دهید:
p{
font-family:sans-serif;
}
شما می توانید فونت های مورد نظر خود را در این دستور مطابق مثال بالا تعریف کنید.
دقت کنید اگر نام فونت شما دارای فضای خالی باشد باید نام فونت را داخل "" بگذارید:
p{
font-family:"Times New Roman";
}
در ضمن می توانید در یک دستور font-family چندین فونت را تعریف کنید (با استفاده از کاما (,) ) تا اگر اولین فونت یافته نشد مرورگر سراغ فونت دومی برود و روند کار نیز به این صورت هست:
p{
font-family:"Times New Roman",sans-serif;
}
تعریف فونت های شخصی در پست های آینده بررسی خواهد شد.
2.font-size
این پست قبلا در وبلاگ درج شده است.
3.font-style
با استفاده از این دستور شما می توانید به فونت خود استایل italic بدهید:
p{
font-style:italic;
}
دستور font-style سه نوع مقدار دارد(normal,italic,oblique) که normal حالت عادی فونت می باشد و italic و oblique نیز می توان گفت یکی هستند.
این دستور معادل با تگ <i> در html می باشد.
4.font-weight
برای تنظیم حجم یک فونت از دستور font-weight استفاده می شود.
p{
font-weight:bold;
}
دستور font-weight چهار نوع مقدار دارد.
normal:حالت عادی
bold:ضخیم
bolder:ضخیم تر
lighter:نازکتر
همچنین می توانید به عنوان مقدار عددی بین 100 تا 900 بدهید که 100 نازکترین مقدار و 900 ضخیم ترین مقدار است.
5.font-variant
با استفاده از این دستور حالت خاصی از فونت را بنمایش در می آورید.
به این صورت که حرف اول بصورت حرف و سایز بزرگ و بقیه ی حروف با حرف بزرگ ولی سایز کوچک نوشته می شود.
p{
font-variant:smal-caps;
}
6.color
با استفاده از این دستور شما می توانید رنگ متن مورد نظر را به رنگ دلخواه نمایش دهید.
p{
color:red;
}
این دستور واحد های رنگ دهی زیادی را پشتیبانی می کند مانند نام رنگ، کد رنگ، رنگrgbaو...
تمام واحد های رنگی در پست های آینده مورد بررسی قرار خواهد گرفت.
7.text-align
با استفاده از این دستور می توانید چینش متن خود را تغییر دهید:
p{
text-align:center;
}
مقدار های این دستور عبارت اند از:
left:چپ چین کردن(حالت پیشفرض)
right:راست چین کردن
center: وسط چین کردن
8.vertical-align
با استفاده از این دستور چینش متن خود را نسبت به خط تنظیم می کنید.
p{
vertical-align:top;
}
مقدار های این دستور عبارت اند از:
top:قرار دادن متن در قسمت بالای خط
middle:قرار دادن متن در قسمت وسطی خط
bottom:قرار دادن متن در قسمت پایین خط
مقدار های اختصاصی نیز در پست های آینده مورد بررسی قرار خواهد گرفت.
9.text-decoration
با استفاده از این دستور شما می توانید بر روی متن خود خط بکشید
مانند: مثال یا مثال و...
p{
text-decoration:underline;
}
مقدار های این دستور:
none: برای نداشتن هیچ خطی
overline: برای کشیدن خط به بالای متن
line-trough: برای کشیدن خط به روی متن
underline: باری کشیدن خط به زیر متن
10.text-indent
با استفاده از این دستور شما می توانید فاصله ی خط اول پاراگراف از حاشیه را تنظیم کنید:
p{
text-indent:60px;
}
مقدار های این دستور به صورت پیکسل px می باشد.
ادامه دارد...
