امتیاز موضوع:
  • 15 رأی - میانگین امتیازات: 2.8
  • 1
  • 2
  • 3
  • 4
  • 5
ویژگیهای مربوط به متن در CSS(قسمت دوم)
#1
در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.

[تصویر:  adobe-blueprint-css-icon.png]
text-transform
این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.
به یک مثال در مورد این ویژگی توجه کنید:


کد:
<div style="text-transform: uppercase">This is an example of uppercase in text-transform property.</div>

این هم نتیجه:

[تصویر:  13459729291.bmp]


همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.
این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:
  • none :
    با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.
  • lowercase :
    با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.
  • uppercase :
    این گزینه متن را با حروف بزرگ نمایش می دهد.
  • capitalize :
    این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:
کد:
<div style="text-transform: capitalize">this is an example of capitalize value for text-transform propety</div>

متن به صورت زیر نمایش داده می شود:


[تصویر:  13459732441.bmp]


line-height
این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند.
برای مثال اگر بخواهیم سطرها از هم 50 پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:


کد:
<div style="line-height: 50px">بین این سطر و سطر بعدی<br>20 پیکسل فاصله وجود دارد.</div>

نتیجه به صورت زیر خواهد بود:


[تصویر:  13459735241.bmp]


text-indent
این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.
در مثال زیر این مقدار تو رفتگی را 30 پیکسل در نظر می گیریم:


کد:
<div style="text-intend: 30px">سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.<br>
در حالی که بقیه سطرها به صورت عادی و<br>
بدون تو رفتگی نمایش داده می شوند.
</div>


این هم نتیجه:


[تصویر:  13459737611.bmp]


پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  ویژگیهای متن در CSS(قسمت اول) انجمن مخ ها 0 204 25-08-2012، 11:09 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان