زنگ CSS: جلسه پنجم - تغییر استایل متون HTML
فرمت کردن متن‌ها در اچ‌تی‌ام‌ال را در دوره آموزش اچ‌تی‌ام‌ال از طریق اتریبیبوت استایل آموخته‌ایم. این روش که در واقع همان اینلاین سی‌اس‌اس است شاید برای بعضی موارد چندان اشکالی نداشته باشد؛ ولی در کل استفاده از این روش توصیه نمی‌شود. حالا قصد داریم تا کارهای قبلی را با کمک سی‌اس‌اس و با سرعت بیشتری انجام دهیم. نکته‌ی خوشایند در این موضوع آن است که در این حالت نیازی به تغییر قواعد نوشتن نیست و همان دستوراتی که در دوره‌ی قبلی نوشته‌ایم را بدون تغییر و در قالب یک فایل خارجی وارد می‌کنیم. با ما همراه شوید.
رنگ متن:
- نام : color
- این ویژگی چه کاری انجام می‌دهد؟ رنگ متن‌ها را تغییر می‌دهد!
- چه چیزهایی را در مقابلش بنویسیم؟ انواع رنگ‌ها را !
- نمونه نوشتن این ویژگی: color: red یا color: #44444 یا ("2,color: rgb("2,2,2
یادآوری از گذشته: شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است. مثلا با انتخاب المان body تمامی متن‌های موجود در صفحه شما به استایل داده شده در می‌آید. مثال‌های زیر را نگاه کنید.
HTML
عنوان با رنگ نارنجی نوشته می‌شود
متن با رنگ طوسی نوشته می‌شود.
CSS
h1 { color: orange;}p { color: gray;}
عنوان با رنگ نارنجی نوشته می‌شود
متن با رنگ طوسی نوشته می‌شود.
text-align
- نام : text-align
- از این ویژگی چه کاری انجام می‌دهد؟ نحوه و محل قرار گیری متن‌ها را مشخص می‌کند !
- چه چیزهایی را در مقابلش بنویسیم؟ انواع جهت‌ها را! راست، چپ و وسط.
- نمونه نوشتن این ویژگی: text-align: center یا text-align : right یا text-align: left
با کمک این دستور شما می‌توانید متن‌های خود را به صورت راست چین، چپ چین یا وسط چین منظم کنید. دستورات مربوط به این موضوع را در زیر مشاهده می‌کنید:
HTML
متن وسط چین
متن راست چین
متن چپ چین
CSS
center { 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
متن با فونت تاهما
CSS
p { font-family: "tahoma";}
متن با فونت تاهما
یا بدین صورت که اسم کلاس یا آی‌دی را بنویسیم. یعنی در اینجا ما با تمامی پاراگراف‌ها کاری نداریم و تنها پاراگراف‌هایی با کلاس‌های بخصوص فلان و فلان و فلان را کار داریم. همچنین می‌توانستیم این کار را بدون نوشتن کلمه p قبل از نام کلاس نیز انجام دهیم. منتها تفاوتی که بوجود می‌آمد این بود که تغییرات نه تنها بر روی پاراگراف‌ها بلکه روی هر چیزی که دارای آن کلاس باشد (مثل عناوین، لینک‌ها و یا ...) اعمال می‌شد.
نظرات