در قسمت چهارم آموزش css با تصویر و رنگ پس زمینه صفحات آشنا شدیم. در این قسمت به استایل متون html خواهیم پرداخت.
در اچ تی ام ال از طریق اتربیوت ها به متن استایل می دهیم که به این روش این لاین گفته می شود. حال این کار را با سی اس اس انجام خواهیم داد.
رنگ متن color
شما می توانید با انتخاب هر المان رنگ آن را تغییر بدهید. به مثال زیر توجه کنید:
html: ———————————
<h2>عنوان با رنگ نارنجی</h2>
<p>متن با رنگ آبی</p>
css: ————————————
h2{
color: orange;
}
p{
color: blue;
}
موقعیت متن text-align
با کمک این ویژگی می توان راستچین، چپ چین یا وسط چین بودن متن را مشخص کرد. مثال:
html: ——————————————–
<h2 class = “center”>وسط چین</h2>
<p class = “right”>راست چین</p>
<p class = “left”>چپ چین</p>
css: ———————————————–
center{
text-align: center;
}
p.right{
text-align: right;
}
p.left{
text-align: left;
}
نوع نوشته text-decoration
گاهی المان های html استایل مخصوص دارند. مثلا لینک ها با رنگ آبی و زیر خط دار نمایش داده می شوند. حال اگر بخواهیم آن ها را به صورت ساده در آوریم از دستور زیر استفاده می کنیم:
a{
text-decoration: none;
}
برای تغییر یک المان سه روش برای انتخاب وجود دارد. مانند قبل المان مورد نظر را انتخاب میکنیم. مثلا اگر ما قصد تغییر فونت تمامی پاراگرافها را داشته باشیم، باید المان p را انتخاب کنیم. اما اگر بخواهیم یک یا چند المان خاص را تغییر دهیم بهتر است از کلاس استفاده کنیم. یعنی ابتدا در صفحهی اچ تی ام ال به المان مورد نظر اتریبیوت “class = “classname اضافه کنیم و سپس درسی اس اس نام این کلاس را بنویسیم و در جلوی آن تغییرات مورد نظر را اعمال کنیم.