محبوب
2 دقیقه پیش | امیت سرکیسیان، اولین شهید مدافع حرم ارامنه! / شایعه 0506این تصویر جعلی است و عکس اصلی مربوط به شهید مدافع حرم هادی شجاع در مشهد می باشدمتن و پاسخ شایعه |
2 دقیقه پیش | وقتی موبایل برای سلامت شما مفید می شود!!جریان سریع امور در دنیای امروز به حواسپرتی بیشتر و نداشتن وقتی برای آسودگی انجامیده است. در چنین شرایطی نیازهای بدن به آسانی فراموش میشود. خوشبختانه همان وسایلی که ... |
زنگ CSS: جلسه پنجم - تغییر استایل متون HTML
در جلسه گذشته، با استایل دادن صفحهی پسزمینه آشنا شدید. در این بخش قصد داریم تا شما را با تغییراتی که با کمک سی اس اس می توانید در متنها ایجاد کنید، آشنا نماییم.
فرمت کردن متنها در اچتیامال را در دوره آموزش اچتیامال از طریق اتریبیبوت استایل آموختهایم. این روش که در واقع همان اینلاین سیاساس است شاید برای بعضی موارد چندان اشکالی نداشته باشد؛ ولی در کل استفاده از این روش توصیه نمیشود. حالا قصد داریم تا کارهای قبلی را با کمک سیاساس و با سرعت بیشتری انجام دهیم. نکتهی خوشایند در این موضوع آن است که در این حالت نیازی به تغییر قواعد نوشتن نیست و همان دستوراتی که در دورهی قبلی نوشتهایم را بدون تغییر و در قالب یک فایل خارجی وارد میکنیم. با ما همراه شوید. رنگ متن: نام : color این ویژگی چه کاری انجام میدهد؟ رنگ متنها را تغییر میدهد! چه چیزهایی را در مقابلش بنویسیم؟ انواع رنگها را ! نمونه نوشتن این ویژگی: color: red یا color: #44444 یا ("2,color: rgb("2,2,2یادآوری از گذشته: شما میتوانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریعترین روشها برای تغییرات کلی در صفحه است. مثلا با انتخاب المان body تمامی متنهای موجود در صفحه شما به استایل داده شده در میآید. مثالهای زیر را نگاه کنید.
HTMLعنوان با رنگ نارنجی نوشته میشود
متن با رنگ طوسی نوشته میشود.
CSSh1 { color: orange;}
p { color: gray;}
عنوان با رنگ نارنجی نوشته میشودمتن با رنگ طوسی نوشته میشود.
text-align نام : text-align از این ویژگی چه کاری انجام میدهد؟ نحوه و محل قرار گیری متنها را مشخص میکند ! چه چیزهایی را در مقابلش بنویسیم؟ انواع جهتها را! راست، چپ و وسط. نمونه نوشتن این ویژگی: text-align: center یا text-align : right یا text-align: leftبا کمک این دستور شما میتوانید متنهای خود را به صورت راست چین، چپ چین یا وسط چین منظم کنید. دستورات مربوط به این موضوع را در زیر مشاهده میکنید:
HTMLمتن وسط چین
متن راست چین
متن چپ چین
CSScenter { text-align: center;}
p.right{ text-align: right;}
p.left { text-align: left;}
متن راست چین
متن چپ چین
Text Decoration نام : Text Decoration از این ویژگی چه کاری انجام میدهد؟ نوع نوشتن متن را تغییر میدهد چه چیزهایی را در مقابلش بنویسیم؟ نوع استایل مورد نظر! خط کشیدن زیر متن، خط کشیدن روی متن و ... نمونه نوشتن این ویژگی: text-decoration: none|underline|overline|line-through|initial|inherit
گاهی المانهای اچتیامال صفحه، استایلهای مخصوص خود را دارند. مثلا لینکها در اچتیامال به صورت پیشفرض با رنگ آبی نشان داده میشوند و همچنین یک خط در زیر آنها کشیده میشود. بدین ترتیب شما اگر بخواهید آنها را به صورت ساده در بیاورید میبایست برای این کار از دستور Text Decoration استفاده کنید. این دستور را در زیر مشاهده میکنید.
a { text-decoration: none;}
برای تغییر یک المان سه روش برای انتخاب وجود دارد. مانند قبل المان مورد نظر را انتخاب میکنیم. مثلا اگر ما قصد تغییر فونت تمامی پاراگرافها را داشته باشیم، باید المان p را انتخاب کنیم. اما اگر بخواهیم یک یا چند المان خاص را تغییر دهیم بهتر است از کلاس استفاده کنیم. یعنی ابتدا در صفحهی اچ تی ام ال به المان مورد نظر اتریبیوت "نام دلخواه برای ایجاد گروه"=class اضافه کنیم و سپس درسی اس اس نام این کلاس را بنویسیم و در جلوی آن تغییرات مورد نظر را اعمال کنیم.
HTMLمتن با فونت تاهما
CSSp { font-family: "tahoma";}
متن با فونت تاهما
یا بدین صورت که اسم کلاس یا آیدی را بنویسیم. یعنی در اینجا ما با تمامی پاراگرافها کاری نداریم و تنها پاراگرافهایی با کلاسهای بخصوص فلان و فلان و فلان را کار داریم. همچنین میتوانستیم این کار را بدون نوشتن کلمه p قبل از نام کلاس نیز انجام دهیم. منتها تفاوتی که بوجود میآمد این بود که تغییرات نه تنها بر روی پاراگرافها بلکه روی هر چیزی که دارای آن کلاس باشد (مثل عناوین، لینکها و یا ...) اعمال میشد.
ویدیو مرتبط :
آموزش طراحی سایت با CSS | نکات کاربردی استایل دهی متون در CSS