خواص مقدماتی 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-family
نام خاصيت نوع خاصيت شرح
font-family نام قلم
font name
به وسيله اين خاصيت می توان از يک ليست آماده ( بر حسب نرم افزاری که برای طراحی صفحات استفاده می کنيد ) ، يک قلم را به عنوان قلم نوشته تعيين کنيد .
نکته : چنانچه نام قلمی در اين قسمت ذکر شود و مرورگر در هنگام نمايش صفحه آن قلم را نداشته باشد ، به جای آن از قلم پيش فرض خود استفاده می کند .

مثال font-family
< 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 :

خاصيت font-size
نام خاصيت نوع خاصيت شرح
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 ) تعيين می کنيم .
- درصد % : در اين حالت اندازه قلم نوشته را نسبت به عنصر مادر و يا حالت استاندارد ، بر حسب درصد بيان می کنيم .

مثال font-size
در مثال زير قسمت های يک پاراگراف با انداره هاي قلم متفاوت نشان داده شده اند :
< 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 :

نکته : خاصيت font-strecth را به دليل عدم پشتيبانی مرورگرهای اينترنت اکسپلورر ، Fire Fox و NetScape حذف کرده ايم .
اين خاصيت برای متراکم کردن يا کشيده شدن کلمات در نوشته استفاده می شود .



خاصيت font-style :

خاصيت font-style
نام خاصيت نوع خاصيت شرح
font-style normal
italic
oblique
از اين خاصيت با استفاده از حالت های زير می توان برای اعمال جلوه های نمايشی به متن استفاده کرد :
- normal : نوشته بدون هيچ جلوه ای نمايش داده می شود ، که انتخاب پيش فرض است .
- italic : نوشته به صورت خط کج نمايش داده می شود .
- oblique : نوشته به صورت مورب نمايش داده می شود .

مثال font-style
< 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 :

خاصيت font-variant
نام خاصيت نوع خاصيت شرح
font-variant normal
small-caps
توسط اين خاصيت می توان نوشته را به صورت معمولی ( noraml ) و يا حروف بزرگ ( small-caps ) نمايش داد .

مثال font-variant
< 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 :

خاصيت font-weight
نام خاصيت نوع خاصيت شرح
font-weight normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
توسط اين گزينه می توان ميزان ضخامت قلم نوشته را بر حسب يکی از حالت های زير تعيين کرد :
- normal : ميزان ضخامت قلم نوشته به صورت معمولی است ، که انتخاب پيش فرض است .
- bold : قلم نوشته به صورت توپر ( ضخيم ) نمايش داده می شود .
- bolder : قلم نوشته به صورت خيلی توپر ( ضخيم ) نمايش داده می شود .
- lighter : قلم نوشته کمی نازکتر از حالت معمولی نمايش داده می شود .
- 100 تا 900 : توسط اين مقدارهای عددی می توان ميزان ضخامت نوشته را تعيين کرد ، که هر چه عدد بزرگتر باشد ، ضخامت نوشته بيشتر می شود .

مثال font-weight
< 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 .

خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟