خواص مقدماتی CSS
قلم و نوشته در CSS :
به وسيله مجوعه خواص ارائه شده در اين قسمت می توان نوع ، اندازه و جلوه های مختلف
را برای قلم نوشته در صفحات وب HTML تعيين کرد .
خاصيت font :
خاصيت چند مقداری برای دريافت کليه ويژگی های قلم نوشته است که هر يک از ويژگی ها بايد
به ترتيب زير در خاصيت font وارد شود :
نکته : ترتيب قرار گرفتن خواص در خاصيت های چند مقداری به
نوع برنامه طراحی سايت بستگی دارد .
font : [ font-family ] [ font-size ] [ font-style
] [ font-variant ] [ font-weight ]
ليست زير مجموعه خواص font در CSS را شامل می شود ، که هر يک را به همراه مثال توضيح
داده ايم . برای دريافت اطلاعات درباره هر خاصيت بر روی نام آن کليک کنيد :
font-family
font-size
font-stretch
font-style
font-variant
font-weight
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
font-family |
نام قلم
font name
|
به وسيله اين خاصيت می توان از يک ليست آماده ( بر حسب نرم افزاری که برای طراحی صفحات
استفاده می کنيد ) ، يک قلم را به عنوان قلم نوشته تعيين کنيد .
نکته : چنانچه نام قلمی در اين قسمت ذکر شود و مرورگر در
هنگام نمايش صفحه آن قلم را نداشته باشد ، به جای آن از قلم پيش فرض خود استفاده می
کند .
|
< p style="color: Green; font-family: Arial" >
Font of this paragraph is Arial .
< /p >
< p style="color: Blue; font-family: Times New Roman" >
But font of this paragraph is Times New Roman .
< /p >
|
|
Font of this paragraph is Arial .
But font of this paragraph is Times New Roman .
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
font-size |
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
درصد %
|
به وسيله اين خاصيت می توان سايز قلم نوشته را توسط يکی از حالت های زير تعيين کرد
:
- xx-small : اندازه قلم بسيار کوچک است .
- x-small : اندازه قلم کمی کوچک است .
- small : اندازه قلم کوچک است .
- medium : اندازه قلم متوسط است .
- large : اندازه قلم بزرگ است .
- x-large : اندازه قلم کمی بزرگ است .
- xx-large : اندازه قلم بسيار بزرگ است .
- larger : اندازه قلم نوشته نسبت به ساير خطوط همجوار کمی بزرگتر است .
- smaller : اندازه قلم نوشته نسبت به ساير خطوط همجوار کمی کوچکتر است .
- length :در اين حالت اندازه قلم نوشته را بر حسب واحدی مثل پيکسل ( px ) و يا نقطه
( pt ) تعيين می کنيم .
- درصد % : در اين حالت اندازه قلم نوشته را نسبت به عنصر مادر و يا حالت استاندارد
، بر حسب درصد بيان می کنيم .
|
< p style="color: Maroon; font-family: Arial" >
< span style="font-size: small ; color : green"
> This part has a small font < /span >
< span style="font-size: medium ; color : blue"
> This part has a medium font < /span >
< span style="font-size: x-large color : red" >
This part has a big font < /span >
< span style="font-size: 20px; color:
Navy" > And size of font of this is 20px . < /span >
< /p >
|
|
This part has a small font
This part has a medium font
This part has a big font
And size of font of this is 20px .
|
نکته : خاصيت font-strecth را به دليل عدم پشتيبانی مرورگرهای
اينترنت اکسپلورر ، Fire Fox و NetScape حذف کرده ايم .
اين خاصيت برای متراکم کردن يا کشيده شدن کلمات در نوشته استفاده می شود .
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
font-style |
normal
italic
oblique
|
از اين خاصيت با استفاده از حالت های زير می توان برای اعمال جلوه های نمايشی به متن
استفاده کرد :
- normal : نوشته بدون هيچ جلوه ای نمايش داده می شود ، که انتخاب پيش فرض است .
- italic : نوشته به صورت خط کج نمايش داده می شود .
- oblique : نوشته به صورت مورب نمايش داده می شود .
|
< p style="font-family: Arial" >
< span class="g" style="font-size: medium; font-style:
italic" > This part has italic text. < /span >
< span class="b" style="font-size: medium; font-style:
oblique" > And this part has oblique text . < /span >
< /p >
|
|
This part has italic text.
And this part has oblique
text .
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
font-variant |
normal
small-caps
|
توسط اين خاصيت می توان نوشته را به صورت معمولی ( noraml ) و يا حروف بزرگ ( small-caps
) نمايش داد .
|
< p style="font-family: Arial" >
< span class="g" style="font-variant: normal" >
This part has normal text . < /span >
< span class="b" style="font-variant: small-caps"
> And this part has small-caps text . < /span >
< /p >
|
|
This part has normal text.
And this part has small-caps text .
|
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
font-weight |
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
|
توسط اين گزينه می توان ميزان ضخامت قلم نوشته را بر حسب يکی از حالت های زير تعيين
کرد :
- normal : ميزان ضخامت قلم نوشته به صورت معمولی است ، که انتخاب پيش فرض است .
- bold : قلم نوشته به صورت توپر ( ضخيم ) نمايش داده می شود .
- bolder : قلم نوشته به صورت خيلی توپر ( ضخيم ) نمايش داده می شود .
- lighter : قلم نوشته کمی نازکتر از حالت معمولی نمايش داده می شود .
- 100 تا 900 : توسط اين مقدارهای عددی می توان ميزان ضخامت نوشته را تعيين کرد ، که
هر چه عدد بزرگتر باشد ، ضخامت نوشته بيشتر می شود .
|
< p style="font-family: Arial" >
< span class="b" style="font-weight:
lighter" > This part has light text . < /span >
< span style="color : blue ; font-weight: normal"
> This part has normal text . < /span >
< span style="color : green ; font-weight: bold"
> This part has bold text. < /span >
< span style="color : red ; font-weight: 100" >
This part has a text with 100 . < /span >
< span style="color: Navy; font-weight:
900" > And this part has a text with 900 . < /span >
</p>
|
|
This part has light text .
This part has normal text .
This part has bold text.
This part has a text with 100 .
And this part has a text with 900 .
|