Css

|

اموزش css

در مقالات html به توضیح کار کردن با متن هاو ویژگی های آن اشنا شدیم اما در این مقاله میخواهیم به صورت تخصصی با فونت ها در css آشنا شویم.

با کمک این ویژگی ها میتوانیم نحوه قرار گرفتن متن در صفحه ، فاصله بین حروف ، فاصله بین کلمات و ... تغییر دهیم.

letter-spacing

با استفاده از این ویژگی میتوانیم فاصله بین حروف در متن خود را تغیییر دهیم. این ویژگی را میتوانیم با استفاده از پیکسل یا مقدار normal تغییر دهیم که البته normal به صورت پیش فرض در مرورگر وجود دارد و نیازی به نوشتن آن نیست.

<div style="letter-spacing:5px">
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.
</div>

text-align

با استفاده از این ویژگی میتوانیم جایگاه متن در صفحه را مشخص کنیم.

Left: محتویات داخل این تگ در سمت چپ صفحه نمایش داده میشود.

Right : محتویات داخل این تگ در سمت راست صفحه نمایش داده میشود.

Center : محتویات داخل این تگ در وسط صفحه نمایش داده میشود.

برای مثال میخواهیم متنمان در سمت چپ نوشته شود:

<div style="text-align:left; border:thin dashed #00CCFF">محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.</div>

text-decoration

با استفاده از این ویژگی مشخص میکنیم که قسمتی از متن زیر خط یا روی خط یا ... تعریف کنیم.

Underline : زیر متن خط میکشد.

Overline : بالای متن خط میکشد.

Line-through : یک خط بر روی متن میکشد و انرا به صورت خط خورده نشان میدهد.

Blink : برای چشمک زن کردن متن از این مشخصه استفاده می کنیم. البته این گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای Netscape نمایش داده می شود.

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.

lowercase: متن به صورت کوچکنوشته میشود.

uppercase: متن با حروف بزرگ نمایش داده میشود.

capitalize: حروف اول همه کلمات را بزرگ میکند.

line-height

با استفاده از این کد ارتفاع سطر ها را مشخص میکنیم این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند.

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

text-indent

این مشخصه مقدار تورفتگی را در سطر اول هر پاراگراف مشخص میکند که برحسب پیکسل یا درصد مینویسیم.

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

طراحی سایت اموزش css css

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
م
محمد
19:38 1394/08/28

با عرض سلام و خسته نباشي ميخواستم تو ساخت يه سايت به صورت html کمکم کنيد البته اگه امکانش هست

داتینه
بهار شهسواری
23:57 1394/08/28

با سلام. بله حتما کمکی باشه در خدمتیم

نظر بدهید