تغییر استایل متون HTML

جلسه پنجم

تغییر استایل متون HTML

فرمت کردن متن‌ها در اچ‌تی‌ام‌ال را در دوره آموزش اچ‌تی‌ام‌ال از طریق اتریبیبوت استایل آموخته‌ایم. این روش  که در واقع همان اینلاین سی‌اس‌اس است شاید برای بعضی موارد چندان اشکالی نداشته باشد؛ ولی در کل استفاده از این روش توصیه نمی‌شود. حالا  قصد داریم تا کارهای قبلی را با کمک سی‌اس‌اس و با سرعت بیشتری انجام دهیم. نکته‌ی خوشایند در این موضوع آن است که در این حالت نیازی به تغییر قواعد نوشتن نیست و همان دستوراتی که در دوره‌ی قبلی نوشته‌ایم را بدون تغییر و در قالب یک فایل خارجی وارد می‌کنیم. با ما همراه شوید.

 رنگ متن:

• نام :‌ color
• این ویژگی چه کاری انجام می‌دهد؟‌  رنگ متن‌ها را تغییر می‌دهد!
• چه چیزهایی را در مقابلش بنویسیم؟  انواع رنگ‌ها را !
• نمونه نوشتن این ویژگی: color: red   یا  color: #44444   یا   (“۲,color: rgb(“2,2,2

یادآوری از گذشته: شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است. مثلا با انتخاب المان body تمامی متن‌های موجود در صفحه شما به استایل داده شده در می‌آید. مثال‌های زیر را نگاه کنید.

text-align

• نام :‌ text-align
• از این ویژگی چه کاری انجام می‌دهد؟  نحوه و محل قرار گیری متن‌ها را مشخص می‌کند !
• چه چیزهایی را در مقابلش بنویسیم؟ انواع جهت‌ها را! راست، چپ و وسط.
• نمونه نوشتن این ویژگی: text-align: centerیا  text-align : right  یا  text-align: left

با کمک این دستور شما می‌توانید متن‌های خود را به صورت راست چین، چپ چین یا وسط چین منظم کنید. دستورات مربوط به این موضوع را در زیر مشاهده می‌کنید:

Text Decoration

• نام :‌ Text Decoration
• از این ویژگی چه کاری انجام می‌دهد؟ نوع نوشتن متن را تغییر می‌دهد
• چه چیزهایی را در مقابلش بنویسیم؟ نوع استایل مورد نظر! خط کشیدن زیر متن، خط کشیدن روی متن و …
• نمونه نوشتن این ویژگی: text-decoration: none|underline|overline|line-through|initial|inherit

گاهی المان‌های اچ‌تی‌ام‌ال صفحه، استایل‌های مخصوص خود را دارند. مثلا لینک‌ها در اچ‌تی‌ام‌ال به صورت پیش‌فرض با رنگ آبی نشان داده می‌شوند و همچنین یک خط در زیر آن‌ها کشیده می‌شود. بدین ترتیب شما اگر بخواهید آن‌ها را به صورت ساده در بیاورید می‌بایست برای این کار از دستور Text Decoration استفاده کنید. این دستور را در زیر مشاهده می‌کنید.

a {
text-decoration: none;
}

برای تغییر یک المان سه روش برای انتخاب وجود دارد. مانند قبل المان مورد نظر را انتخاب می‌کنیم. مثلا اگر ما قصد تغییر فونت تمامی پاراگراف‌ها را داشته باشیم، باید المان p را انتخاب کنیم. اما اگر بخواهیم یک یا چند المان خاص را تغییر دهیم بهتر است از کلاس استفاده کنیم. یعنی ابتدا در صفحه‌ی اچ تی ام ال به المان مورد نظر اتریبیوت  “نام دلخواه برای ایجاد گروه”=class اضافه کنیم و سپس درسی اس اس نام این کلاس را بنویسیم و در جلوی آن تغییرات مورد نظر را اعمال کنیم

یا بدین صورت که اسم کلاس یا آی‌دی را بنویسیم. یعنی در اینجا ما با تمامی پاراگراف‌ها کاری نداریم و تنها پاراگراف‌هایی با کلاس‌های بخصوص فلان و فلان و فلان را کار داریم. همچنین می‌توانستیم این کار را بدون نوشتن کلمه p قبل از نام کلاس نیز انجام دهیم. منتها تفاوتی که بوجود می‌آمد این بود که تغییرات نه تنها بر روی پاراگراف‌ها بلکه روی هر چیزی که دارای آن کلاس باشد (مثل عناوین، لینک‌ها و یا …) اعمال می‌شد.

منبع: زومیت