PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش CSS (کار با متن - Text)



Ra1den
2012/01/15, 12:06 AM
یه توضیح بدم اولش اینکه این آموزشها کاملا اختصاصی VBIran.ir هست.
ابتدا برای یادگیری مفاهیم اولیه و سینتاکس CSS به این دو تاپیک مراجعه کنید.

http://www.vbiran.ir/thread17014.html
http://www.vbiran.ir/thread19969.html

رنگ متن ها

اولین چیزی که به ذهن همه میرسه تغییر رنگ متن هست. برای اینکار میتونید از ویژگی color استفاده کنید. مثال:


body {color:blue;}
div {color:#0000FF;}
p {color:rgb(0,0,255);}

همونطور که میبینید، میتونید رنگ رو به سه روش بنویسید.
با اجرای این کدها تمام متون داخل تگهای body و div و p آبی خواهند شد.

چینش متن

برای چینش متن به صورتهای راست چین، وسط چین، چپ چین و ... میتونید از ویژگی text-align استفاده کنید. مثال:


p {text-align:center;}
p.farsi {text-align:right;}
p.matn {text-align:justify;}

در سطر اول تمام متونی که داخل تگ p هستند وسطچین میشوند.
در سطر دوم تمام تگهای p که کلاس farsi به آنها نسبت داده شده راست چین میشنود.
در سطر سوم طول سطرهای متن داخل تمام تگهای p که کلاس matn به آنها نسبت داده شده، یکسان میشود.

تزئین متن

برای bold کردن، ایتالیک و یا زیرخط دار کردن متنها میتونید از ویژگی text-decoration استفاده کنید. مثال:


a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}



در سطر اول لینک ها فاقد تزئین خواهند بود.
در سطر دوم متون داخل تگهای h1 دارای یک خط در بالایشان خواهند بود.
در سطر سوم متون داخل تگهای h2 دارای یک خط عبور کرده از وسطشان خواهند بود.
در سطر چهارم دارای خطی در زیر خواهند بود.
در سطر آخر متن چشمک میزند!

تغییر بزرگی و کوچکی متن


p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}



تگهای p که کلاس uppercase داشته باشند به حروف بزرگ تبدیل میشوند.
تگهای p که کلاس capitalize داشته باشند، حرف اول متن بزرگ و بقیه کوچک خواهد بود.

لیست کامل ویژگیهای مربوط به متن در CSS:

color - تغییر رنگ
direction - سمت نوشتاری متن
letter-spacing - افزایش و کاهش فاصله بین هر حرف
line-height - تعیین ارتفاع هر سطر
text-align - تغییر چینش افقی متن
text-decoration - تزئین متن
text-indent - تو رفتگی اولین سطر متن
text-shadow - افزودن افکت سایه به متن
text-transform - بزرگ و کوچک کردن حروف
vertical-align - چینش عمودی
white-space - تعیین مقدار مجاز فاصله سفید در متن
word-spacing - افزایش فاصله بین هر کلمه

Special_One
2012/01/16, 04:52 PM
تایید شد.

EmpireWorld
2012/01/16, 05:02 PM
برای فارسی یا راست چین کردن متونی که توشون کلمات انگلیسی و فارسی با همدیگه وجود داره نمیشه از تگ text-align:right; استفاده کرد
چون جلمه رو خراب میکنه
بهترین روش برای این کار استفاده از تگ direction:rtl; هستش
اینو صرفا برای دوستانی گفتم که مشکل فارسی کردن قالب ها رو داشتن

par
2012/01/16, 05:04 PM
سلام
عالیه!
فقط یه سوال برای اینکه بخوایم یه عکس رو وسط چین بکنیم باید کد رو بزاریم توی css بعد کلاس تعیین کنیم؟
نمیشه با تگ <style> بزاریمش که کد رو بخونه توی همون جایی که عکسه؟

Ariyan
2012/01/16, 05:14 PM
فقط یه سوال برای اینکه بخوایم یه عکس رو وسط چین بکنیم باید کد رو بزاریم توی css بعد کلاس تعیین کنیم؟

بله
و همچنین از کد

text-align:center; استفاده کنید </pre>

Ra1den
2012/01/18, 12:01 AM
اگه میخوایید فقط عکسهای یه تگ وسط چین بشه اینطوری بنویسید:


.vasat img{
text-align: center;
{

اینطوری فقط تگهای img تگ بالاتر از اون که کلاس vasat رو داره وسط چین میشه.