در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شمامعرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن درصفحه، فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.
letter-spacing
این ویژگی به ما اجازه می دهد تا فاصله میان حروف یک کلمه را در یکمتن تعیین کنیم. این ویژگی می تواند مقادیری را در مقیاس پیکسل به خودبگیرد یا از مقدار normal استفاده کند. گزینه پیش فرض برای این ویژگی همان normal است. در اینجا به ذکر یک مثال در مورد این ویژگی می پردازیم:
فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:
کد:
کد:
<div style=”letter-spacing:۵px”>
حروف این متن با فاصله ۵ پیکسل از یکدیگر نمایش داده خواهند شد.
</div>
کد را آزمایش کنید و نتیجه را مشاهده کنید
text-align
این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم.
این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد:
left :
با استفاده از این مقدار می توانیم محتویات یک تگ را در سمت چپ صفحه نمایش دهیم.
right :
این قدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند.
center :
این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند.
برای مثال اگر می خواهید متنی که در یک DIV قرار دارد به صورت چپ چیننمایش داده شود می توانیم از این ویژگی به مانند زیر استفاده کنیم
کد:
کد:
<div style=”text-align:left; border:thin dashed #۰۰CCFF”>
محتویات این DIV در سمت چپ صفحه نمایش داده می شوند
.</div>
text-decoration
این ویژگی به ما اجازه می دهد تا برای قسمت خاصی از متن خاصیتهای ازقبیل زیرخط تعریف کنیم. مثلاً فرض کنید می خواهیم یک متن را با خطی بالایآن به وجود بیاوریم. در اینجام می توانیم از این ویژگی به صورت زیراستفاده متین
کد:
کد:
<div style=”text-decoration: overline”>
به این متن توجه کنید!!
</div>
این ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم:
none :
این گزینه به صورت پیش فرض بر روی متن اعمال می شود (البته برایلینکها به صورت پیش فرض underline اعمال می شود) و در نتیجه آن متنها بهصورت ساده و معمولی نمایش داده می شوند. در صورتی که بخواهیم لینکهایی درمتن ما بدون زیر خط نشان داده شوند می توانیم از این گزینه برای تگ لینکاستفاده کنیم.
underline :
از این گزینه می توان برای زیر خط دار کردن متنها استفاده کرد.
overline :
این گزینه برای نمایش خط بالای متن استفاده می شود.
line-through :
این گزینه یک خط را در میانه متن ایجاد می کند و آنرا به صورت خط خورده نشان می دهد.
blink :
از این گزینه می توانیم برای چشمک زن کردن متن استفاده کنیم. البتهاین گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای Netscape نمایش داده می شود.
در اینجا یک لینک را می بینید که با استفاده از ویژگی بالا بدون زیر خط نمایش داده می شود
کد:
کد:
<a href=”#example” style=”text-decoration:none>
متن مورد استفاده در لینک
</a>
text-transform
این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یاحروف کوچک و یا به صورت معمولی البته بدونآنکه در حروفی که تایپ شده استتغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برایتأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را ازاول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولیدر زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.
کد:
کد:
<div style=”text-transform: uppercase”>
This is an example of uppercase in text-transform property.
</div>
این هم نتیجه:
THIS IS AN EXAMPLE OF UPPERCASE IN TEXT-TRANSFORM PROPERTY
همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.
این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:
none :
با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.
lowercase :
با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.
uppercase :
این گزینه متن را با حروف بزرگ نمایش می دهد.
capitalize :
این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروفبزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:
line-height
این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. اینارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرهارا مشخص می کند.
برای مثال اگر بخواهیم سطرها از هم ۵۰ پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:
کد:
کد:
<div style=”line-height: ۵۰px”>
بین این سطر و سطر بعدی<br>۲۰ پیکسل فاصله وجود دارد
.</div>
نتیجه به صورت زیر خواهد بود:
بین این سطر و سطر بعدی
۲۰ پیکسل فاصله وجود دارد.
text-indent
این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اولهر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صدباشد.
در مثال زیر این مقدار تو رفتگی را ۳۰ پیکسل در نظر می گیریم:
کد:
کد:
<div style=”text-intend: ۳۰px”>
سطر اول این قسمت با ۳۰ پیکسل تو رفتگی نمایش داده می شود.<br>
در حالی که بقیه سطرها به صورت عادی و<br>
بدون تو رفتگی نمایش داده می شوند.
</div>
این هم نتیجه:
سطر اول این قسمت با ۳۰ پیکسل تو رفتگی نمایش داده می شود.
در حالی که بقیه سطرها به صورت عادی و
بدون تو رفتگی نمایش داده می شوند.
